How to detect when threejs is rendering

Questions
1

Hey!
I have a world with several levels that, after entering and loading their models from files, they are kept in a data structure for posterior fetching instead of reloading the whole level.
I have a loading screen that uses the loading manager to track the progress when loading models from files (on startup and on level change), but how would I detect that threejs is “struggling” when I add complex meshes back into scene? When I add these models, the screen freezes and stutters, just like it does when loading models from files. I wanted a way of knowing when this rendering hicup is over so that I could apply a loading screen to it just like i have it for the model loading.

Thank you!

2

if it freezes and stutters there’s too much load on the main cpu thread, a loading screen, at best, would have to be static. but i would try to optimise assets more, glbs 1-2mb, few vertices, compressed textures etc. pre-load everything, make stuff that isn’t relevant invisible.

another solution would be to use offscreen canvas, it won’t block the main thread and the UI will function normally. like in this example, open chrome devtools > performance > record, the only thing that’s active on the cpu is the mouse-move: https://offscreen.pmnd.rs

generally loading and figuring out that three struggles to render are two different things and the second is completely arbitrary. you can track, but usually not for loading screens but performance monitoring, where you reduce/increase quality according to the device used.

1 Like
4

Would you consider having the unused levels become invisible better than removing them from the scene, for example?

5

yes, this is a topic in discover threejs: The Big List of three.js Tips and Tricks! | Discover three.js

that you should avoid runtime mounting, because that will initalize textures and buffer objects, recalculate shadow maps, etc etc. it’s a major overhead. if by removing you mean if something can go out if it will never be used again then sure, but loading stuff runtime that will be used is going to cause you jank — well, unless it’s using offscreen canvas.

before you look into all of this i would expect assets first. if you load 200mb gltf files with millions of vertices, dozens of 8k textures without texture-atlasing, you have bigger fish to fry.