阶段 3 · 3D基础18 分钟

Mipmaps：为缩小采样准备多级纹理

mipLevelCount、LOD 与 mipmapFilter

手动写入多级 mip，显式采样不同 LOD，理解为什么远处纹理需要预过滤。

LEARNING GOALS

先明确本课目标

创建多 mip 纹理

向指定 mipLevel 写数据

使用 textureSampleLevel 观察层级

MENTAL MODEL · 再建立心智模型

Mip 链是一组逐级缩小的预过滤图像；采样器根据屏幕像素覆盖范围选择合适层级。

MINIMAL EXAMPLE

纹理缩得很小时，为什么只采原图会闪烁？

Mipmap 是同一纹理的逐级缩小版本。采样器根据屏幕像素覆盖范围选择合适 LOD，避免一个像素从原图大量 texel 中不稳定取样。

最小例子javascript

const mipLevelCount =
  1 + Math.floor(Math.log2(Math.max(width, height)));

const texture = device.createTexture({
  size: [width, height],
  mipLevelCount,
  format: 'rgba8unorm',
  usage: GPUTextureUsage.TEXTURE_BINDING |
         GPUTextureUsage.RENDER_ATTACHMENT,
});

层数公式 最大边每次除以 2，直到 1×1，因此层数是 floor(log2(max)) + 1。
WebGPU 不自动生成 每一级内容要由上传、Render Pass 或 Compute Pass 生成。
mipmapFilter 决定在相邻 mip 层之间是否进行插值。

远处物体采较小 mip，近处物体采高分辨率 mip，画面更稳定且缓存访问更高效。

本课概念

Mipmap LOD mipLevelCount mipmapFilter +1 个

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

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

展开⌄

纹理采样Mipmap按尺寸逐级缩小并预过滤的一组纹理图像，用于改善缩小采样质量、稳定细节并提高缓存效率。纹理采样mipLevelCountGPUTexture 包含的 mip 层总数；完整链通常为 floor(log2(最大边)) + 1。纹理采样mipmapFilter采样落在两个 mip 层之间时选择 nearest 层或对相邻两层进行 linear 插值。纹理采样textureSampleLevel在 WGSL 中显式指定 mip 层级进行纹理采样的函数，不依赖片元导数自动选择 LOD。纹理采样LOD表示 Level of Detail（细节层级）：采样器依据纹理在屏幕上的缩放程度选择合适的 mip 层，或由代码显式指定层级。

LIVE EXPERIMENT · 先获得反馈

边改边运行

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

本课挑战

写一个 render-pass mip 生成器，从第 n 层采样并绘制到第 n+1 层。

DEEP DIVE · 实验之后

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

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

CORE IDEA

核心讲解

为何能减少闪烁

远处一个屏幕像素可能覆盖许多 texel。直接采最高分辨率会欠采样，mip 预先聚合信息，减少摩尔纹和闪烁。

WebGPU 不自动生成 mip

应用可用 CPU、render pass 或 compute pass 生成。此实验手工写入不同颜色，便于直观看见 LOD。

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

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

展开⌄

API COMPARISON

LOD 与 mip 链数学一致，区别在于 WebGL 提供生成命令，WebGPU 需要应用自己构建。

WebGL

上传基础层后可调用 generateMipmap，或逐级 texImage2D 写入。

WebGPU

GPUTexture 声明 mipLevelCount，应用通过上传、RenderPass 或 Compute 生成各层。

不要寻找 WebGPU 的 generateMipmap；把 mip 生成视为资源构建管线的一部分。