在另一个之上显示网格 |删除重叠 |渲染顺序 | Three.js

Question

我有 2 个对象网格。他们都有一些共同点，但不完全相同。

我通过将它们添加到屏幕来显示它们.. 就像一个网格在另一个之上。但是下部网格与顶部网格重叠但我想要实现的是，较低的网格应始终保持在下方而不重叠，并将 space 分配给整个顶部网格。

然后我尝试了类似这样的东西..

var objLoader1 = new OBJLoader2();
objLoader1.load('assets/object1.obj', (root) => {
           root.renderOrder = 0;
           scene.add(root);
       });
var objLoader2 = new OBJLoader2();
objLoader2.load('assets/object2.obj', (root) => {
           root.renderOrder = 1;
           scene.add(root);
      });

但我不知道为什么重叠仍然存在..

我试过了...

var objLoader1 = new OBJLoader2();
objLoader1.load('assets/object1.obj', (root) => {
           objLoader1.renderOrder = 0;
           scene.add(root);
       });
var objLoader2 = new OBJLoader2();
objLoader2.load('assets/object2.obj', (root) => {
           objLoader2.renderOrder = 1;
           scene.add(root);
      });

然后我尝试通过这个 Fiddle .. Another Fiddle 但是当我运行时，我只得到 lower 或 upper mesh 。但我想看到两者没有任何重叠..

 var layer1 = new Layer(camera);
 composer.addPass(layer1.renderPass);
 layer1.scene.add(new THREE.AmbientLight(0xFFFFFF));
 var objLoader1 = new OBJLoader2();
 objLoader1.load('assets/object1.obj', (root) => {
        layer1.scene.add(root);
  });
  var layer2 = new Layer(camera);
  composer.addPass(layer2.renderPass);
  layer2.scene.add(new THREE.AmbientLight(0xFFFFFF));
  var objLoader2 = new OBJLoader2();
  objLoader2.load('assets/object2.obj', (root) => {
        layer2.scene.add(root);
  });

我将 material depthTest 设置为 False 但没有任何帮助..

谁能帮我实现我想要的.. 如果有人不明白我说的重叠是什么意思，请看下图..

感谢所有花时间和精力帮助我的人...

Answer 1

您遇到 z-fighting，即两个或多个平面在深度缓冲区中占用相同的 space，因此渲染器不知道在另一个之上渲染哪个平面.单独的渲染顺序并不能解决这个问题，因为它们仍然在同一平面上，无论先绘制哪个。您有几个选项可以解决此问题：

将其中一根光束沿 y 轴稍微向上移动。一小部分会使一个优先于另一个，这个距离可能不会被眼睛注意到。
我看到你的 fiddle，而你忘记将 depthTest: false 添加到你的 material。然而，这会在深度测试其余形状时引起问题，因为一些白色在红色之上，但也有一些红色在白色之上。 fiddle 中的方法仅适用于简单的平面，不适用于更复杂的几何形状。
您可以使用布尔运算将一个形状从另一个形状中移除，例如 CSG。

我认为使用方法 1 可以避免很多麻烦。

Answer 2

您可以使用 polygonOffset 来实现您的目标，它会在写入片段之前修改深度值，以帮助将多边形从彼此移开，而不会在视觉上改变位置：

material.polygonOffset = true;
material.polygonOffsetUnit = 1;
material.polygonOffsetFactor = 1;

这里是 fiddle 演示解决方案：

https://jsfiddle.net/5s8ey0ad/1/

以下是 OpenGL Docs 对多边形偏移的看法：

When GL_POLYGON_OFFSET_FILL, GL_POLYGON_OFFSET_LINE, or GL_POLYGON_OFFSET_POINT is enabled, each fragment's depth value will be offset after it is interpolated from the depth values of the appropriate vertices. The value of the offset is factor×DZ+r×units, where DZ is a measurement of the change in depth relative to the screen area of the polygon, and r is the smallest value that is guaranteed to produce a resolvable offset for a given implementation. The offset is added before the depth test is performed and before the value is written into the depth buffer.

在另一个之上显示网格 |删除重叠 |渲染顺序 | Three.js

Display Mesh On Top Of Another | Remove Overalapping | Render Order | Three.js

render

3d-rendering

overlapping

three.js