New feature: Multi canvases rendering

Can you do a profile (using f12 profiler) to see what is eating your CPU?

The forum does not allow me to attach the .json profile. I’m posting a screenshot:


Here is another detailed screenshot:

Well based on your profile I see that he renderViews is ok (it is called per frame to render each views) but you have a GIGANTIC major garbage collect in the second screenshot

This is probably the root cause. And it is coming from your angular code

I expanded Major GC and I think it has to do with the renderViews call, because this only happens after I register the view(s) in the engine.

If I use the same Angular code, but I just create the engine with a single canvas, it just works fine with no performance issues.

Also tried setting zone.js __Zone_disable_requestAnimationFrame = true, which it is now not triggered every frame and the Major GC is not appear anymore in the profiler, but the CPU usage is still very high.

Thanks Deltakosh

Well that must be something else as the code is running well here:

The profile:

Hello Deltakosh,

Thanks for your help. I found some conflicts with Angular, it seems to work fine.

Now, I’m trying to add the “onKeyboardObservable” to the scene, but it doesn’t work with the multi-canvas feature, I’m not getting any input.

scene.onKeyboardObservable.add((kbInfo) => {
switch (kbInfo.type) {
case BABYLON.KeyboardEventTypes.KEYDOWN:
console.log("KEY DOWN: ", kbInfo.event.key);
case BABYLON.KeyboardEventTypes.KEYUP:
console.log("KEY UP: ", kbInfo.event.keyCode);


Can you repro in the playground?

Yes, here is the link to the playground:


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