viewportUV
Provides resolution-independent, normalized screen-space coordinates that range from (0,0) at the bottom-left of the viewport to (1,1) at the top-right.
Core Advantages
Ensures that effects like gradients, UI layouts, or post-processing maintain their relative scale and position on any screen size or aspect ratio, acting as the cornerstone for all screen-space effects.
Common Uses
As the default coordinate for sampling the screen texture in post-processing effects
As a basis for creating procedural full-screen gradients, patterns, or masks
Calculating the distance from the screen center to create effects like vignettes
How to adjust
It is read-only, but its output vec2 coordinate can be mathematically manipulated to adjust effects. For instance, use fract() for tiling, step() for creating hard masks, or convert to polar coordinates for radial/rotational effects.
Code Examples
1
2// Maps x to the red channel and y to the green channel
3const color = vec3( viewportUV.x, viewportUV.y, 0.0 );
4