基于Web的BIM模型轻量化展示及渲染控制研究

王 琪，李智杰，李昌华，张 颉

(西安建筑科技大学 信息与控制工程学院，西安 710055)

建筑信息模型(BIM,building information model)在建筑的设计、施工、运维的全生命周期中具有极高的应用价值[1]。BIM技术在国内外都有良好的发展，但是对于目前建筑业的需要，建筑体量也是愈来愈庞大，更多的信息数据导致BIM软件对于计算机的软硬件要求很高，而且BIM的实现大多是基于C/S架构的，需要用计算机操作并且安装专业的BIM软件，这严重影响了BIM的发展。随着Web端以及3D渲染引擎的迅速崛起，对BIM模型的Web端渲染提供了一种可行性方案[2]。在信息化社会，移动端已成为主流，所以将BIM模型以B/S架构可视化渲染，并摆脱专有软件、终端平台的约束，这对于BIM的推动以及轻量化研究都有重大意义[3]。因此，对于BIM模型数据的轻量化以及将其放置在Web端进行渲染优化都是十分必要的。

目前在Web端实现BIM模型轻量化展示以及场景渲染控制，国内外研发部门和学者已有相关研究。Autodesk所研发的Forge云平台以及广联达推出的协筑平台都包含了BIM模型网页端浏览功能，但是不提供用户需要的开发接口且存在敏感数据安全隐患问题。为此，学者们通过建立私有云的方式改善了该问题，文献[4-6]实现了BIM模型在Web端展示，并提供了模型轻量化的实现方案，但是对于模型数据的优化以及场景渲染效果不佳。文献[7-8]从模型三角面片入手，提出了模型简化边折叠算法，将三角网格简化降低面片复杂度，但是影响了模型外观。文献[9-10]通过剔除视野范围内的不可见构件，降低了场景的GPU开销，然而剔除计算过程又极其复杂，严重降低了渲染速度，文献[11]提出了八叉树剔除算法，解决了这一难题，然而构建八叉树的过程会极大的消耗存储空间。

鉴于此，本文提出了一种基于Web的BIM模型轻量化展示及渲染控制方法，对于模型数据优化，通过冗余顶点删除法和Draco算法来压缩模型数据，在确保保真度的前提下，将模型数据体量以及网页端加载时间降低；
对于渲染优化，提出了一种LOD与自适应渲染相结合的LOD-AD优化算法来对场景内构件进行渲染控制，有效剔除低重要度构件。实验结果表明，本文方法极大压缩了模型体量，并且在帧率较低的情况下自适应选择次要图元的剔除以及重要图元的优先渲染，在不影响模型外观情况下渲染流畅度大大提升，从而实现三维模型在Web端的轻量化显示及渲染优化。

1.1 Revit模式数据转换

Revit是Autodesk公司推出的一款BIM软件，在建筑业内盛行应用它来作为BIM建模和信息化管理工具，具有较好的数据完整性和兼容性，能够很好的达到工作需求，并且Revit提供了完善的开发接口，供用户自行开发需要的功能。Revit模型中含有大量的数据结构，其中包含了模型的名称、位置、几何、属性信息等，当然也包含了很多冗余信息，因此提取重要信息减少模型数据以实现模型的轻量化具有一定的工程意义。本文主要实现模型中的几何信息以及属性信息的提取，并将它们转化为轻量化数据结构。

几何信息中含有大量的组成建筑图元的面、点、边等信息，属性信息中含有模型的材质、纹理、标高等信息[12]。对于几何信息，将这些点、线、面转化为渲染所需的最基本单位——三角面片的形式存储，包括三角面片的顶点坐标、顶点索引、法线向量、法线向量索引、几何体中心、唯一标识符ID[13]；
对于属性信息，可以在单独导出材质贴图后，直接提取出模型的name、userData、标识符ID，以上的几何信息和属性信息，都以数组的形式存储以此来建立轻量化数据结构。

