uniform 和 attribute 的区别见:ch02/05-ColoredPoints.html

uniform、attribute 和 varying

在 WebGL/GLSL 中，uniform、attribute 和 varying 是三种关键变量类型，它们的区别如下：

1. attribute（属性变量）

• 作用：传递 顶点级别 的数据（每个顶点独有的数据）。
• 使用场景：顶点着色器中，用于接收每个顶点的属性（如位置、颜色、纹理坐标等）。
• 特点：
  • 只能在 顶点着色器 中声明和使用。
  • 每个顶点都有独立的属性值。
• WebGL 设置方式:

  
        const positionLocation = gl.getAttribLocation(program, 'a_position');
        gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
        

2. uniform（统一变量）

• 作用：传递 全局常量（所有顶点/片元共享同一份数据）。
• 使用场景：在顶点和片元着色器中均可使用，用于传递全局数据（如变换矩阵、时间、光源位置等）。
• 特点：
  • 值在一次绘制调用中 不可变。
  • 所有顶点和片元共享同一个值。
• WebGL 设置方式：

  
        const matrixLocation = gl.getUniformLocation(program, 'u_matrix');
        gl.uniformMatrix4fv(matrixLocation, false, matrix);
        

3. varying（可变量）

• 作用：在 顶点着色器 → 片元着色器 之间传递插值后的数据。
• 使用场景：顶点着色器输出数据，片元着色器接收插值后的结果（如颜色、纹理坐标插值）。
• 特点：
  • 在顶点着色器中声明为 out，在片元着色器中声明为 in（GLSL ES 3.0+）。
  • 数据会基于片元位置自动插值（如平滑渐变）。

• 示例：

  
        // 顶点着色器
        out vec3 v_color; // 输出到片元着色器
        void main() {
          v_color = vec3(1.0, 0.0, 0.0); // 顶点颜色
        }
      
        // 片元着色器
        in vec3 v_color; // 接收插值后的颜色
        void main() {
          gl_FragColor = vec4(v_color, 1.0);
        }
        

关键区别总结

代码示例

    <!-- 顶点着色器 -->
    <script id="vertexShader" type="x-shader/x-vertex">
      attribute vec3 a_position;    // 顶点位置（attribute）
      uniform mat4 u_matrix;        // 变换矩阵（uniform）
      out vec3 v_color;             // 传递给片元的颜色（varying）
    
      void main() {
        gl_Position = u_matrix * vec4(a_position, 1.0);
        v_color = a_position * 0.5 + 0.5; // 生成颜色
      }
    </script>
    
    <!-- 片元着色器 -->
    <script id="fragmentShader" type="x-shader/x-fragment">
      precision mediump float;
      in vec3 v_color;              // 接收插值后的颜色（varying）
    
      void main() {
        gl_FragColor = vec4(v_color, 1.0);
      }
    </script>
    

注意事项

• 在 GLSL ES 3.0+ 中，attribute 改为 in，varying 被拆分为 out（顶点着色器）和 in（片元着色器）。
• uniform 在顶点和片元着色器中需分别声明，且类型必须一致。