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);

完整代码

<script id="vertex-shader" type="glsl">
    attribute vec4 a_Position;
    attribute vec4 a_Color;
    attribute vec3 a_Normal;
    uniform vec3 u_LightColor;
    uniform vec3 u_LightDirection;
    uniform vec3 u_AmbientLight;
    uniform mat4 u_mvpMatrix;
    uniform mat4 u_NormalMatrix;
    varying vec4 v_Color;

    void main() {
        gl_Position = u_mvpMatrix * a_Position;
        // 标准化（把长度变为 1 ）
        vec3 normal = normalize(vec3(u_NormalMatrix * vec4(a_Normal,1.0)));
        float nDotL = max(dot(u_LightDirection, normal), 0.0);
        vec3 diffuse = u_LightColor * a_Color.rgb * nDotL;
        vec3 ambient = u_AmbientLight * a_Color.rgb;
        v_Color = vec4(diffuse + ambient, a_Color.a);
    }
</script>

<script id="fragment-shader" type="glsl">
    precision mediump float;
    varying vec4 v_Color;
    void main() {
       gl_FragColor = v_Color;
    }
</script>

<script src="lib/cuon-matrix.js"></script>
<script src="lib/myutils.js"></script>

<script>
    var VERTEX_SHADER_SOURCE = document.getElementById('vertex-shader').text;
    var FRAGMENT_SHADER_SOURCE = document.getElementById('fragment-shader').text;

    var canvas = document.getElementById("canvas");
    var gl = canvas.getContext('webgl');

    if (!initShaders(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)) {
        alert('Failed to init shaders');
    }

    var n = initVertexBuffers(gl);

    var u_mvpMatrix = gl.getUniformLocation(gl.program, 'u_mvpMatrix');
    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');
    var u_NormalMatrix = gl.getUniformLocation(gl.program, 'u_NormalMatrix');

    // 设置光源颜色
    gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);
    // 设置光源方向
    var lightDirection = new Vector3([0.5, 3.0, 4.0]);
    lightDirection.normalize(); // 标准化（长度变为 1）
    gl.uniform3fv(u_LightDirection, lightDirection.elements);

    // 设置环境光
    gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);

    // <projection matrix> * <view matrix>
    var mvpMatrix = new Matrix4();
    mvpMatrix.setPerspective(30, 1, 1, 100);
    mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);

    var modelMatrix = new Matrix4();
    // <translate matrix> * <rotate matrix>
    modelMatrix.setTranslate(0, 0.9, 0);
    modelMatrix.rotate(90, 0, 0, 1);

    mvpMatrix.multiply(modelMatrix);
    gl.uniformMatrix4fv(u_mvpMatrix, false, mvpMatrix.elements);

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

    gl.enable(gl.DEPTH_TEST);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    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

        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
        ]);

        var colors = new Float32Array([    // Colors
            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
        ]);

        var normals = new Float32Array([    // Normal
            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
        ]);

        var indices = new Uint8Array([       // Indices of the vertices
            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, vertices, 3, gl.FLOAT, 'a_Position')) {
            return -1;
        }
        if (!initArrayBuffer(gl, colors, 3, gl.FLOAT, 'a_Color')) {
            return -1;
        }
        if (!initArrayBuffer(gl, normals, 3, gl.FLOAT, 'a_Normal')) {
            return -1;
        }

        var indexBuffer = gl.createBuffer();
        if (!indexBuffer) {
            console.log('Failed to create index buffer');
            return -1;
        }
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

        return indices.length;
    }

    function initArrayBuffer(gl, data, numOfComponents, dataType, attributeName) {
        var buffer = gl.createBuffer();
        if (!buffer) {
            console.log('Failed to create buffer object');
            return false;
        }

        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

        var attribute = gl.getAttribLocation(gl.program, attributeName);
        gl.vertexAttribPointer(attribute, numOfComponents, dataType, false, 0, 0);
        gl.enableVertexAttribArray(attribute);

        return true;
    }
</script>

查看源码