GLSL Shaders

GLSL shaders are small programs that are ran on the GPU. When importing a GLSL file with an extension of glsl, wgsl, vert, frag, vs, or fs, they have their include statements resolved and are then available as a string for you to forward on to Three.js.

Import them:

import frag from "./fragment.glsl";
import vert from "./vertex.glsl";

And use them as needed, for example here it's used with three-custom-shader-material:

import CustomShaderMaterial from "three-custom-shader-material";
 
export function WaterMaterial({
  color,
  wavelength = 1,
  speed = 1,
}: {
  color?: Color;
  wavelength?: number;
  speed?: number;
}) {
  const ref = useRef(null);
 
  useFrame((_, delta) => {
    ref.current.uniforms.u_windTime.value +=
      ref.current.uniforms.u_windSpeed.value * delta;
  });
 
  const uniforms = useMemo(() => {
    return {
      u_windSpeed: { value: 0.1 * speed },
      u_windTime: { value: 0.0 },
    };
  }, [speed]);
 
  return (
    <CustomShaderMaterial
      baseMaterial={MeshStandardMaterial}
      color={color}
+      fragmentShader={frag}
+      vertexShader={vert}
      ref={ref}
      metalness={0.1}
      transparent
      uniforms={uniforms}
    />
  );