阶段 2 · 数据流基础18 分钟
插值:顶点输出如何变成每像素输入
location、透视校正与 flat
观察三个顶点颜色在三角形内部自动插值,并切换为 flat 插值理解阶段接口。
LEARNING GOALS
先明确本课目标
1
理解顶点到片元的接口匹配
2
观察平滑插值
3
认识 @interpolate(flat) 的用途
MENTAL MODEL · 再建立心智模型
顶点着色器只运行在顶点上;光栅化器根据重心坐标为每个片元生成插值后的 @location 输入。
MINIMAL EXAMPLE
顶点颜色为什么会在三角形内部自动渐变?
@location 连接相邻着色阶段的用户数据。光栅化器根据片元在三角形中的位置插值顶点输出;整数或离散编号通常要使用 @interpolate(flat)。
wgslstruct 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);
}- color 会插值 三角形三个顶点的颜色按重心权重混合,默认带透视校正。
- objectId 不插值 flat 让整个图元使用一个离散值,避免得到无意义的小数编号。
- 位置不靠 location 系统位置使用 @builtin(position),不占用用户 location。
片元着色器收到连续变化的 color,同时 objectId 在整个三角形内保持不变。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开,不打断主线实验。
展开⌄
WGSL 接口@location为用户自定义的阶段输入输出分配数字槽位,用于连接顶点属性或相邻着色阶段;两端 location 编号与数据类型必须兼容。光栅化Interpolation光栅化器把顶点阶段输出按三角形重心坐标生成每片元输入,默认进行透视校正。光栅化@interpolate(flat)让一个 varying 在整个图元中保持 provoking vertex 的值,适合对象 ID、材质编号等离散数据。光栅化Varying从顶点阶段传到片元阶段的用户数据;通常用 @location 对接,并由光栅化器在图元内部插值。光栅化Perspective Correction按裁剪空间 w 修正 varying 插值,使纹理坐标等属性在透视投影下保持视觉正确。几何数据Vertex图元装配使用的一个顶点记录,可包含位置、颜色、法线或纹理坐标;它是数据记录,不只等于一个二维或三维坐标。光栅化Fragment光栅化器为被图元覆盖的采样位置生成的片元候选,携带插值数据并经过片元着色、深度和混合后才可能写入像素。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
不用纹理,利用插值画出三角形线框。
回到原理,解释刚才发生了什么
先用结果建立反馈,再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
插值发生在哪里
它不是你在 WGSL 中写的循环,而是固定功能光栅化阶段完成的。位置决定覆盖关系,其他 location 输出按规则插值。
哪些数据不应平滑
材质编号、对象 ID、面编号等离散值应使用 flat,避免三角形内部出现无意义的小数。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后,再用完整映射处理跨平台或跨 API 迁移。
展开⌄
插值数学相同;两种语言用不同语法连接顶点输出与片元输入。
WebGL
顶点 shader 的 out 与片元 shader 的同名 in 在 Program 链接时匹配。
WebGPU
两个入口通过相同 @location 和兼容类型连接,可显式指定 interpolate。
比较插值时使用同一组顶点值与坐标,否则视觉差异可能来自输入而不是 API。