Uint8ClampedArray

上一章中，我们看到，除了使用图像文件外，也可以通过类型化数组来直接生成为纹理图像的内容。

变量rgbaChanels表示该数组是一个RGBA通道值。数组的4个元素分别代表r, g, b, a的通道值。因此rgbaChanels只代表了一个像素的颜色值。变量srcData以类型化数组Uint8Array的方式作为纹理图像的内容。

但使用Uint8Array作为纹理图像的内容有不易觉察的小问题：

当数据源rgbaChanels各通道的值不位于[0, 255]的范围内时，就会出问题。

Uint8Array是普通的8位无符号整数数组，范围[0, 255]，溢出时会按类似于取模256的ToUint8机制处理。ECMAScript规范中ToUint8的具体步骤为：

1. 将值转换为32位有符号整数（按ToInt32）。
2. 将该整数视为无符号32位整数（取2³²的模）。
3. 取结果的低32位（相当于取模0xFF）。

而Uint8ClampedArray是钳位数组，同样存储[0, 255]，但在赋值时：小于0的值变成0，大于255的值变成255，而非环绕。

可见，对于表示图像内容的数据，只需将其值钳制在[0, 255]的范围内即可，而无需进行不必要的额外数据转换。因此，对于纹理图像数据，应使用Uint8ClampedArray来存储。

实际上，Canvas的图像数据（ImageData）正是使用了Uint8ClampedArray来存储图像数据，具体参见getImageData。

类型化数组颜色表达方式

之前向顶点着色器的顶点属性aColor传递颜色数值时，其格式是[0, 1]区间的浮点数：

而gl.texImage2D方法要求颜色值位于[0, 255]的区间内：

我们也可以使用JavaScript的十六进制表示法来编写其值：

这种方式，可以很方便地分解、照抄一个使用十六进制表示法的颜色字符串。

可视化类型化数组颜色值

下面使用Uint8ClampedArray类作为纹理图像数据的容器，存储了4个像素的颜色值，并将该纹理图像数据可视化：

Uint8ClampedArray是一个一维数组，而作为纹理图像数据，则要求转换为有宽高属性值的二维数组。

Color Brewer 调色板

Color Brewer是Grpahviz使用的多组预定义好的调色板，具体可参见本站的2D全部调色板，及3D部分调色板。

下面，我们拟选用Color Brewer的spectral10这一组调色板的10种颜色来作为纹理图像内容并将其可视化。

ColorBrewer的spectral10是一个具有10个十六进制颜色值的数组。GLColors.ImgDataFromFullHexArray方法将它们转换为一个Uint8ClampedArray实例。visualize函数按所指定的宽度值及高度值，以2D形式予以可视化。

值得注意的是在第2次调用visualize函数时，要求按每行2个、共选3行共6个像素的格式来显示。显然，它是纹理图像来源中所有10个像素的子集。因为所选像素数量小于总数，因此我们可以指定从第几行像素开始选择。代码中通过实参startRow指定了从第2行开始选择。

在下节可看到，gl的texImage2D方法中的形参srcOffset与此相关。

使用 Color Brewer 调色板作为纹理图像内容

上面的TextureMesh类无需指定图像文件，因此构造方法中也无此信息。

texImage2D方法可将纹理对象的内容初始化为所类型化数组的内容。其原型在WebGL 2.0中定义如下：

target

指定绑定的类型。可为TEXTURE_2D, TEXTURE_3D, TEXTURE_2D_ARRAY及TEXTURE_CUBE_MAP。

level

指定mipmap纹理等级。

internalformat

指定纹理内部格式。

width

指定纹理图像的宽度。

height

指定纹理图像的高度。

border

此值须为0。

format

指定像素数据的格式。

type

指定像素数据的数据类型。

srcData

类型为类型化数组的源数据。

srcOffset

字节偏移值。可选。

参数srcData与参数type存在着直接对应的关系，如下表所示。

对于代码：

参数srcData使用Uint8ClampedArray的类型化数组，共有10个像素的内容。要求按width值来排列每行，则每行2个像素，因此总的纹理图像来源宽为2，高为5。

而height只要求从中取出3行即可，则我们可以通过srcOffset来指定从第几个像素的字节偏移值开始。

运行程序texture-from-typedarray.html。

我们注意到，尽管纹理图像的尺寸很小，只有6个像素，但代码：

将整个纹理图像映射整个四边型，因此纹理图像被按比例拉伸了。

利用纹理坐标值映射边角关系

现在，为简化问题，我们拟使用下面的4个像素作为纹理图像的内容：

