使用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。

如果你想要自我透明而没有瑕疵，通常需要使用这样的方法 - 特别是如果你允许相机或物体移动。

这是一个小提琴：http://jsfiddle.net/unkya/17/

编辑：更新了三个.js r.71

Answer 2

一般来说，要做透明对象，你需要从前到后对它们进行排序（我猜三个.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

制作原始网格的克隆并翻转其法线;然后制作两个相同的单面＆＃34;每种材料都有不同的名称。不是最优雅的方法，但它工作得很好。我遇到了同样的问题，这就是我所做的：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", ...