Mesh On Top Of Another | Remove overlapping | Render Order

Questions
1

I have 2 obj meshes.
They both have some common areas but not completely.

I displayed them both by adding them to screen …
Just like a mesh on top of another.
But the lower mesh overlaps the top mesh
But what I want to acheive is the lower mesh should always stay below without overlapping and giving the space to the entire top mesh.

I went through this fiddle…Fiddle with renderorder

And I tried something with this like…

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

But I don’t know for what reason the overlap still stays …

I tried…

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

Then I tried going through this Fiddle … Another Fiddle
But when I run in I get only the lower or the upper mesh .
But I want to see both without any overlaps…

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

I made the material depthTest to False
But Nothing Helped…

Can anyone help me achieve what I wanted …
If anyone couldn’t figure what I mean by overlapping see the image below…

maxresdefault (1)
maxresdefault (1)1280×720 75.9 KB

And Thanks to anyone who took time and effort to go through and help me…

2

That’s typically referred to as “z fighting” and render order can’t fix it. It happens because your two meshes are directly on top of each other and are trying to write to the same depth in the depth buffer. Because of rounding errors you get some fragments that fail the depth test and others that pass when writing the last mesh.

One fix for this is to bias the depth value of one of the meshes forward or backward a little bit to avoid the floating point issue. Look into setting Material.polygonOffset on the white mesh to see if that helps.

2 Likes
3

I Think I can’t change the mesh’s postition
Because I need to achieve the same with the same position staying close and not overlapping … The beam is just an example … I do face the same issue with a sphere and cube…

4

polygonOffset does not change the position of the mesh. It just changes the z value slightly when writing to the depth buffer to solve exactly the problem you are describing. If you have a jsfiddle demonstrating the problem I can add polygon offset to it.

1 Like
5

/cc

1 Like
6

I put a fiddle together showing the solution:

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

And some OpenGL docs on the functionality:

https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/glPolygonOffset.xhtml

I went ahead and put it in the stackoverflow question, too.

1 Like
7

Thankyou so much your fiddle helped