1

我有 2 个对象网格。他们都有一些共同的领域，但并不完全。

我通过将它们添加到屏幕来显示它们......就像另一个上面的网格一样。但是下部网格与顶部网格重叠但我想要实现的是下部网格应始终保持在下方，而不会重叠并为整个顶部网格留出空间。

我经历了这个小提琴..用渲染顺序摆弄

我试过这样的东西..

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 ..另一个 Fiddle 但是当我跑进去时，我只得到下层或上层网格。但我想看到两者没有任何重叠..

 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);
  });

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

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

网格图像的重叠 - 示例

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

4

2 回答 2

4

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

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

这是一个演示解决方案的小提琴：

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

以下是OpenGL Docs关于多边形偏移的内容：

当启用 GL_POLYGON_OFFSET_FILL、GL_POLYGON_OFFSET_LINE 或 GL_POLYGON_OFFSET_POINT 时，每个片段的深度值将在从相应顶点的深度值插值后偏移。offset 的值是 factor×DZ+r×units，其中 DZ 是相对于多边形屏幕区域的深度变化的度量，r 是保证为给定的给定偏移量产生可解析偏移量的最小值执行。在执行深度测试之前和将值写入深度缓冲区之前添加偏移量。

于 2020-05-15T19:58:10.647 回答
1

您正在经历z-fighting，即两个或多个平面占据 depthBuffer 中的相同空间，因此渲染器不知道要在另一个之上渲染哪个平面。单独的渲染顺序并不能解决这个问题，因为它们仍然在同一个平面上，无论哪个先绘制。您有几个选项可以解决此问题：

  1. 在 y 轴上稍微向上移动一个光束。一小部分会使一个优先级高于另一个，这个距离可能不会被眼睛注意到。
  2. 我看到了你的小提琴，你忘了添加depthTest: false到你的材料中。但是，这会在对形状的其余部分进行深度测试时引起问题，因为一些白色位于红色之上，但也有一些红色位于白色之上。小提琴中的方法仅在它是一个简单的平面而不是更复杂的几何图形时才有效。
  3. 您可以使用布尔运算从另一个形状中删除一个形状，例如CSG。

我认为通过使用方法#1，你会省去很多麻烦。

于 2020-05-15T18:45:45.697 回答