New feature: Multi canvases rendering

aFalcon · October 23, 2019, 4:34pm

aFalcon on it… : )

Pryme8 · October 23, 2019, 4:34pm

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 · October 23, 2019, 5:04pm

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 · October 23, 2019, 5:16pm

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 · October 23, 2019, 5:37pm

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 · October 23, 2019, 10:27pm

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

mpib13 · December 12, 2019, 12:26am

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 · December 12, 2019, 3:17am

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

mpib13 · December 12, 2019, 4:57am

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

Thanks.

mpib13 · December 12, 2019, 5:08am

Here is another detailed screenshot:

Deltakosh · December 12, 2019, 3:36pm

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 · December 12, 2019, 4:26pm

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 · December 12, 2019, 4:51pm

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

The profile:

mpib13 · January 6, 2020, 3:34pm

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 · January 6, 2020, 3:43pm

Can you repro in the playground?

mpib13 · January 6, 2020, 5:09pm

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

Thanks.

Deltakosh · January 6, 2020, 5:58pm

Why do you create a second engine?

mpib13 · January 6, 2020, 6:26pm

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 · January 6, 2020, 6:27pm

You need to keep only one engine and multiple canvas

mpib13 · January 6, 2020, 8:02pm

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