基于WebGL 的BIM 模型轻量化研究

冯雨晴， 奚雪峰， 崔志明

（苏州科技大学 电子与信息工程学院，江苏 苏州 215009；2.苏州市虚拟现实智能交互及应用技术重点实验室，江苏 苏州 215009）

BIM 即建筑信息模型（Building Information Modeling），是指在建设工程及设施全生命周期内，对建筑的物理和功能特性进行数字化表达，并依此设计、施工、运营的过程和结果的总称[1]。 BIM 作为基于可视化建筑信息模型的信息集成和管理技术，具有运行状态可视化、日常设计模拟化、信息模型协同工作、模拟工程进度实时性等优势。BIM 发展20 多年，其应用在我国已经10 年有余。根据《关于推进建筑信息模型应用的指导意见》[2]，到2020 年底，甲级勘察、设计单位以及特级、一级房屋建筑工程施工企业应掌握并实现BIM 与企业管理系统和其他信息技术的一体化集成应用，新立项的项目在勘察设计、施工、运营维护中，集成应用BIM 的项目比率达到90%。

由于装配式建筑涉及建筑、结构、机电及水利等设备，同时需要建筑设计、生产、施工、管理等方面的协同合作，所以BIM 的应用实施具有专业程度深、多方协作、多单位决策等特性[3]。这也就需要BIM 的模型能够在多平台上跨平台使用，同时支持不同系统的要求，从而满足不同终端的实际需求应用。 在浏览器端，大多数采用插件的形式[4]，例如Flash、 Unity3D、Navisworks，但这些插件都需要用户提前安装，并且对现在主流的浏览器的支持并不友好。

WebGL（Web Graphics Library）最早是由Mozilla 工程师提出，创建一套用于2D 和3D 图形交互的API[5]。WebGL 符合绝大多数浏览器的Web 标准，可以使用GPU 加速，使物理和图像处理的效果可以作为网页界面的一部分。 WebGL1.0 以Open GLES2.0 为基础，为3D 图形提供API。 它与HTML5 的canvas 标签相结合，并通过DOM 接口进行访问。 WebGL 2.0 以Open GLES3.0 为基础，保证了WebGL 1.0 的许多可选扩展的可用性并公开了新的API。 WebGL 中的着色器是直接在GLSL 中工作的，通过字符串信息与WebGL API 相互通信。 着色器的作用是来确定模型中每个顶点的位置，并应用WebGL 对点、线、三角形等基本元素进行光栅化处理，通过片元着色器来计算每个基本元素的颜色。 由于WebGL 具有复杂的底层细节，为了方便用户操作，Three.js 封装好关于WebGL 特性的JavaScript API， 这使得用户无需掌握复杂的WebGL 底层细节也可以创建三维图形。 Three.js 是通过对WebGL 接口的封装和简化而形成的一个图形库，它为直接在浏览器中创建三维场景提供了大量的特性和API，除了一些低版本浏览器，几乎所有的浏览器都对Three.js 具有兼容性。相较于其他传统的渲染3D 图形的方式，WebGL 具有开源、跨平台、无插件等优势。

由于BIM 中千兆级模型文件、上万份图纸文件和每天百万次操作请求的庞大数据，在现实中无法便捷的加载和操控模型，因此，Revit 模型轻量化显示研究具有重要的应用价值。 为了实现Revit 模型能够在浏览器端的轻量化显示，笔者通过Revit[6]二次开发的技术和WebGL 技术来解决Revit 模型的几何转化和轻量化显示的问题，并且针对大体积的Revit 模型改进了八叉树优化算法，达到Revit 模型轻量化的目的。 笔者主要工作：（1）Revit 二次开发技术研究。研究Revit API 的接口函数，利用二次开发技术开发插件实现将IFC 文件的导出、几何信息的提取以及将Revit 模型文件转化为GLTF 格式的文件。（2）Revit 模型几何转换研究。研究导出的GLTF 文件的建筑要素和模型轻量化的方法， 并将三角化几何转换和八叉树算法作为模型的轻量化方法， 研究WebGL 技术和渲染框架。 通过解析模型文件实现模型的几何转换， 将转换后的三角面片送入WebGL 的渲染中，实现模型的轻量化显示。（3）渲染优化。针对体积大的Revit 模型中包含海量的模型数据从而导致模型渲染速率降低的问题，利用八叉树优化算法对模型的场景进行有效的管理，在不影响模型精细程度的情况下提升渲染的速率。

