screenDPR
screenDPR
提供当前设备像素比(Device Pixel Ratio, DPR)的只读浮点节点,用于在着色器中感知显示缩放并进行像素级换算。
核心优势
自动与渲染器的真实像素比同步,无需手动 uniform;保证屏幕空间效果在 1×/2×/3× 等不同 DPR 下保持一致的视觉尺寸。
常见用途
按 DPR 缩放后期核尺寸或采样步长(如模糊半径、FXAA 阈值)。
以 CSS 像素定义线宽、边框、描边等固定像素效果,并在高 DPI 屏幕上保持一致。
配合 screenSize/viewportSize 将像素与 UV 相互换算。
在折射、失真等屏幕采样中,用 DPR 修正扰动强度。
如何调整
该节点为只读。若以 CSS 像素设定半径 r,先用 r.mul(screenDPR) 转为物理像素,再除以 viewportSize 转为 UV;若 r 已是物理像素,则不要再乘以 screenDPR。常与 screenUV、screenSize/viewportSize 联用。
代码示例
1// 让 2px 的模糊步长在不同 DPR 下看起来相同
2const stepPx = float( 2.0 ).mul( screenDPR ); // 2 个 CSS 像素 => 物理像素
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 );