使用 Three.js 渲染透明对象的两侧时的伪影

Question

我尝试使用 Three.js 渲染透明对象的两面。位于透明对象内的其他对象也应该显示。可悲的是我得到了我不知道的文物。这是一个测试页面：https://dl.dropbox.com/u/3778149/webgl_translucency/test.html

这是上述工件的图像。它们似乎源于底层的球体几何形状。

有趣的是，对于混合模式 THREE.SubtractiveBlending = 2，伪像不可见。

任何帮助表示赞赏！

亚历克斯

Answer 1

自我透明在 WebGL 和 Three.js 中尤其困难。您只需要真正理解这些问题，然后调整您的代码即可达到您想要的效果。

您可以在 Three.js 中通过一个技巧实现双面透明球体的外观：您需要渲染两个透明球体 - 一个带有

material.side = THREE.BackSide

，另一个带有

material.side = THREE.FrontSide

。

如果您想要无伪影的自透明效果，通常需要使用此类方法 - 特别是如果您允许相机或物体移动。

三.js r.143

Answer 2

通常要制作透明对象，您需要将它们从前到后排序（我猜 Three.js 已经做到了这一点）。如果你的对象是凸的（就像这两个一样），那么有时你可以通过渲染每个对象两次来解决，一次使用 gl.cullFace(gl.CCW)，另一次使用 gl.cullFace(gl.CW)。例如，如果立方体位于球体内部，那么您实际上会这样做

gl.enable(gl.CULL_FACE);
gl.cullFace(gl.CW);
drawSphere();  // draws the back of the sphere
drawCube();    // draws the back of the cube
gl.cullFace(gl.CCW);
drawCube();    // draws the front of the cube.
drawSphere();  // draws the front of the sphere.

我不知道如何在 Three.js 中做到这一点

这仅处理凸且不相交的对象（一个对象完全包含在另一个对象内）。

Answer 3

要使用 Alpha 混合正确渲染该场景，必须在每一帧从后到前渲染三角形。您的场景特别具有挑战性，因为您有一个对象在另一个对象内，并且渲染两侧，这将需要渲染球体的一部分，然后是立方体，然后是球体的其余部分。我怀疑 Three.js（或任何其他场景图形库）可以处理这种情况。

加法或减法混合无需排序即可工作，但看起来不太好。

Answer 4

克隆原始网格并翻转其法线；然后制作两个相同的“单面”材料，每个材料具有不同的名称。这不是最优雅的方法，但效果很好。我遇到了同样的问题，这就是我所做的：P

.json 文件如下所示：

    {
"materials":[
    { "name":"ext", "texture":"f_03.jpg", "ambient":[255.0,255.0,255.0], "diffuse":[255.0,255.0,255.0], "specular":[255.0,255.0,255.0], "opacity":0.7 },
    { "name":"int", "texture":"f_03.jpg", "ambient":[255.0,255.0,255.0], "diffuse":[255.0,255.0,255.0], "specular":[255.0,255.0,255.0], "opacity":0.7 }
],
"meshes":[
    {
        "name":"Cylinder001",
        "material":"ext", ...

    {
        "name":"Cylinder002",
        "material":"int", ...

Answer 5

我找到了这个答案，它对我有帮助： https://discourse.thirdjs.org/t/transparent-faces-not-rendering-when-looking-through-another-transparent-face/53306/6

这对我有用：

mat.transparent = true;
mat.alphaTest = 0.001;