基于WebGL与IFC的建筑信息模型可视化分析方法

徐　照　 徐夏炎　 李启明　 张　星

(东南大学土木工程学院, 南京210096)

基于WebGL与IFC的建筑信息模型可视化分析方法

徐照 徐夏炎 李启明 张星

(东南大学土木工程学院, 南京210096)

摘要:针对现有BIM模型矢量数据在Web渲染效果方面存在的信息缺失问题，提出了一种结合WebGL和IFC标准的BIM模型可视化分析方法.利用WebGL技术扩展了BIM模型的3D可视化显示途径，通过IFC标准使BIM模型的几何信息与OBJ文件信息实现交互，进一步设计了IFC-OBJ数据接口，使BIM模型获得.html与.js格式支撑下的可视化表达模式.结果表明，利用WebGL和BIM模型显示技术可以分析着色器语言的构成和使用方法，确保模型信息完整；利用JavaScript编写的OBJ-JS交互程序可以调用WebGL着色器，实现3D网页渲染效果.利用该方法实现的BIM模型在形式定义和几何属性上与OBJ模型可以完整匹配，模型渲染效果真实，从而验证了整个分析方法的有效性和可行性.

关键词:建筑信息模型;IFC;WebGL;可视化

BIM是一种在工程项目设计、施工、运营与管理全生命周期内,面向多参与方协调、数据共享、信息集成管理与利用的虚拟仿真技术.BIM技术的核心价值在于多参与方协同与信息集成,这一核心价值的完整实现依赖于构建满足项目特性的BIM系统,以BIM服务器作为信息的存储载体,并与项目多参与方客户端进行信息交互[1].

根据客户端的不同形式,系统内的网络结构模式可以分为C/S(Client/Server客户机/服务器) 架构与 B/S(Browser/Server浏览器/服务器)架构,常用的软件客户端程序即为C/S架构,而B/S架构通常以Web浏览器为客户端.为了给BIM 创造良好的数据交互与分享环境,国内外的研究者开发了一些用于BIM数据集成与管理的服务器平台,即 BIM 服务器.国内外对于 BIM 服务器均有一定研究.目前,国外的 BIM 服务器平台主要有 IFC Model Server,EDM Model Server,BIM Server,Eurostep Model Server 以及各 BIM 软件开发商自行开发与设计软件配套的协同设计服务器.张建平等[2]提出了面向全生命周期的集成BIM平台框架以及基于此框架的 BIMDISP系统.但这些BIM服务器的应用都是基于C/S架构(即客户端相应软件程序实现),使用和维护都十分繁琐,一旦项目参与方不使用装载特定软件的程序，客户端便无法及时地共享和交互相应的数据信息,更加无法实现大空间范围内的同步与共享.相较而言,B/S架构下的数据运算主要集中在服务器上,其优势在于对网络前端的软硬件要求较低、维护升级便利,同时对于移动终端的兼容性也更好.但是B/S架构下,BIM模型的高效三维渲染和Web应用程序功能限制一直是阻碍其发展的重要因素,其中最主要的是BIM模型的Web-3D实现,即如何使BIM模型高效地在网页上进行三维浏览.近年来随着HTML5的发布和推广,原生的WebGL技术能够有效地解决这些问题[3-5].这些研究虽然给BIM和WebGL结合提供了相似的研究思路,但缺少更深入的转换方法.目前关于BIM技术与WebGL技术相结合的研究还较少,已有研究的关注重点也在WebGL技术本身的应用[6-7],对于模型交互的关注度也不够.另外，IFC 标准被广泛应用于建筑软件的兼容性研究[8-9]、建筑信息模型的数据交换格式研究[10-11]以及与关系数据库技术结合的研究[12-13].

本文以BIM模型的可视化与交互性为研究对象,提出了一种结合WebGL和IFC标准的BIM可视化方法,通过IFC标准分析BIM模型几何信息的表达范围和形式,对OBJ格式文件进行研究,设计IFC-OBJ的数据转换接口.同时,针对基于WebGL的BIM模型显示技术,分析其着色器语言的构成和使用方法.最后,通过JavaScript语言编写OBJ-JS交互程序,调用WebGL下的着色器语言,完成BIM模型的渲染,实现模型可视化和交互操作.

1研究方法

