Uncaught Error: Unable to create uniform buffer

Hi…I am trying to display a basic scene consisting of a hemispheric light, box and ground in a full screen modal in a next.js app using the documentation of babylon-react as shown here
https://brianzinn.github.io/react-babylonjs/guides/react-with-declarative-babylonjs.
The scene and the objects are displayed but I am getting the following error
Uncaught Error: Unable to create uniform buffer
at Engines_thinEngine_js__WEBPACK_IMPORTED_MODULE_0_.ThinEngine.createUniformBuffer (engine.uniformBuffer.js?28d3:6:1)
at UniformBuffer._rebuild (uniformBuffer.js?5465:328:1)
at UniformBuffer.create (uniformBuffer.js?5465:316:1)
at HemisphericLight._buildUniformLayout (hemisphericLight.js?80c1:40:1)
at new Light (light.js?13d3:215:1)
at new HemisphericLight (hemisphericLight.js?80c1:25:1)
at createInstance (react-babylonjs.js?5cb0:1:475750)
at completeWork (react-reconciler.development.js?3a0c:10851:1)
at completeUnitOfWork (react-reconciler.development.js?3a0c:18725:1)
at performUnitOfWork (react-reconciler.development.js?3a0c:18697:1)
at workLoopSync (react-reconciler.development.js?3a0c:18597:1)
at renderRootSync (react-reconciler.development.js?3a0c:18565:1)
at recoverFromConcurrentError (react-reconciler.development.js?3a0c:17948:1)
at performSyncWorkOnRoot (react-reconciler.development.js?3a0c:18194:1)
at flushSyncCallbacks (react-reconciler.development.js?3a0c:2936:1)
at workLoop (scheduler.development.js?13f7:266:1)
at flushWork (scheduler.development.js?13f7:239:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js?13f7:533:1)

Please note that the scene is rendered properly though I am getting the above error.
Also I don’t get this error when I am using the same code and creating the scene in a normal page of the app.
Can someone please explain what is happening ? why am I getting this error in the modal and not in normal page?
And is there a way to catch this error so that the user does not get to see this error while using the app? Sorry if this is a basic question because I am new to Babylon.js

Welcome aboard!

Try to set engine.disableUniformBuffers = true at start and see if that helps.

cc @brianzinn in case it rings a bell for him.

1 Like

What version of Babylon.js? It looks like a bug somewhere :smiling_face:

Hi @Evgeni_Popov …Thanks for replying. I am using the declarative approach for calling the engine so I am not sure how I can set disableUniformBuffers = true for the engine. can you please help me with that?
Secondly, I also found the following error in the logs which I had not noticed earlier.
BJS - [08:57:59]: WebGL context lost.
after this I get a lot of data as “observable from engine”
Maybe this is what causing the above error?

Hi @brianzinn …Thanks for your reply…I am using babylon 5.54.0
I am trying to display a list of 3d products and when user clicks on one of them he will see all the details of the product in a fullscreen modal. The data will also include a scene in which the 3d model of the product is visible.
I thought of first starting with a simple scene consisting of only box and a ground with light.
Everything is working fine , even the scene is displayed with the box and ground but I am getting the above error.
I am using declarative approach of using babylon-react.

That’s a new version! I’ll try that version out tomorrow and see if I can reproduce. I’ve been looking for a 6.0 RC to try out as well, but that’s not published yet it seems like it will be a bump at a random point in time? Hoping it’s not a timing issue.

@brianzinn Okk…so I tried making a simple page having just a button , when this button is clicked a full screen modal will appear showing the scene.
Amazingly it works perfectly fine and I noticed that this message “Babylon.js v5.54.0 - WebGL2 - Parallel shader compilation” is being called only once and the scene is getting displayed.
But when I am clicking on my product the above message “Babylon.js v5.54.0 - WebGL2 - Parallel shader compilation” is being called multiple times , approx 19-20 times along with a warning “thinEngine.js?7597:534 WARNING: Too many active WebGL contexts. Oldest context will be lost.” after which the error " Unable to create uniform buffer" shows and then “WebGL context lost.”
Is there any reason why/how this would happen? or is it normal?

It’s not normal, it means the engine is created several times when you click the button. You must have a problem somewhere in your code that makes you call the creation engine code multiple times.

1 Like

Are you doing something to trigger that the modal is rebuilt (ie: changing key or not memolized)? Can you share a repro?

edit: that version works for me. it could be fast refresh in your console - or can you make sure you are not tearing down the engine and re-creating?

Hi guys…I am sorry I couldn’t reply earlier. Its because of my code only that the engine is being created again and again. I tried finding the cause but could not yet find the problem.
But I tried the imperative approach and could build the engine properly without creating extra engines and without any errors.
I will try and share a repro.