大规模复杂BIM场景的Web展示方案

胡锦亮

摘要：BIM（Building Information Modeling）是基于三维数字设计解决方案所构建的“可视化”数字建筑模型，而网页处理大规模3D场景有一定的性能缺陷。现在探索提出了BIM与Web大规模场景结合的绘制方案。首先，对大规模BIM数据进行体素化处理，然后通过区域划分将数据划分为多个连通区域，最后使用基于视锥增量式关注域（Frustum Of Interests）对一个连通区域的数据加载进行进一步的性能优化，提出了一整套的加载方案。最终通过实验，证明了方案的有效性。

关键词： BIM； Web3D技术； FOI； 连通图； 网页技术

中图分类号：TP391 文献标识码：A 文章编号：1009-3044（2017）33-0226-03

Abstract： BIM （Building Information Modeling） is Based on the three-dimensional digital design solution built by the "visual" digital building model， and web processing large-scale 3D scene has some performance flaws. Now explores the drawing scheme of combining BIM with Web large scale scene. First， the bulk BIM data is voxelized， and the data is divided into multiple connected regions by region division. Finally， the data loading of a connected region Based on the Frustum of Interests is used to further Performance optimization， put forward a set of loading schema. Finally， through the experiment， proved the effectiveness of the method.

Key words：BIM； Web3D； FOI； connect graph； web technology

1 概述

當前是一个大数据的时代，各行业的数据规模和种类都在以前所未有的速度增长。建筑业更是如此，随着智慧城市的发展，建筑大数据需要包含整个建筑生命周期中的所有数据，同时对数据进行很好的管理，BIM正是处理建筑大数据的有力武器。

建筑信息模型BIM（Building Information Modeling）是基于三维数字设计解决方案所构建的“可视化”数字建筑模型，近年来，作为建筑信息化与计算机3D可视化交叉合作渗透的新兴技术，BIM已经成为建设及土木行业信息化发展的一项重要技术。BIM技术的应用使原来大规模（形体关系复杂、设施管线布置错综、设计实施运维困难）建筑数据信息的集成、表达、更新以及传递共享越来越简捷。

随着互联网时代的到来，基于Web3D渲染的场景加载技术也应运而生，BIM与Web3D技术相结合，可以更方便地在网页上构建三维的虚拟世界。但是由于浏览器的局限性，其内存无法容纳很大规模的数据同时加载，在这种情况下，如何在网页端处理如此大规模的BIM场景，同时实现展示流畅，是一个挑战。

本文主要研究并提出了一套基于BIM与Web3D技术的大规模Web场景加载的方案。方案首先对BIM数据进行解析，得到体素化的模型数据；然后对场景进行连通性分块，减少同时需要加载的数据量；然后基于FOI [1-4]思想，保证在一个视点只需要加载最少的数据，从而进一步减少数据量。最后通过实际数据实验，证明本文提出的方案是可行的。本方案主要使用WebGL以及网页开发技术。

2 数据预处理

2.1 BIM数据解析

我们所关注的模型标准是BIM，BIM（Building Information Modeling）作为新一代智能建造核心技术的标准，在移动互联网上实现大规模BIM 场景在线可视化具有十分重要的意义。我们以主流的BIM 格式IFC（Industry Foundation Classes）为输入数据，对大规模三维BIM场景数据进行深入的语义分析，提出一套轻量级的Web3d数据解析方案，对原始数据进行预处理。

BIM模块之间的关系错综复杂，一个IFC文件中的实例可以被映射到多个其他所导出的IFC文件中，这样就使得IFC文件很难去管理，对于网络传输也有很大影响。一些研究[5-7]已经证实这些冗余数据是阻碍BIM存储和传输的主要负担。所以需要对IFC数据进行轻量化工作。

通过研究，我们提出了一个方案，在保持IFC原始文件格式的前提下，对整个IFC文件的内容、引用进行扫描分析，查找并去除IFC文件中一些由于数据重复引起的冗余信息，提取出模型片元对应的点的坐标、片元的法向量、片元的颜色等等有用的信息，并对所提取出的信息进行格式化，最终得到方便网络传输以及浏览器端解析的数据，以此来降低BIM的数据量，并适应网络的快捷传输与网页在线渲染。

2.2 基于连通图的场景划分

由于场景规模太大，我们可以在合适的情况（如模型内部环境）下，将模型数据按照一定的规范划分为多个区块，在合适的时间加载合适的模型区块，同时删除不可见区块及时清除浏览器缓存，这样可以大幅度降低所占用的浏览器内存，避免浏览器内存溢出导致崩溃的问题。

