javascript - 如何在 webgl 中正确设置透明度

Question

我是图形和 webgl 的新手。我在为 webgl 1.0 中的模型设置适当的透明度时遇到问题。模型包含多个部分(几何)。

着色器代码是

"if (usetransparency > 0.0) {\n" +
        "gl_FragColor = vec4(( diffuse - 0.2) * diffColor, 1.0); \n" +
        "gl_FragColor.w = transparency;  \n" +
    "}  \n" 

js代码是

 shader.setUseTransparency(1.0);
 shader.setTransparency(transparencyValue);
 GL.clearColor(0.5, 0.5, 0.5, 0.0);
 GL.enable(GL.DEPTH_TEST);
 GL.depthFunc(GL.LEQUAL)
 GL.depthMask(false);
 GL.enable(GL.BLEND);
 GL.blendFunc(GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA);

渲染每个部分后，我将使 depthMask 为真。

下面是需要的渲染图

下面是我在 webgl 中得到的实际渲染图像。

我没有使用像 threejs 这样的任何 webgl 库。

请帮我解决这个问题。

Answer 1

在 OpenGL 或 WebGL 中没有自动获得深度正确透明度的方法。多年来，已使用多种方法来实现这一目标:

深度排序:由于绘制是按照提交绘制调用的顺序进行的，因此按相机深度对所有对象进行排序。如果您不仅关心多个对象，还关心同一对象的正面/背面的正确透明度，您还必须根据三 Angular 形的深度对对象中的三 Angular 形进行排序。实现此目的的最佳方法是使用 bsp tree .

另一个选项是 Order Independent Transparency 字段的算法，例如 Depth Peeling或 Per-Pixel Linked Lists .虽然我不确定这些方法中的哪些可以在 WebGL 中实现。