乐趣区

关于gpu:WebGPU-规范篇-05-采样器

系列博客总目录: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;
};

其中,

  • 参数 addressModeUaddressModeVaddressModeWGPUAddressMode 枚举类型的,默认值均为 "clamp-to-edge",意义是纹理宽度、高度、深度三个方向上的填充模式,详见下文 GPUAddressMode 的解释;
  • 参数 magFilterminFiltermipmapFilterGPUFilterMode 枚举类型的,默认值均为 "nearest"。别离示意放大、放大时的采样形式,以及 mipmap(多级纹理)切换等级时的采样形式,详见下文对于 GPUFilterMode 的解释;
  • 参数 lodMinClamplodMaxClamp 指定细节档次的最大和最小级别,默认别离为 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

译者注

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

其中 GPUAddressModeGPUFilterMode 在 WebGL 中是有一样的定义的,别离为

WebGLRenderingContext.REPEATWebGLRenderingContext.CLAMP_TO_EDGEWebGLRenderingContext.MIRRORED_REPEATWebGLRenderingContext.NEARESTWebGLRenderingContext.LINEAR,相似概念就能够通过既有材料温习。

退出移动版