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

吴学明，梁礼绘，严 磊，刘增辉

（1. 中国电建集团昆明勘测设计研究院有限公司，云南 昆明 650000，E-mail：402766794@qq.com；2. 天津大学 水利工程仿真与安全国家重点实验室，天津 300350）

近年来，BIM技术应用持续推进，面对大体量的 BIM 模型在存储和传输时具有的诸多不便且需要配合体积庞大、功能复杂的专业软件进行可视化的局面，传统C/S架构下的平台逐渐被基于B/S架构的系统所取代。随着三维可视化技术和Web端技术的不断发展，BIM模型轻量化显示的需求与传统对C/S端软件的依赖越发矛盾，管理人员迫切希望能够实现BIM模型的实时显示浏览，同时，WebGL的不断发展也加速推进Web端的三维可视化技术。WebGL技术是一套图形标准库，包含了HTML5和JavaScript技术，它在进行图像渲染的同时可以直接调用底层GPU显卡指令集，而且能够兼容PC端和移动端浏览器[1]。

伴随着Three.js等[2]WebGL架构的不断完善，其技术应用量也逐年递增。台湾国立大学通过WebGL技术和云计算的结合实现了建筑信息的三维建模。刘晓俊等[3]提出了一种基于Web3D的大规模BIM场景实时可视化的轻量化解决方案。在数据分析处理方面的研究中，一些研究人员采用对比IFC相似度的方法来实现文件压缩。Kereshmeh Afsaria等[4]提出ifcJSON文档可替代XML文档用于基于Web的数据传输。高喆[5]在进行Web端渲染时采用了设置WebGL-RM模块的方法。Web三维可视化的发展和国内外的研究虽然为 BIM 和WebGL结合提供了相似的研究思路，但是缺少更深入的转换方法[6,7]。而且目前关于 BIM 技术和WebGL结合的理论研究还处在起始阶段，研究的重点也是针对WebGL技术应用本身，缺少两者的有效结合，现有的转换方法在渲染效率也比较低。而对比传统数据格式FSV和XML，JSON因其简单编码和支持于各种语言、便宜的序列化和反序列化，使其更易于使用且传输效率更高[8]。因此本文采用Revit二次开发实现JSON转换格式，并通过WebGL技术，进行基于WebGL的高速公路BIM模型轻量化方法研究。

1 W eb端模型重构技术理论

1.1 三维模型显示技术

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

1.1.1 空间几何变换

假设顶点M（x，y，z），其经过图形操作后得到点M1（x1，y1，z1），具体变换方式如下：

（1）平移变换。顶点依据向量T平移，平移后M（x，y，z）和M1（x1，y1，z1）关系如下：

（2）旋转变换。旋转变换即图形绕着某旋转轴，在指定方向进行的指定角度的旋转，当M（x，y，z）是绕z轴逆时针旋转θ度后得到顶点M1（x1，y1，z1），则两者的关系如下：

（3）缩放变换。缩放变换需设置缩放因子，设x、y、z轴的缩放因子分别为px、py、pz，则M1和M的关系式如下：

1.1.2 投影变换

三维模型进行 Web的渲染显示需要通过投影变换将三维空间坐标映射到二维屏幕坐标来实现。三维模型的投影变换主要有正交和透视投影两种。正交投影的特点是模型在投影前后的各部分在显示的时候是同比例的，而透视投影后的模型显示根据各部分的远近发生变化，其显示结果与人眼的观察情况基本一致，在VR场景漫游中应用较多。

基本投影模型由视点和视平面组成，视点为视平面外的相机镜头对着物体方向的点，视平面即为屏幕上的投影面。另外，计算机图形学一般规定视平面可视区域形状为矩形，并通过定距使得可视区域为锥形体，视椎体基本投影模型如图1所示。

图1 透视投影的视椎体模型

将三维坐标系中的坐标原点设为视点V，显而易见，视平面是垂直于z轴的，x、y轴分别垂直于两平行边，此类模型统称为标准模型，标准模型与一般模型的转换。可通过下式可进行。

式中，其中Pview为一个转换矩阵，它代表着透视投影从一般模型到标准模型的转换；X代表一般模型中的点；Y为标准模型中的点；V为视点；R为姿态。

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

图2 视平面坐标模型

图3 屏幕坐标模型

这里设wp、hp、ws、hs，分别用来表示视平面的宽度和高度以及屏幕宽度和高度，由于屏幕坐标系是离散坐标系，则已知屏幕右下点坐标为（ws-1，hs-1），则可得出视平面中的（0，0）点对应屏幕坐标的中心点坐标，为（0.5ws-0.5，0.5hs-0.5）。这里列出视平面坐标与屏幕坐标的转换关系，如下式：

1.2 WebGL渲染技术

1.2.1 WebGL渲染原理

利用 WebGL技术可以进行图元绘制和场景渲染，这些操作是通过调用底层驱动来实现的，GPU采用流水线的结构来处理应用程序发送的图形数据，并对其进行阶段传递，最后写入帧缓存。其中WebGL的渲染管线机制为三维模型的Web端渲染提供重要的技术支持，如图4所示。

图4 WebGL渲染管线机制

渲染流水线可简要概括以下几点：

