Hi all. My first post here, i do apologize for my English and also i am a completely newbie regarding Three.JS. My question is, i have a scene with 3 GLB models and as the scene loads starts with the smallest file, renders then the browser hangs moves to the second biggest one, same process and finally third model and then the scene renders flawless. Is there an event that detects that all geometry, shaders and textures have been sent to the GPU of all models and the scene is now rendering 100% with no further browser hangs?
Thanks in advance.
The performance issue is not necessarily produce by the glTF parsing overhead. In most cases, the compilation of shader programs as well as the initial texture upload/decode usually causes high frametimes. There is not much what you can do to avoid this as a beginner. If possible, try to start rendering as soon as all assets are loaded so you have just a single delay at the beginning.
The usage of ImageBitmapLoader can help to mitigate the texture related overhead, but it’s not that easy to integrate it into GLTFLoader so far. However, this might change in the future.
I’m curious about this issue as well. I’ve seen people setting every object’s frustumCulled to false for the first frame of the app to avoid lags later on. Is there a way to get an estimate for the moment all compilation ends, other than adding a couple, random, extra seconds to the loading mechanism with setTimeout after loadingManager finishes?
1 Like
Hi @Mugen87 thanks very much for the reply, i am not so concerned about the delays as i can use a preloader to cover the canvas the problem is that i need some sort of event that is called when there is no interruptions in the frame rate so i can close the preloader and then render the scene, if it makes any sense…
1 Like
Can this be handled by not displaying the first frame (like maybe rendering to a texture, moving the entire canvas off screen etc)?