在轻量化实现过程中，将Revit模型展现至Web端，需要一个中间格式作为桥梁。glTF(Graphics Language Transmission Format，图形语言传输格式)是跨平台的3D对象通用标准[14]，该格式在Web端的解析与加载更加便捷迅速，因此本文采用glTF格式作为Revit和Web端的传输格式。

对于Revit数据的导出，可利用其强大的开发接口，采用Revit二次开发技术实现模型信息的提取，其中IExpotContext接口中含有所有模型数据的导出函数，因此本文通过调用该接口中含有的函数来完成模型信息的提取并转换为glTF格式，具体的Revit模型的数据导出流程如图1所示。

图1 Revit模型的数据导出

如图1所示，数据在导出之前会首先判断当前的Revit是否在三维视图中，若不是会报错并终止模型插件的继续运行，若在三维视图中，模型会通过OnElementBegin()以及OnIstanceBegin()函数遍历界面中所有的元素(element)和族实例(Instance)，然后利用OnPolymesh()和OnMaterial()函数来提取所有元素的几何、属性信息，最后调用OnFaceEnd()函数完成所有几何体的循环，将模型信息导出为glTF格式。

1.2 模型数据轻量化

虽然建立了轻量化数据结构，但模型文件中依旧存在着冗余数据，降低了模型解析率和传输速度，导致加载缓慢甚至加载失败，严重影响用户体验，因此模型数据轻量化尤为重要，需要对glTF模型文件作进一步优化处理。在glTF文件中包含了大量的三角面片，而三角面片是由无数个顶点信息组成，顶点之间也是依靠连接关系相连，因此模型的压缩可以从顶点删除、顶点连接关系压缩方面来研究。本文主要通过冗余顶点删除法和Draco网格压缩算法实现模型数据的优化。

1)冗余顶点删除法。

Revit构件的几何信息在保存至glTF文件中均以三角面片形式存储，三角面片都是由顶点信息组成，以减少运行内存的使用空间，但是文件内部依旧含有大量的冗余顶点，例如模型边界某顶点位于其相邻两个顶点之间且有可能三点共线或者该点与另外两定点之间的夹角在一定范围内并不影响模型外观的展示，则该顶点可称为冗余顶点。如图2所示，点E在边BC上，点D在边BC下且角D接近180°，此时点E与D都是冗余顶点，删除后模型外观也基本不变。

图2 冗余顶点删除过程图

(1)

设置阈值ω，若α≥ω，则表明该顶点影响因子很小，可将改点视为冗余顶点并剔除该顶点；
反之，则保留该顶点。三维模型中的剔除原理类似，将顶点相邻三条边向量化并判断夹角与阈值的大小关系进行剔除即可。

2)Draco压缩算法。

Draco是由谷歌提出的一种用于压缩和解压三维几何网格数据的库[15]。其算法主要原理是将三维模型在传输或存储的过程中，压缩模型中的数据信息。Draco中主要使用了经典三维网格压缩算法Edgebreaker[16]。该算法的网格访问是基于区域增长原理的，在访问网格的过程中，需始终维持一个由边组成的有向边界，该边界将网格划分为两类，即已访问和未访问部分，并且每访问一个多边形，则会输出一个该多边形与边界的拓扑关系操作符，并将该多边形纳为已编码部分，至此三角面的压缩完成[17]。如图3表示了压缩过程中的五种基本操作符。

图3 Edgebreaker的五种基本操作符

在图中，X表示当前遍历的三角形，v表示被遍历三角形的第三顶点。图3(a)中的操作符L表示左侧三角形已经被遍历过，右侧三角形没有被遍历过；
图3(b)中的操作符C表示左右两侧三角形都没有被遍历过；
图3(c)中的操作符R表示右侧的三角形已被遍历过，而左侧的三角形没有被遍历过；
图3(d)中的操作符S表示左右两侧三角形都没有被遍历过；
图3(e)中的操作符E表示左右两侧三角形都被遍历过。

通过这五种基本操作符描述了利用有向环形将网格分割成数条路径的方法，图4是对一个不规则图形的三角网格模型进行Edgebreaker压缩的示意图，图中的箭头表示压缩时所经过的路径。

图4 Edgebreaker网格分割路径示例

