阶段 2 · 数据流基础18 分钟
显式 Pipeline Layout：可控的资源接口
跨管线复用布局与多组绑定
显式创建两套 BindGroupLayout，组合为 PipelineLayout，并在多个对象间复用。
LEARNING GOALS
先明确本课目标
1
显式创建 bind group layout
2
组合 pipeline layout
3
理解 visibility 与 binding type
MENTAL MODEL · 再建立心智模型
PipelineLayout 是所有 group 布局的有序目录；显式布局让多个管线共享同一资源协议。
MINIMAL EXAMPLE
为什么两个管线有时不能共享同一个 BindGroup？
PipelineLayout 是整条管线的资源接口合同，按 group 编号组合多个 BindGroupLayout。只有布局兼容时，同一个 BindGroup 才能在不同 Pipeline 间复用。
javascriptconst pipelineLayout = device.createPipelineLayout({
bindGroupLayouts: [sceneLayout, objectLayout],
});
const pipeline = device.createRenderPipeline({
layout: pipelineLayout,
// vertex / fragment ...
});- 索引就是 group 编号 数组第 0 项对应 @group(0)，第 1 项对应 @group(1)。
- 显式布局可共享 多个 Pipeline 使用同一 PipelineLayout，就能稳定复用资源组。
- auto 适合起步 layout: auto 简单，但不同 Pipeline 自动推导的布局不应假定可互换。
场景 BindGroup 可以跨多个材质管线复用，对象 BindGroup 则按绘制对象切换。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
资源绑定GPUBindGroupLayout描述一个绑定组的插槽、资源类型、着色阶段可见性和动态偏移能力。资源绑定GPUPipelineLayout按 group 编号有序组合多个 BindGroupLayout，定义整条管线的资源接口。资源绑定Layout CompatibilityBindGroup 与某个管线 group 槽能否一起使用的规则；显式共享布局便于跨管线复用。资源绑定ShaderStage visibilityBindGroupLayout 字段，声明某个资源可被 vertex、fragment、compute 中哪些着色阶段访问。资源绑定Binding Type资源槽位要求的类型，例如 uniform buffer、read-only storage、sampler 或 sampled texture。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
让渲染管线和计算管线共享一个 storage buffer 布局。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
auto 与 explicit
layout: auto 适合快速实验；大型项目通常显式布局，以便跨管线复用 BindGroup，并更清楚地控制可见阶段和资源类型。
最小可见性原则
只把 binding 暴露给真正需要的着色阶段，有利于验证和理解，也避免无意的接口耦合。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
WebGL Program 链接后产生资源接口，WebGPU 在 PipelineLayout 中提前声明所有组布局。
WebGL
属性、uniform block 与 sampler 接口由链接后的 Program 暴露，再查询 location/index。
WebGPU
多个 BindGroupLayout 按顺序组合为 PipelineLayout，可被多条管线共享。
显式布局的价值是建立跨管线协议，不是把每个 Program 的反射结果机械固化。