Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

WebGL(陆) texParameteri参数说明

  把一张图片贴到一个片段不是把图片直接丢上去就得了,因为图片是矩形的,而片段未必是矩形,这就要适当的裁剪。而且,他们的大小也未必相同,这样我们就需要通过适当的缩放来调整大小以便符合片段的需求。这篇咱就来说说texParameteri的具体用法。
  texParameteri是用来设置贴图的一些相关参数的,它的三个参数全是常量,这就很纠结。不过WebGL目前没有对3D贴图的支持,所以就少了很多东西。排除了3D贴图,第一个参数一般就只有TEXTURE_2D了。
  接着是第二个参数,有四个值可以用,分别是:
    TEXTURE_MAG_FILTER
    TEXTURE_MIN_FILTER
    TEXTURE_WRAP_S
    TEXTURE_WRAP_T
  先来看看前两个。当图片缩放时就需要重新计算每一像素的颜色,而缩放后的图片和原图的像素是无法对上的,因此颜色的分配就有很多算法。最基本的两种算法是“就近取色(NEAREST)”和“线性插值(LINEAR)”,这也是“TEXTURE_MAG_FILTER”和“TEXTURE_MIN_FILTER”的值。下面咱也来说说这个两个值。
  NEAREST:把原图在缩放后映射过去的像素直接使用,也就是对映射坐标取近似值,让每一个坐标都对应到像素上。这个做法可以确保颜色表不被破坏,缩放后使用的颜色表绝不会超出原图的颜色表。而且计算量小,所以速度很快。
  LINEAR:取映射坐标最接近的几个像素,把他们的颜色做平均值计算。这样缩放后颜色表就会和原图的不同,不过由于取了平均值,使得颜色的过度更加自然,可以有效的消除锯齿。但是由于需要计算颜色平均值,计算量就变高的,速度就稍为逊色。
  下面是效果图,这个东西比较精细,可能很难看清,仔细看文字的边缘。
  由于我把片段的大小设置成左小右大了,所以图片的坐标会使用MIN的,而右边则是MAG的。
  当然,图片缩放计算方法还有许多,只不过WebGL支持的只有这俩,其它的就不说了。除了这两个值以外,还有Mipmap贴图方式也是在这个地方设置的。确切的说是在“TEXTURE_MIN_FILTER”上设置的。“TEXTURE_MAG_FILTER”上没有没有。Mipmap其实就是把需要的图片分多个大小预先生成好,类似Win32编程中的图标组。不过它是把所有数据放在一起的,又有点类似CSS是Sprite。一共有4个值可以用:
    NEAREST_MIPMAP_NEAREST
    NEAREST_MIPMAP_LINEAR
    LINEAR_MIPMAP_NEAREST
    LINEAR_MIPMAP_LINEAR
  这些值我就不一个个说明了,因为有共同点可以概括。前面我们已经说了NEAREST和LINEAR,而这一组值其实局势NEAREST和LINEAR中间用MIPMAP连接的而已。也就是说,图片缩放的方式有指定两次。为什么是两次呢?第一次是生成Mipmap时使用的缩放,我们要把原图缩放成一组Mipmap图片。Mipmap图片的大小也是固定的,只不过有很多种可以选择而已。而片段的大小则不是固定的,所以从Mipmap上变换到片段上还需要一次缩放,这就是第二次。
  另外,在使用Mipmap方式贴图时候比普通的方式多一个步骤。在设置完上面这个值以后需要调用一次 webgl.generateMipmap(webgl.TEXTURE_2D);   这是方法是用来生成Mipmap的,如果使用了MIPMAP贴图方式却不调用这个方法就会抛出异常。
  以上只说了前两个设置。还有后两个“TEXTURE_WRAP_S”和“TEXTURE_WRAP_T”。这两个东西是用来指定图片平铺的。“TEXTURE_WRAP_S”是横向的设置,“TEXTURE_WRAP_T”是纵向的设置。他们有三个值:
    REPEAT
    MIRRORED_REPEAT
    CLAMP_TO_EDGE
  这三个值很容易理解的,测试也很容易看出结果。贴图默认都是平铺的,也就是第一个值。如果我们需要不平铺就可以设置成“CLAMP_TO_EDGE”,就像CSS中的“no-repeat”一样。中间“MIRRORED_REPEAT”也是平铺,只不过是正反交替的。看下面的截图就很容易明白。

  最后再说个东西,由于坐标系问题,直接贴图的图像是颠倒的,我上面的测试就使用了 webgl.pixelStorei(webgl.UNPACK_FLIP_Y_WEBGL,true);   用这个来调整整个坐标系。这个方法并不是属于贴图的东西,是对整个WebGL的设置,这个以后再说吧。测试贴图如果在意正反面就加上这句代码。另外,这篇文字我就不另哪个例子了,可以改动上一篇的例子测试。不过最好自己写个简单的矩形面来测试,上一篇的代码是旋转的立方体,所以测试不容易看出结果。

参考:
  http://wgld.org/d/webgl/w028.html
网名:
34.203.245.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^