Ever tried using <shaderMaterial uniforms={{ time: { value: time } }} /> and ran into immediate issues with desync? No more.

The uniforms objects on ShaderMaterial and its derivatives now have a stable reference. Objects passed into uniforms will instead copy into it. This is the same as behavior for math structures that have copy such as position, rotation, quaternion, etc. and ends up simplifying using the raw JSX where utilities were often introduced before.

Why does this matter?

1. Improves HMR. Even if you memoize the uniforms object it will still regenerate and desync Three. Now this won't happen. But also it makes compatibility with React compiler more complete with its auto-memoization.

2. Allows for inline uniform props and even prop uniforms directly on the material piercing.

<shaderMaterial
  vertexShader={vertexShader}
  fragmentShader={fragmentShader}
  // The uniforms object has a stable reference so objects can be safely merged in
  uniforms={{ 
    uTime: { value: 0 }, 
    uColor: { value: new THREE.Color('hotpink') } 
  }}
  // Individual uniforms can also be safely updated with pierce notation
  uniforms-uColor-value={hovered ? 'royalblue' : 'hotpink'}
/>

Documentation can be found here: https://r3f.docs.pmnd.rs/api/objects#shader-material-uniforms

And an example can be found here: https://github.com/pmndrs/react-three-fiber/blob/master/example/src/demos/ShaderMaterial.tsx

What's Changed

• fix: Fix broken link on "Performance pitfalls" documentation page by @simonKristensen in #3700
• fix: uniforms have stable refs for ShaderMaterial by @krispya in #3715
• docs: fix typos and documentation consistency by @NssGourav in #3709

New Contributors

• @simonKristensen made their first contribution in #3700
• @NssGourav made their first contribution in #3709

Full Changelog: v9.5.0...v9.6.0