Multiple scenes: front scene clips back scene

Hi there,

I am new here and new to three.js in general.

I am working on a setup that will be very similar to the three.js multiple / elements example. The main difference is that, in the end, I want to be able to mouse hover over any meshes and then these meshes move forward, become larger and overlap the meshes that are next to them.

I have now tried to create a setup to test this. I have noticed that the scene that will be in front of the other scenes needs to be rendered last. But when I do this and scale a certain scene, the edges of this scene will always “clip” the other scenes behind it, although the scene backgrounds are all set to transparent.

Here is a Codepen example I set up that demonstrates the issue.

Is there some way to change the current setup to make the front scene not clip the back ones? Is this maybe something related to the scissors methods (that I do not really understand, but when I remove them, it breaks the sketch)?

Or if this is not possible, are there any other ways to achieve what I’m after? I was thinking that I could also set up multiple canvases, but I have a suspicion that the performance might be much worse when I have 30+ canvases or so. The reason why I need to split this up into separate scenes in the first place is that I need to have an orbit control for each separate mesh.

Thanks a lot!

trych

Edit: a screenshot to give a quick idea of what the issue is (the grey borders indicate the scenes’ original borders, with the scene of the red cube being the larger one in front that overlaps the other scenes).

Hi,
I looked quickly at your example.
Since you re-render multiple times on the same buffer, and you want to paint some pixel more than once (the upscaled scene), you have to precise that the renderer should not clear the buffer before any rendering.

Adding this on line 76 does the trick

  renderer.autoClear = false

But… i expected to have to clear manually the buffer before any render loop.
You put “renderer.clear();”, but when i’m removing the line, the renderer still continue clear somehow (???).

The depth buffer allow nice overlap from one scene to the other:

1 Like

Thanks a lot @jniac, this actually solves my issue.

But… i expected to have to clear manually the buffer before any render loop.
You put “renderer.clear();”, but when i’m removing the line, the renderer still continue clear somehow (???).

I’m not quite sure what to make of this. I mostly copied the code from the sample and also noticed that strange things started to happen once I take some of those renderer lines away. Actually those lines

  renderer.setClearColor(0xffffff, 0);
  renderer.setScissorTest(false);
  renderer.clear();

  renderer.setClearColor( 0xe0e0e0, 0 );
  renderer.setScissorTest(true);

I do not understand at all… Maybe somebody could be so kind and explain to me what’s happening there?

The depth buffer allow nice overlap from one scene to the other:

While this is certainly desired in some circumstances, it’s not so desirable in my setup. Is there any easy way to make sure to always render one of the scene entirely in front of the other one, without intersections?

For sure, if you clear the depth buffer before any new render, you will not have intersection anymore, any rendered pixel being painted at “top” of precedent ones.

Just add this :

renderer.clearDepth()

somewhere, at line 150 by example, it will clear the buffer just before any new render.

1 Like

Thanks a lot @jniac , this works like a charme! Will mark this as solved!

1 Like