Multiple scenes on different canvas using single engine

Hey guys,

I recently had an issues while creating two unique scenes, on two unique canvases, using the same Babylon engine, following the documentation here:


And so I followed those and it seemed like they were incomplete because it wouldn’t work as described for me. So I looked through many different playgrounds and noticed they don’t work for me as they were built to work.

I’m wondering if there is a bug causing these issues, and is subsequently causing issues for what I’m trying to do. Here are the PGs with bugs:
(the spheres don’t appear for me): New feature: Multi canvases rendering

(the second canvas just re-renders the first canvas): New feature: Multi canvases rendering

I’m basically trying to do something like this:

But with one engine.

The canvas of the engine is not resized to match the size of the current view canvas, that’s why it does not work.

@Deltakosh I can see the code to resize the engine is:

        const dimsChanged =
            canvas.width !== canvas.clientWidth ||
            canvas.height !== canvas.clientHeight;
        if (canvas.clientWidth && canvas.clientHeight && dimsChanged) {
            canvas.width = canvas.clientWidth;
            canvas.height = canvas.clientHeight;
            parent.width = canvas.clientWidth;
            parent.height = canvas.clientHeight;
            this.resize();
        }

Note that the current code does not work because width === clientWidth and height === clientHeight after creation time (maybe the browser implementation of canvas creation changed since this code has been done?).

It’s already something that had been changed from:

        if (canvas.clientWidth && canvas.clientHeight) {
            canvas.width = canvas.clientWidth;
            canvas.height = canvas.clientHeight;
            parent.width = canvas.clientWidth;
            parent.height = canvas.clientHeight;
            this.resize();
        }

I guess this one was not ok because it resized the engine for each view/each frame.

I wonder if the right code would not be:

        const dimsChanged =
            canvas.clientWidth !== parent.width ||
            canvas.clientHeight !== parent.height;
        if (canvas.clientWidth && canvas.clientHeight && dimsChanged) {
            canvas.width = canvas.clientWidth;
            canvas.height = canvas.clientHeight;
            parent.width = canvas.clientWidth;
            parent.height = canvas.clientHeight;
            this.resize(true);
        }

As we render in the canvas of the engine (parent), we only need to resize it if it is not already the size of the current view canvas.

1 Like

I tend to agree. We should try

PR is here:

Note that the size of the canvas should be set after calling registerView and not before, because the function is setting the canvas size with the default canvas size.

This PG should work after the PR is merged: https://playground.babylonjs.com/#LEIZ83#37

@Evgeni_Popov I’m having trouble with this in 4.2.0, although my problem is a bit different.

If I have multiple canvas views on the one page, but each canvas is a different size (inside a different sized container) then the resizing causes flickering that shows the different sized canvases in the one view.

If all canvases are the same size then it’s fine, but that’s not my use case.

@Evgeni_Popov works fine in 5.0.0-alpha.31 so Ignore my comment. :slight_smile: Thanks.

2 Likes