New feature: Multi canvases rendering

Announcements
1

It was a long awaited feature and I’m glad it is now here!
Starting with current nightly, you can use multiple canvases with one unique engine:

image
image.jpg1983×1543 365 KB

Demo: Babylon.js - Multi views demo
Doc: Use Multiple Canvases - Babylon.js Documentation

18 Likes
2

Really cool! I already can think about several use cases! :smiley:

Could we imagine to have different scenes also? I wonder if it would mean performance improvement to have a shared engine?

Top Top Top :wink:

1 Like
3

I was just needing something like this!

Amazing, way to be spot on.

Can you do it with different scenes?

4

not yet but I want too.

What if I expose a engine.activeView so you can check it in your render loop to call the correct scene.render?

6

Will be in next nightly:
https://doc.babylonjs.com/how_to/multi_canvases#multi-scenes

2 Likes
7

That is really great!

8

This is great!, now we can have two scenes without multiple engines or viewport/input hacks :smiley:

1 Like
9

excellent !

10

If I had that when I made my MMO editor … It’s good news that this is now possible. 1 engine and several different scene. Cool. Thanks

1 Like
11

What if I don’t want a default scene?

And want to add some scenes to the renderstack post page compilation?

I started dinking around with this, and I see the 4 scenes I created but am not sure how to get them to start rending without a default scene.

12

Something like this could be used to run a scene on a server then have multiple cameras and have a canvas of a client’s pc with a camera connected to each of them. That would be cool!

13

No need for a default scene as you control the render loop. You totally control the rendering here(please tell me if doc is unclear)

14

basically I am trying to do something like this:

this._slots = []
let self = this
engine.runRenderLoop(()=>{
            for(let i=0; i<self.assignedSlots; i++){
                let slot = self.slots[i]                
                slot.scene.render()
            }
        })

with the slots being an object that holds a scene inside it. It looks like I have them rendering, but I am not seeing the changes I am making to the scenes. It seems like the last view is overwriting all the other ones. Give me a second to figure out if Im just flubbing this.

Ok I got this:

engine.runRenderLoop(()=>{
            for(let i=0; i<self.assignedSlots; i++){
                let slot = self.slots[i]
                if(engine.activeView.canvas === slot.canvas){
                    console.log(engine.activeView)
                    slot.scene.render()
                    return
                }
            }
        })

“Working”, but it only seems to render my first scene to all the outputs.

1 Like
15

if you can repro the issue in the PG I will make sure to fix it

16

hmmm this is gonna be a tricky PG but ok.

17

Or edit the source of the demo. Anything that I can use to debug (if there is an issue;))

18

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

got it.

Awesome:

image
image.png1680×1050 228 KB

Ive been wanting to do ShaderMonkey for DAYYYYYYYYSSS

1 Like
19

HUge! I’ll fix the doc for the wrong example

20

Diving Deep:
How would I make the contents renderOnce unless the mouse is over the canvas that is associated.

Evil Laugh

btw I have a website with 32 seperate simple scenes running now… way to be cool BJS.

1 Like
21

It is up to you to call scene.render for each activeView. You can decide what will let the scene render. THis is the beauty of this API :wink: