attributeArray
attributeArray
一个用于创建和访问存储缓冲区(Storage Buffer)的节点,它允许在所有着色器阶段(顶点、片元、计算)中高效地读写大规模、任意结构的通用数据集。
核心优势
核心优势在于其巨大的数据容量和可写能力,是实现 GPGPU(通用 GPU 计算)的基石。它将复杂的底层 SSBO 设置抽象为简单的函数,让开发者能轻松处理成千上万个数据点,实现传统 Uniform 无法完成的复杂模拟和交互。
常见用途
GPU 粒子系统(存储和更新粒子状态)
大规模实例化渲染(提供每个实例的独立属性)
骨骼动画(作为骨骼矩阵的查找表)
布料、流体等物理仿真(作为核心状态容器)
如何调整
通过在 JavaScript 中修改其 `.buffer.array` 的内容,并设置 `.buffer.needsUpdate = true`,可以实时从 CPU 向 GPU 更新海量数据。这能创造出宏大的交互效果,例如,通过监听鼠标位置来动态改变成千上万个实例的颜色和大小,形成一个实时的交互式波纹。
代码示例
1
2// 为 10000 个粒子创建一个结构化缓冲区
3const particleBuffer = attributeArray( 10000, new StructType( {
4 position: 'vec3',
5 velocity: 'vec3'
6} ) );
7
8// 在着色器中,使用索引访问特定粒子的位置
9const particlePosition = particleBuffer.element( particleIndex ).position;
10