初识着色器

在 WebGL 中，真正负责把几何体画到屏幕上的不是 JavaScript，而是运行在 GPU 上的着色器程序。本节我们用一个“最小可运行”的 ShaderMaterial 建立直觉：顶点着色器决定“画到哪里”，片元着色器决定“画成什么颜色”。

目标

• 认识 ShaderMaterial 的两个入口：vertexShader 与 fragmentShader
• 理解 gl_Position 与 gl_FragColor 的职责
• 知道 Three.js 会为你提供哪些常用的内置变量（例如 position、projectionMatrix、modelViewMatrix）

现象

运行示例后，你会看到一个由着色器着色的平面。此时我们还没有引入纹理、光照与复杂数学，画面只有一个固定颜色，这是刻意为之：先把“渲染管线”跑通。

代码要点

文件：CustomPanel.ts

1. 顶点着色器（vertexShader）

顶点着色器对每个顶点执行一次。示例中最关键的一行是：

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

你可以把它理解为：把模型局部坐标 position 经过相机与投影变换，得到屏幕裁剪空间坐标 gl_Position。

2. 片元着色器（fragmentShader）

片元着色器会对每个像素（更准确地说是“片元”）执行一次。示例中输出一个常量颜色：

gl_FragColor = vec4(0.5, 0.8, 1.0, 1.0);

这里的四个分量依次为 RGBA，取值范围通常在 [0, 1]。

三个关键词

后面的每一节都会反复使用这三个概念：

• attribute：每个顶点一份的数据（如 position、normal、uv）
• uniform：一次绘制共用的数据（如时间、分辨率、颜色参数）
• varying：从顶点着色器传到片元着色器的数据（用来把“逐顶点的结果”传给片元阶段）

本节只用到了最基础的 position，以及 Three.js 为你准备好的矩阵 uniform。

动手练习

• 把片元颜色改成纯红/纯绿/纯蓝，确认你能控制最终输出颜色
• 把 PlaneGeometry(60, 60) 改大或改小，观察几何体大小变化
• 将顶点着色器最后一行改为 vec4(position * 0.5, 1.0)，观察几何体如何变化，并思考：你改变的是“形状”还是“颜色”？

小结

你已经完成了最重要的一步：让自定义着色器在 Three.js 中跑起来。下一节我们将引入 varying 与 uv，让颜色不再是常量，而是随位置变化。