本文利用冗余顶点删除法和Draco压缩算法将提取出来的Revit模型数据的几何信息进行压缩，降低了模型的数据体量，提高了模型文件在Web端的传输速度，并在此基础上保证模型的高保真度。

2.1 模型映射

glTF数据中包含的几何数据中含有各个三角面片的局部坐标系，而WebGL中的所有物体在全局坐标系中都有精确的位置坐标，因此导出的glTF模型在Web上显示时必须进行坐标系变换，坐标变换如图5所示。

图5 坐标变换

从全局坐标系到世界坐标系的转变，实际是空间几何图形的平移、缩放与旋转的单独或组合变换而成[18]。两坐标系间的过渡矩阵计算如下：

T1=RxRyRzT

(2)

(3)

(4)

(5)

(6)

其中：假设(x1,y1,z1)为glTF格式中的局部坐标系原点在Web端全局坐标系中的坐标；
局部坐标系的Z轴垂直于地面；
Y轴指向正北；
Rx，Ry，Rz为绕X轴、Y轴、Z轴旋转得到的旋转矩阵；
θx，θy，θz为旋转后与X轴、Y轴、Z轴的交角。综上，glTF文件中的几何属性可依据式(2)来完成空间坐标系的转换，使构件的几何信息能在Web端完成关系映射。

2.2 模型的Web端重建

完成了Revit导出数据与WebGL的空间关系映射后需要将文件中的模型信息在Web端重组并展示出来。Three.js是WebGL技术的一种表现方式，其代码体量小、加载迅速、操作简单[19]。因此本文选择Three.js作为渲染框架来展示模型，基本渲染流程如图6所示。

图6 Three.js渲染流程图

在三维模型显示的过程中，首先引入Three.js及相关功能的类库，以便于开发人员通过库内函数的直接调用完成场景中对象的创建；
之后完成场景的建立并对场景内的元素进行加载，包括了设置相机属性、灯光属性、渲染器基本参数等；
接着通过Three.js框架自带的glTFLoader函数解析glTF文件，并将所有组成模型的三角面片转化为对象添加至场景中；
最后通过渲染器渲染场景内所有组件元素，完成几何模型在WebGL上的加载。

3.1 LOD场景控制算法

LOD(Level Of Detail，层次细节)[20]是为简化场景中可见几何体的多边形细节而提出的一类加速算法。视觉原则中，距离视点越远的模型在计算机上所占面积越小，对几何体的影响也最小，因此提出的模型绘制方法是对近距离几何体绘制详细的细节，而对远距离的几何体进行简化，这便是LOD技术的原理[21]。

本文提出了一种最小包围球的LOD优化算法对场景进行优化，即大面片以及距离视点近的面片显示渲染，而距离视点远以及小面片隐藏剔除。由于模型三角面片规则形状不一，很难判断其大小，因此可以使用最小包围球的概念，用圆形来包围住三角面片，通过圆形的半径表示面片的大小。用场景中的三角面片最小包围球的半径r来表示该三角面片的大小；
包围球圆心到相机的距离d表示该三角面片距离视点的距离，d可通过式(7)来确定，其中(x0,y0,z0)表示相机坐标，(x,y,z)表示三角面片包围球圆心坐标；
TH表示设置的初始阈值。通过式(8)来判断是否渲染此三角面片，当圆形半径与圆心到相机的距离之比小于等于阈值时隐藏且不渲染该三角面片，当圆形半径与圆心到相机的距离大于阈值时显示且渲染该三角面片。

(7)

(8)

3.2 LOD-AD场景控制算法

在Web端渲染BIM模型时，会占用计算机的GPU资源，其性能指标可利用FPS(Frames per Second，帧率)来表达，即GPU每秒所刷新的次数，通常情况下FPS的上限值设定为60 FPS，更高的帧率可以使模型渲染更为流畅。对于Web端的模型渲染，30 FPS已能足够流畅展示三维场景，更高的帧率可提高用户使用场景交互功能时的体验感。

