基於HTML5/WebGL技術的BIM模型輕量化Web瀏覽解決方案

2021-01-11 TechWeb

網際網路技術的興起極大得改變了我們的娛樂、生活和生產方式。尤其是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多示例代碼以及開發文檔和資源。

相關焦點

  • 八大瘋狂的 HTML5 Canvas 及 WebGL 動畫效果
    現在瀏覽器和web技術的不斷發展。瀏覽器如Firefox、Chrome、Safari和IE10,web技術如Canvas、SVG和WebGL。 網速越來越快。一些體驗需要實時數據流和預加載資源,更好的網絡狀況能有更好的體驗。 我們挑選了8個由WebGL、HTML5 Canvas和Javascript製作的絕妙效果。每一個都非常簡單但卻發人深省,瘋狂並且極具創意。
  • 「建築交通」基於BS架構的BIM模型輕量化技術
    為提高BIM應用在設計、施工、運維等方面的優勢,使得廣大企業能夠使用BIM技術為公司創造價值,BIM輕量化引擎需要提高模型處理性能和Web端性能,以保證模型在Web端運行流暢。參數化幾何描述就是用多個參數來描述一個幾何體,比如畫一個圓柱體模型可以使用3個參數來進行表達,參數1為底面原點坐標(x、y、z,3個數據),參數2為底面半徑(r,1個數據),參數3為柱子高度(h,1個數據),可以使用5個數據來完成一個圓柱體的搭建,這樣比較精簡,這種參數化幾何描述可以將單個圖元做到最極致的輕量化。
  • 智程信息推出新一代模型輕量化技術
    要實現基於3D模型展示和信息傳遞,「模型輕量化」是繞不開的關鍵支撐技術之一。因為完整的3D產品模型數據量龐大,而且嚴重依賴三維CAD平臺,產品模型的展示和工藝信息等傳遞非常困難,這也是很多企業推廣和實現MBD需要進行攻克的難題。    針對如何實現3D模型的輕量化,很多企業都進行過探索和研究,但是始終沒有能夠實現很好的應用。
  • BIM輕量化圖形引擎領域研發取得重大突破
    譯築信息科技(上海)有限公司一群年輕的信息技術研發人員經過五年多的默默耕耘,終於在BIM輕量化圖形引擎研發領域取得重大突破,使我國在這個領域的自主研發水平接近國際水準。這項BIM輕量化圖形引擎——EveryBIM中間件,解決了世界級工程項目BIM本土化應用落地的3大核心問題:通過自主開發專用的行業輕量化圖形引擎,超大型BIM模型可以在普通配置的電腦、平板、手機端流暢瀏覽與協同工作;實現主流建模軟體產生的模型格式一鍵合成到一個平臺下進行應用;把圖形的存儲從文件級升級到結構化資料庫,支撐從電子化到數字升級,為信息系統集成提供基礎。
  • 如何應用Web頁面靜態化技術以提高J2EE Web應用系統的響應性能
    2、為什麼要應用Web頁面靜態化技術目前基於B/S(Browser/Server,瀏覽器/伺服器模式)體系架構的企業應用系統基本上都是由動態Web頁面所構成的(比如由*.jsp、*.aspx、*.php等類型),正因為是動態化的Web頁面才能滿足不同的Web瀏覽者的個性化的訪問需要、並且能夠與訪問者產生相互交互
  • 開源軟體分享-基於JS的三維地圖,可加載3D模型/BIM模型
    最近一個朋友的一個項目需要在web上實現三維地圖的功能,並且要能將車輛等3D模型放置在三維地圖上進行數據驅動,動態參數展示等功能。朋友問我有什麼可行的技術方案沒有,於是我給他推薦了cesiumJs這個開源的Web三維地圖框架,以前在某個項目中使用過,雖然踩過坑但是最終都解決了,感覺cesiumJs還不錯。
  • 3D大場景輕量化難題攻破,掌上城市觸手可及
    專利技術服務,全自動化處理   老子云大場景技術,可對3D大場景模型輕量化處理成ARMT格式(自由加密格式),整個輕量化過程完全自動化。   手工完成每平方公裡的大場景模型耗時3-4個月,而老子云大場景自動化只需要1.5個小時,在今年9月份雲部署後,還將不斷提速到幾分鐘就能完成。
  • 老子云千呼萬喚始出來,攝影實景3D模型全平臺展示交互解決方案
    但是,由於通過傾斜攝影技術生成的三維模型數據存儲量大,不利於展示、分析等原因,在三維場景應用上面臨著較大難題。本文中,老子云平臺將針對傾斜攝影市場這一普遍存在的現實難題,為用戶展示一套集輕量化處理和全平臺展示於一體的系統化解決方案。華為聯合埃森哲共同發布的《未來智慧園區白皮書》中提到了智能社會的三大特徵,它們分別是萬物感知、萬物互聯和萬物智能。
  • 艾邁斯半導體推出基於3D技術的駕駛員狀態監測系統DMS解決方案
    >10日——全球領先的高性能傳感器解決方案供應商艾邁斯半導體(ams AG,瑞士股票交易所股票代碼:AMS)今日推出一款基於3D識別和人眼追蹤技術的用於監測汽車駕駛員疲勞駕駛和注意力分散的駕駛員狀態監測系統(DMS)演示模型。
  • 艾邁斯半導體推出基於3D技術的駕駛員狀態監測系統(DMS)解決方案
    打開APP 艾邁斯半導體推出基於3D技術的駕駛員狀態監測系統(DMS)解決方案 艾邁斯半導體 發表於 2020-12-10 15:13:29
  • BIM綜合管廊運維管理平臺解決方案
    設備維護: BIM模型的非幾何信息在施工過程中不斷得到補充,竣工後可導入運維系統的資料庫中,相關設備的信息如生產日期、生產廠商、可使用年限、維修保養手冊等可直接查詢到,不需要花額外的時間翻閱查找紙質文件或電子文檔,依據BIM模型信息可自動生成設備維護方案,遇到故障時可快速定位或更換。
  • 如何利用MyEclipse開發工具開發基於Velocity模板的Web應用
    軟體項目實訓及課程設計指導——如何利用MyEclipse開發工具開發基於Velocity模板的Web應用1、在MyEclipse開發工具中新建一個名稱為WebVelocity的Web項目在名稱為WebVelocity的J2EE Web應用項目中的lib目錄下添加
  • html5 添加等待專題及常見問題 - CSDN
    單線程配置等待隊列The HTML5 Application Cache should make building offline-friendly web apps possible.對於使用Web技術,在瀏覽器或使用PhoneGap / Cordova的Web視圖中構建的應用程式,這種體驗可能是相同的。
  • AI技術|PIFuHD-由高清圖片生成3D人物模型對BIM的啟示
    Author--------------- Yen最近在知乎上逛著看到一個非常有意思的AI技術,叫PIFuHD,這個技術可以由一張人物的高清圖片,進行一系列的像素處理,生成人物的3D模型結構,很多關於人物的細節都處理得很好,還原度很高,下面是官網的展示
  • Web後端伺服器架構原理及技術詳解
    今天我們主要來了解一下關於Web服務端的技術,基於瀏覽器客戶端的技術,我們在訪問一個網站的過程中,一般都能夠了解到客戶端網站速度的快慢問題,但是對於伺服器端的技術我們一般不一定能夠感覺到,因為我們也不知道訪問網站伺服器的穩定性與可靠性到底怎麼樣,應用了一些什麼樣的技術也不知,對於伺服器端的相關知識也缺乏深入了解
  • 走通正向設計之路——交通行業BIM正向設計解決方案與實踐探索
    構建基礎環境的解決方案一般來講,構建一個項目的BIM設計基礎環境模型,包括地面數字模型(DTM)、實景模型、地質模型、地下現狀管線管網模型、沿線各種控制因素模型等,通過三維數位化建模技術集成和融合這些模型,最終形成項目可視化、可測量的精準三維基礎環境模型,為展開各專業BIM正向設計提供基礎數據支撐。
  • 媽灣跨海通道:從跨海工程中探索BIM本質
    BIM技術的應用優勢本項目在「設計—建造—運維」過程中利用BIM技術輔助工程方案設計、概預算、施工方案評估等新技術應用;並將BIM作為各階段利益相關方的決策基礎。媽灣跨海通道工程基於真實三維隧道模型,輔助分析研究應急策略。
  • 信銳技術推出基於LoRa的軟體定義教室SDC物聯網解決方案
    信銳技術推出基於LoRa的軟體定義教室SDC物聯網解決方案 Semtech 發表於 2020-09-01 17:21:04 近年來,隨著社會的高速發展和科技的不斷進步
  • 超文本標記語言HTML之快速入門HTML簡介、HTML入門
    首先第一步就要學習HTML與CSS,這並不需要去學一大堆的諸如Dreamweaver,Firework之類的各種網頁設計工具,關鍵是學會和理解HTML網頁嵌套的block結構與CSS的box模型。許多ASP.NET控制項最後都必須轉化為HTML。而且,div+CSS是當前主流的網頁布局模型。第二步就是要學習JavaScript。
  • BIM學習:Revit高級實例視頻教程+配套模型,自學不求人!
    這份Revit高級實例視頻教程+配套模型,包含辦公樓、別墅、通信機房、工業廠房等實例,高清視頻講解,步驟清晰,直觀形象,易理解,易操作,後附配套模型和圖紙,加強實操能力,非常適合工程人練習!【文章末尾有領取方式!】