Canvas freezes when large 3d model is being loaded in react Suspense in react-three-fiber

Question

Based on this sample link of progressive enhancement with React Suspense, I tried to use the method in my project with another .glb file.

I got the 3D model from Sketchfab with initial size of 10MB. With the help of Sqoosh and GLTF Report, I managed to reduce the final .glb size to around 1MB by optimizing all the jpeg/png images used by the model. Then, I made a smaller .glb size of 500kb for the 'blurrier version' fallback.

However, when my 1MB glb is successfully loaded, the whole canvas or frame freezes. This is entirely different compared to the smooth transition from the sample link where the lower-resolution model changes to higher-resolution model without a lag.

This gif below shows the lag/freeze when 1MB model(prettier version) is loaded. The lag is hard to be seen when testing in codesandbox.

CodeSandbox: https://codesandbox.io/s/brave-cache-e59q0o?file=/src/App.js&fbclid=IwAR0wTEkcs0cR1LX4O8YM4jVSZ8LsXhy8Rm51oTd7nIoqQMPiLnTGUCerk8I

It is more obvious when testing after building and serving file in localhost.

---

Trying with the model from the sample link

• Low resolution glb size : 6kb
• High resolution glb size : 10MB

Smooth transition when high resolution model is done loading in Suspense

User interaction continues to be detected when high resolution model is done loading in Suspense

---

Trying with model downloaded from Sketchfab

• Low resolution glb size : 534kb
• High resolution glb size : 1119kb

Lag when high resolution model is done loading in Suspense

User interaction is not detected when high resolution model is done loading in Suspense

Answer 1

When you load a more complex model you get larger textures and a higher polycount, probably also new shaders. All that data has to be transferred from your RAM to the GPU in order to be rendered, which creates a bottleneck. That's what creates that little moment of freeze, it's when the data is being transferred to the graphics card before it can be rendered.

This is a physical limitation that cannot be circumvented. The only thing you can do is preload all your models at the beginning of your experience. If you've played videogames, you'll have noticed a loading screen with a progress bar; that's the game pushing all its stage assets to the GPU so they're ready to be used in the middle of gameplay. You can do the same: first download your assets from the web, then push them to the GPU with renderer.compile(scene, cam), which uploads textures, geometries, shaders... everything in your scene so it's ready to fire when you need it without any freeze.

You can also initialize textures this way with renderer.initTexture() in a similar way.