threejs-shaders

SKILL.md

Custom GLSL shaders for Three.js with ShaderMaterial, uniforms, varyings, and built-in material extension.

Covers ShaderMaterial vs. RawShaderMaterial, uniform types (floats, vectors, matrices, textures, arrays), and real-time uniform updates in animation loops

Includes six common shader patterns: texture sampling, vertex displacement, Fresnel effects, noise-based effects, rim lighting, and dissolve effects

Supports material extension via onBeforeCompile to inject custom code into built-in materials like MeshStandardMaterial

Provides GLSL built-in function reference (math, vector, texture operations) and performance optimization patterns favoring mix/step over conditionals

Three.js Shaders

Quick Start

import * as THREE from "three";

const material = new THREE.ShaderMaterial({
  uniforms: {
    time: { value: 0 },
    color: { value: new THREE.Color(0xff0000) },
  },
  vertexShader: `
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform vec3 color;