基于WebGL的轻量化BIM可视化方案研究

中国地名·工程与建筑

上海勘测设计研究院有限公司上海 200335

打开文本图片集

摘要：本研究以工程项目数字化模型为基础，结合Revit二次开发和WebGL三维可视化技术，提取和优化BIM模型主数据，实现建筑模型轻量化及在多平台跨端的渲染、交互和性能优化，旨在更好的提高BIM模型在工程项目管理过程中的实用性和便捷性。

关键词：BIM;模型轻量化;WebGL

1 引言

随着“互联网+”时代到来，建筑业信息化作为建筑业发展战略的重要组成部分，软件工程与建筑行业的结合也日益紧密，BIM技术在在工程项目全生命周期管理中的应用和实践，有助于提升工程管理水平，提高生产效率。因此，BIM 技术展现出广阔的应用前景[1]。

一直以来，如何在浏览器中显示高性能的3D加速图形是C/S架构向B/S架构转换的最大障碍。得益于计算机图形学的发展和WebGL的出现，建筑、工程和施工（AEC）工具不再局限于各类客户端软件。随着WebGL技术日趋成熟，各个浏览器内核及硬件设备对WebGL2的兼容和支持，JavaScript对交互式三维动画的处理能力得到加强，同时也具有良好的跨平台性可和移植性，为BIM模型在Web端三维可视化提供了支持[2]。

本文将从三维模型数据提取开始，打通模型信息模型轻量化、加载模型几何属性及相关主数据到三维模型渲染、交互和优化等全流程，以实现建筑模型的跨平台可视化。

2 总体方案

本研究以轻量级BIM模型的跨平台可视化为目标，以Revit为例，提取BIM模型文件主数据，对模型数据进行预处理后，实现Three.js渲染引擎下的跨平台模型渲染和交互，并利用网格简化算法、顶点合并渲染等手段优化和提高大体积建筑模型的渲染效率和可用性。主要研究内容分为以下三步：

1）三维模型主数据提取与轻量化。通过使用 Revit API及相关SDK，研究Revit三维模型数据信息进行提取和顶点合并，对面片化后的三角网格进行模型主属性进行挂载。其中包括构件属性，业务字段，几何、材质及信息等，最后以JSON格式作为配置文件保存模型信息。

2）使用Web API读取模型主数据，并重新序列化。通过使用图形引擎提供的功能及接口，基于对WebGL2及浏览器内置对象的学习和使用。利用轨道控制、光线投射算法实现了WEB端三维模型的渲染与交互。

3）模型渲染性能优化。针对精度较高、体量较大的三维模型在网页端出现渲染性能可能出现下降的问题，使用网格简化算法、顶点合并、多实例渲染等方法提升大体量模型在浏览器中渲染性能和显示帧率。

2.1 Revit三维模型主数据提取与轻量化

2.1.1 模型数据提取与网格化

为了提取模型几何、材质信息，需要基于Revit SDK编写三维模型网格化插件。通过SDK的内部方法读取三维模型的顶点坐标、偏移矩阵等其他主数据。根据模型间的拓扑关系重新遍历族实例的几何实体的相关属性后形成三角网格，然后将三角网格面片化，并存储顶点及索引坐标。

接着，我们提供几何实体获取与实体相关的材质ID并获取材质对象，通过材质对象可以拿到材质名称、颜色、纹理等与外观渲染相关的数据。如图1所示。

最后，拿到模型几何信息和材质信息等相关主数据之后，我们需要将各类数据序列化并分别根据模型拆分成二进制格式输出。根据模型的空间位置，编写三维场景配置文件，以JSON的形式将模型的二进制数据组织起来。另外，我们需要对模型数据和业务信息的派生关系进行深入分析，设置冗余字段来适应不同业务属性的几何数据。

2.1.2 模型三角剖分与顶点合并

