如何正确启用 WebGL DEPTH_TEST？答案

【问题标题】：How to properly enable WebGL DEPTH_TEST?如何正确启用 WebGL DEPTH_TEST？
【发布时间】：2011-12-08 01:55:01
【问题描述】：

我不明白为什么黄色方块 (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);

【问题讨论】：

您应该澄清一些事情：您正在测试的浏览器；你的驱动程序更新了吗？你的投影矩阵；你在模型视图上加载身份吗？
在 Chrome 和 Firefox 上测试，来自 Ubuntu 包管理器的 NVidia 驱动程序。（对于其他 WebGL 演示来说都是新的。）我在顶点着色器中只有一个用于模型、视图和投影的矩阵： mat4 mvpMatrix = mat4 ( 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, -1.0, -1.0, 0.0, 0.0, 3.0, 3.0); screenshot（请注意红色方块更大，这是有道理的，因为它更接近，但黄色被绘制在它上面。）
出于好奇，如果将黄色方块的 Z 分量设置为 1.0，会发生什么？
黄色方块更大了，应该是这样的，它仍然画在红色的上面：screenshot。
尝试将 mvpMatrix 设置为恒等式，然后将其与平移矩阵相乘，看看是否能解决问题。试试这个平移矩阵 [1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, -1.0, 0.0, 0.0, 0.0, 1.0]

标签： opengl-es webgl

【解决方案1】：

仅供参考，我的矩阵很糟糕。我正在看一本书，它的视点在 z 轴上朝相反的方向看，并且计算的投影部分错误。（感谢 Chiguireitor 帮我解决这个问题。）

【讨论】：