基于Web的Revit模型轻量化和大屏显示研究

2024-01-31汪学清赵云猛

青岛理工大学学报 2024年1期

汪学清,董泽,陈博,赵云猛

(中国矿业大学(北京) 力学与建筑工程学院,北京 100083)

随着计算机技术的进步,建设行业的信息化发展势头不可阻挡。BIM(Building Information Modeling)技术具有可视化、参数化、可模拟性等诸多优势,成为建设行业的首选。美国作为最早应用BIM技术的国家,为BIM的应用推出了很多标准,这也为BIM在全球的推广做出了贡献[1]。同时我国住房和城乡建设部也颁布了许多政策和标准[2-4],以鼓励和支持建筑行业应用BIM技术。现阶段,BIM技术在工程应用中依然存在许多问题,施工人员希望在施工现场轻松便捷地浏览三维模型,但施工现场环境往往较难满足BIM软件的应用。因此,在Web端(浏览器)浏览建筑模型成为研究应用的热点,对于指导工程施工具有重要意义。

WebGL技术可被用于创建具有复杂3D结构的网站页面,通过JavaScript语言编写网页代码即可实现三维模型的展示[5]。HTML5,WebGL以及CSS技术的出现为在网页浏览三维模型并进行交互提供了可能性。前人做了如下研究:AHYUN等[6]基于WebGL搭建的三维模型展示平台实现了3D空间信息平台展示功能。贺佳佳[7]将轻量化技术与Revit二次开发结合起来,开发出的BIM轻量化模型显示平台基本实现了Web端的轻量化显示。佘宇深[8]在全桥建模的基础上,提出了以JSON形式进行轻量化并实现Web显示的方法。阎超[9]将Revit参数化模型工程信息输出为XML格式,并实现模型在Web端重构与展示。同时SHIROLE等[10]也通过XML形式实现了对BIM模型信息的访问,为格式转换格式提供了新的方向。王占军等[11]通过采用GLTF格式实现模型数据转换功能,引入3D Tiles技术实现海量三维模型基于图形引擎系统的集成与展示功能。吕婧等[12]验证了BIM模型数据转换为GLTF格式的可行性,为本文研究提供了参考。综上,GLTF传输格式作为连接BIM模型与Web端模型的“桥梁”应用于Web端模型显示具有可行性,并且相比于XML格式具有巨大优势,因此选择GLTF格式作为中间格式。

要在保证模型真实性的前提下实现Web端的轻量化显示,必须经过模型格式转换和渲染交互两个关键环节,其中,须对插件导出的GLTF文件进行轻量化处理。Web端显示思路如图1所示。

图1 BIM模型轻量化显示流程

1 模型轻量化

实现BIM模型的轻量化,即实现模型文件体量的压缩。此过程分为两步:①借助二次开发技术开发自定义插件将Revit模型导出为GLTF格式的中间文件;②通过内置npm载入gltf-pipeline插件压缩GLTF文件,实现模型轻量化。

1.1 插件导出

Revit模型建立之后,模型几何和属性信息都储存在.rvt格式的文件中,浏览器无法进行读取。借助Revit API开发插件将Revit模型的几何、材质等信息储存在GLTF文件中。

插件开发主要分为如下3个步骤:①在Visual Studio2019内新建类库,命名为RevitexportGltf;②在类库内引用RevitAPI.dll,RevitAPIUI.dll,并通过IExternalCommand外部命令,加载Excute()函数,借助 Revit内提供的CustomExporter自定义导出接口;③编程结束,在Revit内通过Add-InManager加载.dll文件,查看插件运行结果情况。开发流程如图2所示。

图2 插件导出二次开发流程

在CustomExporter类中,重载OnPolyMesh(),OnMaterials()等15个方法,实现模型中点、边界、材质等元素的提取。几何信息的获取主要是获取三角网格的顶点坐标、顶点索引、法线向量、法线向量索引、几何体中心、唯一标识符ID;属性信息的获取是在导出材质贴图后,提取出模型的name、userData、标识符ID等,以上几何信息和属性信息最后都以Array的形式存储在GLTF文件中,获取信息的过程如图3所示。

图3 模型信息提取过程

在信息提取过程中,首先调用OnElementBegin()和OnElementEnd()循环遍历模型的所有元素和“族”实例对象,之后调用OnFaceBegin()函数获取模型的face数据,调用OnPolymesh()和OnMaterial()函数获取模型的Geometry与Material,最后通过OnFaceEnd()判断是否遍历完模型中的所有构件,若没有则返回OnElementEnd()函数进行继续遍历;若已经遍历完模型的所有元素就导出GLTF文件,完成格式转换。

