在WebGL/GLSL的渲染流水线中，顶点着色器与片元着色器的传参有着严格的规范，这是由GPU的渲染架构和数据处理逻辑决定的，以下是核心规定和原因解析：
一、着色器变量的作用域与类型约束
WebGL将着色器变量分为三类，各自有明确的作用域和传递规则：
| 变量类型 | 顶点着色器 | 片元着色器 | 核心作用 |
|---|---|---|---|
| Attribute | 仅支持in（输入） | 不可用 | 传递每个顶点独有的数据（如坐标、法向量、UV），由CPU通过缓冲区绑定传递 |
| Varying | 支持out（输出） | 支持in（输入） | 实现顶点到片元的插值传递，GPU自动对顶点数据进行光栅化插值，生成片元级平滑数据 |
| Uniform | 支持in（输入） | 支持in（输入） | 传递全局共享数据（如MVP矩阵、光照参数），所有顶点/片元使用同一值 |
二、为什么不能直接在片元着色器中接收顶点着色器的in变量？
你提到的a_normal属于Attribute变量，这类变量有严格的使用限制：
执行阶段分离：
- 顶点着色器是逐顶点执行，每个顶点对应一次调用，直接读取CPU传递的顶点缓冲区数据；
- 片元着色器是逐像素执行，每个像素对应一次调用，此时已经没有"顶点"的概念，只有光栅化后的片元（像素）数据。
两者的执行上下文完全独立，无法直接共享顶点级数据。
数据插值需求：
顶点数据（如法向量、颜色、UV）需要在三角形/图元内部进行平滑插值，才能让片元得到连续的视觉效果（如渐变颜色、平滑光照）。
这个插值过程由GPU自动完成，但必须通过Varying变量作为桥梁：// 顶点着色器：输出顶点法向量 out vec3 v_normal; void main() { v_normal = a_normal; // 传递顶点数据到Varying } // 片元着色器：接收插值后的法向量 in vec3 v_normal; void main() { // v_normal是GPU自动插值后的片元级数据，而非原始顶点数据 vec3 color = calculateLighting(v_normal); }WebGL规范硬性约束：
- Attribute变量只能在顶点着色器中声明为
in，片元着色器无法访问Attribute变量； - 跨着色器传递必须使用
Varying变量（WebGL 1.0中用varying关键字，WebGL 2.0中用out/in配对），且变量的类型、名称必须完全一致，否则GPU无法识别数据通道。
- Attribute变量只能在顶点着色器中声明为
三、传参的核心规定总结
Attribute变量：
- 仅顶点着色器可用，必须与CPU的顶点缓冲区绑定；
- 每个顶点对应一个独立值，无法直接传递到片元着色器。
Varying变量：
- 顶点着色器中声明为
out，片元着色器中声明为in，名称和类型必须严格匹配； - 自动完成光栅化插值，将顶点数据平滑过渡到每个片元。
- 顶点着色器中声明为
Uniform变量：
- 可同时在顶点/片元着色器中声明为
in； - 全局共享同一值，适合传递矩阵、光照参数等不随顶点/片元变化的数据。
- 可同时在顶点/片元着色器中声明为
如果你尝试在片元着色器中直接使用顶点着色器的in变量（如a_normal），WebGL会抛出编译错误，因为片元着色器的上下文不存在该变量的定义，也无法访问顶点缓冲区数据。必须通过Varying变量完成跨阶段的数据传递。
