WebGL自学教程——WebGL示例：3. 纹理三角形

 

3. 纹理三角形

　

    上章中的三角形虽然看起来比较鲜艳，但很多时候并不实用。我们想在三角形上显示一幅图片，或者更恰当点说，我们想让一张图片中和三角形对应的那一部分显示出来。这可以通过实用纹理图像来实现。这是本章的目的。

    为了让WebGL可以访问我们指定图像数据，我们需要将图像数据保存到WebGL内部的纹理对象中。首先，我们要创建纹理对象，使用WebGL函数createTexture()。然后，将该纹理对象设置为相应纹理类型的当前操作对象；这通过WebGL函数bindTexture(target, textureObject)完成。该函数的第一个参数表示要绑定的纹理类型，有TEXTURE_2D和TEXTURE_CUBE_MAP两种。 此处我们使用的是2D的图像，是2D的纹理，因此，第一个参数是TEXTURE_2D。之后，将我们指定的图像数据“拷贝”到该纹理对象对应的存储区以使WebGL内部能够访问到它。执行“拷贝”的WebGL函数分为两类，texImage2D系列和texSubImage2D系列（详情参考《WebGL参考手册》和《OpenGL ES 2.0 编程指南》）。前者更新整个纹理存储区的数据，后者可以更新部分存储区的数据。我们以HTML的image元素指定的图像作为纹理图像，并且一次性“拷贝”到纹理对象中，所以，我们使用的WebGL函数为：

        void texImage2D(GLenum target, GLint level, GLenum internalformat,
                        GLenum format, GLenum type, HTMLImageElement image)

    该函数的第一个参数指定要设置的某个具体数据块，要么是2D纹理的要么就是立方体纹理的某个面的，是下面的枚举之一：TEXTURE_2D、TEXTURE_CUBE_MAP_POSITIVE_X、 TEXTURE_CUBE_MAP_NEGATIVE_X、TEXTURE_CUBE_MAP_POSITIVE_Y、TEXTURE_CUBE_MAP_NEGATIVE_Y、TEXTURE_CUBE_MAP_POSITIVE_Z、TEXTURE_CUBE_MAP_NEGATIVE_Z。第二个参数指定要加载的纹理级别。它的意义将在抗锯齿的章节中介绍。目前我们只是设置最原始的图像数据，对应的纹理级别为0。internalformat指定纹理存储区的格式，可以为：RGBA、RGB、LUMINANCE_ALPHA、LUMINANCE、ALPHA。format指的是参数image代表的图像的像素的格式。要注意的是，在WebGL中，internalformat和format必须相同。type指定输入的像素数据类型，可以是下者之一：UNSIGNED_BYTE、UNSIGNED_SHORT_4_4_4_4、UNSIGNED_SHORT_5_5_5_1、UNSIGNED_SHORT_5_6_5。它的取值和format
密切相关，你可以把它当成是format的子格式。比如，当format为RGBA时，你才能设置type为UNSIGNED_SHORT_4_4_4_4和UNSIGNED_SHORT_5_5_5_1(UNSIGNED_BYTE比较特殊，它表示像素的的每个组份都用一个BYTE表示)。在本章示例中，使用的是一个24位的位图图像，RGB格式，UNSIGNED_BYTE类型（5位表示红色，6位表示绿色，5位表示蓝色）。最后的image参数，是我们在HTML中指定的image元素所代表的对象。

    图像数据弄到WebGL内部之后，在使用之前，要给它打上一个标识。在片段着色器中，将通过这个标识进行纹理访问。该标识我们称之为纹理