WebGL 颜色与纹理
1.纹理坐标
纹理坐标是纹理图像上的坐标，通过纹理坐标可以在纹理图像上获取纹理颜色。WebGL系统中的纹理坐标系统是二维的，如图所示。为了将纹理坐标和广泛使用的x、y坐标区分开来，WebGL使用s和t命名纹理坐标（st坐标系统）。
纹理图像的四个角坐标为左下角（0.0，0.0），右下角（1.0,0.0），右上角（1.0， 1.0）和左上角（0.0， 1.0）。纹理坐标很通用，因为坐标值与图像自身的尺寸无关，不管是128*128还是128*256的图像，右上角的纹理坐标始终是(1.0, 1.0)。
2.纹理映射步骤
1.准备好映射到几何图形上的纹理图像。
2.为几何图形配置纹理映射方式。
3.加载纹理图像，对其进行写配置，以在WebGL中使用它。
4.在片元着色器中将相应的纹理从纹理中抽取出来，并将纹素的颜色赋给片元。
3.gl.createTexture()
创建纹理对象以存储纹理图像。
4.gl.deleteTexture()
使用textur删除纹理对象。如果删除一个已经被删除的纹理对象，不会报错也不会产生任何影响。
5.gl.pixelStorei(pname, param)
使用pname和param指定的方式处理加载得到的图像。参数
pname:可以是以下二者之一。gl.UNPACK_FLIP_Y_WEBGL,对图像进行Y轴反转。默认值为false；gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL,将图像RGB颜色值的每一个分量乘以A。默认为false；WEBGL，默认值为false。
param:指定非0（true）或0（false）。必须为整数。
例如：gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)，将图像进行Y轴反转。由于WebGL纹理坐标系统中的t轴的方向和PNG、BMP、JPG等格式图片的坐标系的Y轴方向相反。因此，只有将图像的Y轴进行反转，才能够正确地将图像映射到图形上。
6.gl.activeTexture(texUnit)
激活texUnit指定的纹理单元。参数：
texUnit:指定准备激活的纹理单元：gl.TEXTURE0、gl.TEXTURE1…、gl.TEXTURE7。最后的数字表示纹理单元的编号
系统支持的纹理单元个数取决于硬件和浏览器的WebGL实现，但在默认情况下，WebGL至少支持8个纹理单元。
7.gl.bindTexture(target, texture)
开启texture指定的纹理对象，并将其绑定到target上。此外，如果已经通过gl.activeTexture()激活了某个纹理单元，则纹理对象也会绑定到这个纹理单元上。参数：
target:gl.TEXTURE_2D或gl.TEXTURE_BUVE_MAP
texture:表示绑定的纹理对象
例如，之前执行了gl.activeTexture(gl.TEXTURE0)函数，激活了第0个纹理单元。现在执行gl.bindTexture(gl.TEXTURE_2D, texture)。那么纹理对象texture也会绑定到纹理单元gl.TEXTURE0上。
8.gl.texParameteri(target, pname, param)
将param的值赋给绑定到目标的纹理对象的pname参数上。参数：
target:gl.TEXTURE_2D或gl.TEXTURE_CUBE_MAP
pname:纹理参数
param:纹理参数的值
pname可指定4个纹理参数：
放大方法（gl.TEXTURE_MAP_FILTER）:当纹理的绘制范围比纹理本身更大时，如何获取纹理颜色。比如说，将16*16的纹理图像映射到32*32像素的空间时，纹理的尺寸变为原始的两倍。默认值为gl.LINEAR。
缩小方法（gl.TEXTURE_MIN_FILTER）: 当纹理的绘制返回比纹理本身更小时，如何获取纹素颜色。比如说，你将32*32的纹理图像映射到16*16像素空间里，纹理的尺寸就只有原始的一般。默认值为gl.NEAREST_MIPMAP_LINEAR。
水平填充方法（gl.TEXTURE_WRAP_S）:这个参数表示，如何对纹理图像左侧或右侧区域进行填充。默认值为gl.REPEAT。
垂直填充方法（gl.TEXTURE_WRAP_T）:这个参数表示，如何对纹理图像上方和下方的区域进行填充。默认值为gl.REPEAT。
可以赋给gl.TEXTURE_MAP_FILTER和gl.TEXTURE_MIN_FILTER参数的值包括：
gl.NEAREST: 使用原纹理上距离映射后像素中心最新的那个像素的颜色值，作为新像素的值。
gl.LINEAR: 使用距离新像素中心最近的四个像素的颜色值的加权平均，作为新像素的值（和gl.NEAREST相比，该方法图像质量更好，但也会有较大的开销。）
可以赋给gl.TEXTURE_WRAP_S和gl.TEXTURE_WRAP_T的常量：
gl.REPEAT:平铺式的重复纹理
gl.MIRRORED_REPEAT:镜像对称的重复纹理
gl.CLAMP_TO_EDGE:使用纹理图像边缘值
9.gl.texImage2D(target, level, internalformat, format, type, image)
将image指定的图像分配给绑定到目标上的纹理对象。参数：
target:gl.TEXTURE_2D或gl.TEXTURE_CUBE
level:传入0（实际上，该参数是为金字塔纹理准备的）
internalformat:图像的内部格式
format:纹理数据格式，必须使用与internalformat相同的值
type:纹理数据的类型
image:包含纹理图像的Image对象
纹理数据格式包含： gl.RGB（红、l绿色、蓝）、gl.RGBA（红、l绿色、蓝、透明度）、gl.ALPHA（0.0， 0.0， 0.0， 透明度）、gl.LUMINANCE、gl.LUMINANCE_ALPHA。
如果纹理图片是JPG格式，该格式将每个像素用RGB三个分量表示，所以参数指定为gl.RGB。其他格式，例如PNG为gl.RGBA、BMP格式为gl.RGB。
type参数指定了纹理数据类型，通常我们使用gl.UNSIGNED_BYTE数据类型。所有数据格式如下：
gl.UNSIGNED_BYTE:无符号整形，每个颜色分量占据1字节
gl.UNSIGNED_SHORT_5_6_5：RGB每个分量分别占据5、6、5比特
gl.UNSIGNED_SHORT_4_4_4_:RGBA每个分量分别占据4、4、4、4比特
gl.UNSIGEND_SHORT_5_5_5_1: RGBA，RGB每个分量个占据5比特，A分量占据1比特
10.专用于纹理的数据类型
sampler2D:绑定到gl.TEXTURE_2D上的纹理数据类型
samplerCube:绑定到gl.TEXTURE_CUBE_MAP上的纹理数据类型
11.gl.uniform1i(location, texUnit)
textUnit单元的纹理传递给着色器。参数：
location:纹理对象的地址
texUnit:纹理单元编号
例如gl.uniform1i(u_Sampler, 0)，将0号纹理传递给着色器中的取样器变量
12.vec4 texture2D(smapler2D sampler, vec2 coord)
从sampler指定的纹理上获取coord指定的纹理坐标处的像素颜色。参数：
sampler:指定纹理单元编号
coord：指定纹理坐标
返回值：纹理坐标处像素的颜色值，其格式由gl.texImage2D()的inernalformat参数决定。下面列出了不同参数下的返回值。如果由于某些愿意能导致纹理图像不可使用，那就返回（0.0, 0.0, 0.0 1.0）。
internalformat/返回值
gl.RGB/(R,G,B,1.0)
gl.RBGA/(R,G,B,A)
gl.ALPHA(0.0, 0.0, 0.0, A)
gl.LUMINANCE/(L, L, L, 1.0)
gl.LUMINANCE_ALPHA/(L, L, L, A)
13.texImage2D(target, level, internalformat, width, height, border, format, type, offset)
将image指定的图像分配给绑定到目标上的纹理对象。是WebGL2.0的函数，主要区分WebGL1.0的同名函数区别。参数：
target:gl.TEXTURE_2D或gl.TEXTURE_CUBE
level:传入0（实际上，该参数是为金字塔纹理准备的）
internalformat:图像的内部格式
width:文理绘制宽度
height:纹理绘制高度
format:纹理数据格式，必须使用与internalformat相同的值
type:纹理数据的类型
image:包含纹理图像的Image对象
