基于WebGL的Revit三維建筑模型重建

陳志楊，羅 飛

(浙江工業(yè)大學 計算機科學與技術學院，浙江 杭州 310023)

?

基于WebGL的Revit三維建筑模型重建

陳志楊，羅 飛

(浙江工業(yè)大學 計算機科學與技術學院，浙江 杭州 310023)

結合WebGL和BIM技術，在瀏覽器端重建Revit三維建筑模型可以使用戶方便地在瀏覽器上查看三維模型.針對Revit三維建筑模型全信息重建，通過Revit API將Revit Architecture三維建筑模型文件轉換成包含幾何信息和屬性信息的JSON格式文件，并使用WebGL解析JSON文件達到在PC瀏覽器端和移動瀏覽器端實現(xiàn)Revit Architecture三維模型重建的目的.同時提出一種在JSON文件中模型對象和模型屬性信息關聯(lián)的方法，并提出了一種針對大場景，基于Revit“族”對象的LOD優(yōu)化算法.

Revit；JSON；WebGL；Three.js；三維重建；多分辨率

建筑信息模型(Building information modeling，BIM)在建筑設計領域內(nèi)被廣泛討論[1].Revit Architecture軟件是Autodesk公司針對建筑行業(yè)開發(fā)的BIM工具，在建筑領域應用廣泛.雖然Revit Architecture提供了良好的建筑設計支持，但是Revit Architecture軟件程序龐大，操作復雜、對計算機和使用者有較高要求，非設計人員直接通過Revit Architecture瀏覽三維建筑模型有一定的操作難度，還有可能不小心誤操作破壞三維建筑模型的原始數(shù)據(jù).云計算是當下計算機專業(yè)的熱門話題，結合云計算的思想建立Revit Architecture私有云符合CAD發(fā)展潮流[2].計算獲得三維建筑模型的幾何和信息數(shù)據(jù)、存儲在云端數(shù)據(jù)庫，并通過網(wǎng)絡遠程訪問在本地瀏覽器渲染三維建筑模型.相比較Autodesk 360公有云、用戶敏感數(shù)據(jù)存在安全隱患[3].通過建立私有云的方式，企業(yè)能夠完全掌控自己的敏感數(shù)據(jù)，普通用戶通過網(wǎng)絡連接到私有云即可在PC端瀏覽器和移動端瀏覽器上瀏覽三維建筑模型.

將Revit Architecture三維建筑模型轉變成私有數(shù)據(jù)存儲和私有數(shù)據(jù)在瀏覽器端顯示是構建Revit Architecture三維建筑模型私有云的兩個重要問題.對于第一個問題，Autodesk公司提供了Revit SDK(Revit Software Development Kit，Revit軟件開發(fā)工具包).SDK中包含開發(fā)必需的API、文檔和樣例.Revit API提供了一系列命名空間、方法和類庫.方便用戶在Revit平臺上二次開發(fā).對于第二個問題，隨著Javascript語言逐步完善和計算機硬件發(fā)展，瀏覽器腳本語言的圖形圖像處理能力得到加強.基于OpenGL 2.0的WebGL技術支持在瀏覽器渲染二維、三維圖形圖像.同時WebGL能夠直接調(diào)用底層GPU顯卡指令集渲染圖形圖像，兼容PC端瀏覽器和移動端瀏覽器，甚至能支持基于Native架構的移動端APP應用[4-5].具有跨平臺性和可移植性.筆者闡述基于WebGL，通過Revit API實現(xiàn)Revit Architecture三維建筑模型重建過程.提出一種三維建筑模型幾何數(shù)據(jù)和信息數(shù)據(jù)的關聯(lián)方法，同時針對大場景的渲染性能問題，設計了基于Revit“族”的LOD優(yōu)化算法.

1 WebGL和Revit Architecture二次開發(fā)研究現(xiàn)狀

WebGL是基于OpenGL ES 2.0版本并且針對瀏覽器和移動端優(yōu)化的底層3D圖形API，WebGL版本如圖1所示.通過HTML5的Canvas元素作為文檔對象模型接口[6].

