WebGL入门教程5 - 详解纹理滤镜(Texture Filter)

techbrood 发表于 2016-06-10 10:25:38

标签: webgl, texture, filter, mipmap

- +

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)。


possitive(4) views28739 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 常用光照类型基本概念工作原理及其计算公式

    在三维场景中,原理上物体的渲染效果取决于光照与物体表面的相互作用,对于渲染程序而言,可以通过把一些数学公式应用于像素着色来实现,从而模拟出真实生活中的...

  • React JSX语法简介

    JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...

  • 深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

    本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...

  • Three.js 对象局部坐标转换为世界坐标

    在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...

  • 如何使用Three.js加载obj和mtl文件

    OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...

  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...

  • IE各版本CSS Hack(兼容性处理)语法速查表

    为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • Processing.js和P5.js的功能简介和区别

    什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
    什么是Processing.js为了能让Proce...

  • 如何使用CSS3实现书页(书本)卷角效果

    我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • 更多...