基于HTML5/WebGL技術的BIM模型輕量化Web瀏覽解決方案
原創互聯網技術的興起極大地改變了我們的娛樂、生活和生產方式。尤其是HTML5/WebGL技術的發展更是在各個行業內引起顛覆性的變化,大家感受最深刻的可能是游戲、電商、O2O等和我們生活息息相關的行業,但這次我想講一下不受普通人關注但又人人都離不開的建筑業在互聯網大潮沖擊下的變革。
作者簡介:
杜長宇·Autodesk資深開發顧問
杜長宇,Autodesk資深開發顧問。目前負責其公司云技術的支持和推廣,關注HTML5、WebGL、NodeJs及Web上的三維模型顯示技術。
提到建筑業,就必然要提到BIM(Building Information Modeling)即建筑信息模型。BIM技術經過近十年的發展,已經被越來越多的業主、開發商、設計者和運維人員所接受,建筑業必將迎來繼“甩圖板”以來的又一次技術革命。上海中心、鳥巢等標志性建筑的BIM技術應用,進一步證明了BIM技術的生命力。BIM技術將在設計、施工到運維整個生命周期中發揮巨大威力。同時我們也注意到,設計、施工、運營維護人員和業主開發商等在同一個BIM模型上工作以達到自始至終的數據工作的“單一模型”模式在實踐中是不切實際的,BIM模型在項目建造的不同階段、基于不同目的、不同的參與者等因素,BIM模型的要包含和表達的信息以及詳細程度也是不同的,有必要根據具體運用情況對BIM模型進行細化或概括,根據使用情況還可能需要對BIM模型進行輕量化處理,以便達到去粗取精、更易使用的目的。
我們以運維階段為例,在建筑已經建造完成進入運維階段時,我們的運維系統往往希望輕量化的BIM模型。首先是在原始BIM模型基礎上的概括與簡化,比如在設計階段或施工階段的某些具體信息在運維階段并不一定有用,如果這些冗余信息在BIM運維階段不做概括和簡化,不但會造成BIM模型過于復雜導致性能問題,還可能由于信息冗雜、干擾,導致運維系統使用不便。所以有必要根據BIM模型的應用場景做必要的簡化。與此同時,運維階段所需要的一些必要信息,在設計和施工階段也是沒辦法包含在BIM模型之內的,也需要根據具體使用情況,對BIM模型信息做必要的補充。這個過程必然造成BIM模型的版本分化,有必要做好版本管理工作。
根據運維系統的特點,運維人員可能并不熟悉建筑建模軟件的使用,同時讓運維人員使用建模軟件來做運維管理也是不實際的,所以還需要對BIM模型的格式做必要的轉換達到輕量化,以便在運維系統中使用。常見的BIM模型輕量化解決方案有下面幾種,大家一起探討:
- 使用Autodesk Navisworks 軟件。 Autodesk Navisworks可以接受包括Revit在內的多種業界常見的BIM模型格式,同時具有很高的壓縮比。Navisworks同時提供豐富的API,有不少廠商使用Navisworks做運維平臺。其優點是支持數據格式眾多,壓縮比高,輕量化效果好同時提供豐富API,易于開發與集成。但是 Navisworks 是桌面軟件,客戶端需要安裝Navisworks軟件,需要License授權,成本較高。 使用Navisworks雖然可以開發基于Web的應用,但Navisworks只能支持IE瀏覽器,并且每個客戶也還是需要安裝Navisworks軟件。同時由于IE瀏覽器版本的升級,新版本IE瀏覽器對Navisworks的支持還有問題。而且該方案也不支持移動設備瀏覽。
- 使用DWFx格式。DWF格式是更通用的數據格式,幾乎所有Autodesk軟件都支持導出為DWF格式。其優點是支持的格式眾多,Autodesk Design Review還提供的免費的Web插件,可以在Web端運行,有簡單API可以做定制和集成。不過Design Review或DWG viewer也是基于COM技術的,只能在IE瀏覽器上運行,這在互聯網時代的大背景下,這簡直是非常苛刻的要求。同時DWF viewer對超大模型的支持能力一般,打開超大模型時加載時間較長、對計算機性能要求高,運行性能也會有影響。不支持移動設備。
- WebGL解決方案。隨著***Web技術的發展,尤其是HTML5/WebGL技術的發展與成熟,為我們在Web和移動端顯示BIM模型提供了新的選擇,這必將是將來的發展方向。HTML5/WebGL技術使用原生瀏覽器本身的功能,不需要下載安裝任何插件即可在Web端瀏覽和顯示復雜的三維BIM模型或二維DWG圖紙。同時支持包括Firefox、Google Chrome等現代瀏覽器,iOS、Android設備上也可以運行。所以幾乎所有瀏覽器、所有設備上都可以使用。使用WebGL技術做BIM模型的輕量化,需要把原始BIM模型進行解析,用WebGL技術在瀏覽器端或移動端對BIM模型進行重新繪制渲染,對技術水平要求較高。不過目前已有成熟解決方案,使這個過程得到的簡化。
使用基于HTML/WebGL技術的BIM模型輕量化Web瀏覽技術更契合技術發展方向,Autodesk的View and Data API技術的推出,進一步降低了對BIM模型預處理難度,使得基于HTML/WebGL技術對BIM模型的Web瀏覽、分享以及協作更簡單。Autodesk View and Data API技術支持包括Revit、Inventor、Navisworks、Catia、AutoCAD等軟件的超過60多種數據格式,幾乎涵蓋業界所有三維數據格式。
Autodesk View and Data API由兩部分組成,對于BIM模型的預處理等技術復雜度高的工作以云服務的形式提供,用戶可以以REST的方式調用;同時瀏覽器端提供基于JavaScript的API,方便對模型做更精細的控制以及和其他業務系統做深度集成。
如上圖所示,服務器端API部分以業界流行的REST方式提供,可以由任意語言或平臺調用。通過REST API,我們實現基于OAuth 2.0的身份認證、模型文件的上傳以及云端的格式轉換。通過View and Data API提供的云服務,我們不用花費大量的時間和精力對不同格式的模型進行解析,只需利用云端服務的強大威力,從而降低我們系統開發過程中的技術難度。
模型經云端進行格式轉換后即可使用View and Data瀏覽器端API,使用JavaScript把模型嵌入到瀏覽器中并和其他系統做集成。該模型瀏覽器以及提供了內置的三維模型瀏覽查看功能,比如模型的縮放、旋轉、視點跳轉等,同時還提供模型目錄結構樹瀏覽、模型組件的隱藏與顯示、模型組件的信息顯示與搜索,而且內置的模型測量工具,可以對模型組件長度、角度、面積等多種參數進行量測,內置的剖面工具可以在任意平面上對模型進行剖切從而查看模型的內部結構。
通過View and Data 客戶端的JavaScript API,我們可以以編程的方式對模型瀏覽器進行控制、比如通過相機參數的控制來實現視點跳轉和模型自動旋轉,獲取屬性信息以便和其他系統集成,捕捉用戶事件以及創建風格一致的用戶界面等等。由于View and Data API基于Three.js構建,除了Autodesk View and Data API 客戶端本身提供的API之外,結合HTML5技術、Three.js技術,我們可以做出更多酷炫的應用效果。
下面的例子展示了使用Autodesk View and Data API同時顯示三維模型和二維圖紙,并實現三維模型、二維圖紙以及統計圖表的聯動。
下面是View and Data API在某大廈運維系統中應用的實例,運維人員隨時在基于Web的運維系統中查看設備的運行狀態、維護工單等信息,并實現和三維模型的聯動,一目了然。使用View and Data API技術在瀏覽器中查看復雜的三維模型,不需要安裝任何客戶端,只需要瀏覽器即可。
此外還有某建筑的全生命周期管理系統,實現基于Web中三維BIM模型的建筑全生命周期管理,使用View and Data API, 在Web系統中顯示復雜的三維BIM模型更簡單方便。
同時注意到,Autodesk View and Data API不但可用于建筑模型的web瀏覽,對于機械模型同樣試用。以下示例展示了根據模型屬性信息的動態標注:
下面示例展示了使用View and Data API結合Three.js技術實現對模型組件的移動拆解:
看到這里,您應該對Autodesk View and Data API有了直觀的認識,要了解更多信息,這里(http://duchangyu.github.io/51CTO/#/ )有一個簡單的介紹,還可以登錄到Autodesk view and data API的githhub主頁 – http://developer-autodesk.github.io , 你可以找到n多示例代碼以及開發文檔和資源。