Visual LabINTERACTIVE LEARNING
阶段 2 · 数据流基础18 分钟

插值:顶点输出如何变成每像素输入

location、透视校正与 flat

观察三个顶点颜色在三角形内部自动插值,并切换为 flat 插值理解阶段接口。

LEARNING GOALS

先明确本课目标

1

理解顶点到片元的接口匹配

2

观察平滑插值

3

认识 @interpolate(flat) 的用途

MENTAL MODEL · 再建立心智模型

顶点着色器只运行在顶点上;光栅化器根据重心坐标为每个片元生成插值后的 @location 输入。

MINIMAL EXAMPLE

顶点颜色为什么会在三角形内部自动渐变?

@location 连接相邻着色阶段的用户数据。光栅化器根据片元在三角形中的位置插值顶点输出;整数或离散编号通常要使用 @interpolate(flat)。

最小例子wgsl
struct Out {
  @builtin(position) position: vec4f,
  @location(0) color: vec3f,
  @location(1) @interpolate(flat) objectId: u32,
}

@fragment
fn fs(in: Out) -> @location(0) vec4f {
  return vec4f(in.color, 1.0);
}
  1. color 会插值 三角形三个顶点的颜色按重心权重混合,默认带透视校正。
  2. objectId 不插值 flat 让整个图元使用一个离散值,避免得到无意义的小数编号。
  3. 位置不靠 location 系统位置使用 @builtin(position),不占用用户 location。

片元着色器收到连续变化的 color,同时 objectId 在整个三角形内保持不变。

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

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

展开⌄
LIVE EXPERIMENT · 先获得反馈

边改边运行

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

本课挑战

不用纹理,利用插值画出三角形线框。

DEEP DIVE · 实验之后

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

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

CORE IDEA

核心讲解

01

插值发生在哪里

它不是你在 WGSL 中写的循环,而是固定功能光栅化阶段完成的。位置决定覆盖关系,其他 location 输出按规则插值。

02

哪些数据不应平滑

材质编号、对象 ID、面编号等离散值应使用 flat,避免三角形内部出现无意义的小数。

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

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

展开⌄
API COMPARISON

插值数学相同;两种语言用不同语法连接顶点输出与片元输入。

WebGL

顶点 shader 的 out 与片元 shader 的同名 in 在 Program 链接时匹配。

WebGPU

两个入口通过相同 @location 和兼容类型连接,可显式指定 interpolate。

比较插值时使用同一组顶点值与坐标,否则视觉差异可能来自输入而不是 API。