前言

在 WebGL1 中，纹理的图片和采样信息都是写在纹理对象之中.

采样信息告诉 GPU 如何去读取贴图上图片的信息。

如果我们希望从同一个图片多次读取像素信息，但是每次读取的时候使用的过滤方式不一样, 此时我们需要创建两个不同的纹理对象。

“ 你说这样是不是很烦啊 ”
WebGL:“。。。”

采样器对象

在 WebGL2 中，引入了采样器对象，使用采样器对象，可以把纹理的过滤方式封装到采样器对象上面，而原本的纹理对象可以不用在指定过滤方式，因此一张图片可以只用创建一个纹理对象，对于不同的过滤方式，创建多个采样器；在使用纹理对象的时候，可以绑定纹理对象和采样器对象来实现图源和读取方式的指定。
纹理对象和采样方式被分开，一个纹理对象可以和多个采样器对象关联；多个纹理对象也可以和一个采样器关联。
如果使用采样器对象，一些 WebGL 的引擎就会需要产生代码上的变动。

创建采样器对象

通过方法 gl. createSampler 可以创建采样器对象，比如：

var samplerA = gl.createSampler();

gl.createSampler 方法

以下是 gl.createSampler 的签名

WebGLSampler gl.createSampler();

该方法没有参数，返回一个创建好的采样器对象。

指定采样器参数

通过方法 gl. samplerParameteri 可以指定采样器的参数。

gl. samplerParameteri 方法

以下是 gl. samplerParameteri 的签名

void gl.samplerParameteri(sampler, pname, param);
void gl.samplerParameterf(sampler, pname, param);

第一个参数是 sampler 对象，第一个参数是需要指定的参数名，第三个参数是参数值，其中参数名如下
这些参数包括

• gl.TEXTURE_MIN_FILTER
• gl.TEXTURE_MAG_FILTER
• gl.TEXTURE_WRAP_S
• gl.TEXTURE_WRAP_T
• gl.TEXTURE_COMPARE_MODE
• gl.TEXTURE_COMPARE_FUNC

可以看出就是原本的 WebGL1 中需要指定的纹理对象上的参数，只是现在移到了采样器对象上。

绑定采样器到纹理单元

通过函数 gl.bindSampler(unit, sampler)，可以把采样器绑定到指定的纹理单元，函数签名：

void gl.bindSampler(unit, sampler);

比如如下代码片段：

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(0, samplerA);

此时相当于把 texture 对象和 samplerA 对象绑定到了一起，此时对于纹理单元 0 的读取，数据源来自 texture 对象，而过滤方式来自原 samplerA。

删除采样器对象

通过 gl. deleteSampler 方法可以删除指定的采样器对象，函数签名如下：

void gl.deleteSampler(sampler);

参数指定要删除的采样器对象，比如代码：

gl.deleteSampler(sampler);

一个示例代码片段

下面是使用采样器的一个示例代码片段

var samplerA = gl.createSampler();
gl.samplerParameteri(samplerA, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST);
gl.samplerParameteri(samplerA, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.samplerParameteri(samplerA, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.samplerParameteri(samplerA, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

var samplerB = gl.createSampler();
gl.samplerParameteri(samplerB, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(samplerB, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.samplerParameteri(samplerB, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
gl.samplerParameteri(samplerB, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);

// ...

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(0, samplerA);

gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(1, samplerB);

欢迎关注公众号“ITman 彪叔”。彪叔，拥有 10 多年开发经验，现任公司系统架构师、技术总监、技术培训师、职业规划师。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。

欢迎关注公众号“ITman 彪叔”。彪叔，拥有 10 多年开发经验，现任公司系统架构师、技术总监、技术培训师、职业规划师。熟悉 Java、JavaScript、Python 语言，熟悉数据库。熟悉 java、nodejs 应用系统架构，大数据高并发、高可用、分布式架构。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。