友们,还记得 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 转换
目前有些建模工还不备导出 glTF 格式功能,可以输出 FBX / Collada 格式后通过以下工进行转换:
FBX 转 glTF
- Facebook 推出的 FBX2glTF 命令行工,可直从 github 官网下载 release 版本;
- 过 Paint 3D、Substance Painter 等可视化编辑工具进转换。
Collada 转 glTF
COLLADA2GLTF 命令工具,可转换 .dae 格文件,从 GitHub 官网接下载 release 版本,解压后在命令进入目录即可调用。
glTF 查看
转换后可过以下查看工具查看 glTF 资:
- Windows 10 及以上带的 3D Paints;
- glTF 在线查看:https://gltf-viewer.donmccurdy.com;
- 对于发者,可直接使用 VSCode 插件—— glTF Tools。
2. 通过 Draco 进行压缩
Draco 及 gltf-pipeline 介绍
Draco 是 Google 推出的一个用 3D 模型压缩和压缩的工具库,上述介绍的 FBX2glTF 及 COLLADA2GLTF 工具也嵌 Draco 压缩功能,除此之外,glTF 资源通基 Draco 开的命令行工具 gltf-pipeline 进行编码压缩,gltf-pipeline 通 npm 的方式安装使用。使用方法下:
#全局安装 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
Draco 压缩析
通过 Draco 进行压缩基本上是有损的,有点表现:
- Draco 通 Edge breaker 3D 压缩法改变模型的网数据的索引方法,缺少原来的网顺序;
- Draco 通过减少顶点坐标、顶点纹理坐标等息的位数,以减少数据的存储量。
但在 gltf-pipeline 或其他压缩工具中,压缩程度通设置参数进行整,下所示:
当 –draco.compressionLevel 为0时,将留原来的网顺序,网数据索引的压缩力度最小,–draco.quantizeXXXBits 控坐标等基数据值的位数,位数越少压缩力度越大。由一个三角形网对应个顶点坐标、顶点法坐标、颜坐标等数据,一般来说 –draco.quantizeXXXBits 对文件的大小影响更大。
若不置参数,gltf-pipeline 会直以默认值压缩。
虽说 Draco 是有损,相于接为模型减来说,采用 Draco 压缩法视觉偏会小很多。
压缩后的 glTF 模型需通过应用中嵌入 Draco 解码具包,主对 edge breaker 算法部分行解码,解码时间一般比编码时间少,但必须考模型与具包的小对比。例如 ThreeJS 提供了 draco_decoder 模块行解码,draco_decoder 约600KB,若模型资源文件比具包还小,就必再引入 Draco 压缩了。
3. 效果测试
我们以太空鹅模型例,只加载模型几何体,不入质属性,通过ThreeJS 分别加载 FBX / glTF / 压缩后的glTF 的格式,第三种格式以默认参数压缩。测试效果对比如下:
从图可以看出,文件从 FBX 转换为 glTF 后大小异不大,是渲染速度有了明显提升。
另外过压缩的 glTF 文件仅常 FBX glTF 文件的1/10左右,视觉三者几何体结构明显的差异,压缩后的 glTF 启了 worker 线程 Draco 解码,多了一小部分模型解码时间。
述描述的模型压缩只针对模型网格数据,不会对 glTF 文件里的贴图行处理。然很多时候贴图文件往往于模型。此时则需将模型贴图分行处理(建模时分输出一打好 UVtag 纹理坐标的「白模」需用到的纹理贴图)。下面介绍如何优化用于应用程序渲染的贴图文件。
1. 贴图加载过程分析
以一基于理引擎渲染的电视机 Demo 模型例,一般会输出几种尺寸较的贴图文件:颜色贴图,法线贴图,金属粗糙贴图,如下图例子所示:
输出贴图一般 png 格式,许多同学会通过压缩 png 或者将 png 转 jpg 格式减少纹理小,其实这种处理方式只优化了图片加载速度,加载完毕后,png/jpg 仍需全部转码纹理(texture)能始渲染,具相同尺寸的贴图纹理 GPU 占用内存小相同,故压缩后的 png/jpg 对于渲染过程并优化。
庆幸的是许多设备都有可直接于渲染的 GPU 压缩纹(compress texture)格式,压缩纹可由 png 直接转换的纹减5倍或上的大小。如果直接供压缩纹格式,则需要进行 png 的转码过程且可大大减纹存。如图方案2示:
但由于 GPU 芯片供商太多,设备的压缩纹格式多种多样(例如卓设备格式是 ETC1/ETC2,苹果设备是 PVRTC…),手输多种格式代大,导致方案2较难落地。
2. Basis Universal 压缩
转折点在于今年五月份,Binomial 公司推了 Basis Universal 压缩 GPU 纹技术,Basis Universal 支持多种的压缩纹格式,将 png 转换为 basis 件后,大小与 jpg 格式差多,但在 GPU 上 png/jpg 小6-8倍。
应用程序加载 basis 文件,通 basis 转码器快速转换成适用设备的压缩纹理式。下图(图来自Google Blog)所示:
Basis 用法也比简单,通 basisu 命令行工具压缩 png,直接从 github 官网下载Release版或者通 CMake 编译源码,以 Mac 系统为例(Windows 系统将命令改为 basis.exe),列举几种常用用法:
# 进入执行目录 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 转换,具体用法可查阅 ThreeJS 官网 。
3. 效果测试
为了数据更加明显,我们在Mac Chrome 浏览performance模下,针个电视模型利用 ThreeJS 各自加载了 4096 x 4096 大小颜色贴图、法线贴图、属与粗糙贴图,比如下:
由上图使用 basis 贴图资源文件大比 png 减少了11倍以上,同主线程的脚本间和绘制间花销也于 png/jpg 贴图。
需要注意是,样由于不压缩纹理格不,在 basis 文件致情况下,不设备渲染表现可能会出现不致,需要进多端测试,目前部分格不支持 alpha ,带半透明颜色贴图若不生效可考虑单独拆出 alpha 贴图。
除了基于 webGL H5,glTF 与 Basis 亦可用于其它基于 OpenGL 渲染应用程序。值期待是,目前 Google 与 Binomial 公司正在进 Basis Universal 与 glTF 3D 传输标准合作,或许在不久将来可以迎来结合了 basis 贴图 glTF 格,不需要做另处理可以接导入模型到应用程序。
参考资料
- https://spin.atomicobject.com/2018/09/30/compress-3d-files-draco/
- https://neil3d.github.io/3dengine/gltf-mesh.html
- https://github.com/google/draco
- https://www.ece.uvic.ca/~frodo/publications/yuetang_meng_project_slides.pdf
- https://developers.facebook.com/docs/sharing/3d-posts/glb-tutorials
- https://github.com/AnalyticalGraphicsInc/gltf-pipeline
- https://www.khronos.org/gltf/
- https://news.ycombinator.com/item?id=19986749
- https://github.com/BinomialLLC/basis_universal
- https://www.khronos.org/blog/google-and-binomial-contribute-basis-universal-texture-format-to-khronos-gltf-3d-transmission-open-standard
欢迎关注「腾讯ISUX」的公众: