1.原因

我们知道传统的图片文件格式有 PNG 、 JPEG 等，这种类型的图片格式无法直接被 GPU 读取，需要先经过 CPU 解码后再上传到 GPU 使用，解码后的数据无压缩。

而纹理压缩顾名思义是一种压缩的纹理格式，它通常会将纹理划分为固定大小的块(block)或者瓦片(tile)，每个块单独进行压缩，整体显存占用更低，并且能直接被 GPU 读取和渲染(无需 CPU 解码)。

2.项目技术方案

本项目选择使用basis_universal压缩图片，生成.basis文件，使用ThreeJS中basisTextureLoader加载压缩后文件。

已知basisTextureLoader加载.basis文件后，获取设备信息，将文件快速转换为适用于设备的压缩格式。如basisTextureLoader如下源码所示：

    var config = this.workerConfig;
    config.astcSupported = !! renderer.extensions.get( 'WEBGL_compressed_texture_astc' );
    config.etcSupported = !! renderer.extensions.get( 'WEBGL_compressed_texture_etc1' );
    config.dxtSupported = !! renderer.extensions.get( 'WEBGL_compressed_texture_s3tc' );
    config.pvrtcSupported = !! renderer.extensions.get( 'WEBGL_compressed_texture_pvrtc' )
    || !! renderer.extensions.get( 'WEBKIT_WEBGL_compressed_texture_pvrtc' );
    if ( config.astcSupported ) {
        config.format = BasisTextureLoader.BASIS_FORMAT.cTFASTC_4x4;
    } else if ( config.dxtSupported ) {
        config.format = BasisTextureLoader.BASIS_FORMAT.cTFBC3;
    } else if ( config.pvrtcSupported ) {
        config.format = BasisTextureLoader.BASIS_FORMAT.cTFPVRTC1_4_RGBA;
    } else if ( config.etcSupported ) {
        config.format = BasisTextureLoader.BASIS_FORMAT.cTFETC1;
    } else {
        throw new Error( 'THREE.BasisTextureLoader: No suitable compressed texture format found.' );
    }
    return this;
},

3.代码实现

本项目使用BasisTextureLoader加载文件

完整代码如下链接：

github.com/minicherry/…

核心代码如下所示：

loader.setTranscoderPath( '../../public/lib/basis/' );
loader.detectSupport( renderer );
let a = new URL('../assets/textureCompression/9000.basis', import.meta.url)
loader.load( a, function ( texture ) {
    texture.encoding = THREE.sRGBEncoding;
    material.map = texture;
    material.needsUpdate = true;
}, undefined, function ( error ) {
    console.error( error );
} );