Draco 是用于网格压缩的 glTF 扩展以及由 Google 开发的开源库,用于压缩和解压缩 3D 网格以显着减小 3D 内容的大小。它压缩顶点位置、法线、颜色、纹理坐标和任何其他通用顶点属性,从而提高在网络上传输 3D 内容的效率和速度。

这意味着 更小的文件大小 和 更快的流式传输,尤其是在 3D Tiles 的情况下,当新的图块出现或需要新的细节级别时,它经常流式传输新的 glTF 模型。

我们一直在与 Khronos 和 Google 合作使 Draco 成为 glTF 扩展,你现在可以在 Cesium 中加载 Draco 压缩模型和 3D 瓦片集!

2、Khronos glTF Draco 压缩扩展

glTF 现在有 KHR_draco_mesh_compression 扩展,它可以加载包含 Draco 压缩几何的缓冲区。从 Cesium 1.44 开始,我们通过利用 Google 的开源 JavaScript 解压缩库支持使用 Draco 压缩数据加载 glTF 资产。

使用压缩网格可以减少 glTF 模型的最终文件大小,这意味着这些资产占用的空间更少,下载的数据更少,流传输更快。为了说明差异,我们使用Draco 编码器压缩了以下文件 ,所有属性的默认压缩级别为 7。

这是 glTF 2.0 Draco 压缩Cesium牛奶卡车示例模型 与 glTF 2.0 Cesium牛奶卡车示例模型的比较,两者都包含纹理和动画。

Draco压缩 未压缩 文件
2.1 KB 2.2 KB CesiumMilkTruck.gltf
14.0 KB 107 KB 0.bin
418 KB 418 KB CesiumMilkTruck.png

由于该扩展仅压缩几何图形,因此纹理有效负载 (CesiumMilkTruck.png) 保持相同大小 (418 KB)。使用扩展创建的额外 JSON 元数据对 .gltf 文件影响很小(2.1 KB 与 2.2 KB)。

接下来,这里是 glTF 2.0 Draco Compressed Buggy 示例模型 与 glTF 2.0 Buggy 示例模型的比较,后者是具有更复杂几何形状的网格。

Draco 压缩 未压缩
824 KB 391 KB 越野车.gltf
0.824 MB 7.6 MB Buggy0.bin

我们看到一个更小的 .gltf 文件(824 KB 对 391 KB),因为每个基元需要指定的 JSON 元数据更少,以及一个明显更小的 .bin 文件,因为可以使用扩展压缩大量几何。

3、Cesium 3D Tiles

使用 3D Tiles时,Cesium 经常发出请求并流式传输新的 3D 内容。现在可以使用 Draco 扩展压缩每个图块的 glTF 内容,并使用更少的数据更快地流式传输。下面,我们使用 glTF 2.0 处理了 12.8 GB 的 City GML 数据,其中包含 110 万个纽约市建筑物,Draco 压缩级别为 5。

总瓦片集大小
带 Gzip 压缩的 glTF 2.0
带有 Draco 压缩的 glTF 2.0 179 MB
带有 Draco 和 Gzip 压缩的 glTF 2.0 149 MB

在加载时间方面,虽然我们在执行加载和编译 Draco 模块 Web 程序集的开销时受到了小的初始影响,但之后所有切片的流式传输和解压缩速度都比没有 Draco 压缩时更快。这是使用仅使用 gzip 压缩的 glTF 2.0 与使用 Draco 压缩和 gzip 的 glTF 2.0 的瓦片集总加载时间的比较。*

glTF 2.0(压缩包) 带有 Draco 压缩的 glTF 2.0 (gzipped)
瓦片集大小:738 MB 瓦片集大小:149 MB
加载时间:18.921 秒 加载时间:10.548 秒

*图像以 2 倍速度进行演示。

4、性能优化

Cesium 的 Draco 解码实现利用了 Web Assembly 的异步解码和 GPU 上的去量化,这意味着并行解码多个模型(或模型的一部分),以及使用更少的整体内存。

5、并行解压

Cesium 利用 Web Workers 并行解码多个网格。在 3D Tiles 的情况下,这意味着可以同时流式传输和解码多个 Tile。此外,网格的每个图元(或部分)都可以单独解码,以便更快地解码复杂模型。在将渲染网格所需的数据返回到主线程之前,我们可以检索编码缓冲区的每个段并将数据传递给单独的工作人员以并行异步解码。

当浏览器支持时,我们加载和编译解码模块 Web Assembly 二进制文件并在多个工作人员之间共享,与使用纯 JavaScript 解决方案相比,进一步提高了解压缩速度。

6、GPU上的去量化

Cesium 还在 GPU 上解码一些属性,在主线程之外进行解码并使用更少的内存。通常存储为 32 位浮点数的顶点属性,例如位置属性数据,可以解码为量化的 16 位整数值。此外,对于像法线这样的单位向量属性,我们可以将其解码为 八进制编码 数据。

在 GPU 上解码时,我们跳过 Draco 解码器模块中的量化或八面体变换操作,取而代之的是检索和存储任何变换常数。较小的解码数据可以传递到 GPU,在渲染时在着色器中执行去量化或八进制解码操作。这导致在 CPU 上运行的主应用程序线程和 GPU 上并行运行的内存占用更小。

当使用前面提到的纽约市 3D 瓦片集在 GPU 中执行反量化时,GPU 使用的内存节省了 52%,而文件大小没有差异,视觉质量没有差异,并且对瓦片集的总加载时间没有影响,因为与完全使用 Draco 解码模块进行解码相比。