1 国内外研究现状

最初的建筑信息通过手绘的方式记录。 进入信息化时代后，开始使用计算机来辅助建筑设计，BIM 便是其中的一种主流技术。BIM 的核心是利用数字化管理技术建立与实际建筑相符合的虚拟工程模型，并在其中输入与现实建筑信息相对应的数据，形成建筑的模型。

文献[7－8]通过VRML 技术实现了在浏览器端口加载三维模型的方法，但是这也需要一个专门的插件，同时调用接口也较为复杂。 文献[9－10]介绍了BIM 在桥梁施工上的应用，对斜拉桥的施工进行了虚拟可视化，从多种角度分析了施工的可能性和协调性；通过使用不同的施工顺序方案和工作分解结构，将可视化的三维模型、成本和进度相集成，从而模拟了真实情况下的动态图像和效果。 文献[11－12]中，通过结合多种绘画的手段，实现了在配置较低的移动端设备上加载模型的方案，不过这种方案改变了原始模型的风格，并且删减了太多的信息，从而在一定的程度上改变了原有设计图纸的意图，并不适合在工业建筑领域精准模型的需求。文献[13－14]采用WebGL 的技术和Three.js 的渲染引擎，实现了用数据驱动模型以及静态模型的导入、解析和处理等功能，但是只能实现对小体积的模型的处理操作，对大体积的模型操作时，会出现卡顿甚至崩溃。 文献[15－16]利用点云技术对莫干山以及建筑文物进行构建，然后使用WebGL 和Three.js 等技术使其能够在浏览器中进行加载和渲染，并实现了对模型的一些基本操作。

文献[17－18]实现了将三维模型转换为浏览器可以识别的格式，然后部署在服务器平台上，利用网页让模型能够在网络中流动。 其优势在于网页应用程序不会受到平台的限制，即PC 端和移动端可以同时浏览同一个模型的数据。 文献[19－20]利用八叉树的思想优化了大模型场景下的多类别的模型任务。 八叉树是一种树形的数据结构，每个内部节点都有八个子节点。 在三维空间的应用中，常用八叉树对三维空间进行分割。八叉树有两种数据存储的方式，分别是线性的和非线性的方式。 非线性方式中每个父节点都会存储8 个子节点的位置信息，而线性的八叉树每一个孩子节点都对应着父节点的位置信息。

综上所述，现有系统基于BIM 和WebGL 技术已经可以实现对部分模型的渲染和交互，但是还存在以下的问题：（1）需要下载特定的插件才能够对图形进行渲染；（2）支持模型的格式比较单一，只能渲染简单模型或者只能渲染复杂模型；（3）对模型没有进行轻量化的处理，使得图形在渲染的时候造成了很大的压力，提高了用户使用门槛。 为此，笔者利用Revit 接口的二次开发技术，将模型导出，再利用WebGL 实现网页端数据的加载，通过八叉树实现对渲染算法的优化，达到模型轻量化的目标。 在无需特定插件的情况下，对简单和复杂的模型进行轻量化处理，实现在网页端的交互功能。

2 Revit 模型轻量化研究

2.1 模型数据结构建立

Revit 模型对象包括HostObject 和Instance， 其中HostObject 是包括系统自带的一些模型对象， 比如墙体、楼板、屋顶；Instance 是用户自己搭建的一些模型实例，它们在Revit 建模中统称族。 针对这两种模型类型文中采用了两种不同的轻量化策略。

