阶段 2 · 数据流基础18 分钟
Uniform Buffer：小而频繁的全局参数
绑定、对齐与 queue.writeBuffer
用 uniform 传递时间、颜色和缩放，逐帧更新同一个缓冲区而不重建资源。
LEARNING GOALS
先明确本课目标
1
创建 UNIFORM|COPY_DST 缓冲区
2
理解 16 字节对齐
3
使用 queue.writeBuffer 更新参数
MENTAL MODEL · 再建立心智模型
Uniform 像一小块每次绘制都能读取的参数表；JavaScript 更新字节，着色器按结构体布局读取。
MINIMAL EXAMPLE
为什么 JavaScript 写了数据，WGSL 却可能读错？
Uniform Buffer 是着色器只读的参数块。CPU 字节布局必须与 WGSL 类型的大小和对齐一致；vec4f 通常按 16 字节对齐，不能只按可见字段数量紧密拼接。
wgslstruct Params {
time: f32,
scale: f32,
padding: vec2f,
color: vec4f,
}
@group(0) @binding(0)
var<uniform> params: Params;- 前 16 字节 time、scale 和 padding 共同占满一个 16 字节区间。
- 后 16 字节 color 是 vec4f，占用并对齐到 16 字节。
- CPU 也写 32 字节 Float32Array 的排列必须与结构体布局完全一致。
用 32 字节 Uniform Buffer 写入参数后，着色器能稳定读取时间、缩放和颜色。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
资源绑定Uniform Buffer着色器只读的小型参数缓冲区，适合帧、材质和对象常量，并受严格布局和对齐规则约束。内存布局Alignment数据字段、绑定偏移和复制行距必须满足的字节边界要求。错误对齐会导致验证失败或数据解释错误。数据上传queue.writeBuffer把 CPU 数据复制到具有 COPY_DST usage 的 GPUBuffer，适合小到中等规模更新。资源绑定GPUBindGroup按照 BindGroupLayout 把具体 Buffer、TextureView 和 Sampler 装入 @group/@binding 槽位的资源集合。内存布局Memory Layout类型在 Buffer 中的字节大小、对齐、字段偏移和结构步长规则；CPU 与 WGSL 必须使用同一布局。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
把分辨率、鼠标、时间组合进一个统一的 FrameUniforms 结构体。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
布局必须一致
WGSL uniform 地址空间遵循对齐规则，vec3f 虽然只有三个分量，结构布局常仍按 16 字节边界处理。最稳妥的学习方式是显式留出 padding。
更新而不是重建
动画参数应写入已有缓冲区。频繁创建 GPUBuffer 会增加验证、分配和垃圾回收压力。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
两者都有 UBO；WebGPU 把资源绑定和布局验证从可变状态提升为显式契约。
WebGL
可用单独 uniform，也可通过 Uniform Block、binding point 与 bindBufferBase/Range 使用 UBO。
WebGPU
Uniform GPUBuffer 通过 BindGroupLayout/BindGroup 与 WGSL binding 对接。
两者布局规则不完全相同；迁移结构体时必须重新核对对齐与 padding。