WebGL定义了一个如下图所示的纹理坐标系：

纹理坐标系与Canvas 2D、图像文件的坐标系的朝向一致，位于笛卡尔坐标系的第四象限，X轴正半轴朝右，Y轴正半轴朝下。

但纹理坐标系又是一种NDC坐标系，X轴正半轴最大值为1.0，Y轴正半轴最大值为1.0。

现在，将纹理图像放进纹理坐标系中。

则我们可以使用(0, 0)、(0, 1)、(1, 1)及(1, 0)来分别引用图像内容的左上角、左下角、右下角及右上角。

现在，如果需将一个2D纹理图像完整地贴到一个四边形中，其实质就是将纹理坐标系的4个角分别映射至四边形的4个角，如下图所示。

而下面的代码正是完成上图所示的操作。

运行应用。

翻转纹理坐标系的Y轴

有时，若因特殊需求而需要翻转Y轴时，可编写如下代码：

此时，纹理坐标系将因上述代码而在Y轴上进行了翻转，如下图所示：

上面的图像如实、机械地翻转了前面纹理坐标系的图像的Y轴，未对图像中的文本进行修正，因此，连文本都因翻转后而看得怪怪的。尽管如此，此时纹理坐标系左上角按逆时针方向至右上角的4个位置的坐标值分别为(0, 1)、(0, 0)、(1, 0)及(1, 1)。

现在，再将纹理图像放进上面经翻转后的纹理坐标系中以查看4个角的实际纹理坐标值：

因此，若不希望图像内容在进行纹理贴图时上下颠倒，则代码中引用的纹理坐标系也应相应调整为：

运行应用。效果应与上面例子的效果完全一样，第一行的像素颜色值应分别为红色及绿色。

加载图像文件作为纹理时，也是这个原理。

综上，当翻转Y轴时，按如下步骤来引用纹理坐标：

1. 先翻转纹理坐标系。
2. 将正常的图像放进翻转后的纹理坐标系中。
3. 引用翻转后的纹理坐标系的新坐标值。

我个人倾向于使用不翻转Y轴的纹理坐标系，该坐标系与Canvas 2D、图像文件的坐标系完全一致，且如实地反映了数组元素按正常顺序来排列的状态。

如若有时发现纹理图像上下贴反了，则可参照本节的原理予以修正。

重复

如果我们从左上角选取，且宽度与高度均为2.0。

运行应用。

结果将在X轴上与Y轴上出现各重复一次的情况。此时纹理坐标值为：

经核查，计算所得出的纹理坐标值是正确的。但其结果超出了原来默认的纹理坐标系[0, 1]的范围。可见，纹理坐标系并未只是限制在[0, 1]的范围内，如果我们选取的范围超出了默认的范围，且未作任何处理，则会出现空白的纹理像素。而对这些空白的区域，GLSL的texture函数会根据：

的默认设定，在X轴及Y轴上通过重复粘贴原来纹理图像的内容来填充这些空白的纹理像素区域。

因此，概括起来，就是只有当我们选择纹理图像的区域超出了纹理坐标系默认的[0.0, 1.0]的范围，才会出现是否需要重复的情况。

由此可见，对于默认的坐标值范围为[0, 1]范围内的纹理坐标系，我们可称之为单位纹理坐标系。一个单位纹理坐标系对应于整个原始纹理图像。

当我们指定纹理坐标值范围为[0, 2]时，则将另行生成新的纹理图像，可称之为实际纹理图像。且实际纹理图像的内容在S轴及T轴上按上面代码的要求，重复粘帖原始纹理图像的内容，直至纹理坐标值超出所指定的范围为止。如下图所示：

最后，再将此实际纹理图像的内容粘帖至网格物体上。

因此，指定纹理坐标值的本质，就是确定新的实际纹理图像的大小及其内容的过程。最后使用实际纹理图像的内容作为纹理贴图的来源。

延伸及镜像重复

同理，当我们选择纹理图像的区域超出了纹理坐标系默认的范围，我们可以改变上面的设定，让纹理图像延伸及镜像重复：

运行应用。

上面的效果，就是在纹理坐标系的S轴上，原来的纹理图像的最右侧像素的内容将一直延伸至末尾，而在T轴上，将原来的纹理图像进行翻转后再重复。

纯粹镜像重复的效果

NEAREST

我们来看TEXTURE_MAG_FILTER的值为NEAREST时的情况。

运行应用。

当为TEXTURE_MAG_FILTER指定NEAREST时，网格物体的每个像素的颜色值只取纹理坐标系中最靠近目标像素中心的1个纹理像素 (texture pixel，缩写为texel)的颜色值。

