问题引出

最近在做基于WebGL的路径追踪时，遇到了一个法线（凹凸）贴图的问题，如下图，凹凸效果走样特别严重。通过问题分析，目前渲染器还缺少对不同纹理过滤类型的实现，今天刚好完成了相关内容，趁热将其记录下来。

小球凹凸效果的问题

小球细节

其他渲染器的效果

原因分析

本文示例里小球的凹凸贴图如下图。通过凹凸贴图计算法线的过程如下：

通过对贴图采样得到点 $P$ 的高度 $h_p$ ;
分别右移和上移一个微小的距离得到 $h_{p+\Delta{x}}$ 、 $h_{p+\Delta{y}}$ ;
最终的法线可以表示为：

$\mathbf{N}^{‘} = \mathbf{N} + \alpha(h_{p+\Delta{x}}-h_p)\mathbf{T} + \alpha(h_{p+\Delta{y}}-h_p)(\mathbf{N}\times\mathbf{T})$

别忘了归一化： $\mathbf{N}^{”} = \tfrac{\mathbf{N}^{‘}}{\begin{Vmatrix} \mathbf{N}^{‘}\end{Vmatrix}}$

上式中 $\alpha$ 为凹凸强度， $\mathbf{T}$ 为切向向量。

以上过程，最重要的便是 $\Delta{x}$ 和 $\Delta{y}$ 的选取。已知的是在屏幕空间水平和竖直方向的偏移分别为 $1/resolution_x$ 和 $1/resolution_y$ ， $resolution$ 为渲染屏幕的分辨率，我们需要通过屏幕空间中的偏移去求每个物体在其所在的UV空间的偏移 $\Delta{x}$ 和 $\Delta{y}$ ，最后采样求得最终的法线。显然 $\Delta{x}$ 和 $\Delta{y}$ 还与视角有关，即当物体离摄像机较近时，偏移很小，而距离增加时，偏移增大。

小球凹凸贴图（ $1500*1500$ ）

对于上述的根据视角自适应采样的方法如何实现？这篇文章详细的介绍了纹理采样，其中的基于MipMap的三线性过滤可以满足我们的要求。在我们使用光栅化渲染，当设置纹理的TEXTURE_MIN_FILTER或TEXTURE_MAG_FILTER为LINEAR_MIPMAP_LINEAR时，OpenGL/WebGL会自动的根据当前像素在UV上的变化率选取合适的MipMap，这是已经集成在硬件上的功能。

解决方案一

基于上述的分析，我们知道光栅化的时候，可以直接利用纹理过滤选项，让硬件帮我们完成最佳的采样。对于凹凸贴图，我们可以直接使用内置的微分函数 $dFdx$ 、 $dFdy$ ：

float hp = texture2D(bump, uv).r;
float hpdx = texture2D(bump, uv + dFdx(uv)).r;
float hpdy = texture2D(bump, uv + dFdy(uv)),r;

我们怎么将上面的光栅化应用到光线追踪呢？我们可以把法线的结果通过光栅化预计算到FrameBuffer，将计算结果传入光追的Shader，通过坐标变换求得屏幕坐标，采样即可得到法线结果，下图分别为光栅化得到的法线以及最终渲染结果：

但，这种方案有哪些问题呢？

从这种方案的原理出发，很显然，可以预见它有如下的一些问题：

仅对摄像机视角内的像素点有效，且无法得到被遮挡的物体的法线结果；
折射/反射后失真；
视角转动需重新渲染法线结果的FrameBuffer；
光线追踪每个像素都会使用低差异序列的抗锯齿采样，而光栅化并无此特性，造成两者实际的渲染点不一致，容易引起物体边缘的不连续。

基于上述问题，引出本文的重点：光线微分法。

光线微分法

感兴趣的朋友可以搜索原论文：《Tracing ray differentials.》Igehy, H.本文结合这篇文章以及实际工程中的一些问题来介绍这个算法。
对于任一射线 $\overrightarrow {R}$ 可以表示为：

$\overrightarrow {R} = \lang \mathbf{P}, \mathbf{D}\rang$

