webgl api的理解

游戏中图片加载的过程解析：

CCSpriteFrame–>CCTexture2D–>Texture2D
CCLoader根据图片路径加载，假设图片是一张尺寸为512512，大小为512kb的png图片,
那他加载到内存，首先读取file需要开辟512kb的内存，然后将其展开则需要5125124(RGBA)8/(810241024)=1M内存
再调用gl.texImage2D(),这个时候又占用1M，所以需要内存会瞬间涨到2.5M,之后内存中的1.5M会释放掉

（jpg,png）->读到内存->读到显存
(pkm,pvr) ->读到内存->读到显存

####gl.activeTexture(gl.TEXTURE0)--------------------------------------------start–
这个函数是激活0块纹理单元，在GPU中至少设有八块纹理单元
在GPU操作任何纹理数据之前都必须要调用这个函数来指示是操作那块内存单元的，默认的都是操作0块内存单元
类似GPU_table[gl.TEXTURE+i];
接下来就是要绑定纹理缓冲区和纹理对象
this._glID = gl.createTexture();产生纹理对象
gl.bindTexture(gl.TEXTURE_2D, this._glID);绑定缓冲区和缓冲对象
再接下来就可以操作这块纹理数据了
####gl.activeTexture(gl.TEXTURE0)--------------------------------------------end–

####glTexParameteri()--------------------------------------------------------start–
###函数解析
图象从纹理图象空间映射到帧缓冲图象空间(映射需要重新构造纹理图像,这样就会造成应用到多边形上的图像失真),这时就可用glTexParmeteri()函数来确定如何把纹理象素映射成像素
void glTexParameteri(GLenum target,GLenum pname,GLint param)
target： 指定目标纹理，它只能取值GL_TEXTURE_1D或者GL_TEXTURE_2D；
pname：指定单值纹理参数的符号名称，可以选择的符号常数如下:GL_TEXTURE_MIN_FILTER、GL_TEXTURE_MAG_FILTER、GL_TEXTURE_WRAP_S、  GL_TEXTURE_WRAP_T;
param：指定pname的值
###参数解析
GL_TEXTURE_2D: 操作2D纹理
GL_TEXTURE_MIN_FILTER：纹理过滤–缩小过滤
GL_TEXTURE_MAG_FILTER：纹理过滤–放大过滤
GL_TEXTURE_WRAP_S：S方向上的贴图模式
GL_TEXTURE_WRAP_T：T方向上的贴图模式
GL_CLAMP: 将纹理坐标限制在0.0,1.0的范围之内.如果超出了会如何呢.不会错误,只是会边缘拉伸填充
GL_LINEAR: 线性过滤, 使用距离当前渲染像素中心最近的4个纹素加权平均值.
GL_LINEAR_MIPMAP_NEAREST: 使用GL_NEAREST对最接近当前多边形的解析度的两个层级贴图进行采样,然后用这两个值进行线性插值.
###纹理传入显存前一般都要设置如下参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, glFilter(gl, this._minFilter, mipFilter));纹理缩小过滤的方式
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, glFilter(gl, this._magFilter, -1));纹理放大过滤的方式
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, this._wrapS);设置S方向上的贴图模式（GL_REPEAT,GL_CLAMP,GL_MIRRORED_REPEAT_ARB,CLAMP_TO_BORDER_ARB,GL_CLAMP_TO_EDGE）
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, this._wrapT);设置T方向上的贴图模式(GL_REPEAT,GL_CLAMP,GL_MIRRORED_REPEAT_ARB,CLAMP_TO_BORDER_ARB,GL_CLAMP_TO_EDGE)
gl.texParameteri(gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT, this._anisotropy);设置纹理方向的最大值，通常为1
###线形滤波
使用了线性滤波的纹理贴图。
这需要机器有相当高的处理能力，但它们看起来很不错
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);           
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR); 
###接近滤波
从原理上讲，这种方式没有真正进行滤波。
它只占用很小的处理能力，看起来也很差。
唯一的好处是这样我们的工程在很快和很慢的机器上都可以正常运行
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);          
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);
###注意：我们在 GL_TEXTURE_MIN_FILTER 和 GL_TEXTURE_MAG_FILTER时你可以混合使用 GL_NEAREST 和 GL_LINEAR 。
纹理看起来效果会好些，如果我们更关心速度，可以全采用低质量贴图

