WebGL2系列之采样器对象

简介: 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.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);
相关文章
|
8月前
|
Web App开发 前端开发 JavaScript
WebGL:开始学习 / 理解 WebGL / WebGL 需要掌握哪些知识 / 应用领域 / 前端值得学WebGL吗
WebGL:开始学习 / 理解 WebGL / WebGL 需要掌握哪些知识 / 应用领域 / 前端值得学WebGL吗
151 0
|
3天前
|
前端开发 JavaScript 程序员
webgl学习笔记1_创建场景
webgl学习笔记1_创建场景
20 0
|
3天前
|
移动开发 前端开发 JavaScript
游戏开发技术- 请谈谈WebGL与Canvas的区别,以及在什么情况下更适合使用WebGL。
WebGL和Canvas都是网页游戏开发的关键技术。Canvas是2D绘图API,适合初学者和简单的2D游戏,而WebGL是基于OpenGL的3D渲染标准,用于复杂3D图形和游戏,提供GPU硬件加速。当涉及3D渲染、高级视觉效果或高性能需求时,WebGL是更好的选择。对于轻量级2D应用,Canvas就足够了。某些游戏引擎支持两者自动切换,以实现最佳性能和兼容性。
|
JSON 前端开发 定位技术
Leaflet开发:webgl方式加载point
Leaflet开发:webgl方式加载point
190 0
Leaflet开发:webgl方式加载point
|
移动开发 前端开发 JavaScript
什么是 WebGL?
什么是 WebGL?
204 0
|
JavaScript 前端开发
JavaScript动画函数封装
JavaScript动画函数封装
123 0
JavaScript动画函数封装
|
存储 Web App开发 机器学习/深度学习
【网页特性】geolocation | video | Web Workers | 拖拽 | FileReader | canvas操作 | 弧度与角度转换
【网页特性】geolocation | video | Web Workers | 拖拽 | FileReader | canvas操作 | 弧度与角度转换
167 0
【网页特性】geolocation | video | Web Workers | 拖拽 | FileReader | canvas操作 | 弧度与角度转换
|
Web App开发 移动开发 前端开发
分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型
分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型
242 0
分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型
|
存储 前端开发 JavaScript
WEBGL学习【八】模型视图投影矩阵
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/78473425 ...
1060 0
|
JavaScript 前端开发
WEBGL学习【一】初识WEBGL
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/78352374 ...
1234 0