Question

我无法弄清楚黄色正方形（z = 0）出现在红色正方形（z = 0.5）前面的原因。好像我没有启用DEPTH_TEST，但我肯定有。如果标有“绘制红色”和“绘制黄色”的块被反转，则红色正方形应该显示在前面。但是我不明白为什么在启用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帮我解决这个问题。）

如何正确启用WebGL DEPTH_TEST？

1 个答案: