WebGL 纹理压缩 crunch

1、WebGL支持将压缩过的纹理传入到显卡，显卡自带解压功能，这就减少了传输数据量，加快纹理传输到显卡；

2、该功能依赖于硬件支持，WebGL本身并不限制要支持哪种格式，截止到落笔之时，这些支持都是通过扩展（extension）来实现，如WEBGL_compressed_texture_s3tc，在使用压缩纹理之前，要先查询硬件支持的扩展都有哪些，这里有个网站可以检测；

3、WegGL不提供压缩和解压方法，用户要提前把纹理压缩好，然后通过gl接口传入显卡；

4、类似于JPEG、PNG这种压缩格式，和压缩纹理的压缩并不是一回事，前者在传入显卡之前需要完全解压，这一步骤要在cpu里进行，因此会消耗时间，而后者是专门针对硬件做的压缩，直接传入硬件-显卡；

5、手机上和PC上常见的压缩格式不同，PC上用的最广的格式为DXT系列，iOS上支持PVRTC;DXT有很多变种，如DXT1/DXT3/DXT5，详见说明；

6、DXT格式的纹理常以.dds文件存储，可以借助一些工具，比如DDS Converter将JPEG、PNG等格式处理成.dds文件，文件包含了压缩过的纹理数据和一些图片信息，浏览器原生不支持解析，要自己解析，Three.js提供了一个DDSLoader实现了解析加载功能；

7、使用压缩纹理的时候要用gl.compressedTexImage2D方法了；

8、使用DXT格式进行压缩后的数据量一般是比JPEG格式的要大一点（这里的压缩并不是一味的减少体积，更多的是为了显卡能更好的取样），因此就有了crunch，这个库是在DXT基础之上再进行压缩，以达到减小体积的目的，最终结果可能比JPEG格式还要小，crunch可以直接将JPEG、PNG等格式图片压缩处理成为.CRN文件，文件包含了压缩过的DXT格式的数据，要想在程序里使用.CRN文件，第一步需要先解压成为DXT数据，然后传到显卡，解压过程crnlib（和crunch一回事）提供的代码实现，可以参照github上的说明，把c++代码转换为wasm，就可以在浏览器端调用；

作者：百思不得Ting姐
链接：https://www.jianshu.com/p/b0d11dc79196
来源：简书