阶段 1 · 起步入门22 分钟
第一个三角形：完整渲染管线
ShaderModule、RenderPipeline 与 draw()
不使用顶点缓冲区，仅靠 vertex_index 在 WGSL 中生成三角形，走完最小渲染流程。
LEARNING GOALS
先明确本课目标
1
创建 WGSL 着色器模块
2
创建 RenderPipeline
3
理解 draw(3) 如何触发三个顶点调用
MENTAL MODEL · 再建立心智模型
RenderPipeline 是一份提前固定的大配方：顶点阶段如何产生位置，片元阶段如何着色，输出写进什么格式。
MINIMAL EXAMPLE
三个顶点怎样变成屏幕上的三角形？
顶点着色器为每次顶点调用输出裁剪空间位置，光栅化器把三个顶点装配并离散成片元，片元着色器再为每个片元输出颜色。
wgsl@vertex
fn vs(@builtin(vertex_index) id: u32)
-> @builtin(position) vec4f {
let p = array(vec2f(-0.7, -0.6),
vec2f( 0.7, -0.6),
vec2f( 0.0, 0.7));
return vec4f(p[id], 0.0, 1.0);
}
@fragment
fn fs() -> @location(0) vec4f {
return vec4f(0.2, 0.9, 0.8, 1.0);
}- draw(3) 触发三次顶点着色器调用，vertex_index 依次为 0、1、2。
- position 三个 vec4f 是裁剪空间位置，光栅化器依它们生成三角形覆盖区域。
- location(0) 片元返回值写入 Render Pass 的第 0 个颜色附件。
不创建 Vertex Buffer 也能画出三角形，因为位置直接由 vertex_index 在 WGSL 中生成。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开，不打断主线实验。
展开⌄
着色器GPUShaderModule由 WGSL 源码创建的着色器模块，可包含多个 vertex、fragment 或 compute 入口。渲染管线Vertex Shader每个顶点或实例执行的可编程阶段，至少输出 @builtin(position)。渲染管线Fragment Shader对光栅化产生的片元执行，输出颜色、深度等附件结果。渲染管线GPURenderPipeline将着色器入口、顶点布局、图元、深度、混合、多采样和目标格式固化为可复用的渲染配方。渲染管线Primitive Topology说明顶点如何装配为 triangle-list、line-list、point-list 等图元。着色器内建值vertex_index顶点着色器当前调用对应的顶点序号，可用于无顶点缓冲区的程序化几何。绘制draw按当前渲染管线、绑定资源和顶点状态记录一次非索引绘制的命令；它只编码工作，不会同步等待 GPU 完成。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
只使用 vertex_index 画出一个矩形，并说明为什么需要 6 个顶点。
回到原理，解释刚才发生了什么
先用结果建立反馈，再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
可编程阶段
顶点着色器至少输出 @builtin(position)，片元着色器输出一个或多个颜色目标。光栅化器在两者之间自动生成片元。
管线提前验证
WebGPU 把大量状态放进不可变管线，在创建时做验证和编译，换来绘制时更少的隐式工作。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后，再用完整映射处理跨平台或跨 API 迁移。
展开⌄
相同的 Vertex → Raster → Fragment，不同的着色器组装与绘制提交方式。
WebGL
分别编译 GLSL 顶点/片元着色器，链接 Program，设置状态后 drawArrays。
WebGPU
WGSL ShaderModule 与固定状态组合为 RenderPipeline，在 RenderPass 中 draw。
RenderPipeline 不只是 WebGLProgram 的改名，它还固定了顶点布局、附件、混合和图元状态。