WebGL2系列之采样器对象

前言

在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.TEXTUREMINFILTER
• gl.TEXTUREMAGFILTER
• gl.TEXTUREWRAPS
• gl.TEXTUREWRAPT
• gl.TEXTURECOMPAREMODE
• gl.TEXTURECOMPAREFUNC
  能够看出就是本来的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、前端可视化方面有深刻研究。对程序员思惟能力训练和培训、程序员职业规划有浓厚兴趣。