系列博客总目录：https://segmentfault.com/a/1190000040716735

GPUSampler：采样器

GPUSampler 采样器对象，对着色器中的纹理资源进行过滤或者编码。

[Exposed=(Window, DedicatedWorker), SecureContext]
interface GPUSampler {
};
GPUSampler includes GPUObjectBase;

采样器的创立

通过 device.createSampler() 办法即可创立，这个办法一样须要一个对应类型为 GPUSamplerDescriptor 的参数对象。

dictionary GPUSamplerDescriptor : GPUObjectDescriptorBase {
  GPUAddressMode addressModeU = "clamp-to-edge";
  GPUAddressMode addressModeV = "clamp-to-edge";
  GPUAddressMode addressModeW = "clamp-to-edge";
  GPUFilterMode magFilter = "nearest";
  GPUFilterMode minFilter = "nearest";
  GPUFilterMode mipmapFilter = "nearest";
  float lodMinClamp = 0;
  float lodMaxClamp = 32;
  GPUCompareFunction compare;
  [Clamp] unsigned short maxAnisotropy = 1;
};

其中，

• 参数 addressModeU、addressModeV、addressModeW 是 GPUAddressMode 枚举类型的，默认值均为 "clamp-to-edge"，意义是纹理宽度、高度、深度三个方向上的填充模式，详见下文 GPUAddressMode 的解释；
• 参数 magFilter、minFilter 和 mipmapFilter 是 GPUFilterMode 枚举类型的，默认值均为 "nearest"。别离示意放大、放大时的采样形式，以及 mipmap（多级纹理）切换等级时的采样形式，详见下文对于 GPUFilterMode 的解释；
• 参数 lodMinClamp、lodMaxClamp 指定细节档次的最大和最小级别，默认别离为 0、32，应该是对应的 Mipmap；
• 参数 compare 类型是 GPUCompareFunction，如果指定这个参数，该采样器将变成一个具备指定比拟性能的比拟采样器；
• 参数 maxAnisotropy 默认值是 1，示意采样器能用到的最大各向异性值，大多数对这个的实现是 1 到 16。各向异性无关概念见文末参考资料局部。

GPUAddressMode

enum GPUAddressMode {
  "clamp-to-edge",
  "repeat",
  "mirror-repeat"
};

这个其实就是填充形式，有趣味的敌人能够本人设置一下 Windows 的壁纸。

clamp-to-edge 是超出原纹理外的像元，仍应用纹理边缘那一圈纹素，这里借用网友博客的图（WebGL 实现）：

"repeat" 即纹理坐标超界（0~1）后仍在纹理上循环取值，所谓的“平铺式的反复纹理”，仍借助网友的博客图（WebGL 实现，双向都为 repeat）：

"mirror-repeat" 即超界后再倒回去持续对称取值，所谓的“镜像对称式的反复纹理”，这里便不再补充图片。

译者注：Clamp 这个单词，在名词上是钳子，动词或形容词词性上大抵能够了解为“截取”、“切断”，即“得在什么什么范畴内”。

GPUFilterMode

enum GPUFilterMode {
  "nearest",
  "linear"
};

即放大放大滤波器，指定纹理放大或放大时如何采样。

"nearest" 是近邻采样算法，应用原纹理上映射后间隔像素核心最近的那个像素的色彩值，作为新像素的值。

"linear" 是线性采样算法，应用间隔新像素核心最近的四个像素的色彩值的加权均匀，作为新像素的值，然而计算会多些。

译者注：在过滤模式的抉择上，就没有 WebGL 那么多了，WebGL 多达 6 种

GPUCompareFunction

enum GPUCompareFunction {
  "never",
  "less",
  "equal",
  "less-equal",
  "greater",
  "not-equal",
  "greater-equal",
  "always"
};

GPUCompareFunction 指定比拟型采样器的品种。如果在着色器种用到了比拟型采样器，一个输出值将被和采样的纹理值进行比对，比方 0.0f 示意通过，1.0f 示意没通过，比对的后果将用于过滤操作。

• "never" 示意比拟永远不通过
• "less" 示意输出值 < 采样值就通过
• "equal" 示意输出值 = 采样值则通过
• "less-equal" 示意输出值 ≤ 采样值则通过
• "greater" 示意输出值 > 采样值则通过
• "not-equal" 示意输出值 ≠ 采样值时通过
• "greater-equal" 示意输出值 ≥ 采样值时通过
• "always" 示意总是通过

译者注：程度比拟低，不晓得有比对性能的采样器用于什么阶段，有什么用处，猜想与模板测试无关

采样器创立条件

下列条件齐全满足时能力胜利创立采样器：

• 设施对象可用；
• descriptor.lodMinClamp ≥ 0
• descriptor.lodMaxClamp ≥ lodMinClamp

• descriptor.maxAnisotropy ≥ 1

  • 若 descriptor.maxAnisotropy > 1，magFilter、minFilter、mipmapFilter 必须是 “linear”

否则会产生 GPUValidationError，并返回一个不可用的 GPUSampler 对象。

代码举例

采样器个别不会很简单，然而想深入研究纹理方面的常识，还是很有意思的，参考资料只是抛砖引玉，须要对外面的常识进行系统性学习。

// 创立一个齐全默认值的采样器
const sampler = device.createSampler()

// 创立一个放大放大滤波算法为“线性采样”的采样器
const sampler2 = device.createSampler({
  magFilter: "linear",
  minFilter: "linear",
})

参考资料

• 各向异性过滤 – 简书
• 各向异性滤波简略介绍 – 博客园
• WebGL1 Ext_texture_filter_anisotropic – MDN
• WebGL 纹理映射（如何在 WebGL 中应用纹理贴图）- 掘金
• WebGL 纹理详解 – 知乎
• OpenGL 纹理详解 – GithubIO

译者注

这部分波及纹理和渲染的技术，须要广搜材料学习，这是我所欠缺的。

其中 GPUAddressMode 和 GPUFilterMode 在 WebGL 中是有一样的定义的，别离为

WebGLRenderingContext.REPEAT、WebGLRenderingContext.CLAMP_TO_EDGE、WebGLRenderingContext.MIRRORED_REPEAT、WebGLRenderingContext.NEAREST、WebGLRenderingContext.LINEAR，相似概念就能够通过既有材料温习。