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);
相关文章
|
12月前
|
Web App开发 前端开发 JavaScript
WebGL:开始学习 / 理解 WebGL / WebGL 需要掌握哪些知识 / 应用领域 / 前端值得学WebGL吗
WebGL:开始学习 / 理解 WebGL / WebGL 需要掌握哪些知识 / 应用领域 / 前端值得学WebGL吗
386 0
|
前端开发
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
2026 0
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
|
JavaScript 前端开发 Web App开发
带你读《Three. js开发指南: 基于WebGL和HTML5在网页上渲染 3D图形和动画(原书第3版)》之一:使用Three.js创建你的第一个三维场景
本书将介绍如何直在浏览器中创建漂亮的3D场景和动画,并且充分发挥WebGL和现代浏览器的潜能。首先介绍基本概念和基础组件,然后通过逐渐扩展示例代码逐步深讲解更多高级技术。在本书中读者将学到如何从外部加载3D模型和具有真实效果的材质纹理、学习使用Three.js提供的摄像机组件来实现在3D场景中飞行和走动、如何将HTML5视频和画布作为材质贴在3D模型表面。此外还将学习变形动画和骨骼动画,甚至还会涉及在场景中使用物理模拟的方法,例如重力、碰撞检测等等。
|
4月前
|
前端开发 JavaScript 程序员
webgl学习笔记1_创建场景
webgl学习笔记1_创建场景
31 0
|
4月前
|
移动开发 前端开发 JavaScript
游戏开发技术- 请谈谈WebGL与Canvas的区别,以及在什么情况下更适合使用WebGL。
WebGL和Canvas都是网页游戏开发的关键技术。Canvas是2D绘图API,适合初学者和简单的2D游戏,而WebGL是基于OpenGL的3D渲染标准,用于复杂3D图形和游戏,提供GPU硬件加速。当涉及3D渲染、高级视觉效果或高性能需求时,WebGL是更好的选择。对于轻量级2D应用,Canvas就足够了。某些游戏引擎支持两者自动切换,以实现最佳性能和兼容性。
314 4
|
JSON 前端开发 定位技术
Leaflet开发:webgl方式加载point
Leaflet开发:webgl方式加载point
239 0
Leaflet开发:webgl方式加载point
|
移动开发 前端开发 JavaScript
什么是 WebGL?
什么是 WebGL?
237 0
Sprite渲染流程-纹理绑定
Sprite渲染流程-纹理绑定
77 0
|
编解码 数据可视化 图形学
webgl系列之对光栅化的理解
前言 周末没事的学习了光栅化进一步理解, 从底层去学习,遇到问题才会从容不迫, 并同时把这些知识分享给大家, 如果大家没时间看视频的话,废话不多说, 直接开始吧, 这里先做一个概念的铺垫在3D即将渲染到我们屏幕当中来的时候。而接下来我们要做的是把这个标准立方体绘制到屏幕上,这样才能最终被我们所看见。 不清楚的同学看下这篇文章吧 可视化入门跳转到坐标系转换那里 我们简单看下这张图: 图片 变换过程 而光栅化的过程发生在哪里 ,其实 就是物体通过MVP变换,把摄像机观测的空间压缩成了一个标准立方体。然后将标准的立方体【-,1,】绘制到屏幕上的这些过程 图片 转换 在做这步操作之前,我们首
webgl系列之对光栅化的理解
|
图形学 异构计算 索引
OpenGL 3D 模型加载和渲染
在使用 OpenGL 绘制时,我们最多绘制的是一些简单的图形,比如三角形、圆形、立方体等,因为这些图形的顶点数量不多,还是可以手动的写出那些顶点的,可要是绘制一些复杂图形该怎么办呢?
1201 0
OpenGL 3D 模型加载和渲染