14. Html5的局：WebGL的纹理格式

紧接上文

WebGL作为通用的标准，屏蔽了一些硬件厂商的高级特性，有舍就会有取，那么在一些比较常用的功能上，如果硬件无法满足通用，那么就会通过CPU来弥补硬件的不足。
图片的纹理格式，就是其中的一个点。

常见的纹理格式

我们引用12章：WebGL跨平台的取与舍的图片:

这些在OpenGL平台都是支持的，但在WebGL中做了裁剪。

裁剪了纹理格式

这些格式在FireFox中严格的不支持，但在WebKit中，WebKit虽然在代码上支持了这些格式，最终是否支持，看各个平台的硬件特性了。

裁剪了纹理的类型

没想到纹理还有浮点数格式。。

仅支持以下格式和类型

上图列出的是主要支持的纹理格式和类型，其他类型也可能支持，最好不要使用。

纹理的扩展格式

在WebGL的使用中，我们会经常使用以下三种纹理参数:

UNPACK_FLIP_Y_WEBGL

众所周知，OpenGL的原点坐标在屏幕的左下角，X轴向右，Y轴向上，Z轴向外。
在OS的世界中，坐标原点在屏幕左上角，X轴向右，Y轴向下，Z轴向外。
这样导致我们使用一张图片的时候，默认是从左上角为bitmap的起始点。这样到了OpenGL的世界，就变成了上下颠倒的图片，本质就是Y轴翻转导致。

UNPACK_PREMULTIPLY_ALPHA_WEBGL

为了提供OpenGL的性能，我们在CPU中提前把颜色的alpha乘以RGB，OpenGL在显示时，无需每次实时技术RGB颜色通道，进一步提升GPU性能。

UNPACK_ALIGNMENT

纹理像素的对齐参数，比如上图中我们提到GL_RGB是3个字节的长度，如果图片是3x3大小，那么数据在内存中，以GL_unsigned_byte为单位存储，大小为：9*9。
在OpenGLES1.0的时代，纹理大小只能是2的整数倍，这样的图片在OpenGL中是无法识别的。就要做转换：

1. GL_RGBA：转换后，每个像素成为4个字节
2. GL_RGB：不转换，图片的每行，我们增加一个byte。在增加一个空白行，成为10x10的图片
3. ALIGNMENT：在OpenGL ES2.0以后可以设置UNPACK_ALIGNMENT，它表示像素对齐最小公因子，我们设置为1，告诉GPU只要是1的整数倍即可。（这点会影响GPU的性能，因为GPU也像CPU一样，喜欢字节对齐的数据）

总结

看完了WebGL的纹理格式，就会发现，很多已经成熟的技术制作的3D模型，如果格式或者类型不匹配，就会导致WebGL出现兼容性问题，无法显示图片，甚至会出现崩溃。
遇到问题的同学，请牢记以上信息。

下一回

看完了这些，感觉很简单的样子。仔细看看：
UNPACK_FLIP_Y_WEBGL
UNPACK_PREMULTIPLY_ALPHA_WEBGL
是不是末尾都添加了WebGL得标志？
对的，这些不是OpenGL的功能，是CPU帮忙我们实现的，如果同学们直接使用OpenGL开发，那么就有可能在WebGL上不兼容。
另外，还记得上一节中我们提到的吗:

void glTexImage2D (GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, const GLvoid *pixels);

internalformat和format到底存在什么关系？如果他们真的必须保持一致，那么这个接口只需要写一个参数就好了，何必要预留两个入参呢？难道程序员脑袋秀逗了？

想要弄清楚，请持续关注下一章，我们一起看看CPU是如何做格式转换的。