【OpenGL/WebGL】Shader中如何获取摄像机视口的宽高

一、需求背景
在有些需求中，物体的大小是随着摄像机的视口的大小而变化的。如下图中，蓝色小方块，随着不断放大，其大小有个最大值，并不会无限放大。

这种实现的原理是在Shader中，不断根据摄像机近平面尺寸大小改变其面片的坐标，让其尺寸有最大值。

二、如何获取摄像机视口大小？
本文只讨论正交相机的视口获取，透视相机的获取稍微复杂一点点。
一般的WebGL或OpenGL开发框架都会将摄像机的投影矩阵传入Shader当中。根据投影矩阵即可获得视口的长宽。正交投影中，投影矩阵的计算公式如下：
$$M_{project}=\left[\begin{array}{cccc}\frac{2}{R?L}& 0& 0& ?\frac{R+L}{R?L}\\ 0& \frac{2}{T?B}& 0& ?\frac{T+B}{T?B}\\ 0& 0& \frac{1}{Z_{far}?Z_{near}}& ?\frac{Z_{near}}{Z_{far}?Z_{near}}\\ 0& 0& 0& 1\end{array}\right]$$
其中：
???? R、L–投影平面左右边界的X坐标
???? T、B–投影平面上下边界的Y坐标

摄像机视口的宽高分别是R-L、T-B， 那么获取这俩值就不用多说了吧。 在Shader中直接提取投影矩阵的值计算即可。具体这个视口的长宽怎么影响面片的坐标需要根据具体的需求进行编码。