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

我一直在尝试一些WebGL，但有一个bug我似乎无法找到如何修复

目前，我有以下设置： 我有大约100个三角形，它们都有一个位置，由一个

gl.drawArrays

函数绘制。为了让它们按照正确的顺序绘制，我使用了

gl.enable（gl.DEPTH\u TEST）它给出了正确的结果

现在的问题是，如果我在顶点着色器中更新三角形的
gl_位置
，则更新后的Z值不会用于深度测试。结果是
gl_位置.z
为1的三角形可以绘制在
gl_位置.z
为10的三角形的顶部，这正是我想要的

我试过什么？

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

与

在渲染函数中

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

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值高于较大的三角形（近距离）

导致这种奇怪的绘图行为的原因是什么？剪贴空间的深度从-1变为1。写入深度缓冲区的深度从0变为1。你的位置是1。没有深度值>1，因此您应该看到绘制的唯一内容是在
gl\u位置。z=1
。任何小于1的项都将无法通过测试
gl.depthFunc（gl.GEQUAL）。任何大于1的内容都将被剪裁。只有1在深度范围内且大于或等于1

下面的示例使用不同的z值从小到大绘制矩形。红色为标准
gl.depthFunc（gl.LESS）
，深度清除为1。绿色为
gl.depthFunc（gl.GEQUAL）
，深度清除为0。蓝色为
gl.depthFunc（gl.GEQUAL）
，深度清除为1。请注意，蓝色仅在
gl_位置绘制单个矩形。z=1
，因为所有其他矩形都在z<1处，因此测试失败


const m4=twgl.m4；
const gl=document.querySelector（“canvas”）.getContext（“webgl”）；
常数vs=`
属性向量4位置；
可变vec4 v_位置；
一致mat4矩阵；
void main（）{
gl_位置=矩阵*位置；
v_位置=abs（位置）；
}
`;
常数fs=`
精密中泵浮子；
可变vec4 v_位置；
vec4颜色均匀；
void main（）{
gl_FragColor=vec4（1.-v_position.xxx，1）*颜色；
}
`;
//编译着色器、链接程序、查找属性
const programInfo=twgl.createProgramInfo（gl[vs，fs]）；
//为每个数组调用gl.createBuffer、gl.BindBuffer、gl.bufferData
const z0To1BufferInfo=twgl.createBufferInfoFromArrays（gl{
职位：[
…makeQuad（.2，0.00），
…makeQuad（.4，.25），
…makeQuad（.6，.50），
…makeQuad（.8，.75），
…makeQuad（1.0,1.00），
],
});
const z1To0BufferInfo=twgl.createBufferInfoFromArrays（gl{
职位：[
…makeQuad（.2,1.00），
…makeQuad（.4，.75），
…makeQuad（.6，.50），
…makeQuad（.8，.25），
…makeQuad（1,0.00），
],
});
函数makeQuad（xy，z）{
返回[
-xy，-xy，z，
xy，-xy，z，
-xy，xy，z，
-xy，xy，z，
xy，-xy，z，
xy，xy，z，
];
}
总账使用程序（programInfo.program）；
总帐启用（总帐深度测试）；
gl.净空深度（1）；
总账清除（总账深度\缓冲\位）；
总帐深度函数（总帐以下）；
drawRects（-0.66，z0-1，bufferinfo，[1,0,0,1]）；
gl.clearDepth（0）；
总账清除（总账深度\缓冲\位）；
德国劳埃德芬奇总公司（德国劳埃德芬奇总公司）；
drawRects（0，z1To0BufferInfo[0，1，0，1]）；
gl.净空深度（1）；
总账清除（总账深度\缓冲\位）；
德国劳埃德芬奇总公司（德国劳埃德芬奇总公司）；
drawRects（0.66，z1To0BufferInfo[0,0,1,1]）；
函数drawRects（xoffset、bufferInfo、color）{
//调用gl.bindBuffer、gl.enableVertexAttributeArray、gl.VertexAttributePointer
twgl.setBuffersAndAttributes（总帐、程序信息、缓冲信息）；
设mat=m4.平移（[xoffset，0，0]）；
mat=m4.刻度（mat，[3,5,1]）；
//调用gl.uniformXXX
twgl.设置制服（程序信息{
颜色：颜色，
矩阵：mat，
});
//调用gl.DrawArray或gl.drawElements
twgl.drawBufferInfo（总账，bufferInfo）；
}

红色：深度函数：小于，清除深度：1
绿色：深度函数：GEQUAL，清除深度：0
蓝色：深度函数：GEQUAL，清除深度：1
为什么z=1的三角形不能画在z=10的三角形上？1小于或等于10。我希望在顶部有一个更高的Z值，它实际上应该是
gl.GEQUAL
那么，好的一点。深度测试在我更新的
gl\u位置上仍然不起作用。请在问题中发布一个工作片段。因此需要：“寻求调试帮助的问题”（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。我已经测试了不同的组合，发现depthFunc GEQUAL和clearDepth of 1仍然有效，这意味着每个三角形的z值都是1。但问题是我所有的三角形都被画进去了单个drawArrays函数及其Z在顶点着色器中定义。我如何使其工作？目前，对于您的解决方案，顺序仍然不正确。在我的示例中，顺序正是我所期望的。我使用
LESS
使用Z=0.1->1.0绘制红色，其中0.1小，1.0大，并且我看到大的被绘制在小的后面，这意味着深度缓冲区按预期工作。绿色是z=1.0到0.1，其中1.0小，0.1大。这次我使用的是
GEQUAL
。再次是因为我上次画了0.1，它是最大的，这表明它按预期工作。它不会覆盖z=1.0的小东西，因为深度缓冲区正在工作，并且被清除为0.最后一个（蓝色）显示如果深度缓冲区被清除为1，那么只有1.0的东西才能工作（蓝色）
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);