Three.js 学习系列（七）着色器入门：ShaderMaterial、GLSL 与 onBeforeCompile

你的 JS:
  scene.add(mesh)                        ← 顶点数据准备好
  renderer.render(scene, camera)         ← 触发绘制

GPU 接管:
  ┌────────────────────────────────┐
  │ Vertex Shader (顶点着色器)     │  ← 每个顶点跑一次
  │   - 把顶点位置变成屏幕坐标     │
  │   - 计算/传递插值数据          │
  └────────────────────────────────┘
              ↓
  ┌────────────────────────────────┐
  │ 光栅化 (rasterization)         │  ← 三角形 → 像素列表
  └────────────────────────────────┘
              ↓
  ┌────────────────────────────────┐
  │ Fragment Shader (片元着色器)   │  ← 每个像素跑一次
  │   - 决定这个像素是什么颜色     │
  └────────────────────────────────┘
              ↓
       屏幕上的像素

       attribute (每顶点)
              ↓
    ┌─────────────────────┐
    │  Vertex Shader      │  ← uniform (全局)
    │                     │
    │  gl_Position = ...  │
    │  vUv = uv;          │  ← 写入 varying
    └─────────────────────┘
              ↓
       光栅化 (varying 被自动插值)
              ↓
    ┌─────────────────────┐
    │  Fragment Shader    │  ← uniform (全局)
    │  reads vUv          │  ← 读取 varying
    │  gl_FragColor = ... │
    └─────────────────────┘

