基于WebGL的高速公路BIM模型轻量化方法研究

工程管理学报
Journal of Engineering Management
第34卷第5期2020年10月
Vol. 34No. 5
Oct. 2020
基于WebGL 的高速公路BIM 模型轻量化方法研究
吴学明1,梁礼绘J 严磊】，刘增辉2
(1.中国电建集团昆明勘测设计研究院有限公司，云南昆明650000, E-mail ： ****************；
2.天津大学水利工程仿真与安全国家重点实验室，天津300350 )
摘 要：针对高速公路建设周期长、规模大，设计产生模型体量大和种类繁多，需要占用较大硬件资源的局面，应进行基于
WebGL 的BIM 模型轻量化展示方法研究。

通过分析模型重构技术理论进行Revit-JSON 接口设计来实现模型格式转换，然 后利用WebGL 来实现Revit 模型的Web 端重建和渲染，并引入Three.js 框架实现BIM 模型的Web 端交互，进而实现BIM 模型在Web 端的信息实时查询功能，以满足用户对高速公路BIM 模型轻量化管理的要求。

关键词：WebGL:高速公路；Revit —次开发；BIM 轻量化
中图分类号：TU17 文献标识码：A 文章编号：1674-8859(2020)05-069-06 DOI : 10.13991 /ki.jem.2020.05.013
Research on the lightweight Method of Highway BIM model Based on WebGL
WU Xue-ming 1, LIANG Li-hui 1, YAN Lei 1, LIU Zeng-hui 2
(1. China Power Construction Group Kunming Survey and Design Institute Co. Ltd., Kunming 650000, China,
E-mail : **************** ； 2. State Key Laboratory of Hydraulic Engineering Simulation and Security,
Tianjin University, Tianjin 300350, China )
Abstract: According to the long construction cycle, large scale, large volume and various types of design models, and the need
to occupy large hardware resources* this paper carried out a research on the lightweight display method of BIM model based on
WebGL. This study achieved model format conversion by using Revit-JSON interface design with the reconstruction technology theory. Subsequently, we used WebGL technology to implement the Revit model Web reconstruction and rendering, and introduced Three.js framework to interact the BIM model and Web, and then realized the real-time information query function of BIM model in
the Web side» which can meet user requirements on the lightweight management of highway BIM model.
Keywords ： WebGL ； highways ； revit secondary development ； BIM lightweight
近年来，BIM 技术应用持续推进，面对大体量
的BIM 模型在存储和传输时具有的诸多不便且需
要配合体积庞大、功能复杂的专业软件进行可视化
的局面，传统C/S 架构下的平台逐渐被基于B/S 架 构的系统所取代。

随着三维可视化技术和Web 端技
术的不断发展，BIM 模型轻量化显示的需求与传统
对C/S 端软件的依赖越发矛盾，管理人员迫切希望
能够实现B1M 模型的实时显示浏览，同时，WebGL
的不断发展也加速推进Web 端的三维可视化技术。

WebGL 技术是一套图形标准库，包含了 HTML5和
JavaScript 技术,它在进行图像渲染的同时可以直接
收稿日期：2020-06-19.
基金项目：云南省重点研发计划项目资助(2018BA066).
调用底层GPU 显卡指令集，而且能够兼容PC 端和 移动端浏览器⑴。

伴随着Three.js 等[2]WebGL 架构的不断完善， 其技术应用量也逐年递增。

台湾国立大学通过 WebGL 技术和云计算的结合实现了建筑信息的三
维建模。

刘晓俊等⑶提出了一种基于Web3D 的大规 模BIM 场景实时可视化的轻量化解决方案。

在数据 分析处理方面的研究中，一些研究人员采用对比
IFC 相似度的方法来实现文件压缩。

Kereshmeh
Afsaria 等⑷提出ifcJSON 文档可替代XML 文
档用于基于Web 的数据传输。

高詰同在进行web 端
渲染时采用了设置WebGL-RM 模块的方法。

Web 三 维可视化的发展和国内外的研究虽然为BIM 和
•070•工程管理学报第34卷
WebGL结合提供了相似的研究思路，但是缺少更深
入的转换方法瓯71。

而且目前关于BIM技术和
WebGL结合的理论研究还处在起始阶段,研究的重
点也是针对WebGL技术应用本身，缺少两者的有
效结合，现有的转换方法在渲染效率也比较低。

