New feature: Multi canvases rendering

[aFalcon]

aFalcon on it… : )

[Pryme8]

https://playground.babylonjs.com/#LEIZ83#2

beat you to it <3 the PG lags a little more then my local demo.

mmmmmmm, good old stress tests…

[aFalcon]

Ok wow, this is interesting… “injected” keeps injecting on rerun. So they accumulate rapidly. You probably knew that. Adding Id to isolate… and can collect those instances back out (if we want).
Or not!

[aFalcon]

I see what you did there… spawning a new scene every… half second!

Lol…

Very helpful - we will need 100. Then…

What I’m trying to TEST is slightly different… think MOVIE PICTURE SHOW. : )

One at a time. Lol. Every 10 seconds - show a new scene.

Is that still 60FPS?

Here is a starter with random colors and scrolling flexbox sceneView:

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

Still working on it…

[aFalcon]

MULTI-CANVAS-STRESS-TESTS:

---

TEST: Multi-Canvas Simultaneous 4 scenes

RESULT: ~60FPS

---

TEST: Multi-Canvas Simultaneous 8 scenes

RESULT: ~50-60FPS

---

TEST: Multi-Canvas Simultaneous 16 scenes

RESULT: ~40-60FPS

---

TEST: Multi-Canvas Simultaneous 32 scenes

RESULT: ~30-60FPS

---

---

NOW FOR SEQUENTIAL TEST… using 32 scenes HIDDEN and showing one at a time (10 sec).

Is it still ~30-60FPS or 60FPS???

Any guesses?
https://playground.babylonjs.com/#L1TX4W#4

---

---

This is why we run TESTS. The results contained TWO GOOD SURPRISES.

Because (as usual) aFalcon makes a mistake - and it turned out to be a performance optimization. I dont know why.

---

FIRST - the SEQUENTIAL TEST - 32 scenes (formerly 30FPS) (without the mistake)

RESULT: solid 60FPS (you might’ve guessed)

SECOND - the SEQUENTIAL TEST (with the mistake of NON-REPLACEMENT)

• not hiding the other scenes that were just shown (oops)

RESULT: SURPRISE! SOLID 60FPS… what???

Anyone know why? aFalcon will just store this away somewhere.

---

Ok now FOR THE BIG TEST!!!

100 scenes (with replacement) - is there a performance hit???

WARNING: this is DANGEROUS.

---

TEST: 100 SEQUENTIAL SCENES - with REPLACEMENT:

RESULT: ~60FPS

TEST it yourself:

https://playground.babylonjs.com/#L1TX4W#7

---

CONCLUSION: aFalcon thinks this is GREAT for making Motion~Picture~Shows in BABYLON.

Thanks @Pryme8.

: )

---

UPDATE: just in case YOU were wondering… and I know you were!

TEST: 1000 scenes
RESULT: 60FPS

I dont know why. And we are going to keep working with this in the future.

[PirateJC]

@aFalcon - Love it! This rocks! Stress test indeed! And standing up well!

[mpib13]

Hi,

I’m trying to implement a toggle between one and four canvases using this new feature in an Angular project. I’m using the example code from the docs.

If you open the project I created in Stackblitz: https://angular-1vgzh3.stackblitz.io/, angular-1vgzh3 - StackBlitz (editable), the CPU going up to 30% without doing anything. I’m using chrome and Angular 7 version.

You can toggle the four canvases by double clicking.

Any suggestions to reduce the CPU usage?

Thanks.

[Deltakosh]

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

[mpib13]

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

Thanks.

[mpib13]

Here is another detailed screenshot:

[Deltakosh]

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

[mpib13]

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

[Deltakosh]

Well that must be something else as the code is running well here:
https://www.babylonjs.com/demos/views/

The profile:

[mpib13]

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);
break;
case BABYLON.KeyboardEventTypes.KEYUP:
console.log("KEY UP: ", kbInfo.event.keyCode);
break;
}
});

Thanks.

[Deltakosh]

Can you repro in the playground?

[mpib13]

Yes, here is the link to the playground: https://playground.babylonjs.com/#IDV1K2#8

Thanks.

[Deltakosh]

Why do you create a second engine?

[mpib13]

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?

Thanks.

[Deltakosh]

You need to keep only one engine and multiple canvas

[mpib13]

Ok, I updated the playground using only one engine: https://playground.babylonjs.com/#IDV1K2#15

I’m still not receiving any input from the Keyboard

Thank you