webgl 19.DepthTest (深度测试)

上一节的例子貌似是正确的，但其实是有问题的，让我们把顶点的顺序做一下调整

var vertices = new Float32Array([
    // Three triangles on the right side
    0.75, 1.0, 0.0, 0.4, 0.4, 1.0,  // 前面的蓝色三角形
    0.25, -1.0, 0.0, 0.4, 0.4, 1.0,
    1.25, -1.0, 0.0, 1.0, 0.4, 0.4,

    0.75, 1.0, -2.0, 1.0, 1.0, 0.4, // 中间的黄色三角形
    0.25, -1.0, -2.0, 1.0, 1.0, 0.4,
    1.25, -1.0, -2.0, 1.0, 0.4, 0.4,

    0.75, 1.0, -4.0, 0.4, 1.0, 0.4, // 后面的绿色三角形
    0.25, -1.0, -4.0, 0.4, 1.0, 0.4,
    1.25, -1.0, -4.0, 1.0, 0.4, 0.4,

    // Three triangles on the left side
    -0.75, 1.0, 0.0, 0.4, 0.4, 1.0,  // 前面的蓝色三角形
    -1.25, -1.0, 0.0, 0.4, 0.4, 1.0,
    -0.25, -1.0, 0.0, 1.0, 0.4, 0.4,

    -0.75, 1.0, -2.0, 1.0, 1.0, 0.4, // 中间的黄色三角形
    -1.25, -1.0, -2.0, 1.0, 1.0, 0.4,
    -0.25, -1.0, -2.0, 1.0, 0.4, 0.4,

    -0.75, 1.0, -4.0, 0.4, 1.0, 0.4, // 后面的绿色三角形
    -1.25, -1.0, -4.0, 0.4, 1.0, 0.4,
    -0.25, -1.0, -4.0, 1.0, 0.4, 0.4
]);

调整顶点顺序之后显示效果是这样的

no depth test.png

不对啊，怎们后面的三角形反而遮挡了前面的三角形？？？这些因为 webgl 是按照 buffer object 中顶点的顺序来绘制图形的。上一节中我们是按照 Z 轴从远到近（相对于眼睛的视线方向）的顺序排列的，所以先画了绿色的三角形又画了黄色的三角形最后画了蓝色色的三角形，显示没有问题。 而现在是先画蓝色的再画黄色最后画绿色的，所以绿色反而显示在了前面。

webgl 中是通过 Depth Test 来解决这个问题的，后面被遮挡住的物体不应该显示出来。只需要加 2 行代码就可以启用 Depth Test。

 gl.enable(gl.DEPTH_TEST);
 gl.clear(gl.DEPTH_BUFFER_BIT);

第一行代码开启深度测试，默认是没有开启的
第二行代码绘制之前清除 depth buffer

之前说过除了有 color buffer 还有 depth buffer。 color buffer 是存储每个 fragment 的颜色的，而 depth buffer 是存储每个 fragment 的深度值的。 color buffer 和 depth buffer 的大小是一样的，对于 color buffer 中的任意一个 fragment 对应位置的 depth buffer 中存储着眼睛视线到该点最近的距离 （Z值，所以 depth buffer 也叫 Z-Buffer）。 Depth Test 阶段会遍历 color buffer 中的每一个 fragment ,取出 depth buffer 中该位置的 Z 值，如果当前 fragment 的 Z 值小于取出来的值则更新 depth buffer 里面的值，如果大于取出来的值说明该点在一个物体后面这个 fragment 将会被丢弃。

完整代码

<script id="vertex-shader" type="glsl">
    attribute vec4 a_Position;
    attribute vec4 a_Color;
    uniform mat4 u_ProjMatrix;
    uniform mat4 u_ViewMatrix;
    varying vec4 v_Color;

    void main() {
        gl_Position = u_ProjMatrix * u_ViewMatrix * a_Position;
        v_Color = a_Color;
    }
</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 vertices = new Float32Array([
        // Three triangles on the right side
        0.75, 1.0, 0.0, 0.4, 0.4, 1.0,  // 前面的蓝色三角形
        0.25, -1.0, 0.0, 0.4, 0.4, 1.0,
        1.25, -1.0, 0.0, 1.0, 0.4, 0.4,

        0.75, 1.0, -2.0, 1.0, 1.0, 0.4, // 中间的黄色三角形
        0.25, -1.0, -2.0, 1.0, 1.0, 0.4,
        1.25, -1.0, -2.0, 1.0, 0.4, 0.4,

        0.75, 1.0, -4.0, 0.4, 1.0, 0.4, // 后面的绿色三角形
        0.25, -1.0, -4.0, 0.4, 1.0, 0.4,
        1.25, -1.0, -4.0, 1.0, 0.4, 0.4,

        // Three triangles on the left side
        -0.75, 1.0, 0.0, 0.4, 0.4, 1.0,  // 前面的蓝色三角形
        -1.25, -1.0, 0.0, 0.4, 0.4, 1.0,
        -0.25, -1.0, 0.0, 1.0, 0.4, 0.4,

        -0.75, 1.0, -2.0, 1.0, 1.0, 0.4, // 中间的黄色三角形
        -1.25, -1.0, -2.0, 1.0, 1.0, 0.4,
        -0.25, -1.0, -2.0, 1.0, 0.4, 0.4,

        -0.75, 1.0, -4.0, 0.4, 1.0, 0.4, // 后面的绿色三角形
        -1.25, -1.0, -4.0, 0.4, 1.0, 0.4,
        -0.25, -1.0, -4.0, 1.0, 0.4, 0.4
    ]);

    initVertexBuffers(gl, vertices);

    var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
    var u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');

    var viewMatrix = new Matrix4();
    viewMatrix.setLookAt(0, 0, 5, 0, 0, -100, 0, 1, 0);

    var projMatrix = new Matrix4();
    projMatrix.setPerspective(30, canvas.width / canvas.height, 1, 100);

    gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);
    gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.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.drawArrays(gl.TRIANGLES, 0, 18);

    function initVertexBuffers(gl, vertices) {
        var vertexBuffer = gl.createBuffer();
        if (!vertexBuffer) {
            console.log('Failed to create buffer object');
            return -1;
        }

        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var FSIZE = vertices.BYTES_PER_ELEMENT;

        var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
        gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 6 * FSIZE, 0);
        gl.enableVertexAttribArray(a_Position);

        var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 6 * FSIZE, 3 * FSIZE);
        gl.enableVertexAttribArray(a_Color);
    }
</script>

查看源码