Web环境下三维复杂模型的简化与可视化方法研究

郭建雄，程朋根，2，晏启明，许 敏

(1.东华理工大学 测绘工程学院，江西 南昌 330013；2. 广西空间信息与测绘重点实验室，广西 桂林 541004；3.宜春市房地产管理局，江西 宜春 336000)

随着计算机技术、通信技术以及数字地球技术日益成熟和发展，在Web2.0时代虚拟地球逐渐从客户端向网页端过渡。为了解决有限带宽与日益增长的三维模型数据之间的矛盾，一个有效的渐进传输可视化策略十分必要[1]。以Cesium为主的利用纯Web端技术(包括WebGL，HTML，Java Script)开发的虚拟地球平台，可以无插件、跨平台地在网页上展示三维复杂模型[2]。Cesium 支持 GLTF和 3D Tiles[3]两种模型数据格式，实现单体化模型和海量三维模型数据的渐进传输可视化，大大提升Web 端三维模型可视化的性能[4]。

随着对象模型的复杂度增加，其模型描述通常由数万或数亿个三角面片组成。为了满足计算机分析、显示和存储的要求，一种常见的解决方案是在不严重损失物体视觉特性的前提下，简化对象的网格模型，用较少数量的面片表示模型。对象模型的不同简化版本构成细节层次(LOD模型)或多分辨率[5]。为了简化三维模型，Schroeder[6]提出了一个平面准则，即在局部范围内拟合一个平面，删除小于指定精度的样本点并重新三角化保留点。以这种方式，大量的小三角形被少量的大三角形代替，从而可以获得不同复杂度级别的相同场景模型的三角形网格描述。类似地，Hamann[7]提出了曲率准则，即删除曲率小于制定误差的点。Turk[8]提出一种基于网格重建的简化多边形模型方法，该方法将一组新的顶点分布到原始模型中，通过使用原始网格三角形的顶点的曲率和三角形的面积作为因子来确定新顶点的位置。国内学术界也在模型简化领域开展有效的研究工作。周坤和施家英等提出基于顶点聚类的三角网格折叠算法，使用八叉树进行网格自适应划分，该方法通过点到平面的距离来执行误差控制[9]。潘志庚和马小虎提出了一种基于三角形删除准则的网格模型简化方法，减少了计算量，具有较高的删除率[10]。熊仕勇提出一种基于半边折叠的LOD三维模型简化算法[11]，较有效地解决了简化后模型重要几何特征不明显的问题，实现三维模型的LOD层次构建。然而这些方法未能结合模型具体特征结构，对于具有特殊结构和纹理细节的模型不能达到很好的简化效果。

本文在边折叠算法的基础上结合模型结构识别，提出基于结构的边折叠算法。结合该算法利用开源工具将通用格式的原始复杂三维模型简化并转换为不同分辨率的GLTF模型和3DTiles模型，利用渐进式传输可视化技术在Cesium平台进行模型展示。

1 模型简化方法

通常情况下三维模型由点、线和面基本元素构成，因此三维模型简化即是对模型点、线和面的基本操作。其中顶点删除方式简化的主要流程为：选中模型的一个顶点，计算它到其邻面的距离，若距离小于指定的阈值则删除，并重新三角化。该方法虽然占用计算资源较少，但因空洞问题，难以保持模型表面的光滑。边折叠方法是目前较为广泛应用的简化方式，其主要流程为：计算三维模型中所有边的权值，删除边权值最小的边，然后立即更新该局部区域的拓扑结构[12]。这类算法的几何意义直观，实现难度较小，因此是现阶段研究的主流方向。面折叠算法和边折叠算法类似，只是从删除边改为删除面。因为面折叠算法减少的几何元素数量是边折叠的两倍，所以简化效率更高但是对模型的特征影响较大，因此简化质量不如边折叠算法好。

一个模型往往由多个独立的几何体组合而成，每个几何体可以单独设置一个材质(颜色、纹理)，以提高模型的视觉效果。三维模型根据几何关系可分为主体结构和细节结构，主体结构是指三维模型主要组成部分间的连接关系，为模型的整体框架和大体形象，细节结构是指三维模型表面所有功能部件和结构部件间的连接关系[13]。

