New feature: Multi canvases rendering

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:

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


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

I was just needing something like this!

Amazing, way to be spot on.

Can you do it with different scenes?

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?

Will be in next nightly:


That is really great!

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

1 Like

excellent !

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

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.

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!

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)

basically I am trying to do something like this:

this._slots = []
let self = this
            for(let i=0; i<self.assignedSlots; i++){
                let slot = self.slots[i]                

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:

            for(let i=0; i<self.assignedSlots; i++){
                let slot = self.slots[i]
                if(engine.activeView.canvas === slot.canvas){

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

1 Like

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

hmmm this is gonna be a tricky PG but ok.

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

got it.


Ive been wanting to do ShaderMonkey for DAYYYYYYYYSSS

1 Like

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

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

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: