viewportSize
Provides the width and height of the current rendering viewport in pixels, serving as a semantically clear and convenient alias for `viewport.zw`.
Core Advantages
Greatly simplifies shader code by replacing the low-level `viewport.zw` or manual uniforms with a self-explanatory name, `viewportSize`, improving readability and maintainability.
Common Uses
Calculating normalized screen UV coordinates
Calculating the screen aspect ratio
Implementing fixed-pixel-width borders or lines
How to adjust
This is a read-only node with no parameters. Its effect is 'adjusted' by applying mathematical operations to its output size vector in the shader, such as calculating the aspect ratio to draw correctly proportioned shapes, or inverting it (`viewportSize.invert()`) to get the size of a single pixel in UV space.
Code Examples
1// 1. Calculate the aspect ratio for coordinate correction
2const aspectRatio = viewportSize.x.div( viewportSize.y );
3
4// 2. Calculate aspect-corrected coordinates with the origin at the screen center
5const centeredUV = viewportCoordinate.div( viewportSize )
6 .sub( 0.5 )
7 .mul( vec2( aspectRatio, 1.0 ) );