当前位置：首页 > news >正文

着色器变量

news 2026/3/26 19:57:05

在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变量：
- 仅顶点着色器可用，必须与CPU的顶点缓冲区绑定；
- 每个顶点对应一个独立值，无法直接传递到片元着色器。
Varying变量：
- 顶点着色器中声明为out，片元着色器中声明为in，名称和类型必须严格匹配；
- 自动完成光栅化插值，将顶点数据平滑过渡到每个片元。
Uniform变量：
- 可同时在顶点/片元着色器中声明为in；
- 全局共享同一值，适合传递矩阵、光照参数等不随顶点/片元变化的数据。