阶段 3 · 3D基础18 分钟

MSAA：让几何边缘更平滑

多重采样附件与 Resolve

创建 4 倍多重采样颜色纹理，渲染后 resolve 到单采样 Canvas 纹理。

LEARNING GOALS

先明确本课目标

创建 sampleCount: 4 的附件

让 pipeline.multisample 一致

使用 resolveTarget

MENTAL MODEL · 再建立心智模型

MSAA 在一个像素内保存多个覆盖样本，渲染结束时把它们解析成一个展示像素。

MINIMAL EXAMPLE

MSAA 为什么能让三角形边缘更平滑？

MSAA 在一个像素内保存多个覆盖样本，边缘像素因部分样本被几何覆盖而得到中间颜色；Resolve 再把多样本结果合成为单采样 Canvas 纹理。

最小例子javascript

const msaaTexture = device.createTexture({
  size: [canvas.width, canvas.height],
  sampleCount: 4,
  format,
  usage: GPUTextureUsage.RENDER_ATTACHMENT,
});

colorAttachments: [{
  view: msaaTexture.createView(),
  resolveTarget: context.getCurrentTexture().createView(),
}]

Pipeline 也设 4 multisample.count、颜色附件 sampleCount 必须一致。
只改善几何覆盖 MSAA 主要平滑边缘，不会自动消除纹理缩小锯齿。
Resolve 到 Canvas Canvas 通常是单采样纹理，不能直接作为 4× MSAA 写入目标。

边缘像素由多个覆盖样本平均得到更连续的亮度变化。

本课概念

MSAA Sample Count Resolve Multisample Texture +1 个

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

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

展开⌄

抗锯齿MSAA在每像素保存多个覆盖样本，主要平滑几何边缘，最后 resolve 到单采样纹理。抗锯齿Sample Count纹理和管线的多重采样数；附件与管线必须一致。抗锯齿Resolve把多采样颜色附件合成为单采样纹理，通常输出到 Canvas 当前纹理。抗锯齿Multisample Texture每像素保存多个样本的纹理，作为 MSAA Render Pass 附件，不能直接当普通单采样纹理展示。抗锯齿Coverage几何图元覆盖像素内哪些采样点的信息；MSAA 用覆盖比例产生更平滑的边缘颜色。

LIVE EXPERIMENT · 先获得反馈

边改边运行

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

本课挑战

实现尺寸变化时复用或重建 MSAA 附件的管理器。

DEEP DIVE · 实验之后

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

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

CORE IDEA

核心讲解

它主要改善几何边缘

MSAA 对三角形覆盖边缘有效，但不会自动解决着色器内部高频图案或纹理闪烁。

附件与管线必须一致

多重采样纹理的 sampleCount、渲染管线的 multisample.count 必须匹配，最后通过 resolveTarget 输出到单采样纹理。

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

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

展开⌄

API COMPARISON

多样本覆盖原理相同；WebGPU 显式拥有多样本附件和 resolve 目标。

WebGL

默认 framebuffer 可由上下文 antialias 隐式提供；离屏时用 multisample renderbuffer 再 blit。

WebGPU

创建 sampleCount>1 的纹理，Pipeline 使用相同 count，pass 指定 resolveTarget。

WebGL 默认画布的 antialias 不等于可复用的 MSAA 附件；迁移时画出真实资源关系。