阶段 2 · 数据流基础18 分钟
索引缓冲区：复用顶点
drawIndexed、IndexFormat 与拓扑
用四个顶点和六个索引画矩形，对比非索引绘制的重复数据。
LEARNING GOALS
先明确本课目标
1
创建 INDEX 缓冲区
2
使用 setIndexBuffer 与 drawIndexed
3
理解 uint16/uint32 选择
MENTAL MODEL · 再建立心智模型
索引缓冲区不是新的几何属性，而是一张“顶点编号清单”，告诉装配阶段按什么顺序复用已有顶点。
MINIMAL EXAMPLE
索引缓冲为什么能减少重复顶点？
Index Buffer 保存顶点编号而不是顶点属性。drawIndexed() 先读取索引，再用编号访问 Vertex Buffer，因此相邻三角形可以共享同一个顶点记录。
javascript// 四个顶点组成两个三角形
const indices = new Uint16Array([
0, 1, 2,
0, 2, 3,
]);
pass.setIndexBuffer(indexBuffer, 'uint16');
pass.drawIndexed(6);- 格式匹配 Uint16Array 对应 uint16；Uint32Array 对应 uint32。
- 共享 0 和 2 两个三角形复用两个顶点，不必重复位置和颜色数据。
- 绕序仍重要 索引排列决定三角形正反面，并影响 cullMode。
GPU 按 0-1-2 与 0-2-3 装配两个三角形，但 Vertex Buffer 只保存四条顶点记录。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
渲染管线Primitive Topology说明顶点如何装配为 triangle-list、line-list、point-list 等图元。几何数据Index Buffer保存顶点编号序列，通过 drawIndexed 复用顶点并决定图元绕序。光栅化Face Culling根据三角形绕序与 frontFace/cullMode 丢弃正面或背面图元，减少不可见片元工作。绘制drawIndexed使用索引缓冲区进行绘制，可指定索引数量、实例数量、首索引和基顶点。几何数据indexFormat索引缓冲元素的整数格式，WebGPU 绘制常用 uint16 或 uint32，并需与 CPU TypedArray 匹配。光栅化Front Face根据顶点屏幕绕序判定三角形正面的规则，通常配置为 ccw 或 cw，并与背面剔除配合。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
建立一个 10×10 网格的共享顶点与索引数据。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
为何索引能省内存
相邻三角形常共享边和顶点。索引让共享顶点只保存一次，也便于顶点缓存复用计算结果。
绕序与正反面
索引顺序决定三角形绕序，配合 frontFace 与 cullMode 可剔除背面。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
索引复用的算法完全一致，差别主要在绑定状态与 draw 参数位置。
WebGL
ELEMENT_ARRAY_BUFFER 绑定被 VAO 捕获，drawElements 指定类型与字节偏移。
WebGPU
RenderPass 显式 setIndexBuffer，再用 drawIndexed 指定索引与实例范围。
WebGL 的 offset 是字节，WebGPU drawIndexed 的 firstIndex 是索引元素编号，不能直接复制数值。