仍以上图为例，当需为纹理坐标值为(0.2, 0.3)的位置生成纹理插值时，该位置位于红色的纹理像素范围内，则该位置的颜色值取红色。同样，当需为纹理坐标值为(0.7, 0.4)的位置生成纹理插值时，该位置位于绿色的纹理像素范围内，则该位置的颜色值取绿色。

这种方式，适用于纹理像素比较简单、但需要较为清晰的颜色边界线的场合。例如，下面的代码渲染出国际象棋棋盘。

运行应用。

2 × 2的黑白相间的4个像素，在行与列上各重复4次即可。

对于上面的图像，如果我们不使用纹理技术，则需要构造许多的面，且要调用64次的drawElements方法，程序效能低下。

因此，当我们学习了新的技术后，解决问题的思路也应随之有所改变。

LINEAR

我们来看TEXTURE_MAG_FILTER的值为LINEAR时的情况。

下面使用一行两列共2个像素作为纹理图像内容。

运行应用。渲染效果与下面使用CSS渐变的效果完全一致：

因为只有一行的像素，因此我们将注意力集中于如何为两列的2个像素生成纹理插值的情况。

先将一红一绿两像素平均分列在一行上。则红色占左边的50%的区域，绿色占右边的50%的区域。

取红色区域水平方向上的中心位置，则该点X轴的值为0.25，在该位置绘制所指定的红色。

同样，取绿色区域水平方向上的中心位置，则该点X轴的值为0.75，在该位置绘制所指定的绿色。

在上述两个点的位置范围内作线性渐变。CSS相应代码：

由于为TEXTURE_WRAP_S指定了REPEAT，则在X轴的值为-25%的位置环绕出现绿色，则-25%与25%之间再作一线性渐变。

同样，75%与125%之间再作一绿色到红色的线性渐变。但上面的代码不再直接指定125%的位置，而是通过手工计算这两种颜色的加权平均值，作为在100%的位置的颜色值。两种效果完全一致。

因此，当TEXTURE_MAG_FILTER的值为LINEAR时，实际上就是先将纹理图像对应地粘帖至网格物体上，然后，在各个纹理像素之间作线性渐变。各行之间的纹理像素之间也依此规律进行线性渐变。

texture-mag-filter-linear-2.html使用了两行两列的像素，且纹理坐标区域为[0, 3]：

运行应用。

texture-mag-filter-linear-checkboard.html的源代码与上面国际象棋棋盘的源代码几乎一致，只改了下面一行语句：

运行应用。

因此，善用纹理像素间的线性渐变，可制作出出奇制胜的效果。

缩小应用纹理贴图的问题

如果将镜头拉远，则纹理贴图的图像也应随之越来越小。下面使用SVG制作示意图以模拟此场景。

观察者位置位于左下角，望向远处的右上角。左下角贴图为原图大小，由于透视，右上角的贴图因位置拉远而变得非常小。

设若原始贴图的分辨率为100px × 100px。左下角的图像尺寸为100px × 100px，右上角的图像尺寸为5px × 5px。此时将带来两个问题。

第一，右上角的贴图已经变得很小，小得根本看不清钟点数字及秒针。此时，其贴图的分辨率依旧为100px × 100px，但仅是尺寸变小了。而分辨率未改变，其所占用的内存空间依旧不改变。既然在视觉上已经小得看不清了，我们仍有必要保持如此高的分辨率吗？因此，这导致了不必要的内存空间浪费。若能将分辨率下调为5px × 5px或相应的尺寸，则在有效缩减内存空间的同时，在视觉上不会有任何影响。

第二，由于原图分辨率为100px × 100px，则纹理像素数量为10000个。而右上角贴图，屏幕像素数量仅为5px × 5px。因此，将导致一个屏幕像素将覆盖多个纹理像素。若按正常的点采样或线性插值，一是许多屏幕像素的颜色值将被多次改写，造成计算资源的白白浪费。二是机械地堆砌最终的采样结果，将导致出现严重的锯齿、闪烁及摩尔纹 (Moiré‌ pattern)。

摩尔纹的本质就是过多的纹理像素扎堆密布在过小的空间内而出现的干扰条纹。最常见于当我们使用手机近距离拍摄电脑或电视屏幕时所得到的照片。

Mipmap

因此，当较大的纹理图像要贴至较小的区域时，我们需要根据特定算法，从原来的纹理图像中合理地提取一部分特定的纹理像素来构建较小尺寸的纹理贴图。通过Mipmap技术，WebGL可以从原始的纹理图像中自动创建一系列尺寸不断缩小的纹理图像。如下图所示。

