Visual LabINTERACTIVE LEARNING
知识库 概念
阶段 2 · 数据流基础18 分钟

顶点缓冲区：把几何数据送入管线

ArrayStride、Attribute 与 VertexStepMode

把位置和颜色交错存储在一个 GPUBuffer 中，并用顶点缓冲区布局解释每一段字节。

LEARNING GOALS

先明确本课目标

1

创建 VERTEX 缓冲区

2

配置 arrayStride 与 attributes

3

理解 shaderLocation 的对应关系

MENTAL MODEL · 再建立心智模型

GPUBuffer 只是一段字节；vertex.buffers 布局才告诉管线“每隔多少字节、从哪个偏移、按什么格式解释”。

MINIMAL EXAMPLE

GPU 怎样知道一串字节里哪个是位置、哪个是颜色？

Vertex Buffer 只是字节；GPUVertexBufferLayout 用 arrayStride、shaderLocation、format 和 offset 描述每条记录及字段位置。WGSL 的 @location 必须与 shaderLocation 对上。

最小例子javascript
const layout = {
  arrayStride: 20,
  attributes: [
    { shaderLocation: 0, offset: 0, format: 'float32x2' },
    { shaderLocation: 1, offset: 8, format: 'float32x3' },
  ],
};
  1. arrayStride = 20 每个顶点占 2×4 + 3×4 = 20 字节。
  2. offset position 从第 0 字节开始，color 从第 8 字节开始。
  3. shaderLocation 0 和 1 分别连接 WGSL 的 @location(0) 与 @location(1)。

每次顶点调用按 stride 前进一条记录，并把字段转换为 WGSL 声明的向量类型。

本课概念
●OPTIONAL · 按需查阅完整术语表与概念边界

遇到陌生术语时再展开，不打断主线实验。

展开⌄
渲染管线Vertex Shader每个顶点或实例执行的可编程阶段，至少输出 @builtin(position)。WGSL 接口@location为用户自定义的阶段输入输出分配数字槽位，用于连接顶点属性或相邻着色阶段；两端 location 编号与数据类型必须兼容。资源GPUBuffer一段有固定大小和 usage 的 GPU 字节内存，可作为 vertex、index、uniform、storage、copy、map 或 indirect 资源。资源GPUBufferUsage在创建缓冲区时声明允许用途的位标志；未声明的用途后续不能使用。几何数据Vertex Buffer由顶点阶段按 GPUVertexBufferLayout 顺序读取的几何属性缓冲区。几何数据Vertex Attribute顶点布局中的一个字段，以 shaderLocation、offset 和 format 说明如何解释字节。几何数据arrayStride相邻两个顶点或实例记录在缓冲区中的字节间隔。几何数据Vertex图元装配使用的一个顶点记录，可包含位置、颜色、法线或纹理坐标；它是数据记录，不只等于一个二维或三维坐标。几何数据GPUVertexBufferLayout描述一个顶点缓冲区的记录步长、前进方式和属性列表，使 GPU 能按字节偏移解释顶点或实例数据。
LIVE EXPERIMENT · 先获得反馈

边改边运行

浏览器加载后会激活代码编辑器、独立运行环境与实时输出。

本课挑战

用两个独立缓冲区分别提供 position 和 color。

DEEP DIVE · 实验之后

回到原理，解释刚才发生了什么

先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。

CORE IDEA

核心讲解

01

交错与分离布局

位置、法线、颜色可以放在一个交错缓冲区，也可以拆成多个缓冲区。交错通常利于一起读取，分离更利于独立更新。

02

格式决定读取宽度

float32x2 会读取 8 字节，float32x3 读取 12 字节。offset 与 arrayStride 必须满足对齐和边界要求。

●OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照

主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。

展开⌄
API COMPARISON

字节布局相同，WebGL 把解释方式存在 VAO 状态里，WebGPU 把它固定在 Pipeline。

WebGL

bindBuffer 后用 vertexAttribPointer/enableVertexAttribArray 记录属性解释。

WebGPU

GPUBuffer 只保存字节；arrayStride、format、offset 位于 vertex buffer layout。

迁移时先写一张字节布局表，再同时核对 TypedArray、Pipeline layout 与 WGSL 输入。