viewportSafeUV
Corrects artifacts in refraction effects via a depth check, ensuring that distorted UVs only sample background objects and preventing foreground objects from being incorrectly mapped onto the refractive surface.
Core Advantages
It encapsulates complex depth-comparison logic into a single node, completely solving the common foreground rendering error in refraction effects and allowing developers to easily create physically more accurate and visually believable refractive materials.
Common Uses
Physically accurate glass or diamond materials
Realistic water surfaces with waves
Distortion effects like heat haze or magic shields
How to adjust
This node has no parameters to adjust; its behavior is entirely dependent on the strength and pattern of the distorted UV node you pass into it. Its purpose is corrective rather than creative, and its core value is clearly seen by comparing results with and without it to observe the correction of foreground rendering errors.
Code Examples
1// Create a set of distorted UVs to simulate refraction
2const distortedUV = screenUV().add( normalWorld.xy.mul(0.1) );
3
4// 【Core Step】Pass the distorted UVs to viewportSafeUV for a depth check
5const safeUV = viewportSafeUV( distortedUV );
6
7// Use the returned "safe" UVs to sample the background
8const refractedColor = viewportTexture( safeUV );