双面透明着色器看起来有问题答案

【问题标题】：Double sided transparent shader looks buggy双面透明着色器看起来有问题
【发布时间】：2013-02-20 01:49:14
【问题描述】：

我做了一个小测试，让您可以使用 three.js 在 3D 环境中试验着色器。

场景中有一个显示着色器的球体。

我创建的demo shader 是一个非常简单的着色器，它使用2D 噪声实现。球体的很大一部分仍然是黑色的，我将其设置为透明的。我希望球体的另一侧也可见。所以我启用了透明度并将渲染面设置为双面。

material = new THREE.ShaderMaterial({
    'uniforms': uniforms,
    'fragmentShader': $('textarea#input-fragment').val(),
    'vertexShader': $('textarea#input-vertex').val()
});

material.side = THREE.DoubleSide;
material.transparent = true;

在this example 上，错误更容易被发现。

从顶部查看球体时，您只能从外侧看到着色器。从侧面看似乎有点波涛汹涌，从底部看似乎在工作。

这些是不同的角度（顶部 - 侧面 - 底部）：

这是我的片段着色器的重要部分：

void main() {
    float r = cnoise(vNormal.yz * 2.0 + t);
    float g = cnoise(vNormal.xz * -1.0 + t);
    float b = cnoise(vNormal.xy * -2.0 + t);

    // opacity ranges assumable from 0 - 3, which is OK
    gl_FragColor = vec4(r, g, b, r + g + b);
}

那么为什么我会看到不连贯的边缘？为什么视角很重要？

【问题讨论】：

在此处发布着色器代码，不要只是链接到它。
@BartekBanachewicz 我在准备写之前不小心发布了这个问题。我很抱歉。
它实际上看起来像是在那个球体前面。你能把它渲染成白色而不是透明吗？
按预期工作。 Screenshot, Demo
mmhhhmm... 那个方向的东西。如果没有人回复，我晚上再考虑

标签： javascript glsl three.js webgl shader

【解决方案1】：

您的着色器没有任何问题。设置的话也可以看到效果：

gl_FragColor = vec4( 1.0, 1.0, 1.0, 0.5 );

three.js 中的自透明是棘手的。

出于WebGLRenderer 中的性能原因，深度排序仅在个对象之间（基于它们的位置）起作用，而不是在单个对象内。

无法控制对象内各个面的渲染顺序。

这就是为什么从某些视角看您的场景比从其他角度看更好。

一种解决方法是将几何体分解为每个面的单独网格。

另一种解决方法（你最好的选择，IMO）是用两个透明球体在同一位置替换你的透明双面球体 - 一个正面和一个背面。

three.js r.56

【讨论】：

这解释了很多。因为我的项目是一项开放服务，所以只为这个例外制作一个额外的球体是一种浪费，但我相信这个答案会很好地为其他有同样问题的人服务！非常感谢您的回答。

【解决方案2】：

与我遇到的非常相似。了解这一点的原因最好在 Three.js Transparency 基础上进行解释。如果没有关于您的代码或目标的更多详细信息，这里是 r128 版本的替代解决方案。只需在您的材料中再添加一行：

material.depthTest: false,

简而言之，正如@WestLangley 提到的，您的着色器很好，但在渲染透明度期间，像素之间的深度也被考虑在内 - 最终导致某些像素不渲染。这就是您的“越野车”的来源。不是真正的错误，而是默认情况下渲染场景的方式，直到被告知否则。您可能会遇到很多与您的期望相竞争的*问题，因此我建议您阅读我发布的链接。

*一个这样的问题：如果您的场景中有其他对象，那么当然，由于您关闭了 depthTest，您可能会得到不正确的对象放置，因为应该在背景中的对象可能会在前景中渲染。

【讨论】：