基于WebGL的軌道交通BIM輕量化應(yīng)用方案

王 坭，王淑營，曾文驅(qū)

（1. 西南交通大學(xué) 信息科學(xué)與技術(shù)學(xué)院，成都 611730；2. 廣州地鐵設(shè)計(jì)研究院股份有限公司，廣州 510010）

目前，建筑信息模型（BIM，Building Information Model）技術(shù)已廣泛應(yīng)用于建筑領(lǐng)域[1-2]。

軌道交通工程屬于典型的復(fù)雜建設(shè)工程，BIM技術(shù)的應(yīng)用可以提高其建設(shè)效率[3]。Revit是BIM建模軟件，其功能強(qiáng)大，通常被用于設(shè)計(jì)軌道交通BIM。然而，軌道交通具有多專業(yè)、多用戶的特點(diǎn)，各個(gè)專業(yè)相互查看模型需要通過拷貝模型文件并利用Revit鏈接功能打開。對于現(xiàn)場施工人員來說，他們可能不會(huì)使用Revit；對于設(shè)計(jì)人員來說，如果BIM文件發(fā)生變化，那么需要重新拷貝。因此，軌道交通BIM技術(shù)亟須解決在Web端的應(yīng)用，才能使BIM在各個(gè)階段都能被即時(shí)交互。

針對BIM技術(shù)的Web端輕量化應(yīng)用，Lee等人[4]證明了使用XML格式存儲(chǔ)BIM數(shù)據(jù)的頻率逐漸減少，取而代之的是用結(jié)構(gòu)更緊湊的JSON格式文件存儲(chǔ)，Afsaria等人[5]提出了將BIM數(shù)據(jù)用JSON格式文件表示的方法代替用XML格式文件表示的輕量化方案，然而未能完全實(shí)現(xiàn)BIM的Web端渲染，趙菲[6]研究了基于WebGL的古建筑BIM輕量化方法，但該方法把BIM數(shù)據(jù)都放在同一個(gè)JSON格式文件進(jìn)行渲染。如果BIM數(shù)據(jù)量較大，那么WebGL是不能承受這種渲染帶來的內(nèi)存壓力的。一般來說，軌道交通BIM數(shù)據(jù)量都較大，高喆[7]研究了基于工業(yè)基礎(chǔ)類（IFC，Industry Foundation Classes）的模型輕量化方案，但是模型數(shù)據(jù)轉(zhuǎn)化過程太過煩瑣。張建平等人[8]證明了BIM的表面模型比實(shí)體模型更適合在Web端渲染。

根據(jù)以上的分析可以得知，利用JSON格式文件存儲(chǔ)BIM表面模型且將BIM分別存儲(chǔ)于多個(gè)JSON格式文件，這是Web端渲染BIM的重要前提。因此，本文提出了基于WebGL的軌道交通BIM輕量化應(yīng)用方案，解決了BIM在Web端渲染的問題。本文方案并未采用BIM建模—IFC格式文件存儲(chǔ)—IFC格式文件解析—Web端渲染的傳統(tǒng)方案，而是用JSON格式文件代替IFC格式文件作為中間輔助存儲(chǔ)BIM數(shù)據(jù)的工具，采用BIM建模—JSON格式文件存儲(chǔ)—Web端渲染的方案。在存儲(chǔ)數(shù)據(jù)方面，與IFC格式文件相比，JSON格式文件具有獨(dú)特優(yōu)勢。JSON格式文件擁有跨平臺(tái)性，IFC格式文件則需要專業(yè)的解析軟件進(jìn)行解析。

本文考慮了瀏覽器渲染大數(shù)據(jù)時(shí)內(nèi)存壓力大（這是因?yàn)殇秩緮?shù)據(jù)量大時(shí)瀏覽器占用的內(nèi)存會(huì)急劇提高）的問題，采取以構(gòu)件為單位，分別存儲(chǔ)為JSON格式文件的方式，保存BIM的原始數(shù)據(jù)。

1 研究目標(biāo)及重點(diǎn)

1.1 研究目標(biāo)

軌道交通BIM在Web端渲染是支持模型即時(shí)交互的重要條件。本文的目標(biāo)是通過Web端來構(gòu)建BIM，將Revit的C/S架構(gòu)變?yōu)锽/S架構(gòu)，以輔助軌道交通施工人員和設(shè)計(jì)人員之間的交互。

1.2 研究重點(diǎn)

本文的研究重點(diǎn)有3個(gè)，具體如下。

（1）BIM輕量化：又稱為表面模型提取。提取BIM的表面模型后，需要將其數(shù)據(jù)存儲(chǔ)為JSON格式文件。

