Glsl 在WebGL中将Z缓冲区渲染为纹理

当我像这样创建z缓冲区纹理时：

gl.bindTexture(GL_TEXTURE_2D, texBuff);
gl.texParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
gl.texParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
gl.texParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
gl.texParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
gl.texImage2D(GL_TEXTURE_2D, 0, GL_DEPTH_COMPONENT, frameBuff.width, frameBuff.height,    0, GL_DEPTH_COMPONENT, GL_UNSIGNED_SHORT, null);

我得到了一个合适的z缓冲区，然后可以用于阴影（我的阴影渲染良好）。但是，如果我创建一个颜色纹理，并使用z值为纹理着色，我的阴影会有很多瑕疵（即使有很高的偏移）。颜色缓冲区的创建方式如下：

gl.bindTexture(GL_TEXTURE_2D, colorBuff);
gl.texParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
gl.texParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
gl.texParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
gl.texParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
gl.texImage2D(GL_TEXTURE_2D, 0, GL_RGBA, frameBuff.width, frameBuff.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, null);

这是写入颜色缓冲区的片段着色器程序：

precision highp float;
void main() {
    float z = gl_FragCoord.z;
    gl_FragColor = vec4(z, z, z, 1.0); 
}

当我将这两个纹理渲染到某个曲面时，它们看起来很相似

---

所以我的问题是，为什么我的颜色纹理不起作用？gl_FragCoord.z是否不是写入z缓冲区的正确z值？据报道。绑定颜色缓冲区时，纹理协调是否不同？或者z值不正确？

这个问题花了我很长时间来解析：）我希望我得到了正确的答案：

只是精确而已。深度分量纹理的z值至少有16位。在彩色中，每个通道只有8位。您可以编写类似（z，frac（z*256.0），frac（z*256.0*256.0））的内容来写入完整的24位，而不是将相同的z写入rgb。它看起来会很奇怪，但如果你读回它，你可以用dp3（1,1/256,1/（256*256））解码它

---

顺便说一句，你的问题很难理解的主要原因是我从来没有读过弗拉古德的文章来得到z。我总是使用纹理坐标来获得纹理z。这使您可以更好地控制如何从顶点着色器生成和插值z。

这个问题花了我很长时间来解析：）我希望我得到了正确的答案：

只是精确而已。深度分量纹理的z值至少有16位。在彩色中，每个通道只有8位。您可以编写类似（z，frac（z*256.0），frac（z*256.0*256.0））的内容来写入完整的24位，而不是将相同的z写入rgb。它看起来会很奇怪，但如果你读回它，你可以用dp3（1,1/256,1/（256*256））解码它

---

顺便说一句，你的问题很难理解的主要原因是我从来没有读过弗拉古德的文章来得到z。我总是使用纹理坐标来获得纹理z。这使您能够更好地控制如何从顶点着色器生成和插值z。

没错，这是一个精度问题。我试图使用颜色纹理来获得深度值的完全32位精度。出于某种原因，您的解决方案似乎创建了更多的工件，而我似乎无法摆脱它们。它还随机生成阴影。我认为openGL做了一些额外的优化。你是对的，这是一个精度问题。我试图使用颜色纹理来获得深度值的完全32位精度。出于某种原因，您的解决方案似乎创建了更多的工件，而我似乎无法摆脱它们。它还随机生成阴影。我认为openGL做了一些额外的优化。