纹理帖图会出现在物体表面的（u,v）位置上，这些值在[0.0,1.0]范围内。超出这个值域怎么去办呢，在OpenGL中用Texture Wrapping Mode来处理
效果可以参考：https://blog.csdn.net/elong_2009/article/details/12744057
1 重复（GL_REPEAT）：
图象在表面上重复出现。忽略纹理坐标的整数部分，并将纹理图的拷贝粘贴在物体表面上,这样才能做到无缝连接。
2. 截取（GL_CLAMP）：
将大于1.0的数值设置为1.0，将小于0.0的数值设置为0.0，即将超出[0.0,1.0]范围的数值截取到[0.0,1.0]范围内，
这样会导致纹理边缘的重复。
3. 镜像重复（GL_MIRRORED_REPEAT_ARB）：
图象在物体表面上不断重复，但是每次重复的时候对图象进行镜像或者反转。这样在纹理边缘处比较连贯。
4. 边界截取（CLAMP_TO_BORDER_ARB）：
在[0.0,1.0]范围外的参数值用单独定义的边界颜色或纹理边缘进行绘制。适合于绘制物体表面的贴花纸。
CLAMP_TO_BORDER_ARB在所有mipmap层次上对纹理坐标进行截取，使nearest和linear过滤只返回边界纹理单元的颜色。
5. 边缘截取（GL_CLAMP_TO_EDGE）：
总是忽略边界。处于纹理边缘或者靠近纹理边缘的纹理单元都用作纹理计算，但是不包括边界上的纹理单元。
在OpenGL1.2以前的版本中并未对最初的GL_CLAMP进行详细的说明。按照定义，在双线性插值过程中，在纹理边界以外的点是由纹理边缘像素和边界颜色各自一半混合形成的。
在OpenGL1.2中，引入了GL_CLAMP_TO_EDGE，用来纠正这个问题。
同时，GL_CLAMP_TO_BORDER_ARB则只对那些纹理边界上的边界点进行采样。因为很多硬件并不支持边界处理，所以实现GL_CLAMP_TP_EDGE和GL_CLAMP的效果好象是一样的。

####glTexParameteri()--------------------------------------------------------end–

####mipmap技术----------------------------------------------------------------start–
Mipmap技术有点类似于LOD技术，但是不同的是，LOD针对的是模型资源，而Mipmap针对的纹理贴图资源
使用Mipmap后，贴图会根据摄像机距离的远近，选择使用不同精度的贴图。
缺点：会占用内存，因为mipmap会根据摄像机远近不同而生成对应的n个贴图，所以必然占内存！,这个n和图片的尺寸有关，2^n = size;if size = 256*256,则n = 8;
优点：会优化显存带宽，用来减少渲染，因为可以根据实际情况，会选择适合的贴图来渲染，距离摄像机越远，显示的贴图像素越低，反之，像素越高！
MipMap可以用于跑酷类游戏，当角色靠近时，贴图清晰显示，否则模糊显示
如果我们使用的贴图不需要这样效果的话，就一定要把Generate Mip Maps选项和Read/Write Enabled选项取消勾选！因为Mipmap会十分占内存！
mipMap会让你的包占更大的容量！
效果可以参考：https://www.cnblogs.com/MrZivChu/p/mipmap.html
gl.hint(gl.GENERATE_MIPMAP_HINT, gl.NICEST);告诉OpenGL我们要用的是最快的压缩算法还是最高质量的压缩算法
gl.generateMipmap(gl.TEXTURE_2D);
####mipmap技术----------------------------------------------------------------end–

####gl.pixelStorei(GLenum pname,GLfloat param)-------------------------------start–
glPixelsStore 主要是用来设置像素存储的模式
参数描述：

