I have a simple scene that comprise of:-
a. A simple car and gird(for ground).
b. In the renderloop, I add a map geometry(custom mesh(vector geometries)). There are 10-15 custom mesh object containing large number of polygons.
The map loaded nicely but when the canvas is clicked for the first time, the scene goes unresponsive for 4-5 seconds and come back to life.
Query 1: How to remove this hang?
Query 2. When 4 canvases(with map loaded) are used instead(each is independent scene). When I reach to the 3rd canvas to interact with it, the scene goes hang and web page becomes unresponsive and finally crashes. We are expect 16 canvases in our use case.
I am not what what is the cause behind how can dig in the problem.
16 webgl canvases is the max per page so you might have one too many.
About the hang a repro in the playground would be great.
Thank you for your kind assistance, I am refactoring my code w.r.t. to given suggestion in Multiple canvas and scene resource management
It seems like multiple canvases are working well on my test application for WebGL.
I created the WebGPU engine with following code.
var engine = null;
var useWebGL = false;
createEngine = async function () {
if (useWebGL){
engine = new BABYLON.Engine(canvas, true);
}
else{
engine = new BABYLON.WebGPUEngine(canvas);
await engine.initAsync();
}
}
It giving me an error.
Query: Is the WebGPU engine supported?
Error:
uniformBuffer.ts:218 Uncaught TypeError: Cannot read properties of undefined (reading 'trackUbosInFrame')
at new e (uniformBuffer.ts:218:36)
at t.createSceneUniformBuffer (scene.ts:1896:26)
at t.mn.createSceneUniformBuffer (engine.multiview.ts:171:12)
at t._createUbo (scene.ts:1499:41)
at new t (scene.ts:1280:14)
at createScene (index.js:3:17)
at index.html:155:22
Webgpu is only supported on Chrome and Edge Canary at the moment with the flag turned on.
You can use BABYLON.WebGPUEngine.IsSupportedAsync to query for support 
Thank you, I am able to build a Multiple canvas example. Here we have a single context and multiple canvases.
The scene comprises of 4 canvas and 3 component a point cloud, grid and custom small map.
- The WebGPU version works good, tested with 2x2 canvas, the following video link is from WebGPU implementation.
In the below video link you can see the behaviour.
The scene is loaded with all three components. The zoom out works (2 figure gesture on Mac) however if I left click the grid to try to rotate the arc camera the scene goes on hang and eventually generate a
It produce and page unresponsive and crashes.
The case is same for multiple canvas with multiple context.
What version are you using ?
@PolygonalSun fixed smthg related to input freezing a while back with an infinite loop which sounds highly similar.
A repro would be really nice ?
I have upgraded my code to
“@babylonjs/core”: “5.0.0-rc.4”,
“@babylonjs/loaders”: “5.0.0-rc.4”,
“@babylonjs/materials”: “5.0.0-rc.4”,
the issue remains.
With 5.0.0-rc.5 I am getting following error, is this expected?
ERROR in ./node_modules/@babylonjs/core/Engines/constants.js 7:4
Module parse failed: Assigning to rvalue (7:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| /** Defines that alpha blending is disabled */
> 0 = 0;
| /** Defines that alpha blending is SRC ALPHA * SRC + DEST */
| 1 = 1;
@ ./node_modules/@babylonjs/core/Engines/index.js 1:0-31 1:0-31
@ ./node_modules/@babylonjs/core/index.js 16:0-35 16:0-35
@ ./src/renderer/babylon/scene.ts 2:0-43 8:38-52 40:31-45
@ ./src/graffiti.ts 4:0-61 4:0-61
webpack 5.69.1 compiled with 1 error in 88446 ms
@PolygonalSun could you have a look ?
@giraphics there was a hicups in the build RC6 has been published and should be ok
1 Like
Hi @PolygonalSun, any suggestions you like to advise.
Sorry I haven’t had a proper chance to dig in and see what’s going on but I wanted to confirm a few things. First, are you seeing this when just when you run in Chrome Canary or is it also in Safari. As far as the input freezing issue, I’m not sure that it’s related as that was specific to Safari. Second, is that error the only thing that pops up in the console when you get the error?
Because of the complexity of the issue, if you have any way to provided us with a way to reproduce this on our end (source, PG, site, etc), that can help us to get a better context to more quickly identify the issue.
Reply: I am in Chrome Canary. I don’t think anything appears in the console expect the crash alert popup.
I will try to recreate the scenario. Our current framework is integrated with our data sources. This issue is still a blocker to us.
I notice that this problem does not exist when point and lines drawn(may they are less) but it is noticeable on polygons(triangles). To further test it I reduced the number of layers, now when I click on the canvas it does hang for a short while but eventually does not crash. It seems with more polygon the issue appears.
I just wanted to follow up and see if there was any luck on recreating the scenario in a PG or sharable code base
Hi @PolygonalSun,
I have noticed that if I reduced the number of geometry objects by making them hide it works. For example, if we have many layers of features and I load all layers but make only 2-3 layers visible. Now, the map happily loads in 16 canvases.
One experiment that I need to try is to make all the map geometries hide and defer their visibility until I click the canvas and do some camera movements.
I couldn’t get the time to replicate, otherwise not sure if possible to share the code with NDA with our organization as the code is bound to our proprietary libs. I will check with the authorities about what else can be done.
It seems clearing the geometry cache has helped fixing this issue.
(rootNode.getChildMeshes(false, (mesh): mesh is BABYLON.Mesh => mesh instanceof BABYLON.Mesh)).forEach(mesh => mesh.geometry.clearCachedData());
2 Likes
I know that this topic was marked as solved. But could you please explain how to increase this limitation to upper? We have a bunch of small canvases and we need like 30-50 per page.
Welcome aboard!
What limitation are you referring to?
16 instances limit (I think it is for engine’s instance) But I found how to solve my task via Using Multiple Canvases | Babylon.js Documentation So, the question is gone)
Now I have cool 3d avatars and for 100 instances it runs smoothly.
3 Likes
