系列博客总目录: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
,相似概念就能够通过既有材料温习。