（2）設(shè)計(jì)合適的存儲(chǔ)方式：由于軌道交通BIM由多個(gè)構(gòu)件組成，若將全部構(gòu)件的數(shù)據(jù)存儲(chǔ)到同一個(gè)JSON格式文件，那么，當(dāng)進(jìn)行WebGL渲染時(shí)，瀏覽器會(huì)發(fā)生內(nèi)存溢出的情況。因此，BIM應(yīng)該以單個(gè)構(gòu)件為單位，分開存儲(chǔ)BIM構(gòu)件數(shù)據(jù)。

（3）WebGL渲染：從文件服務(wù)器中選擇待渲染的JSON格式文件，提取模型數(shù)據(jù)，在Web端完成渲染。

BIM表面模型通過Web端進(jìn)行渲染的過程如圖1所示。

2 關(guān)鍵技術(shù)

2.1 JSON格式文件

BIM的RVT格式文件不可以直接在Web端進(jìn)行渲染[9]，因此，需要轉(zhuǎn)換為Web端識(shí)別的格式文件。JSON格式文件數(shù)據(jù)結(jié)構(gòu)是鍵值對形式，這使其具有跨平臺(tái)的優(yōu)勢。由于Web端對三角形的渲染速度非常快，BIM表面模型提取的重點(diǎn)是如何將表面模型轉(zhuǎn)化為三角形進(jìn)行提取。這個(gè)問題可以通過Revit二次開發(fā)功能來解決，即在Revit二次開發(fā)中，通過Mesh類函數(shù)對BIM表面模型進(jìn)行三角形面片化，從而形成三角形網(wǎng)格；然后通過MeshTriangle類的函數(shù)get_Vertex()得到三角形面片的頂點(diǎn)。BIM表面模型三角形面片化后的JSON格式文件的數(shù)據(jù)結(jié)構(gòu)如圖2所示。

頂點(diǎn)集和頂點(diǎn)索引集表示每一個(gè)三角形面片在Web端渲染時(shí)的位置。法線集和法線索引集表示每一個(gè)三角形面片進(jìn)行Web端渲染時(shí)的明暗程度。構(gòu)件幾何中心表示W(wǎng)eb端渲染時(shí)相機(jī)的擺放位置。顏色、透明度等材質(zhì)屬性表示W(wǎng)eb端渲染BIM的外觀。唯一編號(hào)表示構(gòu)件的編碼，Web端以此為依據(jù)提取構(gòu)件信息。

2.2 FastDFS存儲(chǔ)

在軌道交通中常見的車站模型具有構(gòu)件多、模型大的特點(diǎn)，因而，本文先將BIM構(gòu)件模型的所有Soild實(shí)體所對應(yīng)的JSON格式文件合并為一個(gè)JSON格式文件，其中，一個(gè)BIM構(gòu)件有多個(gè)Soild實(shí)體，每個(gè)Soild實(shí)體可以提取相應(yīng)的表面模型；再將每個(gè)構(gòu)件模型的JSON格式文件分開存儲(chǔ)。這種處理方式需要文件服務(wù)器支持文件數(shù)量多、單個(gè)文件小的存儲(chǔ)形式。為此，本文對幾種常用文件服務(wù)器的性能進(jìn)行了對比[10-12]，對比結(jié)果如表1所示。可以發(fā)現(xiàn)，F(xiàn)astDFS更適合作為本文方案的文件服務(wù)器，實(shí)現(xiàn)JSON格式文件的存儲(chǔ)及管理。

表1 常見文件服務(wù)器性能對比

2.3 基于WebGL的BIM渲染

2.3.1 Web端渲染框架

WebGL由許多JavaScript的應(yīng)用程序接口（API，Application Programming Interface）集合構(gòu)成[13]。隨著技術(shù)的發(fā)展，Web段渲染框架在WebGL基礎(chǔ)上又封裝了JavaScript 3D引擎，這推進(jìn)了Web端可視化的發(fā)展。本文采用JavaScript 3D引擎Three.js作為Web端渲染框架，這是因?yàn)門hree.js具有開源、說明文檔豐富、不需要特定物理引擎、可以導(dǎo)入外部3D模型等優(yōu)點(diǎn)，能夠滿足本文方案的要求。

2.3.2 WebGL渲染方法

構(gòu)件數(shù)據(jù)存儲(chǔ)示例如圖3所示，字段名和JSON格式文件數(shù)據(jù)結(jié)構(gòu)的對應(yīng)關(guān)系如表2所示。

表2 JSON示例與JSON格式文件對應(yīng)關(guān)系

圖3 構(gòu)件數(shù)據(jù)存儲(chǔ)示例

JSON格式文件完成存儲(chǔ)后，可通過Three.js進(jìn)行渲染。在實(shí)際渲染中，構(gòu)件數(shù)據(jù)存在一個(gè)頂點(diǎn)同時(shí)屬于多個(gè)面的情況，如圖4所示。在圖4中，頂點(diǎn)V7同時(shí)屬于面F1、F2、F3、F4、F6，那么會(huì)被重復(fù)存儲(chǔ)4次。一般情況下，每一個(gè)頂點(diǎn)會(huì)同時(shí)屬于3～4個(gè)面。因此，在已經(jīng)有VertexCoords的情況下，本文增加了VertexIndices來輔助存儲(chǔ)表面模型信息。這種“VertexCoords+VertexIndices”的復(fù)合存儲(chǔ)方式比單獨(dú)使用VertexCoords能節(jié)約60%以上的存儲(chǔ)空間。

