screenSize
In a TSL fragment shader, provides the total dimensions (width and height in pixels) of the current render target, essential for creating resolution-adaptive effects and coordinate system transformations.
Core Advantages
Enables the creation of responsive, resolution-adaptive visuals and is the key to converting physical pixel coordinates into normalized UVs, a standard for most screen-space algorithms.
Common Uses
Calculating the screen aspect ratio to correct the deformation of procedural shapes, ensuring they are not stretched.
Converting pixel coordinates to normalized UVs via `screenCoordinate / screenSize`.
Calculating the UV size of a single pixel via `1.0 / screenSize` for advanced sampling techniques (like FXAA).
How to adjust
This node's value is automatically provided by the renderer based on canvas size and cannot be adjusted. Its effect is determined by its use in calculations: for normalization via division (`screenCoordinate.div(screenSize)`), for aspect ratio via component division (`screenSize.x.div(screenSize.y)`), or for single-pixel size via its reciprocal (`1.0 / screenSize`).
Code Examples
1// Calculate the screen's aspect ratio
2const aspectRatio = screenSize.x.div( screenSize.y );
3
4// Correct the UV coordinates to prevent stretching
5const uvCorrected = uv.sub( 0.5 );
6uvCorrected.x = uvCorrected.x.mul( aspectRatio );
7
8// Calculate distance based on corrected coordinates to ensure a non-distorted circle
9const dist = length( uvCorrected );