深度图像webgl

在WebGL中,无法直接可视化深度缓冲区的实际内容。然而,绘制深度很容易;这与绘制雾(在旧的固定函数样式中)基本相同。

在顶点着色器中,通过变量传递顶点位置的z分量。当您处于此状态时,将其范围从[-1,1]重新调整到[0,1]。

// do this after you've set gl_Position, of course.
vZ = (gl_Position.z + 1.0) / 2.0;

在片段着色器中,使用该值作为颜色。

gl_FragColor = vec4(vZ, vZ, vZ, 0.0);

注意,这将产生与实际深度缓冲值是非线性的方式相同的非线性阴影。如果你想要从近平面到远平面的线性亮度,你需要从 就在之前 并基于近平面距离和远平面距离重新缩放它。