Uniform：让着色器动起来

什么是 uniform

attribute 每个顶点不同，uniform 则在一次绘制调用内对所有顶点和片元都相同。它是 CPU 给 GPU 传参数的主要方式：时间、画布尺寸、鼠标位置、颜色、矩阵……

uniform float u_time;        // 秒
uniform vec2  u_resolution;  // 画布像素尺寸
uniform vec2  u_mouse;       // 鼠标像素坐标（左下角为原点）

设置 uniform 的三步

1. 链接后用 gl.getUniformLocation(program, "u_time") 查到位置。只查一次，把结果缓存起来。
2. 绘制前先 gl.useProgram(program)：uniform 属于当前程序。
3. 用类型匹配的函数赋值：uniform1f、uniform2f、uniform3fv、uniform1i、uniformMatrix4fv……类型写错不会报错，只会静默失败。

本例用 gl.getActiveUniform 遍历程序里所有活跃的 uniform，自动建好查找表。注意：着色器里声明了但没用到的 uniform 会被编译器优化掉，查到的位置是 null。

三个经典 uniform

• u_time 让一切动起来。花瓣半径是 sin(petals * angle + u_time * 2.0) 的函数，每帧只改一个数字，GPU 就重新算出所有顶点。
• u_resolution 用来修正宽高比。裁剪空间永远是 -1 到 1 的正方形，把 x 乘以 高 / 宽，圆才不会被拉扁。
• u_mouse 来自 pointermove 事件。DOM 的 y 轴向下，GL 的 y 轴向上，记得翻转，并乘上设备像素比。

不用缓冲区也能画

花朵的顶点完全由 gl_VertexID（当前是第几个顶点）计算出来：每 3 个顶点一个三角形，第 0 个在中心，另外两个在圆周上。WebGL2 只要求绑定一个 VAO，不需要任何 attribute。

int tri = gl_VertexID / 3, corner = gl_VertexID % 3;