推导正射投影矩阵 包懂(WebGL、THREE底层)

80 阅读1分钟

前言

正射投影矩阵的目标是将几何体顶点坐标转为标准的单位立方体(NDC)。

  • x轴范围 [-1,1]
  • y轴范围 [-1,1]
  • z轴范围 [-1,1]

定义可视空间

5846f0ea32cb851a0cacb8fe76dfabe2.png

  • left: 近裁切面左边界
  • right: 近裁切面右边界
  • top: 近裁切面上边界
  • bottom: 近裁切面下边界
  • near: 近裁切面位置
  • far: 远裁切面位置

线性变换

对于任意一维坐标v,从范围 [Vmin,Vmax]映射到范围 [−1,1],有以下方式:

v=vVminhalfVhalfVv' = \frac{v-Vmin - halfV}{halfV}
其中:halfV=VmaxVmin2其中:halfV = \frac{Vmax-Vmin}{2}

将等式拆成两部分:

v=vVminhalfVhalfVhalfVv' = \frac{v-Vmin}{halfV} - \frac{halfV}{halfV}
v=vVminhalfV1v' = \frac{v-Vmin}{halfV} - 1
v=vVmin(VmaxVmin)/21v' = \frac{v-Vmin}{(Vmax-Vmin)/2} - 1

最终得到:

v=vVminVmaxVmin21v' = \frac{v-Vmin}{Vmax-Vmin} * 2 - 1

逐个轴推导

x轴

已知:

x=xleftrightleft21x' = \frac{x-left}{right-left} * 2 - 1

从等式右侧提取出x:

x=xleftrightleft21x' = \frac{x-left}{right-left} * 2 - 1
x=(xrightleftleftrightleft)21x' = (\frac{x}{right-left} - \frac{left}{right-left}) * 2 - 1
x=2xrightleft2leftrightleft1x' = \frac{2x}{right-left} - \frac{2left}{right-left} - 1
x=2xrightleft2leftrightleftrightleftrightleftx' = \frac{2x}{right-left} - \frac{2left}{right-left} - \frac{right-left}{right-left}
x=2rightleftx2left+rightleftrightleftx' = \frac{2}{right-left} * x- \frac{2left + right-left}{right-left}
x=2rightleftxleft+rightrightleftx' = \frac{2}{right-left} * x- \frac{left + right}{right-left}

最终得出:

x=2rightleftxright+leftrightleftx' = \frac{2}{right-left} * x- \frac{right + left}{right-left}

y轴

推导过程同x轴

y=2topbottomytop+bottomtopbottomy' = \frac{2}{top-bottom} * y - \frac{top + bottom}{top-bottom}

z轴

推导过程同x轴,注意在WebGl系统中,采用的是右手坐标系,近裁切面z坐标为正值,远裁切面z坐标为负值,因此最终结果为:

z=2farnearzfar+nearfarnearz' = \frac{-2}{far-near} * z - \frac{far + near}{far-near}

构造矩阵

将上述各轴推导过程构造为矩阵形式:

Morthographic=[2rightleft00right+leftrightleft02topbottom0top+bottomtopbottom002farnearfar+nearfarnear0001]M_{\text{orthographic}} = \begin{bmatrix} \frac{2}{right-left} & 0 & 0 & -\frac{right + left}{right-left} \\ 0 & \frac{2}{top-bottom} & 0 & -\frac{top + bottom}{top-bottom} \\ 0 & 0 & \frac{-2}{far-near} & -\frac{far + near}{far-near} \\ 0 & 0 & 0 & 1 \end{bmatrix}

总结

推导过程有任何错误或有可优化处请指正。