在自定义导出的glTF格式中导出Revit的模型Category.name来确定模型构件类型，通过模型构件类型的重要程度划分模型层级，引入帧率来自适应剔除层级类型，本文设置的层级如表1所示。

表1 层级划分

当FPS>30，显示所有族类型；
当15≤FPS≤30，加载第二层级的族类型；
当FPS<15严重影响渲染流畅度，仅加载第三层级的族类型。

LOD场景控制算法虽然能渲染剔除远距离小构件三角面片，但是对于大场景构件的优化却很有限，帧率并不能达到理想状态。因此本文结合自适应层级划分和LOD优化算法，提出LOD-AD场景控制算法，先进行LOD算法优化后再通过帧率监测来自适应层级划分剔除，从而达到最优场景渲染效果。具体算法原理如图7所示。

图7 算法原理图

为了验证模型数据优化和场景渲染控制方法的可行性，本文选择5个不同体量大小的BIM模型组成实验数据进行验证，模型基本信息如表2所示。实验采用Intel(R) Core(TM) i5-5257U@ 2.70 GHz、8 GB内存以及64位Windows10操作系统的笔记本电脑，基于Chromr浏览器实现。

表2 模型基本信息

4.1 模型数据优化有效性分析

针对原模型体量过大，在Web端重组加载时间过长的问题，提出以glTF为中间格式，并采用冗余顶点删除法和Draco算法来达到模型数据优化目的。为分析模型数据优化的有效性，通过模型数据优化前后的体量、传输时间和保真度来进行实验验证。

实验依据表2中的5个BIM模型为实验对象，使用了模型数据压缩算法与未使用算法的模型体量对比如表3所示，模型传输时间对比如图8所示。

表3 模型体量对比

图8 模型传输时间对比

从表3可以看出，随着模型的体量增大，本文的数据优化算法效果更佳，模型体量压缩率提高更明显。这是由于更大体量的模型具有更多的三角面片，而本文的压缩算法是针对三维几何网格的，而网格正是由无数个三角面片组成。尽管不同模型压缩率有所差别，但是该算法相较于原模型整体压缩率均在93%以上。

从图8的模型传输时间可见，模型A～E在数据优化后传输时间相较于优化前明显缩短。模型在网页端利用GPU重组导出的模型数据会消耗一定时间，且体量越大的模型重组所需的时间更多，而利用数据优化算法后的模型在Web端重组速度明显加快，这能极大的降低计算机GPU的消耗，提升用户的操作体验。

对于模型的保真度，采用数据优化算法后的glTF文件，实现其在网页端的重组渲染，通过对比模型数据保真度与模型渲染保真度两方面来验证。

1)模型数据保真度。

在导出的glTF文件中，包含了模型的统一标识符ID，各个构件拥有自己的标识符ID，在模型的几何信息与属性信息中都含有标识符ID使得它们互相关联。因此通过点击构件后，获取鼠标所在位置来与模型几何信息进行匹配，得到该构件元素的标识符ID，通过该ID调取出模型的属性信息。

对于模型数据的保真度以商务楼的屋顶为例，对比Revit原模型与网页端模型的属性信息，如图9所示。

图9 属性信息保真度对比

图9(a)中的重要信息在图9(b)中均能一一对应(框图标记)，由图中的属性信息对比可见，数据优化后即使信息体量减少明显但是模型主要属性信息并未丢失，也未出现信息错误的情况，确保了模型信息的高保真度。

2)模型渲染保真度。

为了更好呈现模型渲染外观的保真度，在导出glTF格式的同时还导出了模型的材质贴图，配上材质贴图后该模型的网页端渲染和该模型的Revit原图的对比如图10所示。

图10 模型外观保真度对比图

由图10的模型渲染保真度对比可见模型外观无明显差异，在网页端的渲染能够很好的代替Revit建模软件的模型展示，起到方便用户实时查看模型的效果。

通过上述模型数据优化可行性分析实验可见，优化后模型的压缩及传输过程都有明显改进，且保真度完好。因此，使用本文的模型数据优化算法更有利于模型的Web端传输。

4.2 场景渲染控制可行性分析

