Hello, there! I need your help. I am absolute beginner in 3D Web graphics and I have problem with displaying 3D model on my site (only approximately 17 of all my models are well-rendered) In “Console” I have the following information:
“Uncaught Error: Unable to create dynamic uniform buffer”
“WARNING: Too many active WebGL contexts. Oldest context will be lost.”
“WebGL context lost.”
As I know, there is limitation in rendering 3D models. So how can I cope with it?
Thanks in advance!)
How many times are you creating the Babylon.js engine? Each engine instance creates a new webGL context I believe.
I’m going to move this topic out of the content creation topics to general Questions as well.
pinging @Deltakosh
I am planning to create up to 30 models, but I have previously noticed this problem after creating 16 models.
How are you creating these models?
You should not need more than one single engine (unless specific case). So to @Drigax question: can you shar your code in the Playground?
I have found different codes, put it together and created html canvas for each model
I have no idea how to create one universal engine for my project. It is astronomical site, which demonstrate different scale. All of the objects are placed vertically from top to bottom.
3D models are planets that have rotation animation
Maybe this could help?
https://doc.babylonjs.com/how_to/how_to_use_multi-views
Thanks!)
By the way, I have linked texture from image hosting service Imgur. And its resolution is 8K (most of my models have high resolution). Maybe this can cause this problem?
Looking at your playground, line 4 is what creates the BabylonEngine. You only need a single engine to power rendering to all the canvasses you create for all your models. Creating too many engines may be causing you to run into these WebGL errors. Can you try modifying your project to create a single engine instance, and reusing it for all the scenes you want to create?
Alternatively, you can load all your models into the same or multiple scenes, and render each camera to a separate canvas via multi canvases:
https://doc.babylonjs.com/how_to/multi_canvases
So, as I understood, this must be one engine. In this case, can I use one camera per one targeted 3D model and canvas?
Yes, you can register additional canvasses to be rendered using the engine via something similar to:
let view = engine.registerView(document.getElementById("renderCanvas1"), camera1);
For as many canvas/model/camera pairs you require.
You can even have all the camera/model pairs exist in separate scenes, as long as the scenes are hooked into the render loop, similar to your original code snippet:
let myRenderLoop = () => {
if (engine.activeView.camera === undefined) {
mainScene.render();
} else if (engine.activeView.target === view1) {
scene1.render();
}
}
....
engine.runRenderLoop(myRenderLoop);
Yes, it works. I’ve created test page based on this one (https://www.babylonjs.com/demos/views).
But there is still one question can I implement interactive control (as on the first canvas) on all canvases?
You can but you need to specify which one you want to be interactive with Use Multiple Canvases with one Engine - Babylon.js Documentation
Sorry for disturbing you with a noob question. I am trying to do something with one engine, but cannot get the same result as you can see in the example of my project with multiple engines. The one thing I can do with one engine it only displays them, but not interact with them separately.
Well you have to do what I linked in the doc, when the user pick a canvas you have to attach the scene to it