1. pname：代表某种特性的标识符
2. param：设置对应pname的值
   panme参数主要包含16个标识符，其中带GL_PACK前缀的是压包（将数据从OpenGL中读入内存）参数，带GL_UNPACK前缀的是解包（从内存读入OpenGL）参数。
   参数 类型 初始默认值 取值范围 参数描述
   GL_PACK_SWAP_BYTES 布尔 false TRUE/FALSE 是否开启字节高低位交换
   GL_PACK_LSB_FIRST 布尔 false TRUE/FALSE 是否开启位的交换
   GL_PACK_ROW_LENGTH 整型 0 任何非负整数 一行包含的像素个数
   GL_PACK_IMAGE_HEIGHT整型 0 任何非负整数 第三维度参数的设置
   GL_PACK_SKIP_PIXELS 整型 0 任何非负整数
   GL_PACK_SKIP_ROWS 整型 0 任何非负整数
   GL_PACK_SKIP_IMAGES 整型 0 任何非负整数
   GL_PACK_ALIGNMENT 整型 4 1,2,4,8 内存中字节对齐方式
   GL_UNPACK_SWAP_BYTES布尔 false 同上PACK 同上PACK
   GL_UNPACK_LSB_FIRST 布尔 false 同上PACK 同上PACK
   GL_UNPACK_ROW_LENGTH 整型 0 同上PACK 同上PACK
   GL_UNPACK_IMAGE_HEIGHT 整型 0 同上PACK 同上PACK
   GL_UNPACK_SKIP_PIXELS 整型 0 同上PACK 同上PACK
   GL_UNPACK_SKIP_ROWS 整型 0 同上PACK 同上PACK
   GL_UNPACK_SKIP_IMAGES 整型 0 同上PACK 同上PACK
   GL_UNPACK_ALIGNMENT 整型 4 同上PACK 同上PACK
   ####gl.pixelStorei()---------------------------------------------------------------end–

####glCompressedTexSubImage2D(GLenum target,GLint level,GLint xoffset,GLint yoffset,
GLsizei width,GLsizei height,GLenum format,GLsizei imageSize,const GLvoid * data);-------------------------------start–
#参数
target:指定活动纹理单元的目标纹理。必须是GL_TEXTURE_2D，GL_TEXTURE_CUBE_MAP_POSITIVE_X，GL_TEXTURE_CUBE_MAP_NEGATIVE_X，
GL_TEXTURE_CUBE_MAP_POSITIVE_Y，GL_TEXTURE_CUBE_MAP_NEGATIVE_Y，GL_TEXTURE_CUBE_MAP_POSITIVE_Z或GL_TEXTURE_CUBE_MAP_NEGATIVE_Z。
level:指定详细级别。 0级是基本图像级别。级别n是第n个mipmap缩小图像。
xoffset:指定纹理数组中x方向的纹素偏移。
yoffset:指定纹理数组内y方向的纹素偏移量。
width:指定纹理子图像的宽度。
height:指定纹理子图像的高度。
format:指定存储在地址数据中的压缩图像数据的格式。
imageSize:指定从data指定的地址开始的图像数据的无符号字节数。
data:指定指向内存中压缩图像数据的指针。
#描述
纹理将指定纹理图像的一部分映射到纹理处于活动状态的每个图形基元上。当前片段着色器或顶点着色器使用内置纹理查找功能时，纹理处于活动状态。
glCompressedTexSubImage2D重新定义了现有二维纹理图像的连续子区域。
数据引用的纹素将现有纹理数组的部分替换为x索引xoffset和xoffset + width - 1，以及y索引yoffset和yoffset + height - 1（包括0和yoffset）。
该区域可能不包括纹理数组范围之外的任何纹素，如最初指定的那样。指定宽度为0的子纹理不是错误，但这样的规范没有效果。
format必须与glCompressedTexImage2D先前指定的扩展名指定的压缩纹理格式相同。
#注意
glCompressedTexSubImage2D指定使用glActiveTexture指定的纹理单元的二维或立方体贴图纹理

####gl.compressedTexSubImage2D()-------------------------------end–