圖4 常見的三角形面片分布

Three.js對三角形面片JSON格式文件的渲染流程如圖5所示，具體步驟如下。

圖5 Three.js對三角形面片JSON格式文件渲染流程

（1）查找VertexIndices集合中的索引值。3個(gè)索引值為一組，每一個(gè)索引值對應(yīng)VertexCoords中的一個(gè)頂點(diǎn)；將3個(gè)頂點(diǎn)首尾相連，形成一個(gè)三角形面片。以此類推，獲得所有三角形面片，還原表面模型。

（2）得到表面模型后，查找三角形面片的法線集。法線集的查找方式和頂點(diǎn)一樣。

（3）計(jì)算構(gòu)件幾何中心，獲得相機(jī)初始擺放位置。構(gòu)件幾何中心為Solid實(shí)體的Center位置平均值，計(jì)算式為其中，Centeri表示Solid實(shí)體的中心點(diǎn)位置，N表示Solid實(shí)體的個(gè)數(shù)，X表示Center位置平均值。

（4）渲染顏色、透明度等材質(zhì)信息，以使渲染出來的模型和Revit的BIM保持一致。顏色、透明度等材質(zhì)信息是從BIM的材質(zhì)信息中提取出來的。

（5）用對象類表示三角形面片頂點(diǎn)、三角形面片法線集、顏色、透明度、唯一編號(hào)等信息，完成BIM構(gòu)件的渲染。

（6）重復(fù)上述步驟，直至完成整個(gè)BIM的渲染。

在實(shí)際的渲染過程中，為了減小瀏覽器的渲染壓力，本文采取分級渲染的策略：a.渲染建筑結(jié)構(gòu)專業(yè)BIM構(gòu)件，以便快速得到直觀的視覺呈現(xiàn)效果；b.渲染暖通、給排水、供電、通風(fēng)等專業(yè)BIM構(gòu)件；c.合成，實(shí)現(xiàn)BIM的渲染。

3 實(shí)際應(yīng)用

3.1 表面模型提取

本文首先提取BIM表面模型，并存儲(chǔ)為JSON格式文件；再通過Revit二次開發(fā)功能完成BIM構(gòu)件。插件（部分專業(yè)）如圖6所示，其中，圖6（a）為土建結(jié)構(gòu)專業(yè)，圖6（b）為給排水專業(yè)。在上傳的時(shí)候，需要在文本框中給出所上傳模型的專業(yè)和所屬項(xiàng)目，以便后期數(shù)據(jù)庫查找數(shù)據(jù)。

圖6 格式轉(zhuǎn)化插件

3.2 BIM數(shù)據(jù)存儲(chǔ)

存儲(chǔ)階段：完成插件后，可以將整個(gè)BIM對應(yīng)的多個(gè)JSON格式文件一鍵上傳到FastDFS文件服務(wù)器中。

3.3 BIM構(gòu)件渲染

Three.js首先渲染建筑結(jié)構(gòu)專業(yè)BIM表面模型，如圖7所示。這種方式能夠快速地呈現(xiàn)BIM外觀，減少渲染等待時(shí)間。待渲染這些專業(yè)完成后，使用人員可以選擇繼續(xù)渲染如圖8所示的給排水專業(yè)等BIM構(gòu)件。這些構(gòu)件可以同時(shí)在Web端進(jìn)行渲染，也可以分別進(jìn)行渲染。

圖7 建筑結(jié)構(gòu)專業(yè)BIM構(gòu)件

圖8 給排水專業(yè)BIM構(gòu)件

4 結(jié)束語

本文主要使用JSON格式文件表示軌道交通BIM對應(yīng)的表面信息、使用FastDFS存儲(chǔ)管理BIM對應(yīng)的大量JSON格式文件、使用Three.js渲染這些JSON格式文件，實(shí)現(xiàn)了軌道交通各專業(yè)BIM Web端的渲染。該應(yīng)用不僅完全脫離了IFC格式文件，還使Web端渲染大模型時(shí)內(nèi)存壓力變小。通過查找大量文獻(xiàn)發(fā)現(xiàn)：FastDFS在讀入/讀出文件時(shí)是可以提升效率的，例如，使用Redis緩存機(jī)制建立文件名和全局索引的鍵值對，以及使用數(shù)據(jù)預(yù)取機(jī)制等方法，可以加快FastDFS文件服務(wù)器的工作效率。這是本文的下一步工作重點(diǎn)。