圖1 WebGL與OpenGL關系Fig.1 Relationship between WebGL and OpenGL

雖然WebGL提供基于Javascript語言的API，但是本質上WebGL是使用GLSL(OpenGL Shading Language，OpenGL著色語言)的API，開發(fā)過程和C語言相似.這使得使用原生API實現(xiàn)三維圖像平移、旋轉和縮放等功能變得復雜枯燥.利用WebGL框架能夠快速開發(fā)實例程序.流行的WebGL框架有Three.js，PhiloGL，Babylon.js，SceneJS，x3dom，CopperLicht等，以Three.js圖形庫在開源社區(qū)最為流行.

Three.js圖形庫實現(xiàn)了基本的圖像算法；提供常見的光照模型，貼圖紋理、層次模型和坐標系以及提供了像OBJ，MTL等格式文件的加載方法；統(tǒng)一的動畫接口.

2002年Autodesk收購Revit Technology公司，發(fā)布Revit SDK，目前Revit SDK屬于快速發(fā)展時期，不同版本存在接口變更和不兼容問題.Revit Architecture二次開發(fā)目有商業(yè)軟件和少量開源社區(qū)軟件可供參考.最著名的是Autodesk360，提供了Revit云盤服務，用戶將Revit文件上傳Autodesk 360云服務器，服務器自動完成模型的渲染和瀏覽器端模型重建.國外商業(yè)軟件如CADMAI軟件公司，開發(fā)了基于Revit和WebGL的二次開發(fā)軟件，提供了本地Revit文件到WebGL文件的轉換服務.國內(nèi)有北京橄欖山軟件有限公司的Revit模塊軟件.開源愛好者Jeremy Tammik編寫的一系列Revit BIM開源軟件和博客.

2 基于WebGL的Revit三維建筑模型重建

三維模型重建是建立私有云的核心步驟[7].流程包括使用Revit API將Revit Architecture三維建筑模型文件轉換成JSON格式文件存儲；使用WebGL解析JSON文件并在PC瀏覽器端和移動瀏覽器端實現(xiàn)Revit Architecture三維模型重建.同時提出一種模型對象和模型屬性信息關聯(lián)方法以及討論大場景下的LOD顯示優(yōu)化問題.

2.1 JSON數(shù)據(jù)接口定義

JSON(JavaScript object notation, JavaScript對象標記語言)是輕量級的數(shù)據(jù)交換語言.JSON和常用XML及FSV數(shù)據(jù)傳輸格式相比，在開銷、傳輸時間以及客戶端數(shù)據(jù)反序列化效率上明顯優(yōu)于其他數(shù)據(jù)傳輸格式[8].因而更適合作為服務器端與Web瀏覽器數(shù)據(jù)傳輸?shù)慕涌?

JSON格式數(shù)據(jù)接口主要使用的數(shù)據(jù)結構是對象、名/值對、數(shù)組、數(shù)字、字符串與布爾值[9].JSON的格式描述可以參考RFC 4627.JSON格式，如圖2所示.

圖2 JSON數(shù)據(jù)格式中主要數(shù)據(jù)結構以及相互關系Fig.2 Main data structures and the relationship of JSON data format

針對Reivt建筑模型設計的JSON文件數(shù)據(jù)結構需要符合OBJ模型格式.數(shù)據(jù)結構包含四個部分：Geometries記錄幾何模型數(shù)據(jù)，materials記錄幾何模型的紋理數(shù)據(jù)，metadata記錄自定義信息，object記錄Revit對象的屬性數(shù)據(jù).通過標識符ID關聯(lián)對象的幾何模型、紋理和參數(shù)信息.實現(xiàn)了Revit建筑模型和屬性信息關聯(lián).

2.2 Revit二次開發(fā)

Revit SDK支持visual studio C#二次開發(fā).所需的環(huán)境包括引入Revit SDK，配置Microsoft.NET Framework等環(huán)境依賴.核心內(nèi)容包括創(chuàng)建新的引用、添加RevitAPI.dll和RevitAPIUI.dll包、定義類和編寫代碼[10]，Revit二次開發(fā)流程如圖3所示.

