随机数驱动的顶点位移

前面我们用 uTime 做了统一的动画。本节我们更进一步：为每个顶点提供一份随机数 aRandom，让不同顶点产生不同的运动。这正是 attribute 的用武之地。

目标

• 在 JavaScript 中为 BufferGeometry 添加自定义属性（aRandom）
• 在顶点着色器中读取 aRandom 并驱动位移
• 通过 varying 把 aRandom 传到片元着色器中可视化

思路

1. 创建数据：随机数数组长度应当等于顶点数量（positionAttribute.count）。
2. 写入属性：用 geometry.setAttribute('aRandom', ...) 把数据绑定到几何体。
3. 读取属性：顶点着色器声明 attribute float aRandom; 并使用它。

注意：attribute 只存在于顶点着色器。如果片元阶段也需要它的值，就必须用 varying 传递。

动手练习

• 把 aRandom 的生成方式改成“与位置相关”（例如用 x/y 计算），观察运动规律变化
• 把片元着色器里 vRandom 的影响增强（例如乘以 0.5），让随机分布更直观
• 尝试把 aRandom 改成 vec2 或 vec3，为每个顶点提供更多维度的数据

小结

你已经能够向 GPU 发送“逐顶点数据”。下一节我们将学习纹理采样：把一张图片（或生成的纹理）作为输入，在片元着色器里读取它的颜色。