WebGL：替代写入gl_FragDepth的方法

Question

在WebGL中，是否有可能写入片段的深度值或以其他方式控制片段的深度值？

据我所知，在WebGL 1.x中没有gl_FragDepth，但我想知道是否有其他方法（扩展，浏览器特定的支持等）可以实现。

我想要实现的是让射线跟踪对象与使用常规模型、视图、投影绘制的其他元素一起播放。

- andre

---

您可以在顶点着色器中像这样操作深度值：gl_Position.z = x * 2.0 - 1.0，其中 x 在 [0,1]（或者没有 * 2.0 - 1.0 的 [-1,1]）之间...但是只有当 gl_Position.w=1.0 时才有效... - Victor.Palyvoda

@andre 这个问题还没有解决方案吗？ - Viktor Sehr

@ViktorSehr 看起来现在一些浏览器已经实现了这个扩展。请查看被接受的答案。 - andre

Answer 1

有一个扩展EXT_frag_depth

因为它是一个扩展，可能不是每个地方都可用，所以您需要检查它的存在。

var isFragDepthAvailable = gl.getExtension("EXT_frag_depth");

如果isFragDepthAvailable不是假值，那么你可以在你的着色器中启用它。

#extension GL_EXT_frag_depth : enable

否则，您可以在顶点着色器中操纵gl_Position.z，但我怀疑这对大多数需求来说并不是一个可行的解决方案。

- gman

Answer 2

Brad Larson提出了一个巧妙的解决方法，在Molecules（完整博客文章）中使用：

为了解决这个问题，我使用了自己实现的自定义深度缓冲区，使用绑定到屏幕大小纹理的帧缓冲对象。每帧，我首先进行渲染通道，其中唯一输出的值是与该点深度相对应的颜色值。为了处理可能写入同一片段的多个重叠对象，我启用颜色混合并使用GL_MIN_EXT混合方程。这意味着用于该片段的颜色分量（R、G和B）是所有对象尝试写入该片段的分量的最小值（在我的坐标系统中，深度为0.0靠近观察者，1.0远离观察者）。为了增加写入此纹理的深度值的精度，我以这样一种方式将深度编码为颜色，即随着深度值的增加，红色首先填充，然后是绿色，最后是蓝色。这给我提供了768个深度级别，效果还不错。

编辑：刚意识到WebGL不支持最小混合，因此并不十分有用。抱歉。

- dkoes