####glCompressedTexImage2D(GLenum target,GLint level,GLint xoffset,GLint yoffset,
GLsizei width,GLsizei height,GLenum format,GLsizei imageSize,const GLvoid * data);-----------------------------------start–
#功能
纹理映射一个指定的纹理图像的一部分到每个开启了纹理映射的图元上。在当前段着色器或顶点着色器使用内建纹理搜索函数时，贴图被启用
glCompressedTexImage2D定义了二维纹理图像或者立方体映射纹理图像，图像数据是压缩的并存储在客户端内存中。
纹理图形根据internalformat指定的格式来解码。OpenGL ES并没有指定压缩纹理格式，
但是它提供一个机制：获取这些由扩展名指定的格式所对应的OpenGL符号常量。
所支持压缩纹理格式数量可以查询GL_NUM_COMPRESSED_TEXTURE_FORMATS值来获取。所支持的压缩格式列表可以查询GL_COMPRESSED_TEXTURE_FORMATS值来获取。
#参数
target:指定活动纹理单元的目标纹理，必须为GL_TEXTURE_2D, GL_TEXTURE_CUBE_MAP_POSITIVE_X,
GL_TEXTURE_CUBE_MAP_NEGATIVE_X, GL_TEXTURE_CUBE_MAP_POSITIVE_Y, 
GL_TEXTURE_CUBE_MAP_NEGATIVE_Y,GL_TEXTURE_CUBE_MAP_POSITIVE_Z,或者GL_TEXTURE_CUBE_MAP_NEGATIVE_Z.
level:指定细节级别数，0级表示基本图像级别，n级表示第n级mipmap缩小图。
internalformat:指定data中压缩图像数据的存储格式
width:指明纹理图像的宽度，所有OpenGL实现支持的2D纹理图像都至少为64纹素（texel）宽，立方体映射纹理图像都至少为16纹素宽。
height:指明纹理图像的高度，所有OpenGL实现支持的2D纹理图像都至少为64纹素（texel）高，立方体映射纹理图像都至少为16纹素高。
border:指定边框宽度，必须为零（梦维：没错，你必须传入0，因为这是OpenGL ES）。
imageSize:指定data中压缩纹理图像的大小，单位为byte
data:指定一个指向压缩图像数据内存的指针。
#注意
glCompressedTexImage2D为由glActiveTexture指定的当前纹理单元指定一个二维或立方体映射纹理

####glCompressedTexImage2D()-----------------------------------end–