本研究主要是为了实现基于IFC格式的BIM模型的Web可视化,旨在利用WebGL技术实现Web客户端对建筑模型的3D动态浏览和交互操作,形成建筑模型数据展示平台,不仅提高了客户端的视觉体验,而且能挖掘数据背后潜在的应用价值.本文主要从上层(即建模与文件读取)和下层(数据采集与图形处理)2个层次阐述可视化方法.其中建模与文件读取解析流程主要是通过对实例建筑进行3D建模,然后将模型文件转换统一到IFC格式,并进一步转换成OBJ文件，作为网页外部调用文件. 通过调用基于JavaScript的WebGL执行文件,在客户端浏览器中完成渲染显示模型.与上层建模与文件读取解析过程相对应的是下层的数据采集和图形处理过程,这个过程的核心是从提取建筑信息模型中的几何信息开始,这个步骤对应的是上层中的IFC-OBJ格式转换步骤.完成几何信息提取后,将数据信息融合在WebGL执行文件中,即HTML和JS文件.最后通过WebGL内置的GLSL ES着色器语言,完成模型3D图形在浏览器中的渲染显示.研究方法与流程如图1所示.

2BIM模型的Web-3D分析与实现

2.1IFC-OBJ数据分析与转换

IFC和OBJ作为2种不同的数据格式,都有着各自的数据定义和组织方法. OBJ文件只是包括三维模型的几何及材质信息,而IFC文件则有着自己的信息存储格式和结构,以及严格的数据层级.

2.1.1IFC文件的几何信息描述

IFC格式文件有着自己的几何表达类型定义和几何信息集成框架.IFC格式文件通过树状的框架结构将几何信息一层一层地嵌套使用,利用IFCREPRESENTATION函数对构件级别的模型几何信息进行详细描述.在IFC中,构件的定位方法有2种:① 在整体坐标体系下的坐标说明,称为绝对定位方法;② 局部定位方法,它是相对于另一个坐标系的定位方法.在IFC中对于构件的定位大多使用局部定位的办法.一般描述一个坐标系要说明原点和3个坐标轴的方向,但Y方向向量等于Z方向向量乘以X方向向量.IFC标准为了减少数据描述量,起到简化的作用,只说明X和Z轴方向.在具体的坐标系引用下,其实是一种递归定义的方法,直到局部坐标系不再引用其他局部坐标系为止,成为绝对坐标系.在实际应用中,需要不断地进行坐标变换,直到得到绝对坐标体系下的构件原点、Z轴方向、X轴方向、计算得出的Y轴方向的值.例如对于梁构件来说,局部坐标体系下梁的Z轴方向是梁截面高方向,X轴方向是梁构件方向或梁的展开方向.IFC标准中关于构件形状的定义主要是通过SweptSolid来表达形状的类型.IFC标准支持的多种形状表达类型包括三维拉伸体、三维面片、三维实体、二维曲线等,可以用于定义拉伸的横截面形式包括圆形、L形、环形、Z形、U形等,以及不带参数的任意直线围成的封闭剖面.

2.1.2OBJ文件的几何信息描述

OBJ格式由顶点、法线、纹理坐标、三角形索引(外观)和材质信息组成,实例OBJ文件如图2所示.

图2中,在OBJ文件中每行开始处的单词将决定这一行所代表的信息.如果该行是以字母v开头,那么跟随其后的将是3个不同的浮点值,代表顶点位置.图2中的OBJ文件是由实例IFC模型文件转换而来的,不能提取其中的纹理坐标浮点值.如果该行以字母vn开头,那么后面将是代表法线的3个浮点值.通常,跟随在f后面的是3对索引值.每组索引代表一个三角形,由3个索引构成,分别代表顶点、该顶点的纹理坐标和该顶点使用的法线.在OBJ文件中每个顶点都有自己的位置、纹理坐标和法线,某些点也许会共用位置、纹理坐标或法线,这样可以重用数据.

图2　OBJ实例文件

关于材质部分的定义,MTL格式的材质文件将作为对OBJ几何信息文件的补充.如图3所示,使用newmtl定义了一种新的材质,Kd,Ks分别代表漫射色和高光色,颜色使用RGB格式来定义,每个分量值的区间为[0, 1.0],Ns为高光色的权重,d为透明度,illum指定了光照模型，此时就形成了一个完整的OBJ模型文件.

图3　MTL实例文件