Draco压缩 在 GPU 上使用反量化压缩的 Draco
显存 119MB 57MB
瓦片集加载时间 7.45 秒 7.44 秒

原文链接:用Draco压缩3D模型 — BimAnt

Draco - glTF模型压缩利器相关推荐

  1. 知识蒸馏 | 模型压缩利器_良心总结

    1.什么是知识蒸馏 最近利用知识蒸馏的方法,对业务中的性能有了可观的提升,因此在这里总结一波.本文主要从宏观的角度分析一下各个蒸馏算法的蒸馏方式,具体细节可以根据兴趣阅读论文~ 知识蒸馏是一种模型压 ...

  2. Three.js 开发之加载外部GLTF模型和压缩(一)

    Three.js 开发3D智慧楼宇(Vue) 在VUE项目里使用three.js搭建智慧园区和楼宇,控制空调.灯光.窗帘的开关等设备,实现智能化楼宇. 环境搭建 除了vue项目所需要的基本依赖,可用v ...

  3. glTF模型在线查看利器【glTF Viewer 2.0】

    glTF Viewer 2.0是一个可以查看glTF格式的3D模型的在线工具,并且可以给出glTF模型的格式验证报告,非常方便. 1.查看glTF文件 glTF Viewer 2.0的使用很简单,只需 ...

  4. 137% YOLOv3加速、10倍搜索性能提升!百度飞桨推出模型压缩神器

    深度学习模型压缩,又有利器问世. 最新消息,历经一年四个版本打磨之后,百度推出最新深度学习模型压缩工具PaddleSlim1.0. 不仅囊括了深度学习模型压缩中常用的量化.剪裁.蒸馏.模型结构搜索.模 ...

  5. vue 使用 cesium 接入 gltf 模型

    vue 使用 cesium 接入 gltf 模型 这个其实说简单也简单,但是说复杂也不容易搞.尤其是转化成vue语法或者是在vue项目接入的时候会有些许的坑,我在接入的时候也是有很多问题,好在最后把模 ...

  6. 凹凸实验室:3D性能优化 | 说一说glTF文件压缩

    引言 最近做T级互动,需要使用到3D模型.相信大家和我一样,在开始着手的时候,一定会有这么些问题: 1.如何选择3D模型的导出格式 2.如何对模型文件进行优化 3.在大流量的项目中兼容性怎么样 让我们 ...

  7. gltf模型浏览器_ThreeJs作智慧城市项目后记

    随着时间的推移技术的进步,前端愈来愈杂了,可是也愈来愈精彩了.只是会用一点ThreeJs,对于WebGl的原理并没了解过,这并不影响咱们利用ThreeJs去作出一个很是炫酷的项目.javascript ...

  8. 解决 Threejs 无法加载 GLTF 模型的材质,报错 Unknown extension “KHR_materials_pbrSpecularGlossiness

    背景 threejs 的版本是 0.147.0.使用 GLTFLoader 加载 GLTF 模型文件发现材质(Material)没有显示. 打开开发者工具发现有 Warning:THREE.GLTFL ...

  9. 将人工智能模型压缩到微控制器中

    将人工智能模型压缩到微控制器中 Squeezing AI models into microcontrollers 当你把人工智能与物联网交叉时,你得到了什么?人工智能事物(AIoT)是一个简单的答案 ...

  10. 模型压缩95%:Lite Transformer,MIT韩松等人

    模型压缩95%:Lite Transformer,MIT韩松等人 Lite Transformer with Long-Short Range Attention Zhanghao Wu, Zhiji ...

最新文章

  1. pythonset操作教程_Python集合(set)方式和使用方法
  2. css知识点笔记-常用属性
  3. Dubbo-入门指南+实例
  4. 2017校赛 问题 D: 我知道了,你知道了吗?【递归】
  5. muduo学习笔记 - 第1章 C++多线程系统编程
  6. Event-based Vision: A Survey——论文阅读笔记
  7. Object family 在Object search中的default逻辑
  8. linux之nm命令
  9. [转]Anaconda
  10. CJOI 05新年好 (最短路+枚举)
  11. 3月9日 英语笔记-英标
  12. 如何用css实现元素固定宽高比?
  13. 基于SSM超市订单管理系统(MYSQL版)
  14. 新手兼职也能月入5000的副业项目,几乎零门槛
  15. Android跳转应用市场更新自己《完美适配大部分手机应用商店》
  16. 面向对象的特点?对象模型、动态模型和功能模型3种模型之间的关系?
  17. 使用apache服务部署静态网站--初篇
  18. 申请Google Map服务
  19. 瑞星杀毒助手 升级到 0.1.0020版
  20. 国内有哪些移动开发平台?各有什么特点

热门文章

  1. 数据结构——二叉树先序、中序、后序及层次四种遍历(C语言版)
  2. Kaleao推出基于ARM的服务器Kmax
  3. HTML5气泡悬浮框(已经加上完整文件)
  4. 五子棋项目结束总结_五子棋比赛活动总结
  5. 手机连接charles问题
  6. Android扩展知识 - 减轻C盘压力,扩大C盘空闲容量
  7. vim设置(非常全面),即.vimrc文件的配置
  8. 用html写游戏,Html5写一个简单的俄罗斯方块小游戏
  9. python错题集(1)
  10. html5 五线谱,五线谱难学?5分钟完成五线谱入门