Using GLSL Shaders With Triplex

GLSL shaders are small programs that run on the GPU. When imported they have their include statements resolved and are then available as a string for you to forward on to Three.js.

GLSL shaders are small programs that run 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";
import frag from "./frag.glsl";
import vert from "./vert.glsl";
 
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}
    />
  );

Types

When using TypeScript make sure to have a global type definition declared for these files:

// types/shaders.d.ts
declare module "*.glsl" {
  export default string;
}
 
declare module "*.wglsl" {
  export default string;
}
 
declare module "*.vert" {
  export default string;
}
 
declare module "*.frag" {
  export default string;
}
 
declare module "*.vs" {
  export default string;
}
 
declare module "*.fs" {
  export default string;
}