Merge pull request #3738 from pmndrs:chore/simplify-shadermaterial-demo

chore: Simplify ShaderMaterial demo v2

Author: krispya

example/src/demos/ShaderMaterial.tsx

@@ -1,5 +1,5 @@
 import { Canvas, useFrame } from '@react-three/fiber'
-import { useMemo, useRef } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import * as THREE from 'three'
 
 const vertexShader = `
@@ -18,26 +18,38 @@ void main() {
 
 const fragmentShader = `
 uniform float uTime;
+uniform vec3 uColor;
 varying vec2 vUv;
 
 void main() {
-  vec3 color = 0.5 + 0.5 * cos(uTime + vUv.xyx + vec3(0.0, 2.0, 4.0));
-  gl_FragColor = vec4(color, 1.0);
+  vec3 rainbow = 0.5 + 0.5 * cos(uTime + vUv.xyx + vec3(0.0, 2.0, 4.0));
+  gl_FragColor = vec4(mix(rainbow, uColor, 0.6), 1.0);
 }
 `
 
 function Plane() {
   const material = useRef<THREE.ShaderMaterial>(null!)
-  const uniforms = useMemo(() => ({ uTime: { value: 0 } }), [])
+  const [hovered, setHovered] = useState(false)
 
   useFrame(({ clock }) => {
     material.current.uniforms.uTime.value = clock.elapsedTime
   })
 
   return (
-    <mesh>
+    <mesh onPointerOver={() => setHovered(true)} onPointerOut={() => setHovered(false)}>
       <planeGeometry args={[2, 2, 64, 64]} />
-      <shaderMaterial ref={material} uniforms={uniforms} vertexShader={vertexShader} fragmentShader={fragmentShader} />
+      <shaderMaterial
+        ref={material}
+        // 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'}
+        vertexShader={vertexShader}
+        fragmentShader={fragmentShader}
+      />
     </mesh>
   )
 }

packages/fiber/tests/utils.test.ts

@@ -430,6 +430,20 @@ describe('applyProps', () => {
     expect(material.uniforms.resolution.value.toArray()).toStrictEqual([4, 8])
   })
 
+  it('should merge pierced uniform props into stable shader uniforms', () => {
+    const material = new THREE.ShaderMaterial({
+      uniforms: { uColor: { value: new THREE.Color('hotpink') } },
+    })
+    const uniforms = material.uniforms
+    const uColor = material.uniforms.uColor
+
+    applyProps(material, { 'uniforms-uColor-value': 'royalblue' })
+
+    expect(material.uniforms).toBe(uniforms)
+    expect(material.uniforms.uColor).toBe(uColor)
+    expect((material.uniforms.uColor.value as THREE.Color).getHex()).toBe(new THREE.Color('royalblue').getHex())
+  })
+
   it('should prefer to copy potentially read-only math classes', () => {
     const one = new THREE.Vector3(1, 1, 1)
     const two = new THREE.Vector3(2, 2, 2)