（1）顶点数据处理。对所有顶点计算颜色值并进行坐标变换，把坐标和颜色放入缓存区。

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

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

（4）片元处理。确定帧缓存中每个像素的颜色值，为屏幕显示做准备。

1.2.2 WebGL渲染流程

WebGL在Web端的渲染流程与OpenGL相像[10]。首先是创建WebGL上下文对象，此对象与WebGL绘图缓冲区交互，同时能够调用所有WebGL方法，然后可以定义顶点和其他相关着色器及其初始化。在进行正式绘制之前，还需要对其背景颜色进行自定义。

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

1.3 三角网格数据结构

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

1.3.1 面三角网格数据结构

本着实现数据存储简单易理解的目的，对三角网格顶点信息的储存采用三角形剖分面的顺序进行，例如V1、V2、V3的F1，V1、V3、V4的F2等。这样做可降低法向数据存储量，但对于基于面的三角网格模型数据结构，会出现顶点重复保存而造成数据冗余的问题，如图 5所示，顶点V1、V3、V4在每个三角形面片中都会被储存，顶点坐标见表1。

图5 三角网格示意图

表1 三角网格顶点列表

1.3.2 共享顶点数据组织方法

这里提出的数据组织方法将数据存储分为两个部分进行，核心是进行顶点的共享。该方法摆脱了顶点重复存储造成数据冗余的弊端，通过对顶点坐标和三角面索引分别生成数组结构，重复的顶点坐标只存储一个，所有顶点坐标形成顶点坐标数组用于与顶点索引对照，面信息里面只存储对应的顶点索引，这样便建立了一一对应的关系。此法简单方便，只需进行顶点索引序号的存录，就能够实现顶点序号和顶点坐标一一对应的方式建立关联，同时也体现点之间的拓扑关系。如表2和表3所示。

表2 顶点索引表

表3 顶点数组列表

1.3.3 JSON数据结构应用

基于 JSON简单的信息存储方式，其相对于XML和FSV具有内容可读性强、数据传输和解析速度快等优点，所以在轻量级的B/S架构中很适合采用此结构进行后台与前端的数据交互。在数据处理后可将IFC标准定义的高速公路数据结构转换成三角网格数据结构并以JSON格式进行储存，如高速公路构件信息的JSON数据结构可简单表示为：

{

“vertices”：[]，// 存录转换成三角网格的高速公路顶点

“indices”：[]，//存录转换成三角网格的高速公路顶点索引

“normals”：[]，//法向量

“colors”：[]，

“materials”：[]，// 储存剖分面外观信息

}

2 三维模型轻量化显示

2.1 Revit-JSON接口实现

2.1.1 定义JSON数据接口

WebGL不能直接支持rvt格式文件，需要进行文件格式的转换，而JSON数据储存采用键值对的方式，非常方便进行解析且具有平台无关和轻量化的特点，此外相对于传统的 XML，其封装、解析以及传输效率更高，因此本开发采用JSON作为中间数据文件格式。

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

2.1.2 Revit二次开发

图6 中间文件结构数据图

首先设计高速公路的数据提取流程，主要分为定点数据、法线数据、材质纹理数据3个方面，即高速公路模型定点数据提取、高速公路模型法线数据提取（对模型几何信息进行约束和修正）、高速公路模型纹理和材质信息提取。如材质信息，在IFC分层架构下逐层获取IFCELEMENT信息[11]。具体流程设计如图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）；

ElementId appearanceId=material.AppearanceAssetId；

AppearanceAssetElement

appearanceElem=document.GetElement

（appearanceId）as AppearanceAssetElement；

Asset

theAsset=appearanceElem.GetRenderingAsset（）；

ElementId Id =material.AppearanceAssetId；

//通过上面取得的AppearanceAssetId 得到

Appearance Asset Element AppearanceAssetElement

Elem=document.GetElementId as

AppearanceAssetElement；

//获得 Asset

Asset Asset=Elem.GetRenderingAsset（）；

两核心步骤的具体实现方式如图8所示。

图8 二次开发流程图

2.2 Web端重建与渲染

鉴于Three.js框架进行模型可视化显示的优异性能表现[12]，因此本文采用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所示。

图9 JSON文件解析步骤

通过parseGeometries（）函数对Geometries集合中 type属性进行遍历，并通过 THREE.JSONLoader函数对引入场景的 Revit二次开发后的高速公路JSON格式文件解析。在进行上述操作之后，完成在 Render内的场景渲染。在此重点分析高速公路JSON中间文件的解析和加载，对场景引入基本的光源、相机等的着色、渲染不再进行详细说明。

3 属性关联与轻量化分析

3.1 属性关联

高速公路 BIM 模型属性数据包含其结构和工程属性，但前文获取的高速公路JSON文件中的几何和属性数据是分别储存在JSON中间文件的几何数据和属性数据区域，为了实现Web端属性信息查询，本文通过设置统一标识符UID进行两区域数据信息关联，然后进行Web端匹配标识符实现属性信息显示。

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

3.2 轻量化分析

实现高速公路 BIM 模型的轻量化即实现高速公路 BIM 模型对系统环境配置依赖性的降低和模型数据文件体量的压缩，具体分析如下：

图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端实时高效渲染。