圖3 Revit二次開發(fā)流程Fig.3 Revit secondary development process

Revit標準長度單位使用英制單位，Three.js使用國際標準單位，因此需要將英制單位轉換成標準國際單位.單位轉換存在精度誤差，按照慣例設置合適的閾值.當對象長度小于10-9m時判定長度等于0.由于Revit坐標系不是標準的3D計算機圖形坐標系，Revit對象在轉換JSON存儲文件過程中需要轉換成標準坐標系，如圖4所示.

圖4 Revit坐標系和標準計算機圖形坐標系對比Fig.4 The comparison between Revit and standard computer coordinate system

Three.js對象的數(shù)據(jù)結構和Revit API封裝的Rvt格式不同，需要數(shù)據(jù)類型轉換.這些轉換包括浮點數(shù)，點的三維坐標轉換成字符串，Revit顏色對象轉換成24 位字符串類型，Revit對象基本屬性的描述和對象ID與值的字典序構建.由于JSON對象都是以鍵/值對的形式存儲，Revit API實例需要轉換成字符串類型存儲在JSON文件中.

利用Revit API轉換三維建筑模型的核心是實現(xiàn)IexportContext接口方法.2015版API提供了19 個方法處理三維模型對象.這些方法用于處理Revit的簇對象、材料、多邊形、曲面和光線.利用這些方法將Revit對象轉換成OBJ格式并存儲在JSON文件中，Revit轉換JSON文件二次開發(fā)流程如圖5所示.

圖5 Revit對象轉換JSON流程Fig.5 Process Revit object to JSON

2.3 三維模型顯示和基于Revit“族”的LOD優(yōu)化

Javascript作為瀏覽器腳本語言，計算能力因為google的V8引擎得到了大大提高，這使得瀏覽器端運行3D程序成為可能.Three.js是當下最流的開源WebGL庫.Three.js渲染器結構如圖6所示，包括渲染器(Renderer)、相機(Camera)和場景(Scene).

圖6 Three.js渲染器結構Fig.6 The structure of Three.js Render

Revit三維建筑模型幾何信息和數(shù)據(jù)信息存儲在JSON格式的中間文件中.Web程序加載并解析JSON中間文件并解析成OBJ格式將解析后的幾何信息和數(shù)據(jù)信息加載到THREE.Scene對象中、渲染器在瀏覽器上渲染并重建Revit三維建筑模型.

THREE.Scene對象包含了建筑模型的幾何信息、紋理信息以及屬性信息.利用ObjectLoader類解析JSON中間文件，分別使用JSONLoader，MaterialLoader，Object3D等類處理幾何信息、紋理信息和屬性信息.對象返回給THREE.Scene，顯示在屏幕上.通過統(tǒng)一標識符ID關聯(lián)三種信息從而實現(xiàn)屬性數(shù)據(jù)查詢.

WebGL動畫渲染需要消耗大量的GPU資源，幀率(Frames per second，F(xiàn)PS)能夠直觀表達模型重建對GPU資源的消耗.一般而言30FPS是人肉眼分辨卡頓的分界線，低于30FPS人觀察模型旋轉、縮放時能夠感知卡頓.FPS越高表明渲染能力越強，通常WebGL渲染上限為60FPS.FPS能夠比較不同場景、不同GPU下的渲染性能區(qū)別，為性能優(yōu)化提供直觀動畫.

Revit“族”(family)是一類具有相似性的抽象集合.Autodesk Revit中的所有圖元都是基于“族”.每個族圖元能夠在其內(nèi)定義多種類型，根據(jù)族創(chuàng)建者的設計，每種類型可以具有不同的尺寸、形狀、材質設置或其他參數(shù)變量.比如，鐵門、木門和防盜門等都屬于同一個“族”.典型的現(xiàn)代建筑模型通常由墻面、門、窗、玻璃以及水電設施等對象組成.同時Revit API也是以“族”的實例為單位處理對象.

實際測試顯示，主流GPU顯卡無法流暢地顯示包含有6 009 個“族”對象的建筑場景.針對Revit“族”的特點，設計以Revit“族”為單位的LOD顯示優(yōu)化能夠減少對GPU的資源需求.