本文提出基于结构的边折叠算法，主要思路为：首先，通过分析同材质的三角面数量识别出模型的几何主体结构和细节结构；其次，采取边折叠算法对模型主体结构进行简化、面折叠算法对模型细节结构进行简化，以保证在大幅度提高模型简化效率的同时达到主体结构保持，细节结构删除的目标。图1为采用该方法得到的模型简化对比图，其中图1(a)为原始模型，图1(b) 为删除小细节后的简化模型，图1(c) 为删除大细节后的简化模型。

2 三维复杂模型可视化

Cesium是国外一个基于Apache开源协议，基于JavaScript编写的使用WebGL进行硬件加速图形化的地图引擎。可无插件、跨平台、跨浏览器实现真正的动态数据可视化图形绘制。Cesium加载三维模型有两种格式：一种是针对单体化模型的GLTF；一种是针对海量数据的3DTiles格式。

2.1 GLTF

GLTF的全称是GL传输格式，是一种针对GL(WebGL，OpenGL ES和OpenGL)接口的运行时资产(asset)。在3D内容的传输和加载中，GLTF通过提供高效、可协作、易扩展的格式填补了3D建模工具和现代GL应用程序之间的空白。使用GLTF的用户可以使用现有工具来处理模型并减少模型中的数据量。图2是 GLTF的一般结构，分为4个大块：顶部 json描述模型的节点级别、材质、相机、动画和其他相关的逻辑结构；bin对应于这些对象的具体数据信息；glsl是模型渲染的着色器；然后是纹理内容。使用Base64编码将大块内容移动到文件中，这样便于复制和加载，也可用URI的外链方式，侧重重用性。

图2 GLTF结构

加载GLTF模型有两种方法：一种是Entity方法，将Model视作几何体进行加载，方法简单效果单一；另一种是以Primitive的方式，它可设置多样化属性。Cesium对Model的渲染是基于状态的更新，Model有3个状态：加载(NEEDS_LOAD)、解析(LOADING)和结束(LOADED)。首先解析GLTF 的头信息，也就是json对象(是否有动画、数据视图具体情况、是否有扩展属性等)，了解该模型的大概结构；其次是解析 GLTF数据，对每个结构中的数据解析并赋值(顶点数据和索引、材料、纹理等，动画，Runtime封装到对应的 RuntimeNode)，这是最复杂，也是最关键的过程之一；三是更新动态属性，将其传递给相应的着色器参数(动画、骨骼等，更新相应变量的节点矩阵，重新组合对应节点级别的矩阵等)；最后，在彻底解析完数据之后，构造一个相应的绘图命令(Drawcommand)并将其添加到渲染队列中；如果数据包含一些时态数据，例如动画、蒙皮等，则必须动态调整每一帧。这是更新(update)的主要4种状态和逻辑，其过程如图3所示。

图3 GLTF渲染流程

2.2 3DTiles

3DTiles是Cesium在GLTF基础上推出的Web环境下海量三维模型数据规范，在继承GLTF优点的同时添加渐进LOD方法，也就是通过视距来调整场景复杂度，渐进LOD不直接置换模型，而是随着视点的靠近，不断地在模型上补充细节。3DTiles将大数据量三维数据以分块、分层的形式组织起来，可以大量减轻浏览器和GPU的负担，是一个优秀的，并且格式公开的数据格式。

3DTiles的渲染也基于状态的，如图4所示，可分为3个状态层，其中细线(紫色)箭头表示状态变化。从LOADING(加载)状态开始，通过一系列的request，完成最初的数据加载过程，结束LOADING状态，进入PROCESSING(预处理)状态，也就是数据解析。数据解析完后进入READY(准备)状态，通过selectTile，最终调用Content对应的update方法，构造最终的drawcommand，加入渲染队列。当然，如果有需要释放的Tile，则在unloadTiles中处理。无论是json的解析还是构造DrawCommand，都与GLTF相同，在update完成，只是所在状态不同，如图4中的粗线(红色)箭头指示。

利用obj2gltf、obj23dtiles开源工具结合基于结构的边收缩算法，对原始模型进行简化，并转换为GLTF格式以及构建3DTiles格式的多分辨率模型，然后通过Draco算法将其压缩。

