WebGL 着色器 z 位置未用于深度计算

Question

我一直在尝试一些 WebGL，但有一个错误我似乎无法找到解决方法。

目前我有以下设置： 我有大约 100 个三角形，它们都有一个位置，并且由一个 gl.drawArrays 函数绘制。为了让它们以正确的顺序绘制，我使用了gl.enable(gl.DEPTH_TEST);，它给出了正确的结果。

我现在遇到的问题是，如果我在顶点着色器中更新三角形的gl_Position，那么深度测试中不会使用更新的 Z 值。结果是gl_Position.z 为 1 的三角形可以绘制在gl_Position.z 为 10 的三角形之上，这不是我想要的。..

我尝试了什么？

gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.GEQUAL);

与

gl.clear(gl.DEPTH_BUFFER_BIT);
gl.clearDepth(0);
gl.drawArrays(gl.TRIANGLES, 0, verticesCount);

在渲染函数中。

以下代码用于创建缓冲区：

gl.bindBuffer(gl.ARRAY_BUFFER, dataBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positionBufferData, gl.STATIC_DRAW);
const positionLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, false, 0, 0);

z 值较高的三角形尺寸要大得多（由于透视），但小三角形仍然出现在其上（由于渲染顺序）。

在片段着色器中，我使用了gl_fragCoord.z 来查看这是否正确，并且较小的三角形（更远）接收到的 Alpha 值高于较大的三角形（近距离）。

奇怪的绘图行为可能是什么原因造成的？

Answer 1

剪辑空间中的深度从 -1 变为 1。写入深度缓冲区的深度从 0 变为 1。您正在清除为 1。没有深度值 > 1，因此您应该看到绘制的唯一内容是 @ 987654321@。任何小于 1 的都将通过测试 gl.depthFunc(gl.GEQUAL);。任何大于 1 的东西都将被剪裁。只有 1 既在深度范围内又大于等于 1

下面的示例绘制了具有不同 z 值的从小到大的矩形。红色是标准的gl.depthFunc(gl.LESS)，深度清零。绿色是gl.depthFunc(gl.GEQUAL)，深度清零。蓝色是gl.depthFunc(gl.GEQUAL)，深度清零。注意蓝色只在gl_Position.z = 1处绘制单个矩形，因为所有其他矩形未通过测试，因为它们位于 Z

const m4 = twgl.m4;
const gl = document.querySelector("canvas").getContext("webgl");
const vs = `
attribute vec4 position;
varying vec4 v_position;
uniform mat4 matrix;
void main() {
   gl_Position = matrix * position;
   v_position = abs(position);
}
`;
const fs = `
precision mediump float;
varying vec4 v_position;
uniform vec4 color;
void main() {
  gl_FragColor = vec4(1. - v_position.xxx, 1) * color;
}
`;
// compiles shaders, links program, looks up attributes
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);
// calls gl.createBuffer, gl.bindBindbuffer, gl.bufferData for each array
const z0To1BufferInfo = twgl.createBufferInfoFromArrays(gl, {
  position: [ 
     ...makeQuad( .2, 0.00),
     ...makeQuad( .4,  .25),
     ...makeQuad( .6,  .50),
     ...makeQuad( .8,  .75),
     ...makeQuad(1.0, 1.00),
  ],
});
const z1To0BufferInfo = twgl.createBufferInfoFromArrays(gl, {
  position: [ 
     ...makeQuad(.2, 1.00),
     ...makeQuad(.4,  .75),
     ...makeQuad(.6,  .50),
     ...makeQuad(.8,  .25),
     ...makeQuad(1., 0.00),
  ],
});

function makeQuad(xy, z) {
  return [
     -xy, -xy, z,
      xy, -xy, z,
     -xy,  xy, z,
     -xy,  xy, z,
      xy, -xy, z,
      xy,  xy, z,
  ];
}

gl.useProgram(programInfo.program);

gl.enable(gl.DEPTH_TEST);

gl.clearDepth(1);
gl.clear(gl.DEPTH_BUFFER_BIT);
gl.depthFunc(gl.LESS);
drawRects(-0.66, z0To1BufferInfo, [1, 0, 0, 1]);

gl.clearDepth(0);
gl.clear(gl.DEPTH_BUFFER_BIT);
gl.depthFunc(gl.GEQUAL);
drawRects(0, z1To0BufferInfo, [0, 1, 0, 1]);

gl.clearDepth(1);
gl.clear(gl.DEPTH_BUFFER_BIT);
gl.depthFunc(gl.GEQUAL);
drawRects(0.66, z1To0BufferInfo, [0, 0, 1, 1]);


function drawRects(xoffset, bufferInfo, color) {
  // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  
  let mat = m4.translation([xoffset, 0, 0]);
  mat = m4.scale(mat, [.3, .5, 1]);

  // calls gl.uniformXXX
  twgl.setUniforms(programInfo, {
    color: color,
    matrix: mat,
  });

  // calls gl.drawArrays or gl.drawElements
  twgl.drawBufferInfo(gl, bufferInfo);
}

<script src="https://twgljs.org/dist/3.x/twgl-full.min.js"></script>
<canvas></canvas>
<pre>
red  : depthFunc: LESS,   clearDepth: 1
green: depthFunc: GEQUAL, clearDepth: 0
blue : depthFunc: GEQUAL, clearDepth: 1
</pre>