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);
相关文章
|
Web App开发 前端开发 JavaScript
WebGL:开始学习 / 理解 WebGL / WebGL 需要掌握哪些知识 / 应用领域 / 前端值得学WebGL吗
WebGL:开始学习 / 理解 WebGL / WebGL 需要掌握哪些知识 / 应用领域 / 前端值得学WebGL吗
466 0
|
JavaScript 前端开发 Web App开发
带你读《Three. js开发指南: 基于WebGL和HTML5在网页上渲染 3D图形和动画(原书第3版)》之一:使用Three.js创建你的第一个三维场景
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画,并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件,然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画,甚至还会涉及在场景中使用物理模拟的方法,例如重力、碰撞检测等等。
|
4月前
|
移动开发 前端开发 JavaScript
使用JavaScript和Canvas进行绘图
Canvas是HTML5的绘图工具,借助JavaScript实现网页上的图形、图像及动画创作。通过Canvas元素和2D渲染上下文,开发者能绘制图形、处理图像、制作动画,甚至用于游戏开发。基本步骤包括获取Canvas元素、设置绘图属性、绘制形状、处理图像以及实现动画。同时,注意性能优化,如减少不必要的重绘和使用Web Workers。Canvas结合WebGL还能实现3D效果,与Web Audio API结合则能做音频可视化。分享你的Canvas经验,探讨更多创意应用!
36 0
|
2月前
|
JavaScript 前端开发 图形学
|
30天前
|
JavaScript 前端开发
使用 WebGL 创建 3D 动画
【10月更文挑战第3天】使用 WebGL 创建 3D 动画
|
6月前
|
移动开发 前端开发 JavaScript
游戏开发技术- 请谈谈WebGL与Canvas的区别,以及在什么情况下更适合使用WebGL。
WebGL和Canvas都是网页游戏开发的关键技术。Canvas是2D绘图API,适合初学者和简单的2D游戏,而WebGL是基于OpenGL的3D渲染标准,用于复杂3D图形和游戏,提供GPU硬件加速。当涉及3D渲染、高级视觉效果或高性能需求时,WebGL是更好的选择。对于轻量级2D应用,Canvas就足够了。某些游戏引擎支持两者自动切换,以实现最佳性能和兼容性。
461 4
|
6月前
|
前端开发 JavaScript 程序员
webgl学习笔记1_创建场景
webgl学习笔记1_创建场景
44 0
|
JSON 前端开发 定位技术
Leaflet开发:webgl方式加载point
Leaflet开发:webgl方式加载point
268 0
Leaflet开发:webgl方式加载point
|
移动开发 前端开发 JavaScript
什么是 WebGL?
什么是 WebGL?
243 0