LOD技術的核心思想是計算對象到視點的距，如果這個距離超過了閾值則不渲染對象[11].通過設置合理的閾值，使得人眼觀察到的圖形圖像和全部渲染得到的圖像沒有感官上的顯著差別，從而取得顯示效果和性能的均衡.

Revit文件二次開發(fā)后，以“族”實例為子集順序存儲在JSON文件中.對不同大小的Revit建筑場景自適應設置合理的閾值，遍歷子集并計算“族”實例對象的包圍球到相機的距離，設置對象visible屬性，當距離小于閾值visible值為true，顯示并渲染，大于閾值visible值為false，隱藏且不渲染.這種基于Reivt-three.js對象層的LOD場景優(yōu)化能減少對GPU的消耗.算法偽代碼描述如下：

//camera:視點

//object: three.js幾何對象

//boundingSphere:幾何對象所在的最小包圍球

//radius:半徑

//center，positon:點坐標信息

//thresHold:閾值

var thresHold=setThresHold();

for each object in Three.js render Array{

var distance=

calculateDistance(camera.position,object.boundingSphere.center);

var radius=getRadius(object.boundingSphere.radius);

radius / distance <=thresHold ? visible=false : visible=true;

}

3 系統(tǒng)應用

3.1 構建實例程序

按照上述程序構建實例程序.程序以Revit插件形式(Command模式)將三維建筑模型導出成OBJ格式的JSON中間文件.JSON文件可以在本地瀏覽器直接瀏覽，也能以C/S形式，瀏覽器從遠程獲得資源并顯示，實驗結果如圖7所示.圖7為Revit

軟件繪制的一棟別墅三維建筑模型.圖8為在Chrome瀏覽器端重建的帶有對象屬性信息三維建筑模型(主視圖選中對象屬性信息顯示在左側信息表格里).

圖7 Revit模型主視圖、俯視圖、右視圖和三維模型視圖Fig.7 Revit model’s front view, plan view, right view and 3D model view

圖8 瀏覽器模型主視圖、俯視圖、右視圖和三維模型視圖Fig.8 Browser model’s front view, plan view, right view and 3D model view

從圖8中可以看到：在瀏覽器中顯示的三維模型與在Revit中顯示的模型幾乎沒有差異，除了光照模型不同外，僅在部分紋理貼圖(地面和屋頂黑色條紋)上有些許不同，這是因為Revit API沒有完全支持紋理輸出的原因.同時，高亮部分集合模型的屬性數(shù)據(jù)在瀏覽器中也能夠查看.至此，我們實現(xiàn)了脫離Revit軟件的三維建筑模型顯示.

由于顯卡資源不能流暢渲染大場景三維建筑模型.因此需要在場景引入2.3節(jié)中提出的基于Revit“族”的LOD技術.以包含6 009 個“族”實例對象的建筑場景為例，表1為場景在HD6550 M和HD7770 M顯卡下，不同閾值的LOD優(yōu)化數(shù)據(jù).圖9為不同閾值下的LOD顯示效果.實驗數(shù)據(jù)表明：通過設置閾值，能夠提高渲染的速度，減少對GPU資源的消耗.

表1 顯卡和閾值對渲染數(shù)據(jù)的影響

Table 1 Effect of rending with GPU and thresholds

閾值LOD關閉0．0500．0100．007渲染數(shù)量/個600930527685251FPS6550414106FPS777010601912

圖9 不同閾值下LOD顯示效果Fig.9 LOD display under different thresholds

3.2 系統(tǒng)尚存缺陷

3.2.1 真實性差異

和原生Revit三維建筑模型場景相比，實例程序側重于三維場景重建.缺乏對路面貼圖紋理、光線追蹤和光照模型進行處理.同時Revit API 2015自身對色彩輸出的限制以及自定義精度造成了三維重建場景存在細節(jié)上的色差和精度損失.

3.2.2 性能優(yōu)化

