GLTF asset (1500 render): reuse model for performance

[Colmea]

Hi all,

I have a big project here where I have a GLTF asset (~800 vertices) rendered more than 1500 times.

I decided to generate the GLTF model with GltfJSX (whick works pretty well), but I start having performance issues and reaching 60fps, even on a good computer, is hard.
So I'm wondering if there's a way to improve my architecture.

I have concerns about the reusability of my model. Currently this is the code used:

MainComponent() {
  return (
    <MyModel ...someProps />
    <MyModel ...someProps />
    <MyModel ...someProps />
    <MyModel ...someProps />
    // ...hundred times (in a loop, don't worry :D)
  );
}

My GLTFJSX model:
MyModel(props) {
  const { nodes, materials } = useLoader(GLTFLoader, '/assets/MyAsset.gltf');

  return (
    <group {...props} dispose={null}>
      <mesh
        castShadow
        material={materials.Material001}
        geometry={nodes.MyModel.geometry}
      />
    </group>
  )
}

So my main concern are:

• Is the geometry loaded is reused by all components ? I tried loading the geometry/materials at a higher level (in MainComponent), but no perf difference. What's the best way to do this ?

• Are they any other things I can do to improve perfs (knowing it's a static scene, you can just rotate around).

• Could the GLTFJSX component be an issue if used hundred times ?

[gsimone]

You should look into using instancedMesh, take a look at this example https://codesandbox.io/embed/r3f-floating-diamonds-prb9t

[drcmda]

yes, like @gsimone said, you're looking for instances, making 1500 separate meshes is very bad, because that's 1500 drawcalls. and you're lucky that you only deal with one mesh, because that's what instancedMesh takes. here's another codesandbox that's a little smaller https://codesandbox.io/s/r3f-instanced-colors-5o0qu but the principle is always the same. i had one where i instance up to 200.000 suzanne.gltf's at 60fps but can't find it anymore. :-S

const ref = useRef()
const { nodes, materials } = useLoader(GLTFLoader, '/assets/MyAsset.gltf')

useEffect() => {
  // you need to set positions in here, you can also do it in useFrame if you want to animate them
}, [])

return (
  <instancedMesh ref={ref} args={[nodes.MyModel.geometry, materials.Material001, 1500]} dispose={null} />

[Colmea]

Thanks guys for the quick answer.

Indeed, instancedMesh was the resource I was looking for. Sorry it was more a three.js question than an r3f one.
After a little bit of refactoring, it's now blazing fast (2ms to render a frame VS 80ms previously :D).

Thanks for your work on the library, hope I can share with you this new project in few months :)

Kr,

Colmea

[gsimone]

Awesome, keep us posted!

[drcmda]

would love to see it, sure!

[TonyLee-838]

That's really helpful! Thanks a lot!!