Multiple cameras, viewport clear

Hi!

I have an editor app where 2 cameras set up like this:
https://doc.babylonjs.com/how_to/how_to_use_multi-views

The idea is to have 2 viewports, one for the UI and one for a smaller editor window: this window is still rendered using the same context and canvas, but it has its own camera with its own viewport.
You can look at this screenshot from Apple’s “Motion” app to get an idea: it has a viewport with black background, and someoverlaying UI elements (3d gizmo in the bottom left corner, buttons).

Is it possible to set the clear color for each camera separately? I guess they only way to do that would be to have 2 separate scenes, each having its own camera, viewport, and issuing 2 draw calls in the render loop?

Best is to use both viewport and scissor: Babylon.js Playground

1 Like

Thank you, that looks promising!
I inspected the demo, it seem to me by the code that it should render half of the canvas in red and the other half in green background? What I’m seeing now is that only the left side is rendered, with green clear color.

I think it looks ok if I change the second scissor line to something like this:

scene.getEngine().enableScissor(w * 0.5, 0, w * 0.5, h);

Yup definitely :slight_smile: shared the wrong PG … Forgot to save before sharing…

https://playground.babylonjs.com/#8R3AJX#1

1 Like