首先是用户自己创建Instance 模型的轻量化策略。 由于每一种Instance 模型在创建之后会生成唯一的SymbolId，如果在场景中存在两个相同SymbolId 的Instance 实例模型，此时这两个模型的顶点（vertices）以及三角面（face）数据都是一样的，只是它们的模型矩阵不一样，也就是两个模型的position（位置）和roation（旋转）不同。 Revit 自带的模型矩阵是3×3，此时具有相同Instance 模型的顶点和面的浮点型数据只需要存储一份，不同模型可以通过相同的材质索引来链接。 一个模型文件重复的Instance 模型构件越多，轻量化的效果也就越显著。

其次是关于HostObject 系统族实例的轻量化， 这是该文的一个重点。 当前研究对这方面的插件优化较少，主要原因是HostObject 没有Instance 实例那样有固定的SymbolId 去判别。 文中通过直接判别同一HostObject 族下实例之间的顶点数据来判断是否可以合并。 在读取模型HostObject 时，将相同系统族名称的实例放进同一个组别中，并将组别中第一个模型对象的顶点数据作为参照对象，之后的模型的顶点数据都直接与之顶点数据进行对比，这里主要对比的是两个模型的顶点数据是否存在scale（缩放）关系。 若两个模型vertices 顶点总数一致，并且其中有连续的两组顶点存在相同的缩放比例，即可直接将这两个模型看做相同的模型，此时只需要记录两个模型各自position（位置）、roation（旋转）以及scale（缩放）三个维度的数据，它们的顶点和三角面的数据只需要存储一份即可。 最终整个模型的数据结构如图1 所示。

图1 模型数据结构

2.2 Revit 模型几何转换

在获取所需的模型数据之后，需要将数据打包转换为GLTF 格式，根据确定需要导出的Revit 模型的数据类型设计GLTF 的数据结构，并利用Revit 二次开发技术开发插件，将Revit 模型文件导出为GLTF 文件，从而实现Revit 模型几何信息及其相关属性信息的提取， 并将其分别存储在GLTF 格式文件的几何区域和属性区域，实现Revit 模型的几何转换。

获得GLTF 数据结构之后，需要开发程序将Geometries、Materials 和Object 三部分的信息提取出来并实现数据结构的转换。 文中选择应用Revit 二次开发技术开发一款插件将模型的信息进行提取。 Revit 能够进行二次开发的前提是AutodeskRevit 提供了丰富的应用程序编程接口API，其加载过程如图2 所示。文中选择C#语言完成二次开发的编程，应用的开发平台是VisualStudio 2017 和Revit2018，VisualStudio 2017 用于代码编写，Revit2018 用于代码测试。

图2 附加模块的加载

2.3 算法流程

Revit 二次开发的环境搭建完成之后即可在VisualStudio 2017 平台中进行程序的编写，插件开发的核心步骤如下：（1）添加外部引用：引用两个最常用的动态链接库RevitAPIUI.dll 和RevitAPI.dll。 （2）外部命令接口IExternalCommand 的实现：IExternal-Command 接口只有一个抽象函数Excute，重载这个函数来实现IExternalCommand，Excute 函数将作为外部命令的主函数被调用。 （3）Revit 二次开发BIM 模型导出：Revit 提供了专门的导出类CustomExporter。 使用CustomExporter 自定义导出接口，使用Exporter 导出数据模型。（4）Revit 模型几何信息和属性信息的提取：几何信息的提取例如模型的点是通过函数On Polymesh（）实现。通过Revit 二次开发技术开发插件，将Revit 模型转换为GLTF 格式文件，最后将生成的GLTF 格式文件进行本地存储。

2.4 八叉树场景渲染优化

插件开发将Revit 模型导出适用于WebGL 解析的文件之后， 接下来就是应用WebGL 技术将Revit 模型渲染在浏览器端。

利用WebGL 技术实现Revit 模型的轻量化显示，还需要实现对模型的旋转、缩放、查询等功能。 要实现对模型的三维交互，首先就需要对模型进行拾取，文中通过射线相交的方式实现对模型的拾取。 射线相交法就是将生成的二维坐标转换成三维坐标，然后与相机的原点相连接生成一条射线，原理图如图3 所示。

图3 射线相交法原理图

通过对模型的拾取，获取模型的属性信息后，会获取包含数千个“族”实例对象的Revit 模型。 由于大体积的模型包含大量的几何信息，所以文中利用八叉树算法对Revit 模型数据进行有效的管理，从而达到优化渲染的目的。

