Understanding how to render glb files without delay

Content creation (3dsMax, Maya, Blender, glTF)
1

Hi all,

I am not sure if this question should go here or in questions. I hope someone can move it, if appropriate.

I am trying to develop a custom 3D map for a TTRPG campaign. I am still at the very start of everything. With some help from AI and the internet, I have figured out the basic steps to set up my skybox and place some models in it. I also have added some functionality for moving the camera onto an object when it is clicked. All in all, most of the stuff I want to do works in principle.

However, as soon as I try to use an external model, things go wrong. I use the system locally, hosting a server with http-server in the root directory of the project.

I use an asset manager to load the corresponding files and add functionality to the meshes once they are loaded. However, no matter how simple the mesh, the whole thing freezes for a short while when trying to render the imported mesh (.glb file). This means if the mesh is not visible in the initial view of the camera upon loading, then everything works fine until the camera is panned onto where the imported model is supposed to be. Then, everything freezes, and it takes quite a while for the model to show.

I have tried to replicate my code in a babylon.js playground, but it didn’t work properly. This is probably already a bad sign. However, here is a GitHub repository with my code so far:

I know the code is kind of a mess, but I would still be grateful for help with the current problem and maybe also general recommendations since I am new to Babylon.js and 3D modeling in general.

Thanks in advance,
Najaye

2

Shader compilation takes time, and that’s what causes the freezes you experience when showing a mesh for the first time.

You can try to use scene.executeWhenReady(() => { ... }, true) to make sure shaders are compiled before displaying the first frame. You can also search the forum for executeWhenReady, I think you will get a lot of posts related to this problem.

3

Thanks, this works. However, I have one more question. Now the loading process seems to freeze a couple of times (I get a browser does not respond kind of window). Is there a way to make the loading process more stable?

4

Are you able to setup a repro in the Playground? If the browser freezes, it means the loading (or the processing after load) takes too much time, but I don’t see what could take so long in this processing…

5

I tried it again:

This one somehow only works when I copy the code into a newly opened playground. If I try to reload it, it complains about modifying the engine. However, if I leave out the engine initiation, it complains that there is no engine.

Maybe it is confused by the createScene() function because it also returns that assetsLoaded thing?

6

I could not open your PG, it timeouts after some time. However, I could see a bit of your code: you should not create the canvas / engine. These are already provided for you by the Playground.

Take the default playground as a model: https://playground.babylonjs.com/