模型的三角网格由三角面片组成，三角面片需要存储三类信息，顶点、边和面。我们以矩形为例，一个矩形网格可以剖分为两个三角面片T1和三角面片T2。基于三角面片的数据结构，依照剖分面的顺序存储三个顶点坐标值，将三维模型划分为若干个三角面片，其优点在于简洁明了，而缺点是三角面片重的每个顶点会被多个面引用，导致数据冗余。假设顶点P1和P3作为T1、T2的公用顶点，会被分别保存一次。而体量较大的三角网格剖分后三角面片数量庞大，冗余的顶点数量巨大。为了优化三角面片顶点坐标的冗余问题，需要过滤重复的顶点。将三角面片数据结构拆分为顶点坐标和索引两个有序列表，索引为顶点坐标编号且必须以为首位，索引值和顶点坐标分别存储在两个有序列表中。这样处理之后，既保留了顶点之间的拓扑关系，也能保证顶点重复率大量降低。我们虽然没有直接存储边信息，然后我们还是可以通过遍历三角面片的列表找出公共边，这样处理不但在空间上节省了大小，代码的执行效率也得到了提升。

2.2 三维模型跨平台轻量化展示

2.2.1 模型数据的读取和加载

在上一步中，我们已经将Revit中模型数据导出为我们自定义的三维格式。对于导出的包含模型信息的数据利用JavaScript进行预处理和整合。使用FileReader（Web API）来异步读取我们生成的文件。接下来，调用FileReader实例提供的readAsArrayBuffer方法，读取ArrayBuffer（二进制数据缓冲区）并进行序列化。读取场景之后，遍历nodes属性下存放的所有子节点来还原场景的结构层次模型。如图2所示，采用树状结构来描述场景可以很方便的进行状态控制和姿态传递。而每个Node节点下存放的Mesh（网格）对象则包含了场景节点的几何属性，其中包括Primitive（图元）对象，图源的顶点索引（Indices）等关键数据。另外，我们需要根据Primitive（图元）对象中Material（材质）的索引值，来构造Materials数组用来定义节点的外观。

数据构造完成之后，我们需要创建顶点数据缓冲区，通过Primitives属性找到顶点位置坐标和顶点纹理坐标的Accessors（访问器对象），继而找到Buffer（缓冲区）和bufferView（缓冲区视图）。将顶点数组通过WebGLRenderingContext（Web API）的vertexAttribPointer方法做进一步分配，分别给着色器分配位置变量和纹理坐标变量，最后需要将暂存的纹理坐标传入顶点着色器，最后在输出给片元着色器，通过纹理对象插值就可以得到片元最终值。

2.2.2 渲染引擎的使用和交互设计

Three.js是当下流行的基于WebGL开源渲染引擎，具有丰富的扩展功能和良好的生态，兼容性也较好，用户也可以进行自定义配置和定制。除了兼容常见的现代浏览器，在移动端的原生应用内（WebView）也有较好的展示效果。本章将以Three.js为例，实现渲染引擎的使用和交互设计。

我们要创建一个基于Three.js的三维程序，首先需要了解Three.js的三个核心类，Scene（场景）、Camera（相机）和Renderer（渲染器）。其中，Scene是所有内置对象的容器，是模型展示的基础。而Camera则是用来指定视口观察方式的类。通常我们会使用模拟人眼的透视相机（PerspectiveCamera）。而Renderer（渲染器）的作用则是对物体，光照，材质，纹理等对象进行管道处理及渲染。图形引擎内置核心类间的包含关系如图3所示。

关于Three.js的基本原理本文将不再赘述，当完成轻量化模型的导入后，实现了Web端的三维模型导入后，需要使用Orbit Controls（轨道控制）来实现场景内的模型交互，例如旋转，缩放和平移。也可以通过参数的设置来指定动态阻尼系数和惯性来调整交互的效果。在模型场景中要点击拾取相关的模型信息和自定义属性时，需要用到Raycaster（光线投射）类，根据世界坐标和相机所生成射线投射方向的单位向量创建一个射线投射器对象并判断射线与场景内构件的三角网格是否相交[4]，如果拾取到该构件，通过遍历该构件的唯一标识进行属性匹配以达到模型主数据的关联。

2.3 三维模型渲染性能优化