而
对比传统数据格式FSV和XML,JSON因其简单
编码和支持于各种语言、便宜的序列化和反序列
化，使其更易于使用且传输效率更高同。

因此本文
采用Revit二次开发实现JSON转换格式，并通过
WebGL技术，进行基于WebGL的高速公路BIM模
型轻量化方法研究。

1Web端模型重构技术理论
1.1三维模型显示技术
模型轻量化管理的关键与核心是实现Web端
三维模型重建与渲染[9】，此过程需要进行一系列变
换操作，主要有空间几何和投影变换等。

1.1.1空间几何变换
假设顶点M(x,儿z),其经过图形操作后得
到点M(xi,yi,z\),具体变换方式如下：
(1)平移变换。

顶点依据向量T平移，平移
后M(x,y,z)和Mi(xi,y\,z\)关系如下：
x=x+Tx(1)
y^y+Ty(2)
Z]=z+Tz(3)
(2)旋转变换。

旋转变换即图形绕着某旋转
轴，在指定方向进行的指定角度的旋转，当M(x,
儿z)是绕z轴逆时针旋转6度后得到顶点Mi(xi,
力，zi),则两者的关系如下：
X]=xcos0+ysin0(4)
Vi=xsin0+ycosO(5)
z=z(6)
(3)缩放变换。

缩放变换需设置缩放因子，
设X、y、Z轴的缩放因子分另为0、Py、Pz,则M\
和M的关系式如下:
y>
i 1.1.2投影变换A000X
0A00y
00A0z
00011
(7)
三维模型进行Web的渲染显示需要通过投影变换将三维空间坐标映射到二维屏幕坐标来实现。

三维模型的投影变换主要有正交和透视投影两种。

正交投影的特点是模型在投影前后的各部分在显示的时候是同比例的，而透视投影后的模型显示根据各部分的远近发生变化，其显示结果与人眼的观察情况基本一致，在VR场景漫游中应用较多。

基本投影模型由视点和视平面组成，视点为视平面外的相机镜头对着物体方向的点，视平面即为屏幕上的投影面。

另外，计算机图形学一般规定视平面可视区域形状为矩形，并通过定距使得可视区域为锥形体，视椎体基本投影模型如图1所示。

图1透视投影的视椎体模型
将三维坐标系中的坐标原点设为视点V,显而易见，视平面是垂直于z轴的，x、y轴分别垂直于两平行边，此类模型统称为标准模型，标准模型与一般模型的转换。

可通过下式可进行。

R T
0r
-R T V
1
(8)
X
式中，其中为一个转换矩阵，它代表着透视投影从一般模型到标准模型的转换；X代表一般模型中的点；丫为标准模型中的点；/为视点；r为姿态。

对于透视模型的标准模型，其坐标原点为视平面中心，如图2所示，x、y轴的位置关系为标准坐标系；而屏幕坐标模型的原点在左上角，y轴朝向 下方，x轴和前者视平面坐标方向一致(见图3)。

因此，需要进行坐标的转换。

图2视平面坐标模型
图3
屏幕坐标模型
第5期吴学明，等：基于WebGL的高速公路BIM模型轻量化方法研究•071•
这里设W”、hp、Ws、h s,分另用来表不视平面的宽度和高度以及屏幕宽度和高度，由于屏幕坐标系是离散坐标系，则已知屏幕右下点坐标为(ws-l, h s~\),则可得出视平面中的(0,0)点对应屏幕坐标的中心点坐标，为(0.5他-0.5,0.5入-0.5)。

这里列出视平面坐标与屏幕坐标的转换关系，如下式：x=^^xx+^^=(w-1)(立+0.5)
%2兮(9)乂=舛二1X儿+号=(勺一1)(务+0.5)
"p"p
1.2WebGL渲染技术
1.2.1WebGL渲染原理
利用WebGL技术可以进行图元绘制和场景渲染，这些操作是通过调用底层驱动来实现的，GPU 采用流水线的结构来处理应用程序发送的图形数据，并对其进行阶段传递，最后写入帧缓存。

其中WebGL的渲染管线机制为三维模型的Web端渲染提供重要的技术支持，如图4所示。

图4WebGL渲染管线机制
渲染流水线可简要概括以下几点：
(1)顶点数据处理。

对所有顶点计算颜色值并进行坐标变换，把坐标和颜色放入缓存区。

(2)裁剪和图元装配。

对顶点进行线装组装，形成线段图元，并对相机可视范围内图元进行裁剪。

