前言
在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);
欢迎关注公众号“ITman彪叔”。彪叔,拥有10多年开发经验,现任公司系统架构师、技术总监、技术培训师、职业规划师。在计算机图形学、WebGL、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。
ITman彪叔公众号
相关推荐
用WebGL构建程序行星生成器
创建,播放和分享像素、 在线WebGL着色器编辑器
《WebGL编程指南》的主要篇幅讲解了WebGL 原生API 和三维图形学的基础知识,包括渲染管线、着色器、矩阵变换、着色器编程语言(GLSL ES)等等,也讲解了使用WebGL 渲染三维场景的一般技巧,如光照、阴影、雾化等等。...
WebGL实例化图层案例。将多个相同模型但是具有不同的旋转缩放平移状态,通过实例化的方式把模型添加到场景中,提升性能。
为程序对象分配着色器对象(gl.attachShader()) 337 连接程序对象(gl.linkProgram()) 337 告知WebGL 系统所使用的程序对象(gl.useProgram()) 339 initShaders() 函数的内部流程 339 总结 342 第10 章 高级...
WebGL-2D-矩阵
4.1WebGL不存在相机对象 4.2法线转换 4.3WebGL实现方式 4.4模型一视见矩阵 4.5相机矩阵 4.6透视矩阵 4.7WebGL示例结构 4.8本章小结 第5章实现方案 5.1矩阵栈 5.23D场景的动画操作 5.3计时策略 5.4体系结构更新 5.5...
本书?前可以?把?教你使用WebGL进行编程,?且在不断更 新。
webgl载入模型webgl载入模型webgl载入模型 webgl载入模型webgl载入模型webgl载入模型
Unity通用WebGL模板Universal WebGL Template 1.2.1 仅供学习,请勿商用。
为程序对象分配着色器对象(gl.attachShader()) 337 连接程序对象(gl.linkProgram()) 337 告知WebGL 系统所使用的程序对象(gl.useProgram()) 339 initShaders() 函数的内部流程 339 总结 342 第10 章 高级...
4.1WebGL不存在相机对象 4.2法线转换 4.3WebGL实现方式 4.4模型一视见矩阵 4.5相机矩阵 4.6透视矩阵 4.7WebGL示例结构 4.8本章小结 第5章实现方案 5.1矩阵栈 5.23D场景的动画操作 5.3计时策略 5.4体系结构更新 5.5...
为程序对象分配着色器对象(gl.attachShader()) 337 连接程序对象(gl.linkProgram()) 337 告知WebGL 系统所使用的程序对象(gl.useProgram()) 339 initShaders() 函数的内部流程 339 总结 342 第10 章 高级...
untiy webgl 打开 PDF文件
WebGL之绘制三维地球。
为程序对象分配着色器对象(gl.attachShader()) 337 连接程序对象(gl.linkProgram()) 337 告知WebGL 系统所使用的程序对象(gl.useProgram()) 339 initShaders() 函数的内部流程 339 总结 342 第10 章 高级...
UnityWebGL文件选择.unitypackage
支持Webgl自动播放视频,支持unity2019以上版本,强烈推荐
webgl文档开发教程