在WebGL1中,纹理的图片和采样信息都是写在纹理对象之中.
采样信息告诉GPU如何去读取贴图上图片的信息。
如果我们希望从同一个图片多次读取像素信息,但是每次读取的时候使用的过滤方式不一样, 此时我们需要创建两个不同的纹理对象。
"你说这样是不是很烦啊"
WebGL: “。。。”
在WebGL2中,引入了采样器对象,使用采样器对象,可以把纹理的过滤方式封装到采样器对象上面,而原本的纹理对象可以不用在指定过滤方式,因此一张图片可以只用创建一个纹理对象,对于不同的过滤方式,创建多个采样器;在使用纹理对象的时候,可以绑定纹理对象和采样器对象来实现图源和读取方式的指定。纹理对象和采样方式被分开,一个纹理对象可以和多个采样器对象关联; 多个纹理对象也可以和一个采样器关联。如果使用采样器对象,一些WebGL的引擎就会需要产生代码上的变动。
通过方法gl. createSampler可以创建采样器对象,比如:
var samplerA = gl.createSampler();
以下是gl.createSampler的签名
WebGLSampler gl.createSampler();
该方法没有参数,返回一个创建好的采样器对象。
通过方法gl. samplerParameteri可以指定采样器的参数。
以下是gl. samplerParameteri的签名
void gl.samplerParameteri(sampler, pname, param);
void gl.samplerParameterf(sampler, pname, param);
第一个参数是sampler 对象,第一个参数是需要指定的参数名,第三个参数是参数值,其中参数名如下这些参数包括
通过函数 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、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。