viewportSize
viewportSize
提供当前渲染视口(Viewport)的宽度和高度(单位为像素),是一个语义明确、使用便捷的 `viewport.zw` 别名。
核心优势
通过一个自解释的名称 `viewportSize` 替代了底层的 `viewport.zw` 或手动的 uniform 变量,极大地简化了着色器代码,提高了可读性和可维护性。
常见用途
计算标准化的屏幕UV坐标
计算屏幕宽高比 (Aspect Ratio)
实现固定像素宽度的边框或线条
如何调整
该节点是只读的,无自身参数。其效果通过在着色器中对其输出的尺寸向量进行数学运算来“调整”,例如计算宽高比以绘制正确比例的形状,或将其倒置 (`viewportSize.invert()`) 来获取单个像素在UV空间的大小。
代码示例
1// 1. 计算宽高比用于修正坐标
2const aspectRatio = viewportSize.x.div( viewportSize.y );
3
4// 2. 计算以屏幕中心为原点(0,0)的、修正过宽高比的坐标
5const centeredUV = viewportCoordinate.div( viewportSize )
6 .sub( 0.5 )
7 .mul( vec2( aspectRatio, 1.0 ) );