Overlay scene with limited height/width

Questions
1

From my previous struggles :wink: I know it’s possible to overlay one scene on top of the other, with them being completely independent: https://playground.babylonjs.com/#BNCG8Y#1

Now is there a way to clip/scale the overlaid scene so it only shows up in a 300x300px window on the bottom left or something? I know I can just reposition the camera, but then I have no clipping so the content can spill out. And when using two canvases I don’t have a transparent overlay. Any way to combine both at the same time?

I haven’t found anything in the docs regarding this. If it’s not possible, no biggie, just aksing for ideas cause I’m stumped…

2

Maybe you can render the scene you want to scale in a render target texture instead of in the canvas, then use this texture (maybe on a plane displayed by the first scene - you would then need to position this plane in the scene to achieve what you want).

1 Like
3

Thanks, that was an idea as well, but then I’d run into the exact same problem described in the first thread I linked. You can try the two playgrounds there and see that the cameras are “synchronized” to each other, which I definitely don’t want.

The only solution I can think of that might work (but would be very hacky) is to create three scenes:

  1. for the background
  2. for the “window”, containing only a plane with a render target texture
  3. for the stuff I want to render

Cameras 2 and 3 would be synchronized to each other and would probably just have a forward-facing vector. I really don’t want to try this though (for now) because it might lead to a plethora of other bugs/unexpected behavior.

4

You can keep the plane at the same location in the screen whatever the camera does, see Camera, maintain the meshes at the same position relative to screen during screen resize

The two blocks at the bottom are in the same scene than the sphere, but you can see that when you move/rotation the camera, the blocks don’t move.

5

That is not the issue, please have a look at the playground in my previous thread:

Babylon.js Playground (the whole setup)
Babylon.js Playground (just the baublesScene)

Before I asked this, I did manage to put a plane with a RenderTargetTexture right in front of the first scene’s camera, like you are suggesting. But the texture was wrong (due to the “synchronized” camera) just like in the first playground. In the second playground you can see what the overlay (the baublesScene in my case) is actually supposed to look like. In the same thread @Deltakosh confirmed that Babylon.js indeed does not support what I am trying to achieve there.

The reason I needed two separate scenes back then was to control the lighting separately.

Now, the reason is that I want a clipped area that does not span the whole screen, as described in the OP.

6

Your “Whole setup” scene does not work because of two things:

  • as you don’t call baublesScene.render(), a number of things are not done, notably computing the world matrices of the meshes => you have to do it yourself
  • the RTT should be attached to the baublesScene, not the scene

With those corrections, it does work:

https://playground.babylonjs.com/#BNCG8Y#3

Now, I think you will want to use the scale/offset of the layer to scale/move the baubles scene… I tried and it did not work, because those scale/offset are not for the layer itself but for the uv coordinates of the texture.

I have updated the layer vertex shader to update the scale/offset of the layer instead of the texture, here’s the result:

https://playground.babylonjs.com/#BNCG8Y#4

To see things better, I have cleared the baubles scene with a transparent green color.

Is it what you wanted to do?

1 Like
7

That is perfect! Thank you so much for taking the time to fix it!

In hindsight it seems obvious what to do, but you know how it is…