朋友们,还记得 QQ 20 周年 H5 中可可爱爱的太空鹅吗?
为了实现旋转和换肤功能,在 H5 中我们随机展示了5种类型的 3D 太空鹅模型,如下图所示:
但是在 H5 中引入 3D 模型往往存在资源太大、性能损耗严重、还原不真实的问题,这也让许多 3D 创意止步于开发阶段。
如何更好地在 H5 中还原模型呢?本文将从模型网格和贴图文件两方面分析,介绍几种通过技术角度优化加载速度和提高渲染性能的途径,在保证 3D 模型不减面,贴图不缩小的情况下,将模型精致地还原在 H5 或其他应用程序中。
模型网格压缩
首先是分析模型网格,对于大型 3D 资源,我们一般会通过在模型设计时进行“减面”来减少模型几何体的大小,但也会带来模型精致度的缺失。如下图所示:
而通过 glTF 配合 Draco 压缩的方式,可以在视觉效果近乎一致的情况下,让3D模型文件成倍缩小。下面具体介绍 glTF 格式及 Draco 压缩工具。
1. 将模型导出为 glTF 格式
glTF 介绍
glTF 称为“ 3D 界的 JPEG”,使用了更优的数据结构,为应用程序实时渲染而生。glTF 有以下几大特点:
- 由现有 OpenGL 的维护组织 Khronos 推出,目的就是为了统一用于应用程序渲染的 3D 格式,更适用于基于 OpenGL 的引擎;
- 减少了 3D 格式中除了与渲染无关的冗余信息,最小化 3D 文件资源;
- 优化了应用程序读取效率和和减少渲染模型的运行时间;
- 支持 3D 模型几何体、材质、动画及场景、摄影机等信息。
glTF 导出格式有两种后缀格式可供选择:.gltf 和 .glb:
- .gltf 文件导出时一般会输出两种文件类型,一是 .bin 文件,以二进制流的方式存储顶点坐标、顶点法线坐标和贴图纹理坐标、贴图信息等模型基本数据信息;二是 .gltf 文件,本质是 json 文件,记录对bin文件中模型顶点基本数据的索引、材质索引等信息,方便编辑,可读性较好;
- .glb 文件格式只导出一个 .glb 文件,将所有数据都输出为二进制流,通常来说会更小一点,若不关心模型内的具体数据可直接选择此类型。
glTF 转换