Multi-Camera controls

Hey guys,

I have 2 camera for the same scene.
Camera1 covers full screen viewport and faces a lot of meshes.
Camera2 is a mini-sized compass that is facing an axis mesh somewhere in the scene (far from where camera1 is pointing).

How can I make it so that Camera2 is infront of the meshes in camera1? This disables the clickable action manager meshes from camera1.
I want to make camera2 to be in the front of activecamera and have the meshes remain clickable.

Is there a better alternative to creating a mini corner axis compass than having multiple camera?



I will recommend using two scenes :slight_smile: Onf or your main scene and a second one for your compass: Use Multiple Scenes - Babylon.js Documentation

Thank you! if both scenes have their own listener, will they both be utilizable in respect to their sizes? I tried to add onPointerObservable click to each scene and it seems to trigger both despite having one of the scene having smaller camera viewport.

Yes they will both listen to canvas events. You can call scene.attachControl() / detachControl() when you want based on where the user click

what you can do still is to play with camera.viewport to reduce the surface where the camera get the events

Here is a modified playground from the multiple scenes example given. I’ve added listener to each scene, but it seems to be triggered on both scenes despite having a smaller viewport on cam2.

Yes it was a bad idea :slight_smile:

So unfortunately you may have to handle which scene is active (by playing with attach / detachControl)

I figured that everything (engine, scene, camera control) is attached to an html canvas. Do you reckon this would solve the problem if I had multiple canvas? since camera control is attached to a canvas, so viewport size wouldn’t affect the camera listener, but canvas would?

EDIT: nvm, this would require multiple enegines.

1 Like

Correct :slight_smile:

Hey Delta, just came across the new multi-canvas implementation: Use Multiple Canvases with one Engine - Babylon.js Documentation . I saw the playground on one of the forum posts and modified them with listeners : The listeners work fine through the solution you provided (by attach/detaching control using canvas mouseover) but apparently it seems to be creating 2 engines. I tried to use the same basic babylon engine for the meshes inside the multi-scene, but it wouldn’t work. Do you by any chance provide the playground of the demo that uses 1 engine for multi-scene?


Well you are creating a 2nd engine around line #135 :slight_smile: so yeah you have 2 engines :slight_smile:

Not sure what is your question? Maybe you can simplify the PG a bit as there is a lot of not needed code

I actually managed to make it work with 2 scenes. I needed 2 clickable meshes on 2 different respective cameras with different sized viewports. Somehow managed to make it work by re-ordering active camera push and attach controls.

Thanks for all the help