const material = new THREE.ShaderMaterial({
  uniforms: {
    uTime: { value: 0 },
    uColor: { value: new THREE.Color(0x44aa88) },
  },
  vertexShader: /* glsl */`
    varying vec2 vUv;

    void main() {
      vUv = uv;     // 把 uv 传给 fragment
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: /* glsl */`
    uniform float uTime;
    uniform vec3 uColor;
    varying vec2 vUv;

    void main() {
      float strip = 0.5 + 0.5 * sin(vUv.x * 20.0 + uTime * 2.0);
      gl_FragColor = vec4(uColor * strip, 1.0);
    }
  `,
})

const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material)
scene.add(mesh)

// 每帧更新 uTime
const clock = new THREE.Clock()
renderer.setAnimationLoop(() => {
  material.uniforms.uTime.value = clock.getElapsedTime()
  renderer.render(scene, camera)
})

// 这些不需要你写, Three.js 自动加在 shader 顶部:
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat3 normalMatrix;
uniform vec3 cameraPosition;

attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

vec3 color = vec3(1.0, 0.5, 0.2);
float r = color.r;       // 1.0
vec2 rg = color.rg;      // (1.0, 0.5)
vec3 bgr = color.bgr;    // (0.2, 0.5, 1.0)

// fragmentShader
uniform float uTime;
uniform sampler2D uMap;
varying vec2 vUv;

void main() {
  // 让 UV 随时间偏移 → 贴图就"流动"了
  vec2 uv = vUv;
  uv.y += uTime * 0.1;

  vec4 base = texture2D(uMap, uv);

  // 叠一层流动的高光
  float glow = 0.5 + 0.5 * sin(vUv.y * 10.0 - uTime * 3.0);
  vec3 col = base.rgb + glow * vec3(0.2, 0.4, 0.6);

  gl_FragColor = vec4(col, 1.0);
}

const tex = new THREE.TextureLoader().load('/water.jpg')
tex.wrapS = tex.wrapT = THREE.RepeatWrapping   // 必须开 repeat, 否则 uv > 1 时贴图就完了

const material = new THREE.ShaderMaterial({
  uniforms: {
    uTime: { value: 0 },
    uMap: { value: tex },
  },
  vertexShader,
  fragmentShader,
})

// vertexShader
uniform float uTime;
varying vec2 vUv;
varying float vHeight;

void main() {
  vUv = uv;

  // GPU 端算波浪高度
  float h = sin(position.x * 0.5 + uTime) * 0.5
          + cos(position.z * 0.3 + uTime * 0.7) * 0.3;

  vec3 pos = position;
  pos.y += h;
  vHeight = h;

  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}

// fragmentShader
varying vec2 vUv;
varying float vHeight;

void main() {
  vec3 deep = vec3(0.0, 0.2, 0.5);
  vec3 shallow = vec3(0.2, 0.6, 0.9);
  vec3 color = mix(deep, shallow, smoothstep(-0.5, 0.5, vHeight));
  gl_FragColor = vec4(color, 1.0);
}

// fragmentShader
uniform float uDissolve;    // 0 = 完整, 1 = 完全消失
uniform sampler2D uNoise;
uniform sampler2D uMap;
varying vec2 vUv;

void main() {
  float n = texture2D(uNoise, vUv).r;        // 噪声值 (0–1)
  if (n < uDissolve) discard;                // ★ discard = 这个像素不画

  // 燃烧边缘高光
  vec4 base = texture2D(uMap, vUv);
  float edge = smoothstep(uDissolve, uDissolve + 0.05, n);
  vec3 fire = mix(vec3(1.0, 0.4, 0.0), vec3(1.0), edge);

  gl_FragColor = vec4(mix(fire, base.rgb, edge), 1.0);
}

material.uniforms.uDissolve.value = 0
// 用 GSAP / Tween 推到 1
gsap.to(material.uniforms.uDissolve, { value: 1, duration: 2 })

// fragmentShader
uniform vec3 uLightDir;
varying vec3 vNormal;

void main() {
  // 光照点积
  float NdotL = max(0.0, dot(normalize(vNormal), normalize(uLightDir)));

  // 把连续亮度阶梯化 (3 档)
  float toon = NdotL > 0.66 ? 1.0
             : NdotL > 0.33 ? 0.6
             : 0.3;

  // 边缘描边: 法线 vs 视线接近垂直时画黑
  // (这里简化, 真实做法用 stencil 或后处理)
  vec3 color = vec3(1.0, 0.4, 0.2) * toon;
  gl_FragColor = vec4(color, 1.0);
}

// vertexShader
varying vec3 vNormal;

void main() {
  vNormal = normalize(normalMatrix * normal);   // 把法线变换到视空间
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

// fragmentShader (后处理 pass)
uniform sampler2D tDiffuse;     // 上一 pass 渲染的画面
uniform float uTime;
varying vec2 vUv;

void main() {
  vec2 uv = vUv;
  uv.x += sin(vUv.y * 30.0 + uTime * 5.0) * 0.01;    // 波动
  gl_FragColor = texture2D(tDiffuse, uv);
}

const material = new THREE.MeshStandardMaterial({ color: 0xffffff })

material.onBeforeCompile = (shader) => {
  // 添加自定义 uniform
  shader.uniforms.uTime = { value: 0 }
  material.userData.shader = shader   // 保存引用以便每帧更新

  // 在 vertex shader 中找到一个标记位置插入代码
  shader.vertexShader = shader.vertexShader.replace(
    '#include <begin_vertex>',
    /* glsl */`
      #include <begin_vertex>
      transformed.y += sin(transformed.x * 3.0 + uTime) * 0.2;
    `
  )

  // 顶部加 uniform 声明
  shader.vertexShader = shader.vertexShader.replace(
    'void main() {',
    /* glsl */`
      uniform float uTime;
      void main() {
    `
  )
}

// 每帧更新 uniform
renderer.setAnimationLoop(() => {
  if (material.userData.shader) {
    material.userData.shader.uniforms.uTime.value = clock.getElapsedTime()
  }
  renderer.render(scene, camera)
})

import CustomShaderMaterial from 'three-custom-shader-material'

const material = new CustomShaderMaterial({
  baseMaterial: THREE.MeshStandardMaterial,
  uniforms: { uTime: { value: 0 } },
  vertexShader: /* glsl */`
    uniform float uTime;
    void main() {
      csm_Position.y += sin(position.x * 3.0 + uTime) * 0.2;
    }
  `,
  fragmentShader: /* glsl */`
    uniform float uTime;
    void main() {
      csm_DiffuseColor.rgb *= 0.5 + 0.5 * sin(uTime);
    }
  `,
  color: 0xffffff,
})

要 PBR 光照吗?
  └ 是: 用 MeshStandardMaterial
         需要加自定义效果?
           └ 是: onBeforeCompile / CustomShaderMaterial
           └ 否: 直接用
  └ 否: 用 ShaderMaterial 从零写

gl_FragColor = vec4(vUv, 0.0, 1.0);          // UV 画成颜色
gl_FragColor = vec4(vNormal * 0.5 + 0.5, 1); // 法线画成颜色 (法线变色)
gl_FragColor = vec4(vec3(depthValue), 1);    // 任何 float 都能这么 debug

material.onBeforeCompile = (shader) => {
  // ... 修改完
  console.log(shader.vertexShader)
  console.log(shader.fragmentShader)
}

// fragmentShader: 在 vUv (0–1, 0–1) 范围内画一个居中的圆
varying vec2 vUv;
void main() {
  float d = distance(vUv, vec2(0.5));
  float c = smoothstep(0.3, 0.28, d);     // 边缘羽化
  gl_FragColor = vec4(vec3(c), c);
}