阶段 2 · 数据流基础18 分钟
Bind Group：资源与着色器的契约
@group/@binding、布局与可复用资源集合
把两个 uniform 资源绑定到固定槽位，理解 BindGroupLayout 与 BindGroup 的区别。
LEARNING GOALS
先明确本课目标
1
读取自动布局
2
创建多个 BindGroup
3
在同一管线下切换资源集合
MENTAL MODEL · 再建立心智模型
BindGroupLayout 是插座规格，BindGroup 是插入插座的具体资源；WGSL 的 @group/@binding 是插座编号。
MINIMAL EXAMPLE
着色器里的资源槽位怎样连接到真实 Buffer？
@group(n) @binding(m) 声明资源接口地址；GPUBindGroup 按同一 binding 编号装入真实资源。Pipeline 使用时通过 setBindGroup(n, group) 绑定整组资源。
wgsl@group(0) @binding(0) var<uniform> transform: mat4x4f;
@group(0) @binding(1) var<uniform> material: vec4f;
// JavaScript:
// entries: [
// { binding: 0, resource: { buffer: transformBuffer } },
// { binding: 1, resource: { buffer: materialBuffer } },
// ]- group 是资源集合 常按更新频率拆分，例如场景、材质、对象各一组。
- binding 是组内槽位 编号和资源类型必须与 BindGroupLayout/WGSL 一致。
- 绑定不等于复制 BindGroup 保存资源引用，setBindGroup 不会把 Buffer 内容复制一遍。
一个 BindGroup 可复用多帧；切换对象时只需绑定另一个兼容的资源组。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
资源绑定GPUBindGroup按照 BindGroupLayout 把具体 Buffer、TextureView 和 Sampler 装入 @group/@binding 槽位的资源集合。资源绑定GPUBindGroupLayout描述一个绑定组的插槽、资源类型、着色阶段可见性和动态偏移能力。资源绑定GPUPipelineLayout按 group 编号有序组合多个 BindGroupLayout，定义整条管线的资源接口。WGSL 接口@binding指定资源在某个 @group 内的槽位编号，与 BindGroupLayout 和 GPUBindGroup entry 的 binding 对应。WGSL 接口@groupWGSL 资源变量的绑定组编号，必须与管线布局中的 GPUBindGroupLayout 顺序以及 setBindGroup 的槽位一致。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
设计帧、材质、对象三层绑定组并说明各自更新频率。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
绑定组减少重复设置
把一组经常一起使用的资源预先打包，绘制时只需 setBindGroup。布局验证在创建阶段完成。
如何分组
常见做法是 group 0 放帧级资源、group 1 放材质、group 2 放对象。这样可按变化频率复用。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
WebGL 把资源散落在多个全局槽位，WebGPU 把一组资源预先封装成可验证对象。
WebGL
Program、uniform、UBO binding point、texture unit 与 sampler 状态分别设置。
WebGPU
BindGroupLayout 定义插座，BindGroup 一次性绑定符合布局的资源集合。
不要按 WebGL 调用顺序设计 Bind Group；按帧、材质、对象的更新频率分组。