阶段 1 · 起步入门18 分钟
命令编码：CPU 描述，GPU 批量执行
CommandEncoder、RenderPass 与 Queue.submit
用命令编码器记录多个步骤，结束为不可变 CommandBuffer，再一次性提交给 GPU。
LEARNING GOALS
先明确本课目标
1
区分编码与执行
2
理解 RenderPass 的边界
3
观察一帧一提交与批量命令的关系
MENTAL MODEL · 再建立心智模型
编码阶段像录制操作清单，finish() 封存清单，queue.submit() 才把它排进 GPU 队列。
MINIMAL EXAMPLE
WebGPU 为什么不直接执行 draw？
WebGPU 先把操作记录到 GPUCommandEncoder，finish() 封存为不可修改的 GPUCommandBuffer，再由 GPUQueue.submit() 排入 GPU 执行队列。
javascriptconst encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass(descriptor);
pass.setPipeline(pipeline);
pass.draw(3);
pass.end();
const commands = encoder.finish();
device.queue.submit([commands]);- 记录 setPipeline/draw 只是在编码命令，不保证 GPU 已执行。
- 结束 Pass pass.end() 明确附件使用和同步边界。
- 封存并提交 finish() 后编码器不可继续使用，submit() 才把命令排队。
一次提交可以包含多个 Pass 和复制命令，GPU 能按明确顺序批量执行。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
设备模型GPUQueue设备的提交队列，用于 submit 命令缓冲区，也用于 writeBuffer、writeTexture 等数据上传。画布Current Texture由 GPUCanvasContext 每帧提供的当前交换纹理，只在当帧有效，不应跨帧缓存。命令GPUCommandEncoder记录 render pass、compute pass 和资源复制操作的命令录制器，finish 后生成 CommandBuffer。命令GPUCommandBuffer已经完成、不可修改的 GPU 命令清单，可通过 GPUQueue.submit 提交。命令Render Pass一次渲染阶段，声明颜色/深度附件及其加载保存行为，并记录绘制命令。命令loadOp / storeOpRender Pass 附件开始时如何加载或清除、结束时是否保存内容的显式策略。命令CPU运行 JavaScript、组织应用逻辑并编码 GPU 命令的通用处理器；它与 GPU 异步协作，不应在每一步强制等待。命令GPURenderPassEncoderWebGPU 中记录渲染管线、绑定资源和 draw 命令的编码器；调用 end() 后，本次 Render Pass 才结束记录。命令GPUQueue.submit把一个或多个已经 finish 的 GPUCommandBuffer 按顺序交给设备队列异步执行的方法。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
在一次提交中先清屏，再复制一个缓冲区，最后执行渲染 pass。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
为什么要先编码
现代 GPU 擅长批量执行。WebGPU 让 JavaScript 先构造明确、可验证的命令，再一次提交，减少驱动状态猜测。
Pass 是同步与资源使用边界
渲染 pass 定义附件、加载与保存方式；计算 pass 定义计算调度。一个 CommandEncoder 可以记录多个 pass 和复制操作。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
WebGL 调用持续写入隐式命令流；WebGPU 先编码、封存，再显式提交。
WebGL
bind、clear、draw 等调用按照当前 Context 状态进入实现管理的命令流。
WebGPU
CommandEncoder 记录 pass 与复制，finish 生成 CommandBuffer，Queue 统一提交。
不要在迁移时每个 WebGL 调用都创建一次 encoder；应按一帧的数据流重新组织 pass。