WebGL 根据模型矩阵的逆转置矩阵计算运动物体的光照效果
目录
前言
坐标变换引起法向量变化
变化规律：
魔法矩阵：逆转置矩阵
逆转置矩阵的用法总结
Matrix4对象的 setInverseOf 、transpose 方法规范（以完成逆转置矩阵）
示例代码（LightedTranslatedRotatedCube.js）
代码详解
示例效果
前言
场景中的物体运动，观察者的视角也很可能会改变，物体平移、缩放、旋转都可以用坐标变换来表示。显然，物体的运动会改变每个表面的法向量，从而导致光照效果发生变化。下面就来研究如何实现这一点。
在本次程序LightedTranslatedRotatedCube中，立方体先绕z轴顺时针旋转了90度，然后沿着y轴平移了0.9个单位。场景中的光照情况与前面的 WebGL光照介绍——平行光、环境光下的漫反射_山楂树の的博客-CSDN博客 LightedCube_ambient一样，即有平行光又有环境光。程序运行的效果如下所示。
坐标变换引起法向量变化
立方体旋转时，每个表面的法向量也会随之变化。在下图中，我们沿着z轴负方向观察一个立方体，最左边是立方体的初始状态，图中标出了立方体右侧面的法向量（1，0，0），它指向x轴正方向，然后对该立方体进行变换，观察右侧面法向量随之变化的情况。
变化规律：
● 平移变换不会改变法向量，因为平移不会改变物体的方向。
● 旋转变换会改变法向量，因为旋转改变了物体的方向。
● 缩放变换对法向量的影响较为复杂。如你所见，最右侧的图显示了立方体先旋转了45度，再在y轴上拉伸至原来的2倍的情况。此时法向量改变了，因为表面的朝向改变了。但是，如果缩放比例在所有的轴上都一致的话，那么法向量就不会变化。最后，即使物体在某些轴上的缩放比例并不一致，法向量也并不一定会变化，比如将最左侧图中的立方体在y轴方向上拉伸两倍，法向量就不会变化。
显然，在对物体进行不同变换时，法向量的变化情况较为复杂（特别是缩放变换时）。这时候，数学公式就会派上用场了。
魔法矩阵：逆转置矩阵
曾讨论过，对顶点进行变换的矩阵称为模型矩阵。如何计算变换之后的法向量呢？只要将变换之前的法向量乘以模型矩阵的逆转置矩阵（inverse transpose matrix）即可。所谓逆转置矩阵，就是逆矩阵的转置。
逆矩阵的含义是，如果矩阵M的逆矩阵是R，那么R＊M或M＊R的结果都是单位矩阵。转置的意思是，将矩阵的行列进行调换（看上去就像是沿着左上-右下对角线进行了翻转）。
逆转置矩阵的用法总结
规则：用法向量乘以模型矩阵的逆转置矩阵，就可以求得变换后的法向量。
求逆转值矩阵的两个步骤：
1.求原矩阵的逆矩阵。
2.将上一步求得的逆矩阵进行转置。
Matrix4对象 WebGL矩阵变换库_山楂树の的博客-CSDN博客 提供了便捷的方法来完成上述任务，如下所示。
Matrix4对象的 setInverseOf 、transpose 方法规范（以完成逆转置矩阵）
假如模型矩阵存储在modelMatrix对象（Matrix4类型的实例）中，那么下面这段代码将会计算它的逆转值矩阵，并将其存储在normalMatrix对象中（将其命名为normalMatrix是因为它被用来变换法向量）：
下面来看看示例程序LightedTranslatedRotatedCube.js的代码。该程序使立方体绕z轴顺时针旋转90度，然后沿y轴平移0.9个单位，并且处于平行光和环境光的照射下。立方体在变换之前，与WebGL光照介绍——平行光、环境光下的漫反射_山楂树の的博客-CSDN博客LightedCube_ambient中的立方体完全相同。
示例代码（LightedTranslatedRotatedCube.js）
如下显示了示例程序的代码。与WebGL光照介绍——平行光、环境光下的漫反射_山楂树の的博客-CSDN博客LightedCube_ambient相比，顶点着色器新增了u_NormalMatrix矩阵（第6行）用来对顶点的法向量进行变换（第14行）。你需要事先在JavaScript中计算出该变量，再将其传入着色器。
var VSHADER_SOURCE = // p301
'attribute vec4 a_Position;\n' +
'attribute vec4 a_Color;\n' +
'attribute vec4 a_Normal;\n' +
'uniform mat4 u_MvpMatrix;\n' +
'uniform mat4 u_NormalMatrix;\n' + // 用来变换法向量的矩阵
'uniform vec3 u_LightColor;\n' + // 平行光颜色
'uniform vec3 u_LightDirection;\n' + // 光线方向归一化的世界坐标
'uniform vec3 u_AmbientLight;\n' + // 环境光颜色
'varying vec4 v_Color;\n' +
'void main() {\n' +
' gl_Position = u_MvpMatrix * a_Position;\n' +
// 计算变换后的法向量并归一
' vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' +
// 计算光线方向和法向量的点积（即两者归一化后的夹角的余弦值：cosθ）
' float nDotL = max(dot(u_LightDirection, normal), 0.0);\n' +
// 计算漫反射光的颜色（入射光颜色 * 表面基底色 * cosθ）
' vec3 diffuse = u_LightColor * a_Color.rgb * nDotL;\n' +
// 计算环境光产生的反射光的颜色
' vec3 ambient = u_AmbientLight * a_Color.rgb;\n' +
// 将以上两者相加作为最终的颜色（物体表面的反射光颜色 = 漫反射光颜色 + 环境反射光颜色）
' v_Color = vec4(diffuse + ambient, a_Color.a);\n' +
'}\n';
var FSHADER_SOURCE =
'#ifdef GL_ES\n' +
'precision mediump float;\n' +
'#endif\n' +
'varying vec4 v_Color;\n' +
'void main() {\n' +
' gl_FragColor = v_Color;\n' +
'}\n';
function main() {
var canvas = document.getElementById('webgl');
var gl = getWebGLContext(canvas);
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) return
var n = initVertexBuffers(gl);
gl.clearColor(0, 0, 0, 1);
gl.enable(gl.DEPTH_TEST);
// 获取uniform等变量的存储地址
var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
var u_NormalMatrix = gl.getUniformLocation(gl.program, 'u_NormalMatrix');
var u_LightColor = gl.getUniformLocation(gl.program, 'u_LightColor');
var u_LightDirection = gl.getUniformLocation(gl.program, 'u_LightDirection');
var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight');
// 设置平行光为白色
gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);
// 设置光线方向
var lightDirection = new Vector3([0.0, 3.0, 4.0]);
lightDirection.normalize(); // 归一
gl.uniform3fv(u_LightDirection, lightDirection.elements);
// 设置环境光颜色
gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);
var modelMatrix = new Matrix4(); // 视图矩阵
var mvpMatrix = new Matrix4(); // 模型视图投影矩阵
var normalMatrix = new Matrix4(); // 用来变换法向量的逆转置矩阵
// 计算模型矩阵
modelMatrix.setTranslate(0, 0.9, 0); // 沿Y轴平移
modelMatrix.rotate(90, 0, 0, 1); // 绕Z轴旋转
// 计算模型视图投影矩阵
mvpMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100);
mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);
mvpMatrix.multiply(modelMatrix); // 模型 视图投影 相乘得到最终矩阵
// 将模型视图投影矩阵传给u_MvpMatrix变量
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
/* 根据模型矩阵计算逆转置矩阵以变换法线 */
normalMatrix.setInverseOf(modelMatrix); // 求原矩阵的逆矩阵
normalMatrix.transpose(); // 将上一步求得的逆矩阵进行转置，并将自己设为转置后的结果
// 将用来变换法向量的矩阵传给u_NormalMatrix变量
gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
}
function initVertexBuffers(gl) {
// Create a cube
// v6----- v5
// /| /|
// v1------v0|
// | | | |
// | |v7---|-|v4
// |/ |/
// v2------v3
// Coordinates
var vertices = new Float32Array([
1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0,-1.0, 1.0, 1.0,-1.0, 1.0, // v0-v1-v2-v3 front
1.0, 1.0, 1.0, 1.0,-1.0, 1.0, 1.0,-1.0,-1.0, 1.0, 1.0,-1.0, // v0-v3-v4-v5 right
1.0, 1.0, 1.0, 1.0, 1.0,-1.0, -1.0, 1.0,-1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up
-1.0, 1.0, 1.0, -1.0, 1.0,-1.0, -1.0,-1.0,-1.0, -1.0,-1.0, 1.0, // v1-v6-v7-v2 left
-1.0,-1.0,-1.0, 1.0,-1.0,-1.0, 1.0,-1.0, 1.0, -1.0,-1.0, 1.0, // v7-v4-v3-v2 down
1.0,-1.0,-1.0, -1.0,-1.0,-1.0, -1.0, 1.0,-1.0, 1.0, 1.0,-1.0 // v4-v7-v6-v5 back
]);
// Colors
var colors = new Float32Array([
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v1-v2-v3 front
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v3-v4-v5 right
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v0-v5-v6-v1 up
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v1-v6-v7-v2 left
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, // v7-v4-v3-v2 down
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0 // v4-v7-v6-v5 back
]);
// Normal
var normals = new Float32Array([
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 up
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, // v7-v4-v3-v2 down
0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0 // v4-v7-v6-v5 back
]);
// Indices of the vertices
var indices = new Uint8Array([
0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // right
8, 9,10, 8,10,11, // up
12,13,14, 12,14,15, // left
16,17,18, 16,18,19, // down
20,21,22, 20,22,23 // back
]);
// 将顶点属性写入缓冲区（坐标、颜色和法线）
if (!initArrayBuffer(gl, 'a_Position', vertices, 3)) return -1;
if (!initArrayBuffer(gl, 'a_Color', colors, 3)) return -1;
if (!initArrayBuffer(gl, 'a_Normal', normals, 3)) return -1;
gl.bindBuffer(gl.ARRAY_BUFFER, null);
var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
return indices.length;
}
function initArrayBuffer(gl, attribute, data, num) {
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
var a_attribute = gl.getAttribLocation(gl.program, attribute);
gl.vertexAttribPointer(a_attribute, num, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_attribute);
return true;
}
代码详解
顶点着色器的流程与LightedCube_ambient类似，区别在于，本例根据前述的规则先用模型矩阵的逆转置矩阵对a_Normal进行了变换，再赋值给normal（第14行），而不是直接赋值：
a_Normal是vec4类型的，u_NormalMatrix是mat4类型的，两者可以相乘，其结果也是vec4类型。我们只需要知道结果的前三个分量，所以就使用vec3（）函数取其前3个分量，转为vec3类型。你也可以使用.xyz来这样做，比如这样写：（u_NormalMatrix＊a_Normal）.xyz。现在你已经了解了在物体旋转和平移时，如何变换每个顶点的法向量了。下面来看在JavaScript代码中如何计算传给着色器的u_NormalMatrix变量的矩阵。
u_NormalMatrix是模型矩阵的逆转置矩阵。示例中立方体先绕z轴旋转再沿y轴平移，所以首先使用serTranslate（）和rotate（）计算出模型矩阵（第63～64行）；接着求模型矩阵的逆矩阵，再对结果进行转置，得到逆转置矩阵normalMatrix（第73～74行）；最后，将逆转置矩阵传给着色器中的u_NormalMatrix变量（第76行）。gl.uniformMatrix4fv（）函数的第2个参数指定是否对矩阵矩形转置。
运行程序，效果如下所示。与LightedCube_ambient相比，立方体各个表面的颜色没有改变，只是位置向上移动了一段距离，这是因为：（1）平移没有改变法向量；（2）旋转虽然改变了法向量，但这里恰好旋转了90度，原来的前面现在处在右侧面的位置上，所以立方体看上去没有变化；（3）场景中的光照条件不会随着立方体位置的变化而改变；（4）漫反射光在各方向上是均匀的。
示例效果
