快捷搜索:  汽车  科技

插值查找技巧:一文理解透视插值矫正是怎么回事

插值查找技巧:一文理解透视插值矫正是怎么回事由于投影三角形A'B'C'是ABC通过矩阵变换得到的,假设变换矩阵为M,M为4x4矩阵,顶点坐标采用齐次坐标(x y z 1)的形式表示,那么P等式两边乘以矩阵M就会变换到P’,形式如下首先,P和P'都可以通过重心坐标的形式表示为见下图,O为观察坐标系原点,原三角形顶点A、B、C经过透视投影到绘制平面的A'、B'、C',经过原点O和三角形A'B'C'内任意一点P‘的直线相交于三角形ABC内的点P,P和P'是一一对应的。光栅化三角形一般是通过重心坐标的方法来确定颜色插值或者纹理坐标的,未进行透视插值的矫正的情况下,就是直接利用P'点的重心坐标来计算插值或者提取对应纹理坐标的颜色;而更合理的情况应该是P'的着色值应该由原三角形ABC中的P点来确定,因为P投影到绘制平面上就是对应的P'

什么情况下需要透视插值矫正?

从3D场景中渲染图像有多种方法,比如光线追踪方式是模拟从观察点穿过屏幕像素的所有视线,通过光照模型计算视线与场景中物体的交点颜色从而进行像素着色,光线追踪方法渲染出的图像无需插值,且默认就是透视投影的效果。

插值查找技巧:一文理解透视插值矫正是怎么回事(1)

另一种渲染图像的方式是图形管线,图形管线的特点是在图像光栅化之前只处理顶点信息,从模型坐标系经一系列变换(包括透视投影变换)最终适配输出到屏幕的视口变换都只处理顶点,最后光栅化时才根据装配出的图形顶点依据插值规则或者纹理坐标来确定图形内像素的颜色。

插值查找技巧:一文理解透视插值矫正是怎么回事(2)

如果只是根据变换后的顶点进行插值或者纹理贴图,那么透视效果就会丢失(因为由顶点组成的图形内部的点并没有参与变换运算,也就谈不上透视效果),如下面右图只有矩形边框具有透视效果,而内部纹理没有透视效果,正常透视效果应该如左图所示效果。

可见,针对图形管线光栅化的情况,需要针对透视效果进行插值矫正使其匹配透视投影的效果。在图形学中,三角形是组成3D物体的基础,因此接下来以三角形为例介绍如何进行透视矫正。

插值查找技巧:一文理解透视插值矫正是怎么回事(3)

透视矫正方法

见下图,O为观察坐标系原点,原三角形顶点A、B、C经过透视投影到绘制平面的A'、B'、C',经过原点O和三角形A'B'C'内任意一点P‘的直线相交于三角形ABC内的点P,P和P'是一一对应的。

光栅化三角形一般是通过重心坐标的方法来确定颜色插值或者纹理坐标的,未进行透视插值的矫正的情况下,就是直接利用P'点的重心坐标来计算插值或者提取对应纹理坐标的颜色;而更合理的情况应该是P'的着色值应该由原三角形ABC中的P点来确定,因为P投影到绘制平面上就是对应的P'点。

因此所谓的透视插值矫正就是由P'的坐标推导出P的位置,以P点所对应的插值或纹理坐标颜色作为像素的着色值。

插值查找技巧:一文理解透视插值矫正是怎么回事(4)

首先,P和P'都可以通过重心坐标的形式表示为

插值查找技巧:一文理解透视插值矫正是怎么回事(5)

由于投影三角形A'B'C'是ABC通过矩阵变换得到的,假设变换矩阵为M,M为4x4矩阵,顶点坐标采用齐次坐标(x y z 1)的形式表示,那么P等式两边乘以矩阵M就会变换到P’,形式如下

插值查找技巧:一文理解透视插值矫正是怎么回事(6)

展开为矩阵形式如下

插值查找技巧:一文理解透视插值矫正是怎么回事(7)

根据齐次坐标的尺度不变性原理,(Xw Yw Zw w)和(Xw/w Yw/w Zw/w 1)表示的是同一个点,那么可以得出

插值查找技巧:一文理解透视插值矫正是怎么回事(8)

矩阵形式实际上就是一组线程方程式,根据上面得出的Pm、Am、Bm、Cm的结果可以进一步替换得到

插值查找技巧:一文理解透视插值矫正是怎么回事(9)

现在得出了α'、β'、γ',但是我们的目标是反过来从P'的重心坐标得出变换前的P的重心坐标,继续变换可得

插值查找技巧:一文理解透视插值矫正是怎么回事(10)

三角形内部重心坐标满足条件α β γ=1,可以进一步变换得到由α'、β'、γ'推导出α、β、γ的公式如下,wa、wb、wc是三角形顶点A、B、C矩阵变换后的对应的w的值。一旦得到了变换前的对应点P的重心坐标,就可以进行颜色插值或者计算得出纹理图片的对应点的纹理坐标了。

插值查找技巧:一文理解透视插值矫正是怎么回事(11)

伪代码

依据上面的推理结果,可以将透视矩阵插值矫正的方法通过如下伪代码的形式表示如下

//遍历包围投影后三角形的矩形框内像素坐标 for all x do for all y do //计算对应坐标的重心坐标值 compute (α' β' γ') for (x y) //只有三角形内部的像素需要绘制 if (α' ∈ [0 1] and β' ∈ [0 1] and γ' ∈ [0 1]) then // 根据(α' β' γ')和变换后顶点的w坐标计算变换前对应点的重心坐标 compute (α β γ) // 根据重心坐标计算对应的纹理贴图的纹理坐标 Puv=T0 T1 T2 //(T0,T1,T2分别为和三角形三个顶点一一对应的三个纹理坐标的顶点 computer (u v) from (α β γ) drawpixel (x y) with color texture(u v) 参考文献

[1]. https://www.cs.ucr.edu/~craigs/courses/2020-fall-cs-130/lectures/perspective-correct-interpolation.pdf
[2]. Essentials of Computer Graphics 9.1.3 Perspective Correct Interpolation P185.
[3]. 利用html canvas实践三角形光栅化

猜您喜欢: