Avoiding lag spikes when loading glTFs: Idiomatic, scalable way to precompile shaders?

[mattrossman]

When I load a glTF model in r3f, the scene visibly lags as the shaders have to be compiled after rendering has already started. In vanilla Three.js, this can be avoided by adding the glTF to the scene and running .compile on the renderer before starting the render loop. In fact, I don't think the .compile call is even necessary -- as long as the model is added to the scene before starting to render, it appears to run smoothly.

I can achieve the same result in r3f by loading my model in onCreated and manually adding it to the scene. However, this ties my model to imperative code in my root component which is of course a problem (not scalable).

Here are examples of each implementation:

• Vanilla Three.js: sandbox
• react-three-fiber: sandbox

NOTE: the CSB editor will contribute to lag, so open the preview in a new tab when checking for hiccups

How should I go about loading models without lag in a way that isolates them to their own component? I need something like onCreated at the component level. I thought that useLayoutEffect would help me, but it only accepts synchronous code whereas glTF loading works via callbacks (onCreated lets me return a Promise to wait on).

I'd also expect a solution should let me add the model to the scene declaratively instead of manually calling scene.add(), so that r3f can properly manage mounting and unmounting.

[drcmda]

You can use suspense for this. use-asset. I've done this before and it works well.

[mattrossman]

@drcmda Thanks for the suggestion. As someone not familiar with use-asset or the workings of Suspense, I'm interpreting what you're saying as this: sandbox

I was unsure whether I'm supposed to do a .preload() on the asset, and I couldn't understand from the README where .preload() should be called, so I'm assuming that .read() is sufficient.

This sandbox is pretty close, but doesn't exactly work as I'd expect. Why is the <color> loading before the cube and model? I expected that Suspense would wait for all its children.

[drcmda]

the idea is that instead of doing this work in useEffect which just creates a lag next frame once the model has already loaded you suspend the component until everything's done. the drawback is that at that point the component has not rendered so there is no view and nothing's been added to the scene. but if you found a way to precompile a texture then you do something along the lines of this:

import { useAsset } from "use-assets"

function Foo() {
  const material = use???(???)
  useAsset(() => {
    precompile(material)
  }, [material])
  ...

<Suspense fallback={...}>
  <Foo />
</Suspense>

[drcmda]

perhaps this could be done easier in an official way. can't think of something though. threejs can add stuff to the scene and then precompile but in scale they will have to struggle with async stuff as well.

[drcmda]

this could also work:

function Precompile() {
  const { gl, scene, camera } = useThree()
  useLayoutEffect(() => void gl.compile(scene, camera), [])
  return null
}

<Canvas concurrent>
  <Suspense ...>
    <AsnycModel />
    <Precompile />

[mattrossman]

Hey, that approach looks really good!

This issue has been challenging to debug because I realized that some of the frame dropping is coming from Firefox itself, but Chrome seems to handle this solution perfectly 😃