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,就可以在浏览器端调用;