[WebGL入门]二十八,纹理参数

标签: WebGL
238人阅读 评论(1) 收藏 举报
分类:

注:文章译自http://wgld.org/,原作者杉本雅広(doxas)

本次demo的效果


lufy:先啰嗦几句,真是好几年没写博客了,以后的工作要重新接触HTML5开发了,虽然没有以前那样强烈的写文章的欲望了,但是看了看以前的WebGL的教程只翻译了一小半,这么好的教程,就这么断更了也实在可惜,所以接下来我尽量抽些时间把这部分文章补上吧。


纹理所包含的特性

上次介绍了多纹理,在一个多边形中适用多个纹理。学会了多纹理渲染,就能通过纹理合成来实现各种各样的效果,进一步增强画面的表现力。
这次,为了进一步提升纹理的渲染质量,来介绍一下纹理参数。通过控制纹理参数,可以很好的提升模型的渲染质量,虽然会有些比较难理解的地方,这些可以以后再考虑。
那么,WebGL中的纹理参数到底是什么呢?现在就从这里开始说明。
纹理参数就是跟纹理渲染的时候的质量及特征相关的特性。比如说,即使是使用同样的解析度和大小的图片生成的纹理,如果纹理参数不同,那么渲染的结果差异会很大。
纹理参数可以分为两大种类,
第一种,是和质量或者叫品质相关的参数,改变这个参数的话,渲染的过滤方式会发生变化,所以采用完美补间的纹理,就可能会得到高质量的渲染效果了。
第二种,就是纹理的特征了。具体一点来说,通常指定了超出范围的纹理坐标的话,纹理是会发生变化的。一般来说,纹理坐标的范围应该设定在0-1之间,而实际上,即使指定了范围外的纹理坐标也是可以进行渲染的。但是,如果指定了纹理参数,那么这个范围外的值,也就决定了具体的含义。
那么,接下来就来看看纹理参数的设定方法以及会有怎样的渲染效果吧。

纹理参数的设定方法

首先来看看纹理参数的设定方法,设定纹理参数使用texParameteri函数,这个函数通过三个参数来设定纹理参数。
需要重点注意的是,这里设定的纹理参数只是针对在这个时间点所绑定的纹理,而WebGL中的的其他纹理是不受影响的。

>texParameteri的使用举例

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

这个texParameteri函数,第一个参数是纹理的种类,是个常量,通常使用2维的纹理时使用和之前一直在使用的gl.TEXTURE_2D。第二个参数指定纹理参数的种类,第三个参数是个常量。现阶段第一个参数使用固定的这个值就行了,其他两个参数,下面就来分别详细说明一下。


指定纹理的质量

指定纹理的质量,也就是品质,具体就是指纹理伸缩时指定以哪种方式来进行。WebGL中的放大和缩小的处理,是可以分别来设定的。
指定纹理放大时的补间方法时,texParameteri的第二个参数指定为gl.TEXTURE_MAG_FILTER,指定纹理缩小时的补间方法时,参数指定为gl.TEXTURE_MIN_FILTER。而可以利用的质量参数分别在下面的表格中列出了,需要注意的是,MAG_FILTER和MIN_FILTER可以指定的参数常量是不同的。

常量名意思MINMAG
gl.NEAREST最临近过滤,获得最靠近纹理坐标点的像素
gl.LINEAR线性插值过滤,获取坐标点附近4个像素的加权平均值
gl.NEAREST_MIPMAP_NEAREST选择最邻近的mip层,并使用最邻近过滤×
gl.NEAREST_MIPMAP_LINEAR在mip层之间使用线性插值和最邻近过滤×
gl.LINEAR_MIPMAP_NEAREST选择最邻近的mip层,使用线性过滤×
gl.LINEAR_MIPMAP_LINEAR在mip层之间使用线性插值和使用线性过滤×
使用MIPMAP的时候,只能是图片缩小表示时,指定的常量就是上面那些。而放大的时候,只能根据加权平均来进行补间处理。
上面列举的六个质量参数,越往下,处理负荷越高。通过名字的含义也可以看得出来吧,LINEAR系列要比NEAREST系列负荷大,也能得到相对高质量的效果。如果想要在放大及缩小时都使用最低负荷的处理的话,像下面这样设定就可以了。