####gl.texImage2D(glTexImage2D(GLenum target, GLint level,
GLint internalformat, GLsizei width,
GLsizei height,
GLint border,
GLenum format,
GLenum type,
const GLvoid * data)😉---------------------------------------------start–
#功能
生成一个GPU识别的未被压缩的2D纹理（Texture）
#参数
target:指定活动纹理单元的目标纹理。必须是GL_TEXTURE_2D,GL_TEXTURE_CUBE_MAP_POSITIVE_X,
GL_TEXTURE_CUBE_MAP_NEGATIVE_X,GL_TEXTURE_CUBE_MAP_POSITIVE_Y,
GL_TEXTURE_CUBE_MAP_NEGATIVE_Y,GL_TEXTURE_CUBE_MAP_POSITIVE_Z,或GL_TEXTURE_CUBE_MAP_NEGATIVE_Z.
level:指定细节级别，0级表示基本图像，n级则表示Mipmap缩小n级之后的图像（缩小2^n）
internalformat:指定纹理内部格式，必须是下列符号常量之一：GL_ALPHA，GL_LUMINANCE，GL_LUMINANCE_ALPHA，GL_RGB，GL_RGBA。
width height:指定纹理图像的宽高，所有实现都支持宽高至少为64 纹素的2D纹理图像和宽高至少为16 纹素的立方体贴图纹理图像
border:指定边框的宽度。必须为0。
format:指定纹理数据的格式。必须匹配internalformat。下面的符号值被接受：GL_ALPHA，GL_RGB，GL_RGBA，GL_LUMINANCE，和GL_LUMINANCE_ALPHA。
type:指定纹理数据的数据类型。下面的符号值被接受：GL_UNSIGNED_BYTE，GL_UNSIGNED_SHORT_5_6_5，GL_UNSIGNED_SHORT_4_4_4_4，和GL_UNSIGNED_SHORT_5_5_5_1。
data:指定一个指向内存中图像数据的指针。
#描述
纹理将指定纹理图像的一部分映射到纹理化为活动的每个图形基元上。当前片段着色器或顶点着色器使用内置纹理查找函数时，纹理处于活动状态
要定义纹理图像，请调用glTexImage2D。参数描述纹理图像的参数，如高度，宽度，细节级别（详见glTexParameter）以及格式。最后三个参数描述了图像在内存中的表示方式
数据从data一系列无符号字节或短路中读取，具体取决于type。
当type是GL_UNSIGNED_BYTE，每个字节被解释为一个颜色分量。
当type是以下当中的一个GL_UNSIGNED_SHORT_5_6_5，GL_UNSIGNED_SHORT_4_4_4_4或GL_UNSIGNED_SHORT_5_5_5_1，
各无符号短值被解释为包含所有组件用于单个纹素，利用根据设置在颜色分量format。颜色分量被视为一个，两个，三个或四个值的组，也是基于format。组件组被称为纹理元素（纹素）。
width × height个纹素将从内存中读取（起始位置就是data的起始地址）。默认情况下，这些纹素是从相邻的内存位置获取的，除了在读取所有width个纹素后，读指针前进到下一个四字节边界。
glReadPixels使用参数GL_UNPACK_ALIGNMENT指定四字节行对齐，并且可以将其设置为一个，两个，四个或八个字节
第一个元素对应于纹理图像的左下角。后续元素从左到右通过纹理图像的最低行中的剩余纹素进行，然后在纹理图像的连续更高行中进行。 最后一个元素对应于纹理图像的右上角
format决定data中每个元素的组成。 它可以是以下符号值之一：
GL_ALPHA:
每个元素都是单个alpha分量。 GL将其转换为浮点并通过将rgb三通道赋值为0组装成RGBA元素。 然后将每个元素的值范围截断于[0,1]。
GL_RGB:
每个元素都是RGB三元组。 GL将其转换为浮点，并通过为alpha赋值为1将其组装成RGBA元素。 然后将每个元素的值范围截断于[0,1]。
GL_RGBA:
每个元素包含所有四个组件。 GL将其转换为浮点，然后将每个元素的值范围截断于[0,1]。
GL_LUMINANCE:
每个元素是单个亮度值。 GL将其转换为浮点，然后通过将亮度值复制三次（红色，绿色和蓝色）并将为alpha赋值为1来将其组合成RGBA元素。然后将每个元素的值范围截断于[0,1]。
GL_LUMINANCE_ALPHA:
每个元素是“亮度-α”对。 GL将其转换为浮点，然后通过将亮度值复制三次（红色，绿色和蓝色）将其组装成RGBA元素。 然后将每个元素的值范围截断于[0,1]。

颜色组件根据type转换为浮点。当type是GL_UNSIGNED_BYTE时，每个组件除以2 8 - 1。
当type为GL_UNSIGNED_SHORT_5_6_5，GL_UNSIGNED_SHORT_4_4_4_4或GL_UNSIGNED_SHORT_5_5_5_1时，每个分量除以2 N-1，其中N是位域中的位数。
#注意
internalformat必须匹配format。纹理图像处理期间不支持格式之间的转换。 type可以用作提示来指定所需的精度，但GL实现可以选择以任何内部分辨率存储纹理数组。
data可能是一个空指针。在这种情况下，会分配纹理内存以适应宽度width和高度的纹理height
。然后你可以下载子文本来初始化这个纹理内存。如果用户尝试将纹理图像的未初始化部分应用于基元，则图像未定义。

glTexImage2D是用来指定 由glActiveTexture指定的 纹理单元 是二维纹理还是立体贴图纹理的。
####gl.texImage2D()---------------------------------------------end–