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

一般来说，要处理透明对象，您需要将它们从前到后排序（我猜 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 中做到这一点

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