[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入门 颜色与纹理

第五章 颜色与纹理 gl.vertexAttribPointer()的步进和偏移参数 var VSHADER_SOURCE = 'attribute vec4 a_Posit...
  • u012041225
  • u012041225
  • 2016年11月15日 23:28
  • 197

八、WebGL入门,纹理贴图

本节我们来讲WebGL里面很重要的纹理 纹理贴图在游戏开发中十分常见,但是纹理不单单只是一张贴图那么简单。 在WebGL中,纹理有多种,一维纹理:就是一条线;二维纹理:一张二维图片;二维纹理数组:由多...
  • a23366192007
  • a23366192007
  • 2016年04月27日 21:59
  • 2445

HTML5+webGL 多纹理的拼贴

仍然是探究如何用html5+webGL实现三维街景。本文的主题是如何给一个三维模型贴多张纹理,为何会有多张:因为是网络应用,就必须得考虑网络带宽的问题,如果一张纹理图片不经处理直接从服务器传输到客户端...
  • startwithdp
  • startwithdp
  • 2012年04月26日 18:43
  • 2740

WebGL自学教程——WebGL示例:7.2 改进的立方体程序(下):立方图纹理

7.2 改进的立方体程序(下):立方图纹理        除了2D纹理,WebGL还支持立方图纹理。我们知道立方体有六个面,你可以简单地把立方图纹理当成一个立方体,只不过该立方体的每个面是一个2D...
  • tiewen
  • tiewen
  • 2011年10月24日 15:15
  • 3500

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

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

20 WebGL使用纹理贴图

为什么需要纹理? 因为不可能所有的图像都靠代码生成,那是在浪费生命。 这一部分由于WebGL的安全机制,必须开启服务获取,或者允许浏览器访问本地文件,要不然WebGL无法获取文件。 ...
  • qq_30100043
  • qq_30100043
  • 2017年05月26日 17:57
  • 1202

22 WebGL使用多幅纹理

Title body { margin: 0; text-align: center; } ...
  • qq_30100043
  • qq_30100043
  • 2017年05月27日 14:41
  • 538

WebGL自学教程——WebGL示例:14. 渲染到纹理和多程序对象

14. 渲染到纹理和多程序对象       有的时候(比如实现镜像效果),需要将一些场景作为纹理。我们可以使用离屏渲染,使用帧缓冲来达到目的。具体点,是利用帧缓冲对象的附件。在帧缓冲对象中:  ...
  • tiewen
  • tiewen
  • 2011年11月01日 17:30
  • 3766

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

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

WebGL加载跨域纹理的解决方法

本人一直对WebGL很有兴趣,也试着尝试用osgjs写了个DEMO,很成功的出现了效果。可是当自己用ASP.net写了个服务端,想用自己写的服务器提供的数据来用做纹理,可是怎么也不出来,还报错。跟了下...
  • u011462674
  • u011462674
  • 2013年07月20日 18:56
  • 3315
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[WebGL入门]二十八,纹理参数
举报原因:
原因补充:

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