2.1.3几何信息提取

如图4所示,IFC-OBJ数据解析提取流程设计主要分为3个部分:① 对三角面片顶点坐标的解析提取.主要是通过多个IFCLOCALPLACEMENT对象的嵌套使用,获取构件对象所在的局部坐标体系在绝对坐标体系中的几何定位.② 对法线和纹理浮点数值的解析提取.③ 对材质信息的解析提取.IFCOpenShell提供了IFC文件解析的预定义函数库,同时开源地提供了ifc-obj数据转换框架, 通过C++语言编写,再利用C-free 5编译完成整个数据解析提取转换过程.

图4　数据提取流程设计

2.2基于WebGL的BIM模型显示

基于WebGL的BIM模型过程主要分为2部分:① WebGL下模型显示的基本框架搭建,即使用着色器语言编写代码;② 对上文中IFC模型文件转换得来的OBJ文件在JS环境下解析读取.

2.2.1模型显示流程

WebGL技术下模型三维显示过程如下:首先运行JavaScript程序,调用WebGL的相关方法;然后调用顶点着色器和片元着色器在颜色缓冲区内进行绘制;最后在浏览器上自动显示,其中顶点和片元着色器的执行是最重要的步骤.

1) 着色器语言.GLSL ES编程语言是在OpenGL着色器语言的基础上,删除和简化了一部分功能后形成的.它的语法与C语言较为类似,它使用的数据类型有2种:① 数值类型,没有小数点的数值则被认定为整数型,而有小数点的值则被认为是浮点型;② 布尔值类型,包括true和false两个布尔常量.GLSL ES是强类型语言,必须指明变量的数据类型.

2) 顶点着色器.顶点着色器是用来描述顶点特性的程序.通过顶点着色器,可以进行顶点坐标和纹理坐标的提取、转换、绘制,在后期的网页交互过程中,模型的平移、缩放、旋转、选中等操作都是通过相应的坐标矩阵转换,最终由顶点着色器进行绘制.

3) 片元着色器.逐片元进行处理(如光照的程序).顶点着色器完成对模型几何体的基本搭建,片元着色器可以使用由顶点着色器传递来的颜色和纹理信息进行光栅化处理,使显示效果更加逼真.

4) 视图矩阵设计.以绕Z轴旋转动作为例(见图5),r表示原点到点P的距离,而α是X轴旋转到点P的角度,利用这2个变量计算P点坐标,即

X=rcosα

(1)

Y=rsinα

(2)

采用类似的计算方式计算P′点的坐标，即

X′=rcos(α+β)

(3)

Y′=rsin(α+β)

(4)

解得

X′=Xcosβ-Ysinβ

(5)

Y′=Xsinβ+Ycosβ

(6)

Z′=Z

(7)

将数学表达式变为矩阵等式,即

(8)

式中，a=cosβ,b=-sinβ,c=0,d=sinβ,e=cosβ,f=0,g=0,h=0,i=0.将这些参数式代入式(8)，可得

(9)

式(9)是图形进行一次旋转的变换矩阵,在3×3矩阵的基础上加上平移量就可以设计出一个旋转平移矩阵,具体设计过程同上,表示为

(10)

5) 阴影.如图6所示,同一条光线上有2个点P1和P2,由于P2的Z值大于P1,所以P2在阴影中.根据这个阴影原理设计2组着色器来绘制阴影

图5　视图矩阵示意

效果,参考WebGL1.0规范[14]可以建立获取z值的公式,即

gl_Fragcoord.z=f(gl_Position.xyz,gl_Position.w)

(11)

式中,gl_Fragcoord表示片元着色器的输入变量;gl_Position则用来传输投影坐标系内顶点坐标的内建变量.将片元深度z值写入阴影贴图中.进一步比较z值与阴影贴图中的相应纹理值需要根据光源点v_PositionFromLight的(x,y)坐标来计算新坐标体系(s,t),即

s=f(v_PositionFromlight.x,v_PositionFromLight.w)

(12)

t=f(v_PositionFromLight.y,v_PositionFromLight.w)

(13)

图6　阴影原理示意

利用纹理坐标shadowCoord的xy分量抽取纹理,比较纹理中的深度值与纹理坐标shadowCoord的z分量,根据比较结果的返回值判断片元是否在阴影中,并利用visibility变量计算最终颜色,以RGB色彩模式对其颜色进行设置,获得vec4类型的输出片元颜色的内建变量，以gl_FragColor表示阴影颜色深度,即