>指定纹理品质的例子

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

指定纹理的特征

接着,看一下给纹理设定范围之外的纹理坐标时的情况,这个设定也使用和刚才同样的函数texPrameteri,第二个参数可以指定为两个类型,分别是纹理坐标的横轴和纵轴。
设定纹理的横坐标时用gl.TEXTURE_WRAP_S,设定纵坐标时用gl.TEXTURE_WRAP_T。
而下一个参数可以设定的值有一下三种。

定数名意味
gl.REPEAT范围外的值进行重复处理1.25 = 0.25 : -0.25 = 0.75
gl.MIRRORED_REPEAT范围外的值进行镜像重复处理1.25 = 0.75 : -0.25 = 0.25
gl.CLAMP_TO_EDGE将值控制在0-1之间1.25 = 1.00 : -0.25 = 0.00
用语言来表述的话,可能不太好理解,gl.REPEAT就是将图片一个接一个的平铺。gl.MIRRORED_REPEAT是像镜子一样翻转之后进行平铺,最后的gl.CLAMP_TO_EDGE就是将纹理坐标控制在0-1的范围内,无论是10,还是100,最后都只能是1。

>设定纹理坐标特征的例子

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);

总结

现在差不多可以理解纹理参数了吧,要注意纹理参数需要单独对这些纹理参数进行分别指定。这回的demo,是一边动态的改变纹理参数和坐标,一边进行对多边形进行渲染,纹章开头的贴图就是运行的结果。
这次的demo中的纹理使用的图片有两个。



第一个纹理用的图片


第二个纹理用的图片


第一个图片和之前用的图片完全相同,第二个图片稍微做了修改,从左到右进行了渐变处理,这样指定范围外的纹理坐标时就容易理解了。
demo中将上面两个图片设定为纹理,然后进行合成渲染。而且不断的改变多边形的坐标以及纹理参数,总共渲染了9个多边形。各个多边形,分别设定了不同的纹理参数,首先看上半部分的六个多边形。



因为是静态的图片,所以看起来比较费劲,在demo中多边形是以Y轴为中心旋转的,这样比较容易看出各个参数的区别。
接着是下半部分渲染了三个多边形,纹理坐标的设置如下。



可以看出,所有顶点都是0-1的范围之外,渲染效果如下。


一眼就能看出区别了吧,故意设定范围外的值的情况是不那么常见的,但是也有些特殊情况是一定要这么设定的,所以还是将这些设定彻底理解吧。
另外,就像之前说的那样,纹理参数只对当前绑定的纹理有效。demo中第二张图片的纹理一直是处于绑定状态的,而第一张图片的纹理,无论是质量还是纹理坐标都是没有做任何改变的,这个也是比较重要的一点。
下次说一说混色,理解了混色,就可以做半透明处理等合成效果了。


纹理参数不断变化的demo

http://wgld.org/s/sample_016/


转载请注明:转自lufy_legend的博客http://blog.csdn.net/lufy_legend


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1547162次
    • 积分:16488
    • 等级:
    • 排名:第641名
    • 原创:87篇
    • 转载:0篇
    • 译文:32篇
    • 评论:2286条
    联系我
    lufy.legend@gmail.com
    偶也微博了
    我写的书
      icon
      系统讲解HTML 5 Canvas的基础知识和高级技巧,深入剖析开源库件lufylegend的原理与使用以实例为向导,详细讲解射击游戏、物理游戏、网络游戏等各类游戏的开发思路和技巧
      qq交流群:298385345
    lufylegend.js游戏引擎官网
    博客专栏
    我开发的游戏
      三国记
    三国记是一款以三国时期为背景的战略类游戏,玩家可以任选一名君主,以统一全国为目标。
      三国记-乱世群雄
    本游戏以三国为背景,本次更新为第一部黄巾之乱的后续剧情,续作了群雄讨伐董卓,界桥之战以及救援徐州等剧情。
      三国记-经典战役版
    本游戏以三国为背景,玩家在游戏中可以体验三国中的四个经典战役,虎牢关之战,官渡之战,赤壁之战,夷陵之战。
    最新评论