screenDPR
Read-only float node that exposes the current Device Pixel Ratio (DPR) to convert between CSS pixels, physical pixels, and UV in shaders.
Core Advantages
Auto syncs with the renderer pixel ratio with no manual uniform. Keeps screen-space sizes consistent across 1x 2x 3x displays.
Common Uses
Scale post-process kernel sizes or sample steps by DPR (blur radius, FXAA threshold).
Define fixed-pixel widths for outlines or borders in CSS pixels and keep them consistent on high-DPI screens.
Convert between pixels and UV together with screenSize or viewportSize.
Adjust distortion or refraction sampling strength based on DPR.
How to adjust
This node is read-only. If a radius r is defined in CSS pixels use r.mul(screenDPR) to get physical pixels, then divide by viewportSize to get UV. If r is already in physical pixels do not multiply by screenDPR. Typically used with screenUV and screenSize or viewportSize.
Code Examples
1// Make a 2px blur step look the same on any DPR
2const stepPx = float( 2.0 ).mul( screenDPR ); // 2 CSS px -> physical px
3const stepUV = vec2( stepPx ).div( viewportSize );
4
5const c0 = viewportTexture( screenUV.sub( vec2( stepUV.x, 0 ) ) );
6const c1 = viewportTexture( screenUV );
7const c2 = viewportTexture( screenUV.add( vec2( stepUV.x, 0 ) ) );
8
9material.colorNode = c0.add( c1 ).add( c2 ).div( 3.0 );