Most performant way to trigger an (jump) animation?

[cor-rine]

Hey there,

Thanks for writing up common performance pitfalls - very handy and helpful.

I'm wondering if you wouldn't mind helping me debug/analyze the way I'm triggering my sheep to jump here?
https://codesandbox.io/s/withered-tdd-qtwv7?file=/src/App.js:630-762

I thought this way would be fine, but there seems to be a perceptible lag between the time of click before the sheep actually moves. Curious to get your take on this.

[drcmda]

for the stars alone it's mounting/remounting 200 react components on each render (so every time state changes). that also creates 200 gpu drawcalls.

i've exchanged stars with points (1 single drawcall) https://codesandbox.io/s/floral-pine-ux3v1

ps. added some jump physics

[cor-rine]

Wow.

Thank you <3

[cor-rine]

Ok - now that I've snapped out of the amazement of all the improvements you've made, I want to dig a little deeper here, because I'm just starting to realize a few technical details/differences:

• React component mounting/re-mounting - I suppose this means the VirtualDOM is completely passed through because these elements go directly onto the <canvas>? Makes complete sense to me now. If so, this might be worth mentioning a little more in detail in the pitfalls section as well though, for engineers/developers who are coming from a more web-application heavy usage of React. (food for thought)

• I did not know about points - very useful. I'm wondering if/how I might have discovered those on my own.

• Big thanks for adding real jump physics.

[drcmda]

React component mounting/re-mounting

there are two parts to this. threejs sends data to the gpu in batches, called drawcalls. fewer draw calls are better. it has some tricks where you get to draw lots of elements in a single draw call, instancing (instancedMesh) is one, another is points, it's like a particle system really.

as for react, mounting/unmounting isn't that slow (in prod) for a few elements, but it can become a problem for many elements. but in threes case when you mount a material it starts to compile glsl (the shader language) into bytecode, and it starts to transform the geometry into something the gpu understands - this can be very expensive. you had 300 stars mount and unmount on every render, each was a react component, each had a material and a geom, this is no good.

you had side effects in the render function, the data wasn't memoized:

export default function Stars() {
  return new Array(200).fill().map((_, i) => {
    let x = (SEED() * 100 + SEED() * -100) / 2;
    let y = (SEED() * 50 + SEED() * -50) / 2;
    let radius = (SEED() * 0.05 + SEED() * 0.03) / 2;
    return <Star key={i} radius={radius} position={[x, y, -5]} />;

would have been better to do:

const data = useMemo(() => Array(200).fill().map(() => {
    let x = (SEED() * 100 + SEED() * -100) / 2
    let y = (SEED() * 50 + SEED() * -50) / 2
    let radius = (SEED() * 0.05 + SEED() * 0.03) / 2
    return [[x, y, -5], radius]
}), [])
return data.map(([pos, rad], i) => <Star key={i} radius={rad} position={pos} />)

in the <Star/> component you were re-creating the geometry every render:

geometry={new THREE.SphereGeometry(radius, 10, 10)}

it would have been better to do:

<mesh scale={[radius, radius, radius]} >
  <sphereBufferGeometry attach="geometry" args={[1, 10, 10]} />

because buffergeom is faster, and any change to args re-constructs the element, just like calling new SphereGeometry(...) would. with scale you can make it bigger smaller without re-constructing it.

still better, you could have shared geometries and materials (1 glsl compile, 1 geo transform):

const [geom] = useState(() => new BoxBufferGeometry())
const [mat] = useState(() => new MeshBasicMaterial())
return items.map(i => <mesh geometry={geom} material={mat} ...

even if you did all this, you would still have react chomp through 300 components, so instancing can do better still. and i guess the fastest would have been to simply use a star-texture and plaster it onto a sphere.

[drcmda]

and dont worry, this stuff is not so easy to digest in the beginning, i learned it from here: https://discoverthreejs.com/tips-and-tricks <--- i'll add this to the pitfalls section.

[drcmda]

https://github.com/react-spring/drei/#%EF%B8%8F-stars-

[cor-rine]

Thanks! Just added them:
https://codesandbox.io/s/dazzling-tu-lepzp?file=/src/App.js

[Fasani]

Those twinkling stars look really great!