Mipmap示意图

每个纹理图像都有一系列不同级别 (level) 的版本。最开始的级别，也就是原始的纹理图像的级别为0级 (level 0)。越往后，级别等级将自动上升，如变为1级，2级，3级等等。而随着级别的上升，所自动创建的纹理图像尺寸将越来越小，宽度高度均变为上一级尺寸的一半。当要贴图的屏幕区域变小时，WebGL会自动选择最恰当尺寸的纹理图像。正是由于存在这种动态管理机制，3D应用程序就能在绚丽与效率之间取得完美的平衡。

调用一个generateMipmap语句即可实现此目标。

客户端代码：

将纹理坐标值范围设定在[0, 3]范围内，选取一个图像文件，创建FileTextureMesh的一个实例。

TextureMesh的源代码：

当实例化TextureMesh类时，将texParams.minFilter及magFilter属性值均指定为LINEAR。

FileTextureMesh的源代码：

而在实例化FileTextureMesh时，在图像加载完毕后，先调用：

先生成第0级的纹理图像。再调用：

generateMipmap方法的作用是根据当前纹理的第0级的图像数据，自动生成一系列后续完整的mipmap层级（第1级、第2级，......等等）。因此，当调用generateMipmap方法时，必须确保当前绑定的纹理对象的第0级已经包含了有效的图像数据（尺寸、格式、像素数据都已确定）。因此，其调用次序必须放在texImage2D方法之后。

之后，代码：

将原来的TEXTURE_MIN_FILTER的值改为LINEAR_MIPMAP_LINEAR，使得其渲染效果在相应的层级下进行线性插值。

可为TEXTURE_MIN_FILTER设置的值有：

• NEAREST
• LINEAR
• NEAREST_MIPMAP_NEAREST
• NEAREST_MIPMAP_LINEAR
• LINEAR_MIPMAP_NEAREST
• LINEAR_MIPMAP_LINEAR

当未调用generateMipmap（未启用mipmap），可设置值为NEAREST或LINEAR。

当调用了generateMipmap（启用了mipmap），则每层内需指定过滤方式，且层与层之间也需指定过滤方式（当从一层切换至另一层时，是否需要平滑过滤？）。则常量名约定为：每层内过滤方式_MIPMAP_层级间的过滤方式。

运行应用。

可以看出，即使我们将相机的镜头推远，图像变小，但纹理图像依旧很清晰。

TEXTURE_MIN_FILTER的默认值

为保障应用程序的性能，以及取得最佳的渲染效果，WebGL的TEXTURE_MIN_FILTER的默认值为LINEAR_MIPMAP_LINEAR。这意味着WebGL总是期待开发人员默认使用mipmap。

但如果未使用mipmap，正如我们之前的大部分应用程序，我们需要将其默认值修改为：

其值为NEAREST或LINEAR，其效果都一样。

如果不修改默认值，但又不调用generateMipmap方法，则纹理图像的内容为黑色。但线框、实体等其他渲染方式均正常。

运行应用。

因此，为避免出现黑屏情况，上一节在TextureMesh中将TEXTURE_MIN_FILTER的值先改为LINEAR，以确保不出现黑屏。然后，在FileTextureMesh中，待纹理图像加载完毕、填充纹理图像数据后，再将其值恢复为默认值LINEAR_MIPMAP_LINEAR。

用类型化数组修改

首先，为TextureMesh增加一个可以修改纹理内容的方法modifyTexture。

为简单起见，我们这里只使用一个纹理单元。modifyTexture方法将修改纹理图像中一个矩形区域内的像素值。该矩形从xoffset、yoffset的位置开始，矩形宽高值由参数width及height指定。所指定矩形区域的内容，统一使用蓝色进行填充。

texSubImage2D方法的原型与texImage2D方法的原型相似，但中间多了xoffset及yoffset两个参数，与参数width及height一起，用以构建一个矩形。将srcData所指定的类型化数组的内容，填充到绑定到TEXTURE_2D的当前纹理对象中，从而达到改变纹理图像的目的。因此，该方法的重点在于如何确定一个目标区域的矩形。

调用了texSubImage2D方法后，纹理图像内容已经改变，因此需再次调用generateMipmap方法重新生成mipmap。

下面是客户端的代码。

先运行应用，看效果。

共有8个纹理，左右各4个。这里通过引入TransformGroup类，目的在于将左右两组的纹理图像各整合为一组后一并整体移动。