基于数据解析后得到的基于体素的模型数据，我们提出了一个基于连通图的区块划分方案。我们将模型按照封闭性划分为多个区块，各个封闭区块只有通过一个或多个的数据有限的“出入口”与别的区块连通，通过结合视点与“出入口”的位置信息就可以判断是否该进行场景切换，我们根据这些“出入口”可以绘制出一个连通图，从而确定场景切换的具体时机和规范。连通关系如图1所示。

在完成场景划分后，我们可以根据当前视点的位置确定需要加载的部分场景，而通过场景漫游移动视点时，根据连通点动态调整所需要显示的场景，从而大幅度减少需要加载的数据。

3 基于FOI的渐进式加载技术

在实际环境中，人的视野是有限的，超出这个界限的区域或不可见或模糊不清，实际上人所关注的区域正是在视野内[8] 。通过确定当前视点位置对模型数据进行过滤，这是一种轻量化的解决方案。

同时，结合数据处理阶段所解析得到的基于网格体素的模型数据，我们可以更方便得计算视野区域内的模型数据，不需要去判断每一个模型片元是否在视野范围内，而只要去判断规格简单的体素盒是否在视野中即可，然后间接决定该体素盒对用的多个模型片元是否在视野中，减少判断难度和判断次数。

根据上述思想，我们提出了FOI （Frustum Of Interests）的概念，即视锥增量式关注域，其主要思路是近似模拟人的可视域，根据视点以及视锥区域计算算法动态计算需要渲染的模型片元，这样就可以做到只调度视锥范围内的模型数据，而对其他数据不加载，概念图2如下。

当用户在场景中漫游时，视点处于不同的位置往往有不同的FOI域，这就要求我们装载的数据是实时变化的，由于重绘的时间间隔较短，FOI域在每个间隔内的变化也是可计算的，根据行为的不同视锥区域往往只变化一个体素单位大小或者改变很小的角度，根据这一理论，我们提出了IFC大规模数据的传输调度机制，关键步骤如下：

（1） 拾取当前视点对应的可见区域FOI内的所有IFC构件。

（2） 发送数据请求到服务器端，请求数据库中的IFC构件的数据信息；

（3） 服务器传输获取的数据信息到客户端；

（4） 客户端进行渲染；

（5） 根据漫游的行为（停顿、前进、转身）状态应用增量式FOI替换算法计算视锥内新增的IFC构件和被移除的构件；

（6） 根据获取的变化信息对数据进行处理，至（1）步；

以上步骤思路大致为：初始化视点在一个确定的位置，这时计算根据当前视点以及视线朝向计算视锥内的模型，然后根据体素信息把响应的体素模型渲染出来；当在场景中进行漫游时，动态调用FOI替换算法计算当前视点的位置对比上一步视点所需要去掉以及增加的体素，然后进行模型动态调整。

在FOI概念中最核心的是FOI替换算法，这也是我们对计算diff进行的轻量化操作。当视点变化时，我们需要再次计算模型片元是否在视锥范围内。考虑到diff操作是频繁触发的，如果我们依然按照初始化时对所有体素盒进行遍历操作来判断，那么所需要的计算量极大，很容易造成頁面崩溃卡死。FOI替换算法巧妙地减少了计算量。其核心思想是：首先约定每个计算周期的视点位置相对于上一个计算周期的视点位置变化不超过一个体素格距离（根据视点移动速度设置合适的计算周期），这样我们只需要对视锥外层的体素进行增减判断就可以了，而不需要遍历所有体素。通过这种diff算法，我们在减少计算量和减少内存消耗两方面进行了轻量化处理。

4 浏览器轻量化技术

4.1 多线程技术

有了上述的数据处理以及算法实现基础，我们还要具体结合Web浏览器端的具体情况。浏览器处理数据、计算和渲染图形的能力比较差，在本课题中，浏览器需要同时完成分析处理场景数据、渲染大规模模型、发送数据请求等一系列工作。如果不能够优化浏览器性能，提升浏览器处理能力，那么必然会导致很严重的浏览器卡顿，影响用户体验。传统的javascript只支持单线程编程，在处理数据量较大的计算时会遇到性能瓶颈。

HTML5中提出了多线程webworker的概念，使得浏览器可以使用利用多线程去完成一些复杂的工作。在本文工作中，我们将网络交互（如发送请求以及获取数据）、FOI算法计算数据差异放在独立的一个线程中去处理，而在浏览器主线程中只负责模型的渲染工作。

4.2 异步场景渲染

