New feature: Multi canvases rendering

Why do you create a second engine?

I created a second engine just for reproducing the issue with the keyboard input using the multi canvas, because according to the documentation:

Please note that when a view is registered, the canvas used to initialized the Engine becomes a “working” canvas and is no more supposed to be displayed directly.,

I will have to remove the “renderCanvas” element from the DOM, no? Or can I recreate the existing engine with an empty canvas?

Do you want me to update the playground with just one engine?


You need to keep only one engine and multiple canvas :slight_smile:

Ok, I updated the playground using only one engine:

I’m still not receiving any input from the Keyboard :frowning:

Thank you

Ok gotcha!!! I understand the issue now :smiley:
as the canvas is hidden you cannot use the default input manager directly (for now)

Short term solution: you can addEventListener on your 2 canvases

Ok, thank you very much Deltakosh.


Hi Deltakosh,

I finally had to implement the Viewport feature instead of the Multi canvas with one engine because of the CPU usage. Whenever you overlay an HTML Element in the canvas in Angular, the CPU jumps from 7% to 60% with an i7 processor and it never goes down. I cannot reproduce it in the playground, but in the demo, if you inspect an element on chrome, it creates an overlay element (a blue transparent box) when you have the mouse over and the CPU usage increases.

Also I found that you cannot show the inspector by default if you are using the multi canvas. I get the error: ERROR DOMException: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The image argument is a canvas element with a width or height of 0.

I have a couple of questions: 1) In either approach (viewport or multi-canvas), is there a way to avoid duplicating the Draw Calls and Active Faces whenever you add a new camera to the active cameras array or register a new view in the engine? If all the cameras are seeing the same cube, is there a way to only have one draw call instead of 2, 3 or 4 (depending on the number of cameras)?

  1. How can I display the number of draw calls without the inspector?

Thank you.


Inspector should work in a multi canvas approach as long as you attach it to one canvas.

  1. If you just add a new camera, it should not change the draw calls, unless you also add it to the scene.activeCameras array
  2. Optimize your scene - Babylon.js Documentation

Hi Deltakosh,

Thank you very much for your response.

Oh, I see that it only duplicates the draw calls when you add the cameras to the scene.activeCameras array, but not when you register a view with the multi-canvas approach.

I’m trying to build a mesh with multiple SPS and then display that mesh from different views. I’m displaying around 27 million faces at a time. So I’m creating other 3 cameras and registering each one to a different canvas. I see that the draw calls are the same, but the GPU usage duplicates. Is there anything I can do to improve the GPU, whenever I enabled the other 3 cameras and views, and the register them into the engine?

With only one camera and one view registered, it runs smoothly around 55 FPS. But with the other 3 cameras enabled, the FPS goes down to 20.


Woot this is impressive!

Unfortunately if you render it from 3 point of views, it has to be rendered 3 times :frowning:

Thank you for your answer.

Yes, SPS are very performant! :slight_smile:

1 Like