阶段 4 · 计算基础18 分钟
Storage Buffer：大规模可读写数据
storage 地址空间与结构化数组
在顶点着色器中从 storage buffer 读取位置与颜色，理解它和 vertex/uniform buffer 的差异。
LEARNING GOALS
先明确本课目标
1
声明 var<storage, read>
2
绑定只读 storage buffer
3
理解 uniform 与 storage 的取舍
MENTAL MODEL · 再建立心智模型
同一 GPUBuffer 可因 usage 和绑定方式扮演不同角色；storage 让着色器按结构化数组随机访问更多数据。
MINIMAL EXAMPLE
Storage Buffer 与 Vertex Buffer 有什么不同？
Storage Buffer 让着色器按结构化数组随机读取或读写大量数据；它通过 BindGroup 访问，不受固定 Vertex Buffer 取数顺序限制。
wgslstruct Vertex {
position: vec2f,
color: vec3f,
padding: f32,
}
@group(0) @binding(0)
var<storage, read> vertices: array<Vertex>;
@vertex
fn vs(@builtin(vertex_index) id: u32) -> Out {
let vertex = vertices[id];
// ...
}- read 或 read_write 渲染阶段常只读；计算阶段可使用 read_write 更新数据。
- 结构布局仍重要 CPU 数据必须遵守 WGSL 结构体的大小与对齐。
- 索引由代码控制 着色器可以按任意合法索引访问数组元素。
顶点着色器不使用 setVertexBuffer，也能从 Storage Buffer 中读取位置与颜色。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
资源GPUBuffer一段有固定大小和 usage 的 GPU 字节内存，可作为 vertex、index、uniform、storage、copy、map 或 indirect 资源。资源GPUBufferUsage在创建缓冲区时声明允许用途的位标志；未声明的用途后续不能使用。资源绑定Storage Buffer可承载大型结构化数组的着色器资源，可只读或读写，常用于计算和 GPU 驱动数据。WGSL 内存var<storage>声明通过 BindGroup 访问的 Storage Buffer 变量，可容纳大型结构化数据并配置 read 或 read_write。资源绑定Read-only Storage着色器只能读取、不能写入的 Storage Buffer 绑定，常用于顶点阶段消费大数组。WGSL 类型Runtime-sized Array没有写固定长度、位于 Storage Buffer 结构末尾的数组，其有效元素数量由绑定 Buffer 范围决定。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
用一个 runtime-sized array 表示粒子结构。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
容量与访问模式
Uniform 适合小型只读参数；Storage 可承载更大数组，并可由计算着色器读写，但访问与布局成本不同。
结构体布局依旧严格
JS 侧 TypedArray 必须与 WGSL 结构字段的对齐和步长一致。必要时显式 padding。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
WebGL2 没有着色器可随机读写的 SSBO；WebGPU Storage Buffer 是原生通用数据资源。
WebGL
可用 Transform Feedback 顺序输出，或把结构化数据编码进浮点纹理，但访问与写入模型受限。
WebGPU
var<storage> 直接暴露大数组，可声明 read 或 read_write，并在计算/渲染阶段使用。
不要把 WebGL Buffer Object 的名称相似性当成能力相等；关键差别是 shader 是否能随机读写。