(3)光栅化。

可以将图元转换为二维图像，效果为形成包含颜色、纹理等信息的片元作用于像素点。

(4)片元处理。

确定帧缓存中每个像素的颜色值，为屏幕显示做准备。

1.2.2WebGL渲染流程
WebGL在Web端的渲染流程与OpenGL相像〔切。

首先是创建WebGL±下文对象，此对象与WebGL 绘图缓冲区交互，同时能够调用所有WebGL方法,然后可以定义顶点和其他相关着色器及其初始化。

在进行正式绘制之前，还需要对其背景颜色进行自定义。

WebGL作为一套结合HTML5和JavaScript技术的图形标准库，无需任何插件就能够跨平台进行三维图形的Web端高速加载渲染和实现由C/S到B/S框架的可视化方式，这些优异的特性为BIM轻量化提供了重要的技术支持。

1.3三角网格数据结构
模型构件可划分为有限个三角网格(各个点集组成)，网格三角面之间的连接会出现很多的重合顶点，通过将顶点和网格三角面信息储存为数组形式的数据结构，可以实现模型信息的压缩却不丢失点面■(旨息。

1.3.1面三角网格数据结构
本着实现数据存储简单易理解的目的，对三角网格顶点信息的储存采用三角形剖分面的顺序进行，例如X、V2.兀的Fl,旳、卩3、彳的尸2等。

这样做可降低法向数据存储量，但对于基于面的三角网格模型数据结构，会岀现顶点重复保存而造成数据冗余的问题，如图5所示，顶点71、兀、卩4在每个三角形面片中都会被储存，顶点坐标见表lo
图5三角网格示意图
表1三角网格顶点列表
面信息顶点坐标
Vx Vz Vz
Vx V,比
比Vy V5
1.3.2共享顶点数据组织方法
这里提岀的数据组织方法将数据存储分为两个部分进行，核心是进行顶点的共享。

该方法摆脱了顶点重复存储造成数据冗余的弊端，通过对顶点坐标和三角面索引分别生成数组结构，重复的顶点坐标只存储一个，所有顶点坐标形成顶点坐标数组用于与顶点索引对照，面信息里面只存储对应的顶点索引，这样便建立了一一对应的关系。

此法简单方便，只需进行顶点索引序号的存录，就能够实现顶点序号和顶点坐标----对应的方式建立关联，同时也体现点之间的拓扑关系。

如表2和表3所示。

•072•匸程管理学报第34卷
表2顶点索引表
面信息三角面顶点索引
123
Fi134
435
表3顶点数组列表
顶点数组
顶点坐标Vx V1人V4Vs
图6中间文件结构数据图
1.3.3JSON数据结构应用
基于JSON简单的信息存储方式，其相对于XML和FSV具有内容可读性强、数据传输和解析速度快等优点，所以在轻量级的B/S架构中很适合采用此结构进行后台与前端的数据交互。

在数据处理后可将IFC标准定义的高速公路数据结构转换成三角网格数据结构并以JSON格式进行储存，如高速公路构件信息的JSON数据结构可简单表示为：{
"vertices"：[],//存录转换成三角网格的高速公路顶点
“indices”：[],〃存录转换成三角网格的高速公路顶点索引
“normals”：[],〃法向量
“colors"：[],
“materials”：[],//储存剖分面外观信息
}
2三维模型轻量化显示
2.1Revit-JSON接口实现
2.1.1定义JSON数据接口
WebGL不能直接支持rvt格式文件，需要进行文件格式的转换，而JSON数据储存采用键值对的方式，非常方便进行解析且具有平台无关和轻量化的特点，此外相对于传统的XML,其封装、解析以及传输效率更高，因此本开发采用JSON作为中间数据文件格式。

把Revit二次开发导出的OBJ格式的高速公路几何信息存入几何区之前需要进行数据格式方面的调整，此外，还需要在图6所示属性区存放高速公路模型JSON格式对应信息，然后将两者通过JSON键值对统一标识符——对应。

2.1.2Revit二次开发
首先设计高速公路的数据提取流程，主要分为定点数据、法线数据、材质纹理数据3个方面，即高速公路模型定点数据提取、高速公路模型法线数据提取(对模型几何信息进行约束和修正)、高速公路模型纹理和材质信息提取。

如材质信息，在IFC 分层架构下逐层获取IFCELEMENT信息⑴】。

具体流程设计如图7所示。

图7高速公路模型数据提取流程
高速公路模型数据提取后进行Revit二次开发,其核心技术是Revit对象转换为JSON文件。

具体分为两个核心部分：
(1)几何信息。

将获取到的高速公路对象导出为OBJ格式，保存在如图6所示的几何区，其中几何信息获取是通过Geometry来得到其Geometry Element实例，然后通过对其solid进行遍历得到实体，并对每个实体遍历得到其面和边，从而获得其坐标点。

(2)将获取到的高速公路对象材质属性信息存放在JSON中间文件属性信息区域。

其中材质属性信息获取通过数据导出类IExportContext自定义MyExport类，通过Onmaterial()方法获取材质信息ID,得到ID就能得到material,然后就能获取包含所有渲染信息的Asset对象。

具体实现代码如下: IExportContext pExport=new MyExporter()；
CustomExporter exporter=new CustomExporter (doc,pExport);
Elementld appearanceId=material.AppearanceAssetId
；
第5期吴学明，等：基于WebGL的高速公路BIM模型轻量化方法研究・073・
AppearanceAssetElement
appearanceElem=document.GetElement
(appearanceld)as AppearanceAssetElement；
Asset
theAsset=appearanceElem.GetRenderingAsset()；
Elementld Id=material.A ppearanceAssetld；
〃通过上面取得的AppearanceAssetld得到
Appearance Asset Element AppearanceAssetElement
Elem=document.GetElementId as
AppearanceAssetElement；
〃获得Asset
Asset Asset=Elem.GetRenderingAsset()；
两核心步骤的具体实现方式如图8所示。

Command模式，重写Execute方法
获取View3D对象文件
继承IexportContext类，重写OnPolymesh等方法
遍历Revit节点.获取模型几何数据，材质、
纹理等属性数据.获得临时性对象文件
编写UserSetting类.用于格式化临时文件得到
JSON文件
通过C u stomE x porter将J S ON文件写入硬盘中
图8二次开发流程图
2.2Web端重建与渲染
鉴于Three.js框架进行模型可视化显示的优异性能表现问，因此本文采用Three.js进行Web端的功能开发。

前文导出的高速公路JSON格式中间文件包括几何信息、材质和纹理三部分，将外部文件导入Three.js来进行三维场景创建。

(1)进行三维场景构建，这里通过THREE.Mesh 函数来实现，其包含两个参数，其中几何关系由Geometry类定义，可获取顶点和片面数组信息，Material类定义材质属性信息，然后借助函数gl.texlmage2D来进行后续的材质信息操作(该函数功能是根据指定的参数来生成2D纹理并上传)□
(2)通过Three.js进行三维渲染。

创建Scene 进行对象容纳，通过JS异步加载JSON文件进行解析生成Geometry并生成Mesh模型,再放入Scene 场景中进行加载。

JSON文件解析步骤如图9所示。

图9JSON文件解析步骤
通过parseGeometries()函数对Geometries集合中type属性进行遍历，并通过THREEJSONLoader 函数对引入场景的Revit二次开发后的高速公路JSON格式文件解析。

在进行上述操作之后，完成在Render内的场景渲染。

在此重点分析高速公路JSON中间文件的解析和加载，对场景引入基本的光源、相机等的着色、渲染不再进行详细说明。

3属性关联与轻量化分析
3.1属性关联
高速公路BIM模型属性数据包含其结构和工程属性，但前文获取的高速公路JSON文件中的几何和属性数据是分别储存在JSON中间文件的几何数据和属性数据区域，为了实现Web端属性信息查询，本文通过设置统一标识符UID进行两区域数据信息关联，然后进行Web端匹配标识符实现属性信息显o
Three.js对接收到的JSON文件进行处理，通过OBJ解析器将几何数据解析生成三维模型，并通过UID关联储存在内存中的属性信息。

通用交互实现方式为鼠标点击查询，这里需要用到WebGL的Canvas节点渲染，因此需要进行Canvas内部子对象的获取，这里通过鼠标点击获取浏览器窗口二维坐标，然后进行三维坐标的转换并与三维模型的几何对象进行匹配，从而获取其UID值，然后通过唯一标识符UID与存储的属性信息进行匹配即可实现属性信息在HTML页面的显示，某高速公路BIM 模型项目策划属性信息获取实例如图10所示。

3.2轻量化分析
实现高速公路BIM模型的轻量化即实现高速公路BIM模型对系统环境配置依赖性的降低和模型数据文件体量的压缩，具体分析如下
：
•074•工程管理学报第34卷
图10某高速公路BIM模型项目策划属性信息获取
(1)高速公路BIM模型对系统环境要求。

传统基于Revit的可视化平台，需要高配置的电脑软硬件来支持，而基于WebGL的高速公路BIM模型轻量化方法是基于Web端的可视化平台，可同时兼容多版本浏览器和移动端，在平台显示方面实现了便宜轻量化。

同时，鉴于通过WebGL进行高速公路模型的渲染重构时会对GPU资源消耗，本文通过表示渲染流畅度的帧率FPS来进行简易衡量(一般FPS值达到30即可实现流畅的可视化查询和交互操作).测试显卡型号为NVIDIA Quadro K2100M,根据Three.js的性能监视器进行管理渲染性能。

(2)模型文件大小调整。

由于高速公路可视化信息查询对于其模型的精细度要求不是很高，所以在保证模型信息完整度达90%且符合管理者的可视化要求的情况下，可以实现一定水平的数据文件压缩；此外通过采用共享顶点的数据组织方法来去除冗余重复的顶点数据，实现了顶点数据的极致精简，也可以达到缩小内存占用的目的，从而实现高速公路BIM模型的轻量化Web端显示。

4结语
本文通过基于Revit二次开发的模型格式转换和优化的模型数据组织形式，得到支持WebGL的轻量化JSON数据文件，并通过对WebGL原理和Three.js框架的研究使用.实现可视化操作的平台移植和BIM模型在Web端的重建渲染、属性查询等操作.满足高速公路BIM模型轻量化管理的Web 端实时三维交互查询的要求，达到了预期目标。

此外，本文相较于传统的C/S架构，在实现Web端实时可视化的同时降低了系统复杂度和对硬件的需求，针对前人使用FSV和XML格式渲染效率不高的问题，使用通过Revit二次开发后得到的编码简单、序列化和反序列化更方便的JSON数据文件，大大提升了数据传输和渲染效率，实现了模型数据基于WebGL技术的Web端实时高效渲染。

参考文献：
[1]Charland A,Leroux B.Mobile application development：
web vs.native[J].Communications of the ACM,2011, 54(5)：49-53.
[2]Lintas I.Cloud BIM:a web-based bim system with
application of cloud computing and WebGL[J].
Communications of the ACM,2014,15(3)：27~30. [3]Xiaojun Liu,Ning Xie.Lightweighting for Web3D
visualization of large-scale BIM scenes in real-time[J], Graphical Models,2016(88)：40-56.
[4]Kereshmeh Afsaria,Charles M.Eastmana,DanielCastro-
Lacouture.JavaScript Object Notation(JSON)data serialization for IFC schema in web-based BIM data exchange[J].Automation in Construction,2017(77)：
24-51.
[5]高詰.基于WebGL的建筑信息模型展示系统研究
[D],北京建筑大学，201&
[6]张立华.BIM技术在建筑设计阶段的模型构件研究
[J].现代电子技术，2016,39(1)：23-25.
[7]高璇.关于三维可视化技术在基建维修中的应用
[J].信息系统工程，2016(9)：24-26.
[8]赵菲.基于WebGL的古建筑BIM模型轻量化研究与
实现[D].陕西：西安建筑科技大学，201&
[9]罗飞.Revit Architecture维建筑模型WebGL显示
及优化[D].浙江工业大学，2016.
[10]王德生.基于HTML5和WebGL的三维WebGIS系统
构建及应用[D].福建师范大学，2014.
[11]杨春蕾，屈红磊，郑慧美.Revit软件二次开发研究[J].工
程建设与设计，2017(19)：71-74.
[12]徐照，徐夏炎，李启明.基于WebGL与IFC的建筑
信息模型可视化分析方法[J].东南大学学报(自然科学版)，2016,46(2)：444-449.
作者简介：
吴学明(1991-),男，博士，正高级工程师，研究方向：工程信息化，数字化与智慧化；
梁礼绘(1981-),男，工学硕士，高级工程师，研究方向：水利水电工程设计，科研和管理；
严磊(1982-),男，工学博士，正高级工程师，研究方向：工程安全风险评估与全生命周期BIM技术应用；
刘增辉(1997-),男，硕士研究生，研究方向：水利水电工程信息化。