1.2 模型文件数据轻量化

模型成功转换为GLTF格式后,文件中产生了许多冗余数据,使导出的文件相比之前的文件体量产生了不同程度的增长。因此,通过Draco压缩算法对模型数据进行轻量化处理,减小模型文件体量。

Draco是谷歌开发的一种大幅加速3D数据网格的编码、传输和解码的库,主要应用于压缩和解压3D网格和点云数据,能有效改善3D图形网格的存储和传输。Draco的底层压缩基于Edgebreaker算法,Edgebreaker通过一系列步骤遍历网格。对于每一步,算法都需要访问并编码一个尚未访问的三角形网格。在每个阶段,输入网格被划分为不相连的区域,这些区域可以共享一个顶点,但没有边共享。Edgebreaker通过分析顶点v与栅边g、边界B之间的关系,可以分为下面五种情况[13]:C,L,E,R,S。五种标识符如图4所示。

图4 操作符分类

五种标识符分别代表着五种遍历三角形网格的方式:图4(a)中操作符S表示两边网格都未被遍历;图4(b)中操作符R表示左边网格未被遍历,右边网格已被遍历;图4(c)中操作符C表示左右两边网格都未被遍历;图4(d)中操作符L表示左边网格已被遍历,右边网格未被遍历;图4(e)中操作符E表示两边网格都已遍历。

如图5所示,对于一个有边界的简单网格进行压缩时,Edgebreaker算法起始于绿色的门,跟随蓝色箭头表示的路径依次进行遍历,并借助图4所示的五种操作符方法遍历三角形网格,直到将所有网格遍历。

图5 Edgebreaker网格压缩示意

2 模型Web端重构、交互与优化

Three.js作为一种简化使用WebGL技术的方式[14],近几年被国内外程序员广泛使用。故本文在Three.js框架内实现轻量化模型在Web端的重构、渲染与显示,渲染流程如图6所示。

图6 Three.js渲染流程

首先在Three.js框架中构建三维场景(Scene)、相机(Camera)、渲染器(Renderer)和光源(Light)等主要元素,之后导入轻量化后的GLTF格式文件,接着在VScode中利用Three.js框架中的gltfLoader和dracoLoader对GLTF文件内模型数据进行解析,最后通过添加方法等,在浏览器中实现模型重构与交互。

模型重构之后,为了方便浏览和查看其属性信息,可以通过在VScode添加控件等为模型增加交互功能。其中包括平移、缩放、旋转、拾取、高亮与属性表格等。

2.1 几何变换:平移、缩放与旋转

模型首先要通过几何变换中的平移、旋转、缩放或组合变换实现将坐标系由局部坐标系转换到世界坐标系。

1) 平移。在平移操作过程中需要进行矩阵变换。假如场景中存在点A,坐标为(X,Y,Z,1),经过平移后的坐标为A1,坐标为(X1,Y1,Z1,1)。过程中点按照平移矩阵T平移,在各个轴方向的位移分量分别为Xt,Yt,Zt,则平移前的点A和平移后的点A1关系如下:

(1)

其中平移矩阵T:

(2)

2) 旋转。在旋转操作中,三个主要因素是旋转轴、旋转方向和旋转角度。假设以z轴为旋转轴,逆时针旋转θ°后,则旋转前的点A(X,Y,Z)和旋转后的点A1(X1,Y1,Z1)关系如下:

(3)

3) 缩放。假设三个坐标轴的缩放因子分别为Zx,Zy,Zz,缩放矩阵为R,则缩放前的点A和缩放后的点A1关系如下:

(4)

其中缩放矩阵R:

(5)

2.2 坐标系转换

模型坐标系经过几何变换之后,还需要依次经过视图变换、投影变换、视口变换,将世界坐标系转换为标准设备坐标系,再转为屏幕坐标系,以实现对模型坐标的获取,转换流程如图7所示。

图7 模型坐标转换流程

2.3 射线法拾取

在交互事件中对模型构件的拾取是通过射线法获取的。射线法是利用一根有箭头的红色射线去和三维场景中的模型构件相交,相交的模型对象就是被拾取到的模型。

红色射线由透视相机发出,穿过蓝色屏幕上的位置P0,继续延伸,交视棱台近截面于P1,交视棱台远截面于P3,得到一条线段P1P3,线段P1P3就是眼睛能看到的射线在透视空间中的部分,并且这条线段相交的模型,就是鼠标点击选中的空间模型;这个交点坐标就是鼠标点击选中模型的交点空间三维坐标。射线法原理如图8所示。

