初级入门 --- 纹理贴图：为形体穿上外衣
之前章节我们学习了绘制单一和渐变颜色的三角形，但是在实际的建模中（游戏居多），模型表面往往都是丰富生动的图片。这就需要有一种机制，能够让我们把图片素材渲染到模型的一个或者多个表面上，这种机制叫做纹理贴图，本节我们学习如何使用 WebGL 进行纹理贴图。
什么是贴图和贴图的格式
之前章节的示例中，为图形增加色彩仅仅是用了简单的单色和渐变色，但是实际应用中往往需要一些丰富多彩的图案，我们不可能用代码来生成这些图案，费时费力，效果也不好。通常我们会借助一些图形软硬件（比如照相机、手机、PS等）准备好图片素材，然后在 WebGL 中把图片应用到图形表面。WebGL 对图片素材是有严格要求的，图片的宽度和高度必须是 2 的 N 次幂，比如 16 x 16，32 x 32，64 x 64 等。实际上，不是这个尺寸的图片也能进行贴图，但是这样会使得贴图过程更复杂，从而影响性能，所以我们在提供图片素材的时候最好参照这个规范。
纹理坐标系统
纹理也有一套自己的坐标系统，为了和顶点坐标加以区分，通常把纹理坐标称为 UV，U 代表横轴坐标，V 代表纵轴坐标。
图片坐标系统的特点是：
左上角为原点(0, 0)。
- 向右为横轴正方向，横轴最大值为 1，即横轴坐标范围【1，0】。
- 向下为纵轴正方向，纵轴最大值为 1，即纵轴坐标范围【0，1】。
- 纹理坐标系统不同于图片坐标系统，它的特点是：
左下角为原点(0, 0)。
- 向右为横轴正方向，横轴最大值为 1，即横轴坐标范围【1，0】。
- 向上为纵轴正方向，纵轴最大值为 1，即纵轴坐标范围【0，1】。
如下图所示：
纹理坐标系统可以理解为一个边长为 1 的正方形。
按照规范所讲，我们首先准备一张符合要求的图片，这里自己制作一个尺寸为宽高分别是 2 的 7 次方，即 128 x 128 的图片。本节片元着色器中，不再是接收单纯的颜色了，而是接收纹理图片对应坐标的颜色值，所以我们的着色器要能够做到如下几点：
顶点着色器接收顶点的 UV 坐标，并将UV坐标传递给片元着色器。
- 片元着色器要能够接收顶点插值后的UV坐标，同时能够在纹理资源找到对应坐标的颜色值。
- 我们看下如何修改才能满足这两点：
顶点着色器
- 首先，增加一个名为 v_Uv 的 attribute 变量，接收 JavaScript 传递过来的 UV 坐标。
- 其次，增加一个 varying 变量 v_Uv，将 UV 坐标插值化，并传递给片元着色器。
precision mediump float;
// 接收顶点坐标 (x, y)
attribute vec2 a_Position;
// 接收 canvas 尺寸(width, height)
attribute vec2 a_Screen_Size;
// 接收JavaScript传递过来的顶点 uv 坐标。
attribute vec2 a_Uv;
// 将接收的uv坐标传递给片元着色器
varying vec2 v_Uv;
void main(){
vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
position = position * vec2(1.0,-1.0);
gl_Position = vec4(position, 0, 1);
// 将接收到的uv坐标传递给片元着色器
v_Uv = a_Uv;
}
片元着色器 首先，增加一个 varying 变量 v_Uv，接收顶点着色器插值过来的 UV 坐标。
其次，增加一个 sampler2D 类型的全局变量 texture，用来接收 JavaScript 传递过来的纹理资源（图片数据）。
precision mediump float;
// 接收顶点着色器传递过来的 uv 值。
varying vec2 v_Uv;
// 接收 JavaScript 传递过来的纹理
uniform sampler2D texture;
void main(){
// 提取纹理对应uv坐标上的颜色，赋值给当前片元（像素）。
gl_FragColor = texture2D(texture, vec2(v_Uv.x, v_Uv.y));
}
我们首先要将纹理图片加载到内存中：
var img = new Image();
img.onload = textureLoadedCallback;
img.src = "";
图片加载完成之后才能执行纹理的操作，我们将纹理操作放在图片加载完成后的回调函数中，即textureLoadedCallback。
需要注意的是，我们使用 canvas 读取图片数据是受浏览器跨域限制的，所以首先要解决跨域问题。
那么，针对图片跨域问题我们可以采用三种方式来解决：
第一种方法：设置允许 Chrome 跨域加载资源
在本地开发阶段，我们可以设置 Chrome 浏览器允许加载跨域资源，这样就可以使用磁盘地址来访问页面了。
第二种方法：图片资源和页面资源放在同一个域名下
除了设置 Chrome，我们还可以将图片资源和页面资源部署在同一域名下，这样就不存在跨域问题了。
第三种方法：为图片资源设置跨域响应头
实际生产环境中，图片资源往往部署在 CDN 上，图片和页面分属不同域，这种情况的跨域访问我们就需要正面解决了。
假设我们的图片资源所属域名为：https://cdn-pic.com，页面所属域名为 https://test.com。
解决方法如下：
首先：为图片资源设置跨域响应头：
Access-Control-Allow-Origin：`https://test.com`
其次：在图片加载时，为 img 设置 crossOrigin 属性。
var img = new Image();
img.crossOrigin = '';
img.src = 'https://cdn-pic.com/test.jpg'
做完这两步，我们就可以真正的加载跨域图片了。 解决了图片加载跨域问题，我们就可以开始纹理贴图了。
我们定义六个顶点，这六个顶点能够组成一个矩形，并为顶点指定纹理坐标。
var positions = [
30, 30, 0, 0, //V0
30, 300, 0, 1, //V1
300, 300, 1, 1, //V2
30, 30, 0, 0, //V0
300, 300, 1, 1, //V2
300, 30, 1, 0 //V3
]
加载图片
var img = new Image();
img.onload = textureLoadedCallback;
img.src="";
图片加载完成后，我们进行如下操作：
首先：激活 0 号纹理通道gl.TEXTURE0，0 号纹理通道是默认值，本例也可以不设置。
gl.activeTexture(gl.TEXTURE0);
//创建纹理
var texture = gl.createTexture();
// 之后将创建好的纹理对象texture绑定 到当前纹理绑定点上，即 gl.TEXTURE_2D。绑定完之后对当前纹理对象的所有操作，都将基于 texture 对象，直到重新绑定。
gl.bindTexture(gl.TEXTURE_2D, texture);
// 为片元着色器传递图片数据：
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
// 我们设置图片在放大或者缩小时采用的算法gl.LINEAR
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
// 之后为片元着色器传递 0 号纹理单元：
gl.uniform1i(uniformTexture, 0);
注意事项
我们总结一下贴图的注意点：
- 图片最好满足 2^m x 2^n 的尺寸要求。
- 图片数据首先加载到内存中，才能够在纹理中使用。
- 图片资源加载前要先解决跨域问题。
