viewport
Provides direct access within the shader to the current rendering viewport's dimensions and position (x, y, width, height), forming the basis for various screen-space effects.
Core Advantages
Greatly simplifies shader development by eliminating the need to manually pass resolution uniforms. It provides a standardized way to access screen pixel information, making code cleaner, more robust, and portable.
Common Uses
Creating screen-space UV coordinates
Implementing resolution-independent fixed-size elements
Custom Vignette effect
How to adjust
This node is a read-only input with no parameters. Its effect is 'adjusted' by applying mathematical operations to its output vec4 (x, y, width, height) in the shader, such as calculating the screen center to draw a fixed-pixel-size circle, or computing screen UVs for post-processing.
Code Examples
1// Calculate the normalized screen X-coordinate using the viewport and fragment screen position
2const screenX = positionVarying.xy.x.sub( viewport.x ).div( viewport.z );
3
4// Create a gradient from blue to red based on screenX
5return vec3( screenX, 0, screenX.oneMinus() );