gl_FragColor=vec4(v_Color.rgb*visibility,v_Color.a)

(14)

2.2.2OBJ-JS交互流程设计

OBJ模型文件的Web可视化需要如下4个步骤：

① 创建WebGL下的缓冲区对象.要完成模型文件在网页中的绘制渲染,WebGL技术要求在浏览器页面中创建一个新的空缓冲区对象.这一步骤中还需要进行初始化着色器,添加模型交互操作函数以完成渲染模型前的准备工作.

② 解析读取OBJ文件.解析读取OBJ文件,实现OBJ-JS转换是OBJ模型文件三维显示的基础.首先通过定义OBJ文件的构造函数创建新的属性数组,用来保存解析出的数据,供后期着色器使用.不断循环OBJ文件提取所有顶点坐标的信息并储存在新定义的数组中,直至整个文件被读取解析完毕.完成所有的循环解析提取,所有新数组的数据就可以写入相应的缓冲区并由着色器拾取.

③ 缓冲区绘制.使用内嵌在JavaScript中的GLSL ES命令流调用支持WebGL浏览器内置顶点和片元着色器,基于解析后存储的新数组,绘制三角片元,进而组成表面模型完成绘制.

④ 完成模型网页三维显示.在浏览器网页上实现模型的三维浏览与交互操作.

2.2.3实例分析与展示

本文以BIM建模工具Revit建立的一个钢结构模型为例(见图7(a))，从Revit中将模型导出，模型采用的是IFC2x3标准.基于IFCOpenShell的开源IFC解析框架,在Windows系统下利用C-free 5编译运行相应的C++程序,读取.ifc文件,指定文件输出目录,得到相应的OBJ文件和MTL文件,即.obj和mtl文件.使用JavaScript语言编写OBJ文件解析程序,结合WebGL技术和HTML5,最终形成.html和.js文件,并使用Web浏览器实现BIM模型三维显示(见图7(b)).

图7　钢结构模型

3结语

本文提出了一种结合IFC和WebGL的BIM可视化方法,该方法通过分析IFC和OBJ两种数据格式,设计IFC-OBJ数据接口和OBJ-JS交互流程,并调用WebGL内置的GLSL ES着色器语言,最终可以实现BIM模型的Web-3D浏览和交互,为进一步探讨BIM服务器向B/S架构发展提供思路.在模型三维渲染部分,针对模型的显示效果真实性,引用WebGL着色器语言中多种命令函数,最终通过实际的模型来验证整个可视化分析方法的可行性.结合WebGL与IFC标准的可视化方法对于Web环境以及移动设备环境下的BIM技术发展具有重要意义,有助于推进BIM协同工作模式的设计与应用.

参考文献 (References)

[1]王珩玮, 胡振中, 林佳瑞, 等. 面向Web的BIM三维浏览与信息管理[J]. 土木建筑工程信息技术,2013, 5(3): 1-7.

Wang Hengwei, Hu Zhenzhong, Lin Jiarui, et al. Web-Oriented BIM 3D viewing and information management [J].JournalofInformationTechnologyinCivilEngineeringandArchitecture,2013, 5(3): 1-7. (in Chinese)

[2]张建平, 张洋, 张新.基于IFC的BIM及其数据集成平台研究[C]//第十四届全国工程设计计算机应用学术会议. 北京, 中国, 2008:227-235.

Zhang Jianping, Zhang Yang, Zhang Xin. An IFC based Study on BIM and integrated data platform [C]//14thNationalConferenceonComputerApplicationforEngineeringDesign. Beijing, China, 2008:227-235. (in Chinese)

[3]Zhang W G, Yuan H, Wang J G, et al. A WebGL-based method for visualization of intelligent grid[C]//4thInternationalConferenceonElectricUtilityDeregulationandRestructuringandPowerTechnologies. Weihai, China, 2011:1546-1548.

[4]Lei F, Wang C, Li C, et al. A research for 3D WebGIS based on WebGL [C]//Proceedingofthe2011InternationalConferenceonComputerScienceandNetworkTechnology.Harbin, China, 2011:348-351.