左边一组的4个纹理不翻转Y轴，故顶行为红色；右边一组的4个纹理翻转Y轴（但仍使用默认的纹理坐标值），故顶行为绿色。

在每一组的纹理中，左上角均是原始的纹理，右上角只修改一个纹理像素，左下角修改一行中的两个纹理像素，右下角修改两行两列的纹理像素。

在TextureMesh的modifyTexture方法中，变量xoffset的值均为1，变量yoffset的值均为0。因此我们看到，蓝色区域所代表的矩形均从第1列、第0行开始。

可见，在texSubImage2D方法中，参数xoffset, yoffset, width及height的值均以像素为单位。

用另一图像内容修改

本节中，我们将加载两张图片，第1张图片用作纹理对象的内容，用第2张图片的内容来替换纹理对象的部分内容。

客户端代码：

texFile是原始纹理图像文件，replaceFile是拟覆盖部分内容的纹理图像文件。

因为需要同时等待两张图片都加载完毕后才更换纹理图像的内容，这里使用Promise来实现此目的（参见Promise一文）。

当图片加载完毕后，返回一个Promise对象。

TextureMesh加载纹理图像文件的代码如下：

Promise.all方法在参数为数组的所有元素都加载完毕后，才调用then方法，因此，在该方法中，可放心地访问所有图像的内容。

在该方法的回调函数中，先使用：

将数组imgs解构为img1及img2两个变量。然后，

先将第一张图片设置为纹理图像的内容。接着，

将纹理图像的特定区域的内容更新为第二张图片的内容。

运行应用。

texSubImage2D所指定的矩形区域不能超出原始纹理图像的大小。

目标设定

因为数据量很大，因此我们需要人为地大幅缩减渲染数据。我们准备在整个屏幕中只输出一个垂直的绿色的直线，然后，再读取其内容。

先运行应用，屏幕中间靠左的位置绘制了一条较短的绿色的直线。

确定结果缓冲区大小

在上面我们看到，我们使用下面的代码来表示一个像素的颜色：

数组中4个元素分别对应于RGBA的颜色成份。每个颜色成份值域为[0, 255]，共计256位，因此需要用1个字节（2⁸ = 256）来存储每个颜色成份。总共需4个字节来存储一个颜色值。也即每个像素需要4个字节的存储空间。

帧缓冲区所能渲染的像素总数为：

注意，若devicePixelRatio值为2，只会导致在内存中使用更多的数组元素来渲染为一个屏幕像素，但不会改变每个像素均使用4个颜色成份来表示的特点。

故所有像素所占的存储空间为：

现在，将帧缓冲区所有像素都读入buffer变量中：

找出首个绿色像素的位置

在帧缓冲区中，绝大多数的黑色的背景颜色，这不是我们要绘制的绿色直线的像素。因此，我们需要将首个像素在数组中的索引值找出来。

只要找到RGB颜色成份中有1个成份的值不为0.0，则找到了该位置，将该索引值赋值于firstIndex后，立即退出循环。然后，为验证，我们将该索引值后续4个元素值都打印出来：

因为WebGL默认开启抗锯齿（antialias: true）而导致颜色混合的原因，绿色的颜色值变成了上面的值。WebGLUtils的getContext方法代码为：

若将上面这行代码改为：

即初始化环境时关闭抗锯齿功能，将可看到原始的颜色值。

但不管如何，这确实是第一个绿色像素在数组中所在的索引值。

求出首个绿色像素所在的行与列

将firstPixelIndex除以RGBA_COMPS_SIZE，得出该像素是buffer数组中第几个像素，然后，再分别除以一行中的像素数量及求余，就可得出该像素在帧缓冲区所在的行与列。例如，第809行，第953列。

将算法打包为函数

上面，我们小心翼翼地求出第一个绿色像素在帧缓冲区中的位置，现在则可以将其打包为一个函数以备重复调用。

现在，根据所得到的位置，读取帧缓冲区中相应的矩形区域的值。

上面的代码，从第一个绿色像素开始，打出列宽为1、行数为5的数据。检查这些数据，如果每4个成份的值都均为：

则说明我们已从茫茫大海中找到了我们所需的数据。

通过上面的例子，我们可以厘清帧缓冲区、像素、devicePixelRatio、颜色成份、数据的存储等概念以及它们之间的关系，从而达到最高效地查找并读取数据的目的。

实际上，上面的代码只是找到了帧缓冲区中一部分有颜色值的地方，而非全部有颜色值的地方。因为一旦涉及到devicePixelRatio，情况将变成非常复杂。具体详见getImageData。