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

翻译 2017年08月16日 21:34:47

注:文章译自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


相关文章推荐

[WebGL入门]二十七,多纹理

多纹理进行渲染的时候应该注意的是,指定正确的纹理单位进行数据的处理,这就足够了。 其他的细节,主要是activeTexture函数和uniform1i函数的使用方法,这几个不出错的话,之后就可以在着色...

[WebGL入门]三十,混合系数

混色是将颜色和颜色混合处理的总称,在WebGL中主要是指源颜色和目标颜色这两种颜色的混合。源颜色是即将要绘制的颜色,目标颜色是已经绘制的颜色,源颜色如何处理,目标颜色如何处理,这些都可以单独进行设置。...

[WebGL入门]二十六,纹理绘图

在片段着色器中对光进行计算,阴影,亮点等效果都非常的漂亮,3D场景的真实度大幅度提升。并且能和顶点颜色一起使用,理解了前面讲解的内容之后,就应该能进行比较高质量的3D渲染了。 这一次,来看高级一点的纹...

《webgl入门指南》学习笔记三之three.js创建多重纹理

之前的demo看起来已经很真了,当然是在大家,一步一步step by step的情况下,被各种初始化的代码虐的体无完肤后的,才会有这么个感受。但是从一个对计算机图形无感的人来看,这当然是很粗糙的,比如...

[软件渲染器入门]六-应用纹理、背面剔除以及一些WebGL相关

下面是本系列的最后一个章节了。我们将看到如何从Blender中导出贴图和纹理坐标来使我们的网格应用纹理。如果你已经成功的了解了之前的教程,应用一些纹理对你来说应该是小菜一碟。主要概念依旧是在每个顶点间...

WebGL入门 颜色与纹理

第五章 颜色与纹理 gl.vertexAttribPointer()的步进和偏移参数 var VSHADER_SOURCE = 'attribute vec4 a_Posit...

22 WebGL使用多幅纹理

Title body { margin: 0; text-align: center; } ...

WebGL利用Three.js库写凹凸纹理

又是很久没更新,我不敢说是因为其它事,但是自己变懒了这个不可否认,做技术的如果做不出成果,一直潜心研究的人恐怕很少吧,好了废话不多说。    Three.js库作为webgl封装好的一个库,极大便利了...

21 WebGL进一步理解纹理映射

为了更好的对纹理相关的内容的理解,我们修改上一节的案例进行更加深入的了解。 接下来,我们将76行的纹理坐标进行了修改: var verticesSizes = new Fl...

WebGL 写入纹理

1.onload函数中加载initTexture()2.插入纹理var neheTexture; function initTexture() { //创建纹理空间 n...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[WebGL入门]二十八,纹理参数
举报原因:
原因补充:

(最多只允许输入30个字)