webgl 24.为旋转平移后的正方体添加光照

接上节的例子，我们对正方体做一些模型变换（旋转、平移、缩放）
后再添加光照。

light translated rotated cube.png

物体旋转、平移或缩放后法向量会发生变化，这里关键是要计算出变换后的法向量。

normal change.png

如图：

1. 平移时法向量不变
2. 旋转时法向量会发生变化
3. 等比缩放时法向量不变，非等比缩放时法向量可能变也可能不变。如最左边的正方体，无论等比缩放还是非等比缩放各个面的法向量都不变。

有一个公式可以根据模型变换直接计算出法向量的变换矩阵，这个变换矩阵叫做 Inverse Transpose Matrix，即先对模型变换矩阵取逆矩阵然后再转置。

Matrix4 normalMatrix = new Matrix4();
// Calculate the model matrix

// 求逆矩阵
normalMatrix.setInverseOf(modelMatrix);
// 转置
normalMatrix.transpose();

计算出法向量的变换矩阵之后乘以原来的法向量就得到了模型变换之后的法向量，下面的代码就都跟上一节一样了。

具体数学推导过程有兴趣的同学请查阅其它资料

shader 中添加 Inverse Transpose Matrix

uniform mat4 u_NormalMatrix;

用计算出来的法向量变换矩阵乘以原始法向量

vec3 normal = normalize(vec3(u_NormalMatrix * vec4(a_Normal,1.0)));

变换矩阵都是 4×4 的齐次坐标，这里在 vec3 和 vec4 之间进行了转换

// 计算法向量变换矩阵
var normalMatrix = new Matrix4();
normalMatrix.setInverseOf(modelMatrix);
normalMatrix.transpose();
gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements);

完整代码

查看源码