[5]Gesquière G, Manin A. 3D visualization of urban data based on CityGML with WebGL [J].InternationalJournalof3DInformationModeling,2012, 1(3): 1-15.DOI: 10.4018/ij3dim.2012070101.

[6]Ferreira N B T. A WebGL application based on BIM IFC [D]. Portugal: Universidade Fernando Pessoa, 2012.

[7]Lin T H. Cloud BIM: A Web-based BIM system with application of cloud computing and WebGL [D]. Taipai,China: National Taiwan University of Science and Technology, 2012.

[8]Fazio P, He H S, Hammad A, et al. IFC-Based framework for evaluating total performance of building envelopes [J].ASCEJournalofArchitecturalEngineering, 2007, 13(1):44-53. DOI:10.1061/(ASCE)1076-0431(2007)13:1(44).

[9]Gökçe K U, Gökçe H U, Katranuschkov P. IFC-based product catalog formalization for software interoperability in the construction management domain [J].ASCEJournalofComputinginCivilEngineering, 2013, 27(1):36-50. DOI:10.1061/(ASCE)CP.1943-5487.0000194.

[10]Nour M. Performance of different (BIM/IFC) exchange formats within private collaborative workspace for collaborative work [J].JournalofInformationTechnologyinConstruction, 2009, 14: 736-752.

[11]Eastman C M, Jeong Y S, Sacks R, et al. Exchange model and exchange object concepts for implementation of national BIM standards [J].ASCEJournalofComputinginCivilEngineering, 2010, 24(1):25-34. DOI:10.1061/(ASCE)0887-3801(2010)24:1(25).

[12]Lee G, Jeong J Y, Won J S,et al. Query performance of the IFC model server using an object-relational database (ORDB) approach and a traditional relation database (RDM) approach [J].ASCEJournalofComputinginCivilEngineering,2012, 28(2): 210-222. DOI:10.1061/(ASCE)CP.1943-5487.0000256.

[13]代一帆, 董靓. 关于建筑数据表示和交换的标准IFC [J]. 建筑科学,2008, 24(8):9-14.

Dai Yifan, Dong Liang. Brief analysis on IFC standard for data representation and exchanging of building information [J].BuildingScience,2008, 24(8):9-14. (in Chinese)

[14]Dean J. WebGL specification version 1.0.3[EB/OL].(2014-10-27)[2015-09].https://www.khronos.org/registry/webgl/specs/1.0.3/.

Combining WebGL and IFC to create 3D visualization for building information models

Xu Zhao Xu Xiayan Li Qiming Zhang Xing

(School of Civil Engineering, Southeast University, Nanjing 210096, China)

Abstract:Aimed at the problem of information missing in existing building information model (BIM) vector-data with respect to the effect of Web rendering, a visualization method based on WebGL and industrial foundation classes (IFC) standard was proposed to analyze BIM models. WebGL technology was utilized to extend the expression of 3D display of the BIM models. IFC standard was used to achieve the exchange of the geometry information in the BIM models and information in the OBJ files, and a data conversion interface of IFC-OBJ was designed to visualize the BIM models based on .html and .js file formats. The experimental results indicate that the integration of WebGL and BIM can be helpful to analyze the composition and the application of the shader language so as to ensure the integrity of the information. The OBJ-JS interactive program developed in JavaScript can invoke WebGL shader to render 3D model on Web. The BIM models developed by using the proposed method match well with OBJ models in the formal definition and the geometry information, and generate a good result of 3D model rendering. Thus, the its effectiveness and the practicability of the proposed method are proved.

Key words:building information model; IFC(industrial foundation classes); Web GL(Web graphics library); visualization

DOI:10.3969/j.issn.1001-0505.2016.02.033

收稿日期:2015-09-08.

作者简介:徐照(1982—)，男，博士，讲师; 李启明(联系人)，男，博士，教授，博士生导师，njlqming@163.com.

基金项目:国家自然科学基金青年基金资助项目(71302138)、教育部留学回国人员科研启动基金资助项目(20141685).

中图分类号:TU205

文献标志码:A

文章编号:1001-0505(2016)02-0444-06

引用本文: 徐照，徐夏炎，李启明，等.基于WebGL与IFC的建筑信息模型可视化分析方法[J].东南大学学报(自然科学版),2016,46(2):444-449. DOI:10.3969/j.issn.1001-0505.2016.02.033.