WebGL 模型压缩与贴图压缩

1,018 阅读1分钟

isux.tencent.com/articles/is…

模型压缩

image.png image.png

  • 上面看到加载时间
  • 压缩后的 glTF 开启了 worker 线程做 Draco 解码,多了一小部分模型解码时间。
  • Draco两种方式压缩
    •  #全局安装
       npm install -g gltf-pipeline
       #压缩glb文件 -b表示输出glb格式,-d表示压缩
       gltf-pipeline -i model.glb -b -d
       #压缩glb文件并将纹理图片分离出来
       gltf-pipeline -i model.glb -b -d -t
       #更多参数查阅
       gltf-pipeline -h
      
    • blender直接导出

贴图压缩

image.png image.png

  • Basis Universal 压缩方案 image.png
# 进入执行目录
cd bin-osx
# 将.png格式转为 .basis
./basisu xxx.png
# 针对法线/金属/粗糙贴图等linear颜色空间的贴图 需加上-linear
./basisu xxx.png -linear
# 最大限度保证图片质量的转换
./basisu xxx.png -comp_level 5 -max_endpoints 16128 -max_selectors 16128 -no_selector_rdo
# 最大限度压缩linear颜色空间的贴图
./basisu xxx.png -linear -global_sel_pal -no_hybrid_sel_cb
  • 生成的 .basis 文件需要在程序中通过转码器转成设备的压缩纹理格式,
  • ThreeJS 中可通过 basisTextureLoader 转换