$\mathbf{P}$ 为射线的起点， $\mathbf{D}$ 为射线的方向向量。Ray Tracing的第一次求交时起点为相机的位置，求方向时将屏幕坐标考虑进来，令：

$\mathbf{d}(x,y) = \mathbf{View} + x\mathbf{Right} + y\mathbf{Up}$

$\mathbf{View}$ 为相机的朝向， $\mathbf{Right}$ 为相机的 $x$ 轴方向向量， $\mathbf{Up}$ 为相机的 $y$ 轴方向向量，因此：

$\mathbf{D} = \tfrac{\mathbf{d}}{\begin{Vmatrix} \mathbf{d}\end{Vmatrix}} = \tfrac{\mathbf{d}}{(\mathbf{d}\cdot\mathbf{d})^{1/2}}$

初始化时：

$\tfrac{\partial\mathbf{P}}{\partial{x}}=0$

$\tfrac{\partial\mathbf{D}}{\partial{x}}=\tfrac{\partial({\tfrac{\mathbf{d}}{(\mathbf{d}\cdot\mathbf{d})^{1/2}})}}{\partial{x}}= \tfrac{(\mathbf{d}\cdot\mathbf{d})\mathbf{Right}-(\mathbf{d}\cdot\mathbf{Right})\mathbf{d}}{(\mathbf{d}\cdot\mathbf{d})^{3/2}}$

$\tfrac{\partial\mathbf{D}}{\partial{y}}$ 的求解方法与 $\tfrac{\partial\mathbf{D}}{\partial{x}}$ 类似，本文不再列出。

当光线沿着方向 $\mathbf{D}$ 传播时，直到与某点相交时，得到交点 $\mathbf{P}^{‘}$ :
$\mathbf{P}^{‘}=\mathbf{P} + t\mathbf{D}$ ，求微分，得：

$\tfrac{\partial\mathbf{P}^{‘}}{\partial{x}}=\tfrac{\partial\mathbf{P}}{\partial{x}}+t\tfrac{\partial\mathbf{D}}{\partial{x}}+\tfrac{\partial{t}}{\partial{x}}\mathbf{D}$

上式中的 $\tfrac{\partial\mathbf{D}}{\partial{x}}$ 和前一步的 $\tfrac{\partial\mathbf{D}}{\partial{x}}$ 一致，因为射线直线传播时方向不变，那么如何求 $\tfrac{\partial{t}}{\partial{x}}$ ?

如上图，射线从点 $P$ 出发，沿方向 $\mathbf{D}$ 传播，与 $\triangle{ABC}$ 相交于点 $P{‘}$ 。设 $\triangle{ABC}$ 的平面方程为 $Ax+By+Cz=d$ ，则其法线 $\mathbf{N}=[A,B,C]$ ，法线方向由三角形确定，与 $x$ 、 $y$ 不相关。由几何关系得到：

$\mathbf{(P-P’)\cdot\mathbf{N}} = -t\mathbf{N}\cdot\mathbf{D}$

$\Rightarrow t = -\tfrac{\mathbf{P\cdot\mathbf{N}}}{\mathbf{N}\cdot\mathbf{D}}+\tfrac{d}{\mathbf{N}\cdot\mathbf{D}}$

对 $t$ 求微分，可得：

$\tfrac{\partial{t}}{\partial{x}}=-\tfrac{(\tfrac{\partial{\mathbf{P}}}{\partial{x}}+\tfrac{\partial{\mathbf{D}}}{\partial{x}})\cdot\mathbf{N}}{\mathbf{N}\cdot\mathbf{D}}-\tfrac{d\cdot(\mathbf{N}\cdot\tfrac{\partial{\mathbf{D}}}{\partial{x}})}{(\mathbf{N\cdot{D}})^2}$

接下来我们来分析 $P{‘}$ 处的UV坐标。已知 $P{‘}$ 的UV、法线、顶点坐标均为点 $A、B、C$ 三个顶点内差所得，令点 $A、B、C$ 处的占比分别为 $\alpha、\beta、\gamma$ ，则满足以下条件：

$\alpha+\beta+\gamma=1$

