1、GLTF格式介绍
1) glTF是一种3D内容的格式标准,由Khronos Group管理(Khronos Group还管理着OpenGL系列、OpenCL等重要的行业标准);
2)glTF的设计是面向实时渲染应用的,尽量提供可以直接传输给图形API的数据形式,不再需要二次转换;
3) glTF对OpenGL ES、WebGL非常友好;
4) glTF的目标是:3D领域的JPEG;
5) 作为一个标准,自2015年10月发布(glTF 1.0)以来,已经得到了业界广泛的认可,你可以相信它的水平;
6)glTF目前最新版本为2.0已于2017年6月正式发布。
GLTF具体的数据存储格式可以去官方网站上看:https://www.khronos.org/gltf/ 有GLTF+bin+Texture以及GLB组织格式,其中GLB是二进制,GLTF是Json方式。
2、GLTF模型压缩方式
1)Draco
扩展:KHR_draco_mesh_compression
用于GLTF扩展以及由 Google 开发的开源库,提供3D图形mesh和点云的压缩和解压。它的目标是提升3D图形的存储和传输效率。它压缩顶点位置、法线、颜色、纹理坐标和任何其他通用顶点属性,从而提高在网络上传输 3D 内容的效率和速度。
使用Draco的好处:
- 减少空间的占用, 减少网络传输量,该优点是它的核心好处。
- Draco的解压算法,网页端提供了wasm的解压算法,一定程度的降低了网页端解压消耗
使用Draco的缺憾:
- 可能性能提升也并没有期望中那么大,这个跟数据源的特点有关,不能得到保证,特别对于纹理压缩不是很理想。
- 模型画质的损失是肉眼可观的,需要总体权衡。
压缩方式:
gltf-pipeline -i scene.glb -o scene-processed.glb -d
详细参考 https://github.com/CesiumGS/gltf-pipeline
2)Meshopt
扩展:KHR_mesh_quantization
压缩方式:
gltfpack -i male.glb -o male-processed.glb -cc
3)MeshQuan
扩展:EXT_meshopt_compression
压缩方式:
gltfpack -i male.glb -o male-processed.glb
KHR_mesh_quantization
和EXT_meshopt_compression
可以使用同一个工具gltfpack
> npm i -g gltfpack
# gltfpack命令行工具是C项目构建出WASM执行的,目测未来会有更多wasm这类项目产出
# KHR的优化版的basis trancoder是使用assemblyscript编译成wasm
# 转成KHR_mesh_quantization
> gltfpack -i model.glb -o out.glb
# EXT_meshopt_compression只需加个-cc参数即可
> gltfpack -i model.glb -o out.glb -cc
4)其他
- EXT_mesh_gpu_instancing
现 Three.js 的 GLTFLoader 尚未支持,Babylon.js 的BABYLON.GLTF2.Loader.Extensions 支持 - 还有一些纹理优化的插件:
- KHR_texture_basisu
- EXT_texture_webp
详细参考:https://github.com/KhronosGroup/KTX-Software
3、在Three.js中使用与测试
1)Draco使用方式
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
const loader = new GLTFLoader()
// 创建解码器实例
const dracoLoader = new DRACOLoader()
// 设置解压库文件路径
dracoLoader.setDecoderPath(DECODER_PATH)
// 加载解码器实例
loader.setDRACOLoader(dracoLoader)
loader.load(MODEL_FILE_PATH, (gltf) => {
// ....
})
2)MeshOpt使用方式
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js'
const loader = new GLTFLoader()
loader.setMeshoptDecoder(MeshoptDecoder)
loader.load(MODEL_FILE_PATH, (gltf) => {
// ....
})
3)MeshQuan使用方式
mport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
const loader = new GLTFLoader()
loader.load(MODEL_FILE_PATH, (gltf) => {
// ....
})
4、性能分析与对比
1)Draco
Model | Before Compression | After Compression(Used gltfpack's -tc -cc flag) |
Korean Public Payphone 01 | 6.23MB | 1.58MB (-74.64%) |
2)MeshOpt
Model | Before Compression | After Compression (Used gltfpack's -tc -cc flag) |
Vintage Pocket Watch | 5.95MB | 1.37MB (-76.97%) |
3)KTX2 纹理压缩
KHR_texture_basisu
Model | Before Compression | After Compression (Used gltfpack's -tc -cc flag) |
Korean Fire Extinguisher 01 | 5.71MB | 4.13MB (-27.67%) |
5、多个机型测试对比
【TODO】
6、其他
1) obj转gltf
npm install obj2gltf -g