浏览器受运行时效率和内存限制等多方面影响，我们需要对模型的数据组织和加载方式作出相应的调整和深度处理。其中主要包含图元合并，场景拆分，网格简化，模型压缩等手段。能一定程度上提升模型加载时间及响应速度，提高渲染效果，改善用户体验。

2.3.1 LOD与网格简化

当使用Three.js渲染大体量模型的时候，如果不对模型进行处理，直接加载到场景当中，会使FPS（每秒传输帧数）大幅下降，其中的原因在于模型顶点数量及材质过多，这样会导致drawcall过载，即使指定了视锥体（Frustum）的平面（Plane）且引擎已经进行了模型剔除，但是仍然很难解决过载的问题。所以，当精细模型在远处的时候且不影响视觉感受和交互体验的前提下，通过网格简化算法可以生成不同细节层次的模型。网格简化算法一般分为离散简化和动态简化[5]。

离散简化是指对模型进行预处理，预先计算好一系列不同简化率的模型，在实时运行的程序中可以按照模型离视点的距离选择不同等级的模型数据进行渲染。

动态简化是离散简化的扩展，通过局部面片的几何变换来生成具有连续且不同分辨率的近似模型。

本文中我们使用静态简化中用于区域合并的几何删除法。删除的元素包括顶点、边或者三角形，该方法的基本思想是计算网格中顶点、边或者三角形在整个模型的权重，在简化过程中优先删除对整个模型影响权重最小的顶点、边或者三角形，然后再对删除后的空缺区域进行三角化[6]。可以根据展示层级将相邻的面合并成一个Super Face（超级面），需要注意的是合并到同一超级面上的顶点离这个超级面的距离都不能大于指定的阈值。

另外，通过计算视口到模型表面坐标的距离来划分不同的区域组，在不同阈值范围展示对应LOD层级的模型，并且在视距变化过程中进行视距检测，剔除权重较低的三角网格以提高模型渲染的效率。

2.3.2 Three.js渲染性能优化

为了提升渲染效率，可以对Three.js的相关代码进行进一步的性能优化。优化的核心思想是为了每一次drawcall时都尽可能的提交及合并更多的顶点数量。充分使用GPU的能力加速渲染效率。

我们可以通过通过顶点合并渲染和多实例渲染来降低drawcall，并且增加渲染FPS，而且在模型数量足够多的情况下，多实例渲染的效果是优于顶点合并的效果的。对于曲面模型，使用法线贴图在来改善细节的同时实现减面。同时我们也需要合适使用内存，比如材质对象及几何体对象的复用，视口内隐藏或移除的对象也需要及时释放以避免内存溢出。

3 结束语

本研究以BIM模型网页端轻量化展示为目标，实现了从Revit三维模型主数据提取与轻量化，三维模型的跨平台展示及三维模型渲染性能优化。该研究的开展，更好的提高BIM模型的可移植性和便捷性，也使得BIM技术在工程建设全生命周期管理中得到更好的应用。

参考文献

[1]郭颖，王坦 .BIM 技术在我国的发展及应用前景简述[J]. 中阿科技论坛（中英阿文），2020（05）：67-68.

[2]Weigang Zhang，Hao Yuan，Jiangong Wang， et al.A WebGL-Based Method for Visualization of Intelligent Grid[C].2011 4th International Conference on Electric Utility Deregulation and Restructuring and Power Technologies.

[3]余莉. 基于 Three. js 的拾取方法的研究[J]. 计算机时代， 2020.

[4]Lee S H， Kim B G. IFC extension for road structures and digital modeling [J]. Procedia Engineering， 2011， 14：1037-1042.

[5]He H G， Tian J， Zhang X P， et al. A survey on mesh simplification[J]. Journal of Software， 2002， 13（12）：2215-2224.

[6]宋晓江，隋明磊. 模型 LOD 简化的可视化实现[J]. 计算机与信息技术， 2007 （3）： 50-51.

作者简介：李英杰（1992—），男，江苏南京人，主要从事建筑信息模型及地理空间信息可视化等方面的研究工作。

*本文暂不支持打印功能