$\alpha\mathbf{A}+\beta\mathbf{B}+\gamma\mathbf{C}=\mathbf{P{}’}$

$\Rightarrow \left[ \begin{array}{ccc} \mathbf{A}_x & \mathbf{A}_y & \mathbf{A}_z \\ \mathbf{B}_x & \mathbf{B}_y & \mathbf{B}_z \\ \mathbf{C}_x & \mathbf{C}_y & \mathbf{C}_z \\ 1 & 1 & 1 \end{array} \right]\left[ \begin{array}{ccc} \alpha \\ \beta \\ \gamma \end{array} \right]=\left[ \begin{array}{ccc} \mathbf{P{‘}}_x \\ \mathbf{P{‘}}_y \\ \mathbf{P{‘}}_z \\ 1 \end{array} \right]$

假定当前的交点是满足上述内差条件的，则可得：

$\left[ \begin{array}{ccc} \mathbf{A}_x & \mathbf{A}_y & \mathbf{A}_z \\ \mathbf{B}_x & \mathbf{B}_y & \mathbf{B}_z \\ \mathbf{C}_x & \mathbf{C}_y & \mathbf{C}_z \end{array} \right]\left[ \begin{array}{ccc} \alpha \\ \beta \\ \gamma \end{array} \right]=\left[ \begin{array}{ccc} \mathbf{P{‘}}_x \\ \mathbf{P{‘}}_y \\ \mathbf{P{‘}}_z \end{array} \right]$

且 $\alpha+\beta+\gamma=1$ 。

设 $\mathbf{M}=\left[ \begin{array}{ccc} \mathbf{A}_x & \mathbf{A}_y & \mathbf{A}_z \\ \mathbf{B}_x & \mathbf{B}_y & \mathbf{B}_z \\ \mathbf{C}_x & \mathbf{C}_y & \mathbf{C}_z \end{array} \right]$ ，若 $\mathbf{M}$ 可逆，可得：

$\left[ \begin{array}{ccc} \alpha \\ \beta \\ \gamma \end{array} \right]=\mathbf{M}^{-1}\left[ \begin{array}{ccc} \mathbf{P{‘}}_x \\ \mathbf{P{‘}}_y \\ \mathbf{P{‘}}_z \end{array} \right]$

由此我们得到了内差系数 $\alpha、\beta、\gamma$ 和内差结果的变换关系。然而上述等式成立的条件是变换矩阵可逆，这个条件有的时候可能不满足，比如所有顶点都在 $xy$ 平面上，此时所有点的 $z$ 轴分量为0，矩阵不可逆。

为了解决这个问题，笔者构造了一个新的空间，使得该空间的 $x$ 轴为三角形其中一边， $z$ 轴为与三角形所在平面的法线和新的 $x$ 轴都成45度的向量， $y$ 轴即为两者的正交向量，令新空间的变换矩阵为 $\mathbf{M_1}$ ，则变换后的顶点 $\mathbf{A’}、\mathbf{B’}、\mathbf{C’}$ 分别为：

$\mathbf{A’}=\mathbf{M_1}\mathbf{A}$

$\mathbf{B’}=\mathbf{M_1}\mathbf{B}$

$\mathbf{C’}=\mathbf{M_1}\mathbf{C}$

且 $\mathbf{A’}、\mathbf{B’}、\mathbf{C’}$ 依旧满足：

$\left[ \begin{array}{ccc} \mathbf{A’}_x & \mathbf{A’}_y & \mathbf{A’}_z \\ \mathbf{B’}_x & \mathbf{B’}_y & \mathbf{B’}_z \\ \mathbf{C’}_x & \mathbf{C’}_y & \mathbf{C’}_z \end{array} \right]\left[ \begin{array}{ccc} \alpha \\ \beta \\ \gamma \end{array} \right]=\mathbf{M_1}\left[ \begin{array}{ccc} \mathbf{P{‘}}_x \\ \mathbf{P{‘}}_y \\ \mathbf{P{‘}}_z \end{array} \right]$

