When I add a glb model with a light object in it take longer to load and render on screen. And I’m having this requestAnimationFrame handler violation warning sometimes. In my research the light object might be adding load on the machine when loading into the scene. Is there a way to track what is going on the background and what is adding this delay in rendering?
Most simply written apps will get this warning on startup… since the loader has to process and upload your meshes/materials to the GPU.
If it’s only at startup I wouldn’t worry about it. If you are getting them every frame, it usually means you are trying to render too much to get done in one frame…
Yeah the scene is a bit heavy with multiple lights and postprocessing,
with 443 drawcalls and 1482787 triangles. Is there a way where I could utilize webworker or any other solution to gain a bit performance?
Yeah you’re right at the limits. Is there anything that you are making lots of identical copies of? You could use InstancedMesh for those maybe? There isn’t much that a webworker will help with unless you can move some of your javascript simulation to it…
I dug down a bit more into the issue, the composer.render() function is taking time to execute this maybe because there are multiple objects and shader compilation time is high.
is there a way to render the scene beforehand when we load a object. I’m preloading the objects and setting the visible false. and then when we need the object on scene I’m changing the visible to true.
Check out: three.js docs renderer.compile
Is this issue solved? I also faced the same, I need your help.
As a general rule, any 3D models you are loading should be optimized. You’ll need to look into at least:
Depending on the file format, and the particular metrics you need to optimize, there are tools like gltfpack and glTF Transform to help optimize models.