hot reload shader material

[cra1nbow]

I'm using shaderMaterial.
When I tried to change color of shader material, Hot module replacement doesn't work.

https://codesandbox.io/s/r3f-shader-hmr-npbf5i?file=/src/App.js:402-480

[cra1nbow]

https://codesandbox.io/s/ib0jc?file=/src/WaveMaterial.js
https://codesandbox.io/s/ni6v4?file=/src/App.js

I found good examples.
extend THREE namespace is only way to use HMR?

[CodyJasonBennett]

HMR works by "reloading" the entire file or module. The trick is to update the key in React: https://codesandbox.io/s/ib0jc.

[cra1nbow]

So, is there no way to use HMR using shaderMaterial from r3f?
HMR is available only with drei? then, how can I use this with typescript?

[CodyJasonBennett]

You can, Drei just abstracts over some design issues of three's shader material that make it resistant to mutation. I'd highly recommend it for this use case though.

The trick beneath it all is changing the React key which forces the material to recompile:

class MyMaterial extends THREE.ShaderMaterial {
  // ...
}

extend({ MyMaterial })

// This is the 🔑 that HMR will renew if this file is edited
MyMaterial.key = THREE.MathUtils.generateUUID()

function Component(props) {
  return <myMaterial {...props} key={MyMaterial.key} />
}

[cra1nbow]

With TypeScript, how can I define type?

[drcmda]

btw drei/shaderMaterial has this key stuff inbuilt, i believe that's also typed to a string

[lighthaus205]

HMR works by "reloading" the entire file or module. The trick is to update the key in React: https://codesandbox.io/s/ib0jc.

Yes, that worked for me. I didn't even need to create a new key with MathUtils. Setting the key on the shaderMaterial was enough to get the hot reload working. Here's an example using typescript:

// MyTestShaderPlane.tsx
import { extend } from "@react-three/fiber";
import { shaderMaterial } from "@react-three/drei";
import { useRef } from "react";
import { useFrame } from "@react-three/fiber";
import * as THREE from "three";
import vertexShader from '@/app/lib/shaders/temporal_frame_interpolation/vertex.glsl'
import fragmentShader from '@/app/lib/shaders/temporal_frame_interpolation/fragment.glsl'


const MyShaderMaterial = shaderMaterial(
  {
    uTime: 0
  },
  vertexShader,
  fragmentShader
);

extend({ MyShaderMaterial });

declare global {
  namespace JSX {
    interface IntrinsicElements {
      myShaderMaterial: any
    }
  }
}

export const MyTestShaderPlane = () => {
  const shaderRef = useRef<any>();

  useFrame(({ gl, scene, camera, clock }, delta) => {
    if (!shaderRef.current) return;
    shaderRef.current.uTime = clock.elapsedTime
  });

  return (
    <mesh>
      <planeGeometry args={[1, 1]} />
      <myShaderMaterial
        ref={shaderRef}
        key={MyShaderMaterial.key} // this is the line necessary for hot reload
        side={THREE.DoubleSide}
      />
    </mesh>
  );
};