如何正确启用WebGL DEPTH_TEST

Question

我不明白为什么黄色方块(z = 0)会出现在红色方块(z = 0.5)的前面。就好像我没有启用DEPTH_TEST一样，但我肯定启用了。如果标记为"画红色"one_answers"画黄色"的方块颠倒，红色方块就会出现在前面。但我不明白为什么这是必要的，如果DEPTH_TEST是启用。以下是相关代码:

  ...
  gl.enable(gl.DEPTH_TEST);
  gl.depthFunc(gl.LEQUAL);
  ...
  vertices = [  // red square
                0.0,  0.0,  0.5,    1.0, 0.2, 0.1, 1.0,
               -1.0,  0.0,  0.5,    1.0, 0.2, 0.1, 1.0,
                0.0, -1.0,  0.5,    1.0, 0.2, 0.1, 1.0,
               -1.0, -1.0,  0.5,    1.0, 0.2, 0.1, 1.0,
                // yellow square
                0.5,  0.5,  0.0,    1.0, 0.9, 0.2, 1.0,
               -0.5,  0.5,  0.0,    1.0, 0.9, 0.2, 1.0,
                0.5, -0.5,  0.0,    1.0, 0.9, 0.2, 1.0,
               -0.5, -0.5,  0.0,    1.0, 0.9, 0.2, 1.0 ];
  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
  gl.bufferData(
      gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  // draw red
  gl.vertexAttribPointer(
      vertexPositionAttribute, 3, gl.FLOAT, false, 28, 0);
  gl.vertexAttribPointer(
      vertexColorAttribute, 4, gl.FLOAT, false, 28, 12);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
  // draw yellow
  gl.vertexAttribPointer(
      vertexPositionAttribute, 3, gl.FLOAT, false, 28, 112);
  gl.vertexAttribPointer(
      vertexColorAttribute, 4, gl.FLOAT, false, 28, 124);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

Answer 1

仅供参考，我的矩阵不好。我当时在看一本书，书中的视点在z轴上指向相反的方向，结果计算的投影部分出错了。(谢谢Chiguireitor帮我解决这个问题)