阶段 3 · 3D基础18 分钟

Sampler：寻址与过滤策略

nearest、linear 与 addressMode

并排比较最近邻和线性过滤，并观察 repeat 与 clamp-to-edge 的区别。

LEARNING GOALS

先明确本课目标

创建多个 GPUSampler

比较 mag/min filter

理解 addressMode

MENTAL MODEL · 再建立心智模型

Texture 保存像素，Sampler 保存“如何读取像素”的策略；同一纹理可以配多个采样器。

MINIMAL EXAMPLE

同一张纹理为什么能显示成像素块或平滑图像？

Sampler 把“如何读取纹理”从纹理数据中分离。nearest 选择最近 texel；linear 混合邻近 texel。一个 TextureView 可以同时配多个 Sampler。

最小例子javascript

const pixelSampler = device.createSampler({
  magFilter: 'nearest', minFilter: 'nearest',
});

const smoothSampler = device.createSampler({
  magFilter: 'linear', minFilter: 'linear',
});

magFilter 纹理被放大时使用的过滤方式。
minFilter 纹理被缩小时使用的基础过滤方式。
数据没有变化 两种视觉结果来自不同采样策略，不需要复制纹理。

像素画通常选 nearest；照片或连续图像通常选 linear，并结合 mipmap 改善缩小质量。

本课概念

GPUSampler Texture Filtering magFilter minFilter +2 个

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

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

展开⌄

纹理采样GPUSampler独立保存过滤、寻址、LOD 和比较采样策略，可与同一纹理组合出不同读取行为。纹理采样textureSample片元着色器中用纹理、采样器和 UV 读取过滤后的纹理值。纹理采样magFilter纹理被放大时的 texel 过滤方式，常用 nearest 保留像素块或 linear 平滑插值。纹理采样minFilter纹理被缩小时在单个 mip 层内使用的过滤方式，通常与 mipmapFilter 一起决定结果。纹理采样addressModeU/VUV 超出 0–1 时沿 U/V 方向如何处理，例如 clamp-to-edge、repeat 或 mirror-repeat。纹理采样Texture Filtering当采样位置落在 texel 之间或纹理被缩放时，决定怎样组合邻近 texel 的规则，例如 nearest 或 linear。

LIVE EXPERIMENT · 先获得反馈

边改边运行

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

本课挑战

添加第三个区域展示 clamp-to-edge。

DEEP DIVE · 实验之后

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

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

CORE IDEA

核心讲解

过滤发生在采样时

放大时 nearest 保留像素块，linear 在邻近 texel 间插值。缩小时还会涉及 mipmap 选择。

纹理和采样器可分离

资源分离让多个材质共享纹理数据但使用不同过滤、重复或比较策略。

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

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

展开⌄

API COMPARISON

过滤和寻址概念一致；WebGPU 将采样策略独立成可复用 GPUSampler。

WebGL

WebGL2 可把参数写在 Texture 上，也支持 Sampler Object 覆盖纹理采样状态。

WebGPU

GPUTexture 保存像素，GPUSampler 独立描述 filter/address，再共同进入 BindGroup。

WebGL 纹理参数可能随纹理走；迁移时应区分“像素资源”和“采样策略”两个生命周期。