C/S架構對于網(wǎng)絡帶寬有很強烈的依賴.在保證數(shù)據(jù)完整前提下JSON文件越小所依賴的網(wǎng)絡帶寬越小.主流的方法是用GZIP對JSON文件壓縮傳輸.2.3節(jié)中指出WebGL渲染需要消耗大量的GPU資源，引入LOD場景優(yōu)化雖然減少了對GPU資源的消耗，但是LOD距離的計算過程又增加了CPU資源的消耗.尋找GPU/CPU性能均衡的顯示方式是未來繼續(xù)探究的新方向.

4 結 論

基于WebGL的Revit三維建筑模型重建主要解決了四個問題：提出了建立Revit三維建筑模型私有云的核心流程；實現(xiàn)了基于OBJ數(shù)據(jù)結構的JSON存儲格式；提出了一種三維建筑模型幾何對象和屬性數(shù)據(jù)關聯(lián)的方法，實現(xiàn)了Revit三維建筑模型在瀏覽器端呈現(xiàn)；提出并實現(xiàn)了基于Revit“族”的LOD算法.實例程序表明：在精度范圍內(nèi)，瀏覽

器端渲染的三維建筑模型能夠替代原生Revit三維建筑模型實現(xiàn)實時瀏覽功能，同時也可以快速的查詢建筑對象的屬性信息，權衡顯示效果和性能需求，具有實際應用價值和理論價值.

[1] 劉照球,李云貴.建筑信息模型的發(fā)展及其在設計中的應用[J].建筑科學,2009,25(1):96-99.

[2] 林闖,蘇文博,孟坤,等.云計算安全:架構、機制與模型評價[J].計算機學報,2013(9):1765-1784.

[3] 邢雪霞,黃虎,胡傳皓,等.云計算安全研究[J].信息通信,2014(3):153.

[4] 方強.基于WebGL的3D圖形引擎研究與實現(xiàn)[D].合肥：安徽大學,2013.

[5] 劉愛華,韓勇,張小壘,等.基于WebGL技術的網(wǎng)絡三維可視化研究與實現(xiàn)[J].地理空間信息,2012,10(5):79-81.

[6] CANTOR D, JONES B. WebGL beginner's guide[M]. Birmingham: Packt Publishing Ltd.,2012.

[7] 管秋,金俊杰,張劍華,等.基于最優(yōu)RANSAC算法的非增加式多視圖三維重建[J].浙江工業(yè)大學學報,2015,43(4):473-478.

[8] 高靜,段會川.JSON數(shù)據(jù)傳輸效率研究[J].計算機工程與設計,2011,32(7):2267-2270.

[9] 陳瑋,賈宗璞.利用JSON降低XML數(shù)據(jù)冗余的研究[J].計算機應用與軟件，2012，29(9):188-190.

[10] 薛忠華,謝步瀛.Revit API在空間網(wǎng)格結構參數(shù)化建模中的應用[J].計算機輔助工程,2013,22(1):58-63.

[11] LUEBKE D P. Level of detail for 3D graphics[M]. San Francisco: Morgan Kaufmann,2003.

(責任編輯：陳石平)

Revit three-dimensional building model reconstruction based on WebGL

CHEN Zhiyang, LUO Fei

(College of Computer Science and Technology, Zhejiang University of Technology, Hangzhou 310023, China)

The Revit 3D building model reconstructed in the browser combining WebGL and BIM technology can help user browsing 3D model in the browser conveniently. This article aims to reconstruct Revit 3D building model with full information. Through Revit API, the file of Revit 3D architecture model can be converted to JSON format file with geometric information and property Information. Then the WebGL is used to parse JSON file in order to achieve Revit Architecture 3D model reconstruction in the PC browser and mobile browser. In the meantime, a associated method between model object in JSON file and attribute information associated with the model is proposed. The LOD optimization algorithm based on Revit family in big scene is put forward.

Revit; JSON; WebGL; Three. js; three-dimensional reconstruction; LOD

2016-03-05

國家自然科學基金資助項目(61303138)

陳志楊(1971—)，男，河北秦皇島人，教授，研究方向為計算機輔助設計(CAD)、幾何造型和圖形處理，E-mail：czy@zjut.edu.cn.

TP391

A

1006-4303(2016)06-0608-06