16

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

这是所述工件的图像。它们似乎源于底层的球体几何形状。 具有混合模式的工件：THREE.AdditiveBlending = 1

有趣的是，对于混合模式 THREE.SubtractiveBlending = 2，伪影不可见。 在此处输入图像描述

任何帮助表示赞赏！

亚历克斯

4

4 回答 4

18

在 WebGL 和 three.js 中，自透明尤其困难。你只需要真正理解问题，然后调整你的代码来达到你想要的效果。

您可以在three.js 中实现双面透明球体的外观，但有一个技巧：您需要渲染两个透明球体——一个带有material.side = THREE.BackSide，一个带有material.side = THREE.FrontSide。

如果您希望在没有伪影的情况下实现自透明，通常需要使用此类方法——尤其是在您允许相机或物体移动的情况下。

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

编辑：将小提琴更新为 three.js r.105

于 2012-11-05T17:06:08.213 回答
5

通常要做透明对象，您需要从前到后对它们进行排序（我猜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 中做到这一点

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

于 2012-11-05T04:49:41.767 回答
0

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

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

于 2012-11-04T20:58:22.200 回答
0

克隆原始网格并翻转其法线；然后为每个具有不同名称的材料制作两个相同的“单面”材料。不是最经典的方法，但效果很好。我在同样的问题上苦苦挣扎，这就是我所做的：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", ...
于 2016-06-14T14:33:18.997 回答