★ ★ ★ ★ ★

WebGL 基础：顶点着色器 & 片元着色器是什么？干什么用？

⚡ 速记答案（30 秒）

顶点着色器逐顶点执行，把坐标变换到屏幕空间；片元着色器逐像素执行，决定最终颜色。渲染管线：CPU准备数据 → 顶点着色器变换 → 光栅化 → 片元着色器上色 → 帧缓冲。

📖 详细讲解

标准面试回答（推荐记住）

顶点着色器（Vertex Shader）是逐顶点执行的程序，负责把模型空间或世界空间坐标变换到裁剪空间/屏幕空间，同时可以传递法线、UV等属性。片元着色器（Fragment Shader）是逐像素执行的程序，决定每个像素的最终颜色，可以做光照、纹理采样、阴影、后处理等效果。整个WebGL渲染管线就是：CPU准备缓冲区和纹理，顶点着色器变换几何，光栅化，片元着色器上色，最后写入帧缓冲。

渲染管线流程

应用阶段（CPU）：准备顶点数据、索引、纹理等
顶点处理（Vertex Shader）：坐标变换、法线变换
图元装配：将顶点组装成三角形
光栅化：将三角形转换为像素片元
片元处理（Fragment Shader）：计算每个像素颜色
输出合并：深度测试、混合、写入帧缓冲

✅ 面试要点

•顶点着色器处理几何变换，片元着色器处理颜色计算
•理解GPU并行处理的特点
•知道Uniform、Attribute、Varying的区别

💻 代码示例

GLSL 着色器示例

// 顶点着色器
attribute vec3 aPosition;
uniform mat4 uModelViewProjection;

void main() {
  gl_Position = uModelViewProjection * vec4(aPosition, 1.0);
}

// 片元着色器
precision mediump float;
uniform vec3 uColor;

void main() {
  gl_FragColor = vec4(uColor, 1.0);
}

🎮 Three.jsThree.js 自定义着色器演示（可运行）

// 自定义着色器 - 展示顶点→片元数据传递
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0f172a);

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.z = 2;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 自定义顶点着色器
const vertexShader = `
  varying vec3 vPosition;
  varying vec2 vUv;
  
  void main() {
    vPosition = position;  // 传递顶点位置到片元着色器
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

// 自定义片元着色器
const fragmentShader = `
  uniform float uTime;
  varying vec3 vPosition;
  varying vec2 vUv;
  
  void main() {
    // 根据位置和时间计算动态颜色
    float r = 0.5 + 0.5 * sin(vPosition.x * 3.0 + uTime);
    float g = 0.5 + 0.5 * sin(vPosition.y * 3.0 + uTime + 2.0);
    float b = 0.5 + 0.5 * sin(vPosition.x + vPosition.y + uTime + 4.0);
    gl_FragColor = vec4(r, g, b, 1.0);
  }
`;

// 创建自定义材质
const material = new THREE.ShaderMaterial({
  vertexShader,
  fragmentShader,
  uniforms: {
    uTime: { value: 0 }
  }
});

// 创建几何体
const geometry = new THREE.TorusKnotGeometry(0.6, 0.2, 100, 16);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 动画循环
function animate(time) {
  requestAnimationFrame(animate);
  material.uniforms.uTime.value = time * 0.001;
  mesh.rotation.x += 0.005;
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate(0);

🎨 效果预览WebGL