Multiple canvases with multiple engines gets context mixed up when initialised at the same time

Bugs
1

Hi,

I’m porting a library of mine to BabylonJS, and it’s quite often used with multiple separate instances on the same page. I have a test instance setup within my repo that loads two instances at once, which causes rendering bugs and errors in the console related to an object not belonging to the context. WebGL: INVALID_OPERATION: bindBufferBase: object does not belong to this context.

From what I can tell the issue is unlikely to be within my code, as nothing is stored globally, and I don’t call any static Babylon functions outside of setting instanced mesh transparency ordering.

One thing that I’ve tried that does resolve this issue, is to setup the second renderer in the .then(()=>{}) callback of the first, which isn’t really a solution given this is generally used in different react components etc, where each component has an individual lifecycle.

Am I doing something wrong? Or does Babylon just not support setting up multiple engines/scenes/canvases at the same time?

Reproduction steps:

2

Welcome. BJS does allow multiples scenes for sure. Think defining what constitutes an instance would be useful.

From the error, seems like an instance is an Engine, as there is a 1 to 1 relationship between them and global contexts.

Are trying to interact between what your instances?

3

Thanks, yeah by instance I am referring to a separate everything. Engine, scene, canvas, etc. There’s nothing shared in the code.

The issue only occurs if two Babylon engines are initialising at once, if one initialises after the other it work fine.

4

Welcome to the community @me4502 :slight_smile:

Unfortunately running your repro I can see:

image
image1922×365 81.2 KB

There is quite a few places where engine/scene have been made optional as the general use case is only 1 per page so I am pretty sure that one of our inferred engine is taking that last created one → wrong one in your case.

Would be amazing if I could repro so that I can help either adapt the code and/or ensure you can pass the required engine in the functionality you are relying on.

5

Ohhh I was able to repro after a few reload :slight_smile:

Basically, I am seeing code like MeshBuilder.CreateBox which is not taking the scene parameter in. The first thing you should try is to ensure in your code that you are always precising both scene or engine even when optional in function signatures for Babylon. I will have a look a bit later if I can spot the culprit.

6

@me4502 , found it in your loader class:

image
image2402×706 142 KB

This should work for you as well !!!

Let us know how your migration is going and if you need any help :slight_smile:

1 Like
7

hi @me4502 - welcome to the forum! It looks like your issue has been solved by sebavan. One suggestion is that you may want to consider having babylonjs as a peer dependency.

I haven’t looked in detail at your project as to why you are using 2 engines, but if needed you can use multiple canvases on the same engine and also multiple viewports on the same canvas :slight_smile: From your test page it looks like you are loading multiple engines for different SCHEM, so then this likely does not apply!

2 Likes
8

Thanks! I thought I’d checked over everything but didn’t even think to check whether creating the mesh/geometry would potentially take a scene as well. In general most stuff in the porting is going fine, just a lot of stuff that I need to go through and test :sweat_smile:

2 Likes
9

Thanks, yeah - Given the way this library is used it’d be semi-difficult to do it that way, however I might try to add an optional parameter to allow providing an Engine, and if that’s done setting up viewports for canvases etc.

1 Like