本文针对模型渲染后场景帧率过低问题提出了LOD-AD优化算法来对模型构件进行有效剔除，达到提高帧率的目的。对此，本文以构件类型较多的办公楼为例具体展现LOD-AD优化算法的显示效果，并以表2中的5个BIM模型作为实验对象，设置相同阈值和相同视距下这些对象的LOD-AD优化后与优化前的FPS对比，以此验证本文渲染控制的可行性。

选择族类型较多的办公楼模型为例来展现其显示效果，原模型在Web端显示以及LOD-AD场景控制算法优化后显示效果图如图11所示。

图11 办公楼模型展示

可以看出，原模型FPS在15～30之间，模型自适应选择第二层级渲染，剔除第二层级以外的所有族类型，从图中可见图11(a)中室内的桌椅、室外绿化等构件在图11(b)中被剔除，但是模型的重要图元如墙、屋顶、楼板等图元显示渲染，并且在渲染过程中剔除了远距离小构件三角面片，依据此方法完成帧率监测的场景自适应以及远距离小面片构件自动剔除的控制效果，从而完成低重要度构件剔除、高重要度构件实时渲染，达到模型外观保留的效果。

图12列举了表2中五种不同体量的建筑初始模型、使用LOD渲染控制算法模型以及LOD-AD渲染控制算法模型(阈值参数0.05，视点距离模型中心距离3m)的帧率比较结果。

图12 帧率对比

可以看出，未使用任何优化算法的初始模型，在模型面片数量较少的模型A、模型B中帧率均在30以上，能达到流畅渲染的目的，但是当模型体量更大拥有更多的三角面片时，模型帧率极低，网页端渲染卡顿明显；
当使用LOD场景控制算法时模型帧率相对有所改善，但是在达到模型D、模型E那样较多三角面片组成的大体量模型时，网页端卡顿依旧存在；
本文所提出的LOD-AD场景渲染控制算法相较于原模型与LOD优化后的模型，帧率提高明显，即使是对于模型E这样的超大模型也依旧能保持40以上的FPS。

通过场景渲染控制可行性分析可知，LOD-AD控制算法不仅能确保模型外观基本保留，而且能大幅提高帧率，对于大模型依旧能完成流畅渲染。因此，本文提出的LOD-AD渲染控制算法能有效达到场景渲染优化的效果。

本文针对BIM模型体量大，在Web端模型加载缓慢及渲染卡顿等问题，提出将glTF格式作为Revit与Web端的数据传输格式，进而通过冗余顶点删除法和Draco算法将glTF格式中的三维网格压缩，并使用提出的LOD-AD渲染控制算法将模型场景中的构件选择性剔除及渲染。实验结果表明，本文提出的BIM模型轻量化展示以及渲染控制方法极大的减少了模型体量以及模型传输时间，保证了模型的保真度，且极大程度的提高了模型渲染效果，解决了Web端重组模型后流畅度较低的问题。但是，本文对相机视野外的模型还可以进一步剔除且Web端页面仍可进一步完善，下一步工作可通过可视域分析将不可见模型虚化渲染或者直接渲染剔除，借助大屏技术添加建筑施工信息监测等功能，以期实现更好的轻量化显示效果。

猜你喜欢 面片顶点轻量化 轻量化材料在商用车白车身的应用汽车实用技术(2022年15期)2022-08-19基于ABAQUS的某轻卡车蓄电池支架轻量化汽车实用技术(2022年11期)2022-06-20重卡车架轻量化设计汽车实用技术(2022年9期)2022-05-20基于MATLAB的STL模型切片分层算法科技创新与应用(2020年2期)2020-02-14一种轻量化自卸半挂车结构设计智富时代(2019年2期)2019-04-18一种轻量化自卸半挂车结构设计智富时代(2019年2期)2019-04-18河沿面片饮食科学(2016年5期)2016-07-05河沿面片饮食科学(2016年5期)2016-07-05甜面片里的人生幸福家庭(2016年3期)2016-04-05“图形的认识”复习专题初中生世界·九年级(2015年6期)2015-09-10