良好的用户交互和用户视觉体验是可视化场景加载非常重要的要求。目前渲染模型有两种方式：发送多个请求获取数据，拿到所有数据后统一进行模型的渲染；或者每发送一个数据请求都调用渲染接口进行部分数据渲染。

我们常规选择的方法是方法一，这种方法在数据下载时，页面呈现空白状态，用户可能会感觉页面卡死或者网络报错，当数据量比较大时，数据全部下载占用的时间比较长，用户体验很不好。

方法二是在下载数据的同时也进行模型渲染，配合上文提到的多线程技术，可以使两个步骤同步执行，用户可以马上看见模型一块一块出现，而不用等待很长时间，这样用户体验比较好。同时我们进行了进一步的优化，比如添加Modal层防止用户在模型加载时非法操作以及设置模型出现的顺序（通常以视点当前位置开始出现，然后向四周蔓延为最佳顺序）。

4.3 函数节流

本文所提出方案是基于场景漫游的，视点在场景中漫游时，FOI算法频繁被触发，而可能移动距离，视点还处于当前体素块中，这样就白白消耗了系统的性能，容易造成页面的卡顿。我们使用了函数节流的方法，确定一个最小时间范围，如果在这个范围内重复触发，则不会调用算法去检查差异，当超过这个最小时间则触发一次，并重新计算时间，javascript实现的节流算法如下：

function throttle（method，delay，duration）{

var timer=null， begin=new Date（）；

return function（）{

var context=this， args=arguments， current=new Date（）；；

clearTimeout（timer）；

if（current-begin>=duration）{

method.apply（context，args）；

begin=current；

}else{

timer=setTimeout（function（）{

method.apply（context，args）；

}，delay）；}}}

通过该方法，根据场景漫游的速度设置合理的最小时间，可以减少检查更新的次数，进一步减轻浏览器计算的负担。

5 实验结果

最后本文通过实验对上述提出的方法进行了测试。测试环境为 Windows 10 操作系统，使用 Chrome 浏览器进行展示，硬件 配置为 Intel（R） Core（TM） i5-2400 CPU @3.10GHz 处理器、4.0GB 内存、NVIDIA GeForce GTX460 显卡。模型数据大小为200M，进行5次加载漫游实验。使用方案前后对比如表1所示。

从表1可以看出，使用本文方案后，防止了页面的崩溃，缩短了模型的加载时间，减少了内存消耗量，同时场景的FPS显著提高，这些都提高了用户的使用体验；而在使用以往直接加载方案时，页面时常出现崩溃情况，且加载时间较长，内存占用较高，页面也有明显的卡顿现象。测试效果如图3所示。

图3 测试效果图

6 结论

以上实验表明，本文提出的方案适合大规模BIM模型在浏览器端的加载以及渲染，减少系统资源消耗，优化模型加载，提高用户体验，为浏览器端大规模场景渲染提供了方向。

参考文献：

[1] Wang W， Jia J. An incremental smlaoi algorithm for progres? sive downloading large scale webvr scenes[C]. Proceedings of the 14th International Conference on 3D Web Technology. ACM， 2009： 55-60.

[2] Falby J， Zyda M， Pratt D， et.al. Npsnet： hierarchical data structures for real-time three-dimensional visual simulation [J]. Computer Graphics， 1993， 17（1）：65-69.

[3] Schuwerk C， Chaudhari N， Steinbach E. An area-of-interest based communication architecture for shared haptic virtual en? vironments[C]. Haptic Audio Visual Environments and Games （HAVE）， 2013 IEEE International Symposium on. IEEE， 2013： 57-62.

[4] 贾金原， 王伟， 王明飞，等. 基于多层增量式可扩展扇形兴趣 区域的大规模 DVE 场景对等渐进式传输机制[J]. 计算机学 报， 2014， 37（6）：1324-1334.

[5] L. Zhang， R. Issa， Ontology based partial building information model extraction，J. Comput. Civ. Eng. 27 （6） （2013） 576-584.

[6] J. Won， G. Lee， C. Cho， No-schema algorithm for extracting a partial model from an IFC instance model， J. Comput. Civ. Eng. 27 （6） （2013） 585-592.

[7] Y.-H. Lin， Y.-S. Liu， G. Gao， X.-G. Han， C.-Y. Lai，M. Gu， The IFC-based path planning for 3D indoor spaces， Adv. Eng. Inform. 27 （2） （2013） 189-205.

[8] 王偉， 贾金原， 张晨曦， 等. 大规模虚拟场景渐进式传输的研 究进展[J]. 计算机科学， 2010， 37（2）：38-43.