图8 射线法原理

2.4 属性获取表格

属性信息是通过构件唯一标识符确定的,通过元素ElementId获取,并在重构时与模型相关联,然后采用射线法,进行鼠标拾取,当射线与第一个构件相交时触发事件使其高亮并展示构件属性信息。通过这种方法可以实现在浏览器中实时查看具体构件详细属性的功能,属性获取栏如图9所示。

图9 属性获取栏

高亮显示是通过射线法拾取技术,拾取到三维世界中的某个对象,当使用鼠标点击某个结构时,被选中的结构、颜色会发生改变,同时会弹出对应属性,效果如图10所示,其中墙装饰高亮显示为粉色。

图10 高亮拾取

3 模型显示与交互实验

本文以某一高层建筑塔楼作为渲染的主要对象,以某办公楼、某教学楼作为对比对象,模型信息见表1。采用的机器型号为Intel(R) Core(TM) i9-12900H@ 2.70GHz、16 GB内存以及64位Windows11操作系统的笔记本电脑,基于Google Chrome浏览器实现。

表1 模型信息

3.1 模型外观

为了更好地还原在Revit中的模型外观,在二次开发中导出GLTF格式的同时导出模型的材质贴图。在模型重构过程中配上材质贴图后,模型的Revit效果图和网页端渲染图的对比如图11所示。

图11 模型外观对比

3.2 浏览器兼容性测试与交互事件

在操作过程中,先添加controls轨道球控件,检测键盘和鼠标的操作事件并将其定义于浏览器之中。执行操作时会接收到反馈的对象,给该对象添加一个监听事件来监听鼠标、键盘的变化。执行controls语句时,相机参数随着用户操作鼠标键盘变化,最终呈现出变化后的渲染结果,鼠标键盘操作事件见表2。引用代码如下:

表2 鼠标键盘交互事件

const controls=new OrbitControls(camera, canvas)

事件交互功能在Chrome浏览器进行测试,效果如图12所示。

图12 Chrome浏览器模型交互

浏览器兼容性对模型渲染效果和交互功能有重要影响。因此,对常用的多个浏览器进行兼容性测试,效果如图13所示。

图13 不同浏览器展示效果

在测试的四种浏览器中交互结果见表3,较好地实现了模型的交互功能,浏览器兼容性测试结果良好。

表3 浏览器兼容性操作事件

3.3 Draco算法压缩效率

Draco算法压缩模型的效率直接影响到Web端轻量化显示的效果。建筑模型在通过插件导出之后,文件体量会发生不同程度的变化。经过Draco压缩算法轻量化处理之后,文件体量会大大减小,压缩优化率会稳定在50%以上,并且随着模型体量的增加,压缩优化率降低,具体数据见表4。

表4 BIM整体模型参数化信息

4 大屏显示

数据大屏展示系统具有直观化、关联化、艺术化和交互性的特点,可以通过合理的可视化使用户感知大量数据,用可视化方式呈现出来,会更直观体现数据信息[15]。本文通过使用iframe标签,将Web端模型轻量化显示的Index.html文件内嵌于通过CSS3技术和HTML5创建的数据大屏系统中,更美观、更细致地展示BIM模型。数据大屏系统架构如图14所示。

图14 数据大屏系统架构

1) 技术层:主要包括在创建数据大屏系统时需要采用的架构技术,如CSS3,HTML5以及Three.js框架等。

2) 展示层:大屏展示平台,页面包括左侧模型展示和右侧构件、图表等数据展示。

3) 应用层:模型渲染交互功能、登录、模型全景展示。

为大屏系统设置的登录界面如图15所示。

图15 登陆界面

BIM模型大屏展示系统页面布局如图16所示。从登陆界面进入到BIM模型展示系统后,左侧为主要信息展示区域,展示BIM模型,右侧为次要信息展示区域。为避免长时间直视大屏产生视觉疲劳,让画面保持平稳,主题色、背景色选用低饱和度、低亮度的暗色系中的蓝色、深蓝色为主题颜色,比较符合BIM技术的科技感和可视化特点。

图16 页面布局效果

为获得更好的操作体验,优先考虑使用Google Chrome浏览器浏览页面。大屏展示页面地址为http://127.0.0.1:5501/bigscreen.html。本文设计的数据大屏展示系统,用户可以选择模型和修改系统版式以提供直观、舒适的数据大屏交互体验。塔楼Revit模型上传到数据大屏系统的三维视图如图17所示。