WebGL入门教程5 - 详解纹理滤镜(Texture Filter)
WebGL中使用纹理贴图来实现细腻的物体表面观感,其中一个重要的参数是纹理滤镜(Texture Filter)。
这个参数用来处理当对象出现缩放时,纹理如何处理中间点或被压缩的点。
我们知道纹理在使用中一个经典问题是会出现走样,滤波器就是用来实现纹理反走样的技术。
gl.bindTexture(gl.TEXTURE_2D, textures[0]); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textures[0].image); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.bindTexture(gl.TEXTURE_2D, textures[1]); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textures[1].image); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.bindTexture(gl.TEXTURE_2D, textures[2]); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textures[2].image); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D);
上面的代码使用了3个纹理,分别设置了不同的参数。
最近滤镜(Nearest Filter)
第1个纹理的gl.TEXTURE_MAG_FILTER 和 gl.TEXTURE_MIN_FILTER 参数都被设置为gl.NEAREST。它表示当纹理被放大或缩小时(通常是通过缩放一个3D对象),WebGL需要使用一个滤镜(filter)来决定缩放后的一个给定点的颜色,在设定颜色时取原图中距离最近的点。如果纹理没有缩放,这个当然没问题,缩小时也还行。但是当放大时,会因为不连续而出现块状效应。但这个滤镜最简单,因此性能最好。
线性滤镜(Linear filter)
第2个纹理缩小和放大滤镜参数均设置为gl.LINEAR。对于纹理放大而言,线性滤镜取原图中相邻像素并使用线性插值获得中间值来填充新点的颜色,比如黑白像素之间插入灰度颜色点,这样显然会获得更好的平滑过滤。当然只要是图像放大,都会产生一定的模糊感,因为无论你怎么处理,都不可能和原图一样清晰。线性滤镜对于纹理缩小处理效果不佳。
多级纹理图(Mipmaps)
第3个纹理gl.TEXTURE_MAG_FILTER取值gl.LINEAR 而 gl.TEXTURE_MIN_FILTER取值gl.LINEAR_MIPMAP_NEAREST。
上述的线性滤镜能很好的处理纹理放大的情况,但对于纹理缩小的处理和最近滤镜是半斤八两。
假如WebGL场景中的一个立方体被放到较远的地方,只有当前窗口的1/10,最近滤镜和线性滤镜将使用原图中的10个像素来生成新的像素点,假如这是一个条纹质地的对象,那么就有1/10的几率会出现条纹色,而9/10的机率不出现条纹色。这就会导致纹理缩小后,有些条纹仍然显示,有些不显示,而且随着缩小比率的变化(持续缩小对象时),条纹也会随机变化呈现闪烁不定的视觉效果。
你可以观察一下这个教程示例作品:
通过pageDown按键让它缩小,pageUp按键让它放大。默认使用纹理1,按“F”字母键,将切换到纹理2,再按“F”,切换到纹理3。
我们可能想通过计算原图周边10*10像素来获得新的纹理像素点,这样将会平滑得多,但实时执行这样的计算是昂贵的。这就是为什么我们要使用纹理3中的Mipmaps滤镜。
Mipmap滤镜通过预先生成一系列平滑过渡的辅助图像(称之为多级纹理图Mip Levels),比如1/2,1/4,1/8原图等等。每个mip level是上一级大图的平滑平均版本(即通过像素矩阵求平均)。当gl.TEXTURE_MIN_FILTER参数的值被设置为gl.LINEAR_MIPMAP_NEAREST时,我们告诉WebGL选择最接近的mip level并在它上面执行线性过滤得到新的纹理像素。
最后一行代码 gl.generateMipmap(gl.TEXTURE_2D);
告诉WebGL来生成多级纹理图(mipmap)。
最新评论
- 相关文章
2019年NodeJS框架Koa和Express选型比较
Koa和Express都是NodeJS的主流应用开发框架。
Express是一个完整的nodejs应用框架。Koa是由Express团队开发的,但是它有不同的关注点。Koa致力于核心中间件...创建非矩形网页页面元素的常用技术和实例代码
非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...
CSS3人行走动作图解和动画实现
对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...
JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
event是用户操作网页时发生的交互动作,比如clic...前端开发框架技术选型:Angular2 VS React VS jQuery
Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controll...
Babylon.js入门教程和开发实例
Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...
Three.js入门教程2 - 着色器(下)
这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程。
浏览器控制台报JS脚本执行错误:Module is not defined
现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...使用Canvas绘制完美的不完美圆形
真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...
HTML网页布局:静态、自适应、流式、响应式
静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...
Canvas实例教程:图像移动、大小调整和裁剪
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和...
使用requestAnimationFrame和Canvas给按钮添加绕边动画
要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...
使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...
div 、section 、article的区别和使用场景
div 、section 、article的区别和使用场景
主要区别,以及适用场合如下:
1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标...在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...