令 $\mathbf{M_2}=\left[ \begin{array}{ccc} \mathbf{A’}_x & \mathbf{A’}_y & \mathbf{A’}_z \\ \mathbf{B’}_x & \mathbf{B’}_y & \mathbf{B’}_z \\ \mathbf{C’}_x & \mathbf{C’}_y & \mathbf{C’}_z \end{array} \right]$ ，则：

$\left[ \begin{array}{ccc} \alpha \\ \beta \\ \gamma \end{array} \right]=\mathbf{M_2^{-1}}\mathbf{M_1}\left[ \begin{array}{ccc} \mathbf{P{‘}}_x \\ \mathbf{P{‘}}_y \\ \mathbf{P{‘}}_z \end{array} \right]$

对于 $P{‘}$ 的UV坐标 $\mathbf{S^{‘}}=\left[ \begin{array}{ccc} u^{‘} \\ v^{‘} \\ 1 \end{array} \right]$ ，依然满足内插规则：

$\alpha\mathbf{S_a}+\beta\mathbf{S_b}+\gamma\mathbf{S_c}=\mathbf{S’}$

设 $M=\mathbf{M_2^{-1}}\mathbf{M_1}$ ，对 $x$ 求微分：

$\tfrac{\partial{\mathbf{S’}}}{\partial{x}}=\tfrac{\partial{\alpha}}{\partial{x}}\mathbf{S}_a+\tfrac{\partial{\beta}}{\partial{x}}\mathbf{S}_b+\tfrac{\partial{\gamma}}{\partial{x}}\mathbf{S}_c$

$\tfrac{\partial{\mathbf{S’}}}{\partial{x}}=\mathbf{M}_{[0]}\tfrac{\partial{\mathbf{P’}}}{\partial{x}}\mathbf{S}_a+\mathbf{M}_{[1]}\tfrac{\partial{\mathbf{P’}}}{\partial{x}}\mathbf{S}_b+\mathbf{M}_{[2]}\tfrac{\partial{\mathbf{P’}}}{\partial{x}}\mathbf{S}_c$

$\mathbf{M}_{[i]}$ 为 $\mathbf{M}$ 的第 $i$ 行向量。

下两张图分别为使用光线微分和光栅化计算得到的 $\tfrac{\partial{\mathbf{S’}}}{\partial{x}}$ ，为了显示更明显，将其值放大了10倍。

现在我们得到了 $\tfrac{\partial{\mathbf{S’}}}{\partial{x}}$ ，对纹理进行采样时需要利用相关数据计算MipMap的等级。

渲染点 $P{‘}$ 与其向右和向上一个像素点对应的UV差值为：

$\Delta\mathbf{T}_x\approx\Delta{x}\tfrac{\partial{\mathbf{S’}}}{\partial{x}}$

$\Delta\mathbf{T}_y\approx\Delta{y}\tfrac{\partial{\mathbf{S’}}}{\partial{y}}$

MipMap的等级 $lod$ 可以表示为：

$lod=0.5log_2[max(\Delta{x}\cdot\Delta{x},\Delta{y}\cdot\Delta{y})]$

计算出了 $lod$ 的值，我们需要对纹理进行三线性插值计算：

插值计算的两级MipMap分别为：

$lod_{sub} = floor(lod)$

$lod_{up} = floor(lod)+1$

$F_{up} = lod – lod_{sub}$

分别采样 $lod_{sub}$ 和 $lod_{up}$ 两个等级的结果，再将两者进行线性插值，其中 $lod_{up}$ 的占比为 $F_{up}$ 。

使用光线微分后，渲染的结果如下：

总结

要做出高质量的光线追踪渲染，在做纹理采样时需要应用纹理过滤，光线追踪时由于无法使用诸如 $dFdx$ 的函数，需要根据射线的表达式手动计算微分，而本文所用的光线微分便为其中一种方法。需要注意的是，本文仅对光线直线传播时进行了分析，当光线发生折射和反射时，光线的方向发生了变化，还需要将 $\tfrac{\partial{\mathbf{N}}}{\partial{x}}$ 和 $\tfrac{\partial{\mathbf{N}}}{\partial{y}}$ 考虑进来，感兴趣的读者可以阅读上面的Paper，这部分的内容我也将在近期分享。