10｜GLSL 基础

vec4 pos   = vec4(1.0, 2.0, 3.0, 1.0);
float pz   = pos.z;      // 把 pos 当坐标看，用 xyzw 取第 3 个分量 → 3.0
vec4 color = vec4(0.5, 0.0, 1.0, 1.0);
float g    = color.g;    // 把 color 当颜色看，用 rgba 取第 2 个分量 → 0.0（绿色通道）

const material = new THREE.ShaderMaterial({
  vertexShader: gradientVertexShader,     // 顶点着色器源码（GLSL 字符串）
  fragmentShader: gradientFragmentShader, // 片元着色器源码（GLSL 字符串）
  uniforms: {
    // uniform = 全局共享的"黑板"：JS 写一次，所有顶点/像素读到同一份
    uTime: { value: 0 },                             // 时间驱动，JS 每帧更新：material.uniforms.uTime.value = elapsed
    uColorA: { value: new THREE.Color('#ff6b6b') },  // 渐变起点色
    uColorB: { value: new THREE.Color('#4ecdc4') },  // 渐变终点色
  },
})

varying vec2 vUv;                 // 声明"纸条"：变量名必须和片元着色器里的一致
void main() {
  vUv = uv;                       // 把每顶点私有的 uv（attribute）抄到 varying 上
  // MVP 变换，从右往左读：
  // vec4(position, 1.0) 补上 w=1 变齐次坐标 → modelViewMatrix 模型到观察空间 → projectionMatrix 到裁剪空间
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

uniform float uTime;              // 读 JS 传来的时间（每个像素读到同一份）
uniform vec3 uColorA;             // 渐变起点色
uniform vec3 uColorB;             // 渐变终点色
varying vec2 vUv;                 // 读顶点传来的 varying（GPU 已在三角形内插值）
void main() {
  // 用 UV 的 y 分量造一条随时间流动的正弦波
  // sin 结果是 -1~1，乘 0.5 再加 0.5 归一化到 0~1
  float wave = sin(vUv.y * 6.2831 + uTime) * 0.5 + 0.5;
  // 按 wave 比例在两色之间插值：wave=0 纯 A 色，wave=1 纯 B 色
  vec3 color = mix(uColorA, uColorB, wave);
  // 输出 RGBA（各分量 0~1），alpha=1 表示完全不透明
  gl_FragColor = vec4(color, 1.0);
}

顶点数据 → 顶点着色器 → 光栅化 → 片元着色器 → 屏幕

模型空间 →[modelMatrix]→ 世界空间 →[viewMatrix]→ 观察空间 →[projectionMatrix]→ 裁剪空间

// vec4(position, 1.0)：把 vec3 顶点坐标补上 w=1，拼成 4 维齐次坐标（矩阵乘法需要 4 维）
// 从右往左读：先乘 modelViewMatrix（模型→观察空间），再乘 projectionMatrix（观察→裁剪空间）
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

gl_FragColor = vec4(r, g, b, a);  // 四个分量都是 0~1：红、绿、蓝、不透明度

// Vertex Shader
varying vec2 vUv;                 // 声明传给片元的"纸条"
void main() {
  vUv = uv;                       // 把 UV 传给片元着色器
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

// Fragment Shader
uniform float uTime;              // 时间驱动：波浪随时间上下流动
uniform vec3 uColorA;             // 渐变起点色
uniform vec3 uColorB;             // 渐变终点色
varying vec2 vUv;                 // 顶点传来的 UV（每个像素拿到插值后的值）
void main() {
  // 6.2831 ≈ 2π：UV 的 y 走完一圈正好一个完整正弦周期
  float wave = sin(vUv.y * 6.2831 + uTime) * 0.5 + 0.5;
  vec3 color = mix(uColorA, uColorB, wave);  // wave 决定两色混合比例
  gl_FragColor = vec4(color, 1.0);
}

// Vertex Shader
uniform float uTime;         // 时间：驱动波浪沿 X 方向"流动"
uniform float uAmplitude;    // 振幅：波峰凸起多高
uniform float uFrequency;    // 频率：波峰有多密
varying vec3 vNormal;        // 变换后的法线，传给片元做光照
varying float vDisplacement; // 当前顶点的位移量，传给片元可用来染色（高处亮、低处暗）

void main() {
  // 沿 X 轴的正弦波：x 不同的顶点位移不同，同一时刻表面形成起伏
  float displacement = sin(position.x * uFrequency + uTime) * uAmplitude;
  // 沿法线方向顶出去：表面每个点沿自身朝向移动，形成平滑凸包
  vec3 newPosition = position + normal * displacement;
  // 法线必须用 normalMatrix 变换（它是 modelViewMatrix 的逆转置），
  // 直接乘 modelViewMatrix 会破坏法线的"垂直"关系
  vNormal = normalMatrix * normal;
  vDisplacement = displacement;
  // 用位移后的新位置算最终屏幕坐标
  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}

// Fragment Shader
uniform vec3 uCameraPosition;   // 相机世界坐标（JS 每帧同步 camera.position）
uniform float uFresnelPower;    // 菲涅尔指数：越大边缘光带越窄、越锐利
varying vec3 vWorldNormal;      // 顶点传来的世界空间法线
varying vec3 vWorldPosition;    // 顶点传来的世界空间坐标

void main() {
  // 视线方向 = 相机位置 - 表面点位置，归一化成单位向量
  vec3 viewDir = normalize(uCameraPosition - vWorldPosition);
  // 法线插值后长度可能不再是 1，参与 dot 计算前必须重新归一化
  vec3 normal = normalize(vWorldNormal);
  // dot(viewDir, normal)：正面看时接近 1，视线掠过边缘时接近 0
  // max(..., 0.0) 防止背面计算出现负值
  // 1 - dot → 正面接近 0（不发光），边缘接近 1（发光）
  // pow 把 0~1 的过渡压窄，控制边缘光带的宽窄
  float fresnel = pow(1.0 - max(dot(viewDir, normal), 0.0), uFresnelPower);
  // 在基础色上叠加一层白光，强度由 fresnel 决定 → 边缘一圈亮边
  vec3 finalColor = uColor + vec3(1.0) * fresnel;
  gl_FragColor = vec4(finalColor, 1.0);
}

// Vertex Shader（注意：与 ShaderMaterial 不同，必须手动声明精度、attribute、uniform）
precision highp float;          // 精度声明：ShaderMaterial 自动加，Raw 版必须手写

attribute vec3 position;        // 内置 attribute：同样要自己声明
attribute vec2 uv;

uniform mat4 modelViewMatrix;   // 内置 uniform：也要自己声明
uniform mat4 projectionMatrix;

varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

// Fragment Shader
precision highp float;          // 片元着色器同样需要精度声明

uniform float uTime;
uniform vec3 uColor;

varying vec2 vUv;

void main() {
  // 沿 X 方向做周期性明暗变化的脉冲效果
  float pulse = (sin(vUv.x * 6.2831 + uTime) + 1.0) * 0.5;
  gl_FragColor = vec4(uColor * pulse, 1.0);  // pulse 作为亮度系数，0~1 明暗呼吸
}

const material = new THREE.RawShaderMaterial({
  vertexShader: rawVertexShader,      // 顶点着色器源码（含完整的手动声明）
  fragmentShader: rawFragmentShader,  // 片元着色器源码
  uniforms: {
    uTime: { value: 0 },                          // 时间，JS 每帧更新
    uColor: { value: new THREE.Color('#fdcb6e') }, // 基础色
  },
})