Draco是由谷歌Chrome 媒体团队设计，旨在大幅加速 3D 数据的编码、传输和解码，可以被用来压缩 mesh和点云数据。它还支持压缩点(compressing points)、连接信息、颜色信息、纹理协调、法线等其他与几何相关的通用属性。

最后使用Node.js进行解析和发布，Node.js是一个基于Chrome JavaScript运行时的平台，可以轻松构建响应迅速且易于扩展的Web应用程序。Node.js轻量且高效，使用事件驱动的非阻塞I / O模型，非常适合在分布式设备上运行数据密集型实时应用程序。通过html网页就可在浏览器查看已发布的3D模型。

图4 3DTiles渲染调度流程

3 实验与分析

3.1 实验数据与实验流程

本实验使用的模型数据为电力模型，电力模型与一般城市模型不同，具有单体模型数据量大、密度高等特点，单个杆塔模型的数据量可达到300 M以上，对Web三维平台造成巨大压力，因此如何对这种单体电力模型进行优化，提高其传输和渲染效率是有待解决的重点问题。本文通过两个实验来分析Web环境下三维复杂模型简化与可视化方法，实验环境配置如表1所示。整个系统技术架构如图5所示。

3.2 结果分析

首先利用3Dmax、Deep Exploration等工具将模型转换为obj格式，使用自主开发的加入了基于结构的边折叠算法的模型转化工具对模型进行顶点优化、合并同材质几何体、简化细节等操作，结果如表2所示。

表1 实验环境配置

通过obj2gltf数据转换工具分别将原始模型SZ30101.obj和简化模型SZ30101-low.obj转换为精细模型SZ30101-high.gltf和简化模型SZ30101-low.gltf。首先使用Cesium加载天地图作为基础场景，此时帧率为30～33 FPS。之后通过viewer.scene.primitives.add( Cesium.Model.fromGltf)方法分别加载1个、100个、200个、1 000个、2 000个GLTF模型查看帧率变化，可视化效果如图6所示，帧率统计如表3所示。

图5 技术架构图

表2 模型简化对比

表3 模型加载帧率变化

由图6、表3可以看出，随着精细模型数量大量增加，帧率大幅度降低，在加至100个左右时浏览器已有明显卡顿，模型数量增加至200个浏览器接近卡死；反观简化模型加载至1000个还有余力，可见在某些可忽视细节的情况下使用简化模型能大大提高绘制效率。

使用viewer.scene.primitives.add(new Cesium.Cesium3Dtileset())方法加载3DTiles格式的多分辨率模型可视化效果如图7所示。帧率统计结果如表4所示。

表4 帧率变化

由图7、表4可以看出，近距离时加载LOD1，显示全部细节，此时帧率为28FPS；中距离时加载LOD2，显示部分细节，此时帧率为29FPS；远距离时加载LOD3，显示模型整体，此时帧率为30FPS。可见利用3DTiles形式加载电力杆塔模型，具有很好的LOD特性，可以随着视距的变化增删细节，减少不必要的渲染损耗，大大加快模型的渲染速度，减轻浏览器和GPU的负担。

图6 加载GLTF模型

图7 加载3DTiles模型

4 结 论

本文利用开源工具采用基于结构的边折叠算法对复杂模型进行简化，并通过开发工具将dae、obj等通用格式模型数据转换为GLTF格式和Cesium的3DTiles格式，实现模型数据LOD分层组织。利用优秀的开源地图引擎Cesium实现模型的加载和可视化，得到Web环境下精细模型和简化模型的加载效率，最后使用Cesium加载3DTiles方式完成Web环境下三维复杂模型的渐进式LOD可视化方案。通过两个对比实例进行实验结果显示，将模型简化算法与Draco模型压缩编码算法相结合，并采用流技术进行数据传输，使用渐进式LOD加载3DTiles进行模型可视化，能够大大优化模型数据、减少简化结果的数据量、提高网络传输效率和渲染效率。本方案具有操作简单、支持数据格式多、可视化效果好等特点，可作为构建Web三维系统的技术之一，提高三维复杂模型的使用率，使三维复杂模型在建设、规划、国土、测绘等部门中发挥更大作用。