文中选用WebGL 的框架。 Object3D 是WebGL 中大多数对象的基类，构成其框架的包括场景、相机、灯光和渲染最小几何单元等，所以可以用Object3D 的Group 类对模型进行分组，根据所构建的场景图来构造Revit 模型的渲染树，如图4 所示。

图4 Revit 模型的渲染树

Revit 模型是由很多的“族”实例对象构成，每个“族”实例又由若干的点、线、面组成，将“族”实例作为划分的基本单位，这样保证了八叉树的每个节点的一致性。 首先对导出的GLTF 文件进行读取，遍历其中所有的“簇”的实例对象，将每个“族”实例对象放入没有子节点的节点中，然后判断每个“族”实例对象的阈值大小和深度：若大于阈值或没有达到最大深度，将对其进行重新调整。 最后，将生成的Revit 模型的八叉树场景存入GLTF 文件中。

3 实验与测试

3.1 渲染时间测试

文中以小型工程模型和空调压缩机模型为例，实现轻量化平台的测试。 首先，在Revit Architecture 中打开需要测试的Revit 模型文件；然后，利用Revit 二次开发的技术开发插件，将Revit 模型转化为GLTF 的文件格式；最后，通过WebGL 的技术来解析GLTF 格式文件，实现模型在浏览器端的轻量化显示。

模型的渲染时间是指当模型开始渲染的线程到能够显示到浏览器中所占用的时间。 为了测试轻量化平台的渲染性能，文中对空调压缩机模型和大型工厂模型进行测试（如图5 所示），实验平台选用台式机和笔记本，其配置见表1。

图5 Revit 模型三维交互效果

表1 实验设备信息

为了验证八叉树算法是否能够加快Revit 模型的渲染时间，进行了对比实验，实验结果见表2。从表中的数据可以看出，模型通过八叉树算法渲染后，对于较小的空调压缩机模型，模型在台式机上渲染的时间达到了3 s，但是在笔记本上的渲染时间达到了15 s，虽然大于在台式机上的渲染时间，但仍在用户等待的范围之内，但是没有经过八叉树算法优化的模型渲染时间较长，大型工厂模型渲染时间增加了14 s，空调压缩机模型渲染时间增加了6 s。在笔记本上渲染的时间有所增加，但是通过八叉树算法优化后的模型，渲染时间有所缩短。

表2 Revit 模型渲染时间对比

3.2 平台兼容性测试

对于不同的浏览器，其兼容性不同，用户的使用体验也不一样，因此对于轻量化平台进行兼容性测试是非常必要的。 为了让用户能够在不同的浏览器中使用该平台，文中对不同的浏览器的兼容性进行了测试，如图6 所示。 分别在Chrome 浏览器、360 浏览器、以及IE10 浏览器上进行了测试。 测试的内容包括，能够在浏览器内浏览模型，能否对模型进行移动、旋转、缩放等。 结果见表3。 通过表中内容可以看出，Chrome 浏览器的兼容性是最好的，能够通过鼠标对渲染的模型进行移动、选择、缩放等操作；而在360 浏览器中，无法对渲染的模型进行移动和旋转；在IE10 浏览器中，无法对模型进行移动和缩放。 360 浏览器、IE10 浏览器对轻量化平台的兼容性稍差，Chrome 浏览器对轻量化平台的兼容性最好。

图6 平台兼容性测试

表3 不同版本浏览器兼容性测试

4 结语

以实现Revit 模型的轻量化渲染为目标。 首先，对Revit 模型的IFC 文件信息和模型轻量化方式进行研究， 利用二次开发的技术实现了将Revit 模型转换为GLTF 文件的功能。 然后， 利用WebGL 技术解决了GLTF 文件的几何转换和轻量化显示问题。最后，通过八叉树算法，优化了大体积模型的渲染问题。通过上述最优化设计仿真与实验表明，文中提出的方法能够对模型细节进行较好保留的同时，加快在浏览器端模型的加载速度，实现交互功能。