WebGL2：将片段深度写入深度纹理

Question

我在 WebGL2 中使用了一个简单的片段着色器，它可以将不同的颜色输出到两个不同的纹理目标中。如何将 gl_fragDepth 值的写入分配给第三个（深度）纹理目标（位置 = 2）？

#version 300 es
precision mediump float;

layout(location = 0) out vec4 fragColor1;
layout(location = 1) out vec4 fragColor2;

void main(void) {
   fragColor1 = vec4(1.0, 0.0, 0.0, 1.0); // printf of WebGL :)
   fragColor2 = vec4(1.0, 0.0, 0.0, 1.0);
}

Answer 1

原来这么简单

 layout (location = 2) out float fragDepth;
 ...
 fragDepth = gl_FragCoord.z;

Answer 2

您只能为每个片段输出一个真实的深度值，但听起来您还没有这样做，所以您需要做的就是将 DEPTH_ATTACHMENT 附加到帧缓冲区并写入 gl_FragDepth 在你的片段着色器中。

WebGL2：将片段深度写入深度纹理

WebGL2: write fragment depth to depth texture

shader

fragment-shader

webgl2