一、背景介紹
近幾年，随着3D掃描裝置成本降低，三維掃描硬體、3D模組化或重建技術以及VR/AR技術的逐漸成熟，三維數字化逐漸開始在生活中普及。如VR看房、VR購物、VR探廠、VR導航、數字沙盤、CIM平台等，并且誕生了一批三維掃描、智慧運維、VR/AR的創業公司。特别是近兩年的疫情也加速了三維數字化程序，足不出戶在家就可以線上體驗的需求變得更加迫切。
1.1 一些業務形态（上圖部分來自網絡）:虛拟展廳、數字沙盤、智慧運維
為此，阿裡雲-人工智能實驗室在三維空間數字化和渲染方面做出了許多有益的嘗試，并在此領域碩果頗豐，實作了包括3D雷射掃描及室内重建服務、城市級高精路網重建技術、全自動BIM翻模算法、城市級傾斜攝影重建算法、智慧建築/園區/城市等。為了滿足我們三維空間渲染各個業務的需求，并且提供易用SDK友善第三方開發人員快速搭建自己的應用或平台，我們自研了TIDE.JS——一款元件化、輕量化、高性能、大規模的面向空間數字化應用的渲染引擎。
二、TIDE.JS引擎
團隊在業務探索的過程中，嘗試過各種不同的渲染引擎，例如ThreeJS，BabylonJS等，他們都是非常優秀的渲染引擎或者遊戲引擎，但是在業務嘗試的過程中，發現這些引擎在某些方面無法滿足我們的業務需求。我們希望的引擎是：1.一個具有元件架構的渲染引擎、2.底層渲染層可以剝離便于自己掌控細節、3.在保證渲染能力強的前提下需要盡可能的輕量化。用比較通俗的話來說，我們需要一個麻雀雖小五髒俱全的渲染引擎。在這樣的目标驅使下，我們開發的引擎具有一下特點：
元件化：TIDE.JS使用了EC/ECS（Entity & Component；Entity Component system）混用的元件開發方式搭建，與unity等主流引擎保持一緻。針對擁有unity，unreal，cocos2dx開發經驗的同學來說，有效降低了學習成本。下圖展示了我們元件化架構，在具體的業務中發揮的作用。元件化設計便于我們沉澱特定業務元件，任意組合功能給其他業務，提高技術複用性。下圖（2.1）展示了業務如何沉澱元件群組件的可複用性，以及支援的上層業務。
2.1 引擎的整體層級結構，并示意了各業務沉澱業務元件、元件共享複用的情況
元件由管理器統一進行管理，并執行其周期函數。目前我們支援的周期函數（運作時）如下，足以滿足大多數互動需求。Editor模式下，還會有GUI、DrawGizmo、OnSelected等周期函數。周期函數會定義元件的具體行為，比如上圖中提到的“傾斜攝影”業務下的“第一人稱控制元件”，使用WASD/QE 來控制錄影機的飛行：
它在onStart時緩存要控制的transform對象，在update函數中，去取得鍵盤狀态，并計算transform對象的新姿态；開發者不用關心onStart，update在背景是如何被調用的，隻需要知道onStart在元件生命周期裡隻執行一次，而update每幀執行一次就足夠了。
這個“第一人稱控制”元件，如果添加到錄影機上，就可以讓錄影機具備響應WASD/QE操控的能力；如果添加到“萬花筒業務”的虛拟導購對象上，也可以讓虛拟導購對象接受WASD/QE的控制。這也是元件複用的基本含義。
2.2 元件的周期函數（runtime）
元件的另一個核心主題，就是序列化/反序列化，這個操作是為了将“邏輯”複用。我們是通過Prefab/Package系統來完成這個任務的。Prefab管理器将Entity 對象序列化成一個json，隻包括每個元件的參數，并不包括元件的代碼。Package會将這個json、相關元件的代碼、元件引用的資源檔案等，打包到一起，用于項目間的複用。關于Prefab/Package系統本文不再累述，會在稍後的系列文章中做詳細介紹。下圖展示了Prefab與“邏輯複用”的情況：
a.互動A：産生了一個不錯的機器人，有符合業務需求的行為：飛行、說話、做鬼臉等等；
b.使用者通過編輯器也生成了一個不錯的女孩，并配置了行為；
c.prefab.tojson 将機器人/女孩導出成一個json，并以元件的形式，序列化其業務邏輯；
d.在目前的互動中，通過prefab.fromJson 能将其放置到目前場景，它的行為模式與之前一模一樣。
2.3 prefab進行資源複用
對于AI的行為，我們也内置了兩種典型的處理方案：有限狀态機、行為樹，并在實際的業務中使用起來；狀态機的管理器也是基于元件的，是以Prefab管理器會将其直接序列化到json，并支援其他業務複用。更多關于有限狀态機、行為樹的内容将在之後的系列文章中做詳細介紹。
輕量化：元件化的另一個優勢是可以大大降低代碼體積。每個業務隻需要包含他需要的元件，以及渲染所需的基礎渲染核心，即LLEF層（包名：@ali/llef)。LLEF層體積非常小（<50KB），是Tidejs使用的基礎渲染器，與上層業務邏輯解耦，直接與圖形api打交道，包括對基本的WebGL1.0/2.0的封裝以及高效實作所有基礎的繪圖指令。在将來，可以使用任何新的渲染器核心替換，無論是基于webgl，webassembly，還是webgpu，隻要遵循相應的接口即可。
高性能：我們的引擎在渲染性能上做出了很多努力，TIDE.JS引擎主要在基礎渲染性能和繪制性能上做出了一些優化。
在基礎渲染性能上，我們通過三個方向進行改進，1.降低圖形API的調用頻率，2.提升CPU端的更新速度，3.盡可能的減少drawcall。首先，我們通過動态記錄狀态并通過渲染狀态組合，盡可能做到每次drawcall的時候各類狀态相似度最大化，進而盡可能的減少圖形API調用量。經過對比，我們目前平均每drawcall的圖形API調用量是不做優化前完整調用的37%。其次，對于CPU端的更新消耗，我們通過EC架構及面向資料而非面向對象的程式設計模式來進行優化，這樣對于大批量物體的更新，可以做到更好的緩存一緻性進而提升性能。最後，對于drawcall數量的優化，我們通過對物體進行視錐體裁剪和動态合批來進行優化。在采取以上的優化措施後，我們的渲染引擎可以在基礎繪圖性能上有一個較大的優勢，同時在非基礎繪圖性能上，我們引擎開放了完整的渲染流水線自定義，使用者可以自己編寫延遲渲染管線，進而在特定業務條件下實作性能的進一步提升。
在繪制性能上，我們使用了完整GPU驅動的骨骼動畫，不同于其他引擎CPU驅動或者部分GPU驅動的骨骼動畫，我們的骨骼動畫系統利用GPU的高并行性完整的使用GPU進行加速。經過比較，在特定移動端裝置上，某引擎的骨骼系統在處理47根骨骼時幀率已經掉到了27FPS，而我們的系統還是能維持在60FPS，進而賦能業務方可以在更多的平台上推廣帶有骨骼動畫的業務。
2.4 我們引擎骨骼動畫系統驅動的高性能骨骼動畫及互動
大規模：為了滿足園區、市區、城市級規模的大場景渲染，我們引擎提供了多種大規模場景渲染的元件。包括LOD傾斜攝影渲染元件、點雲渲染元件、矢量化高精路網元件等，可以支援城市級傾斜攝影模型/點雲/高精地圖渲染。為了高效的渲染大規模資料，我們從以下幾個點出發對渲染流程做出了優化：
1.漸進式LOD資料和加載。正常的LOD（Level of Details）資料是層與層之間獨立的，資料沒有相關性，是以會産生不少的備援資料。為此，我們從資料源出發，轉換成我們自己的資料相關性LOD，避免資料備援。具體來說，每一層的建構都是類似沙漏一層層向下漏的過程，也就是說，當LOD建構完成後，所有層級的LOD資料加起來，剛好是原始的資料，沒有備援。這樣做不但可以節省資料傳輸的帶寬，更重要的是，我們可以進行漸進式加載，即當特定時刻相機靜止的時候，我們可以漸進式的把所有點雲進行渲染，這樣對于一些需要高密度的點雲渲染但是因為資料量太大無法直接渲染的業務場景，是一個非常實用的解決方案。具體的應用案例會在下文進行闡述。
2.記錄式的場景樹周遊，大規模場景的樹結構往往非常龐大，例如一個城市的資料，樹深可以達到15-20層，部分情況下可以達到25層。對如此龐大的樹結構進行周遊找到特定節點的父親和孩子等操作，消耗是非常大的。為了優化這個問題，我們并不存儲樹本身，而是運作時動态存儲每個節點的孩子以及祖先清單，這樣可以将單個節點樹周遊時間複雜度從O(logN)提升到O(1)，進而大大提升運作時樹結構的周遊速度，支撐整個大場景的渲染。作為比較，某點雲渲染平台渲染點雲的時候是每幀從根節點開始周遊整顆樹，當樹深較大時，這一個周遊操作往往需要1-2s，已經嚴重阻礙渲染的流程，而我們的算法，則完全沒有這方面的性能問題，樹的周遊都可以在1幀時間（16ms）内完成。
基于TIDE.JS大規模渲染的能力，我們可以保證城市級别的地圖在PC和手機上流暢渲染，例如下圖（圖2.5）渲染的杭州市點雲地圖，包含大部分主城區、未來科技城和下沙部分地區。
2.5 杭州市路網點雲高精渲染
高品質：渲染的最終輸出是螢幕上的圖像，是以渲染的品質是一個引擎所必須關注的，我們的引擎從各個方面入手提高渲染的品質。
首先，是基本的光照效果，這一部分，我們使用了完整PBR（Physicallly-Based Rendering）算法配和IBL（Image-Based Lighting）算法處理物體的基本光照，該光照模型進行完整實作後可以涵蓋多種材質和多種光源的光照計算，如圖2.6所示。有了這樣基于實體的光照後，我們可以提供一個在場景中比較真實的渲染物體的能力。
2.6 同一物體在不同材質下使用一套光照算法模型進行模拟的效果
此外，由于基礎光照計算的是直接光照，還沒有計算全局光照的光照資訊，是以在視覺上會有一種空間層次感不夠明顯的感覺，而如果計算全局光照往往需要離線的光線追蹤進行計算，在計算量有限的前提下，為了提升細節的層次感，我們使用DO（Directional Occlusion）算法配合自研的螢幕空間G2G（Glossy to Glossy）算法來模拟物體被全局光照遮蔽以及基本的全局光照情況。如圖2.7所示，該算法通過在螢幕空間中進行環境光照的拾取和積分進而計算空間臨域内對目前渲染點的間接光照貢獻，進而拟合計算目前渲染點接收的全局光照資訊。
2.7 Glossy to Glossy Directional Occlusion算法原理示意以及效果展示
同時，為了在大規模場景中進行光照計算，光在空氣中傳播産生的散射以及投射的陰影計算也會變得複雜，對于散射，我們實作了預計算的大氣散射積分系統，進而可以模拟太陽光在各個時刻通過大氣層達到地面時的光照散射品質（圖2.8左），進而提升大場景的繪制效果。而對于陰影計算，傳統的通過單張陰影圖來計算全局陰影會因為場景規模的提升而無法取得離線的渲染品質，為了解決這個問題，我們引入了CSM（cascaded shadow mapping）算法來進行陰影的渲染，該算法通過對目前視錐體進行分析，實時的從光源角度切分視錐體（圖2.8右），并生成多個陰影圖來計算陰影，這樣可以保證我們視野内的陰影品質永遠是維持清晰狀态的。
2.8 上：大氣散射效果示例，下：視錐體切分示例
下面介紹一下TIDE.JS引擎在各類空間業務中的應用。
三、支撐業務成果展示
3.1 全息店鋪
全息店鋪項目，緻力于服務萬千中小企業、商家做店鋪、工廠線上數字化，利用線下裝置掃描、雲端建構建構數字資産，提供室内場景3D數字化雲服務（詳情見阿裡雲服務市場），将線下實景搬到線上，為客戶提供VR看房、VR購物、VR探廠等各類場景的服務，在手機、電腦等各類終端上即可以三維實景方式呈現線下場景。目前已經和ICBU、CBU、三維家等進行合作，服務了全國各地的門數千家中小企業門店數字化。參考案例可通路我們的全息世界首頁
https://www.holoworld.com.cn/。
3.1 全息店鋪解決方案
該終端展示基于我們的引擎實作，主要是H5為主，當然在特定業務下，也可以作為native的内嵌頁面使用，比如雲展的3D展廳部分。終端展示我們預設提供三種經典模式：鳥瞰、俯視圖（戶型圖）、全景。
3.2 三種模式：鳥瞰、俯視圖（戶型圖）、全景
在具體的互動上，我們提供了包括自動漫遊、講房、3D彈幕、虛拟導購等有趣味的互動，針對每種業務場景，我們分别定制和搭配了多種模闆樣式和互動方式，以增強使用者體驗，提高使用者粘性。
3.3 互動示例：3d彈幕、虛拟導購與跟随漫遊。
目前我們上線的連結已經達到萬級，支援服務了十幾家生态夥伴，包括但不限于下面所列：三維家、口碑、CBU、ICBU、手淘等；項目也涵蓋了雲展、淘寶心選、義烏商場、中小企業建站、雲栖大會、95公益周等幾個項目。為了支撐生态夥伴自己建設全息店鋪，我們也提供了兩種SDK：資料中台、 前端H5，并支撐了多個實際業務的落地。
下面介紹一下我們TIDE.JS引擎在全息店鋪支援的各類業務。
虛拟廠房
在疫情期間，為了幫助阿裡巴巴國際買家客戶足不出戶就可以遠端探廠驗真，ICBU借助我們的三維掃描技術，幫助國内賣家完成廠房數字化，将廠房搬到線上，使他們探廠逛廠成為可能，促進洽商轉化。我們的TIDE.JS引擎提供了同屏帶看、自動漫遊、語音解說、3D視訊融合、3D标簽等功能（部分功能即将上線），進一步提升使用者體驗和營運轉化率。
3.4 全息店鋪應用案例：ICBU 3D Showroom
虛拟展會
我們還在人工智能實驗室的雲展會以及其他展會項目中進行了合作，幫助參展企業或展會主辦方将他們的展覽廳和展會搬上線上。我們引擎定制化開發的3D彈幕、虛拟角色動畫、360商品展示等一系列3D互動元素提升了線上逛展的樂趣，讓參會人員用豐富多樣的互動方式了解展會活動、了解參展企業産品。我們引擎還支援3D虛拟展廳，讓客戶線上互動式定制自己的展廳海報内容，打造企業對外宣傳的3D名片。
3.5 虛拟展會應用案例
虛拟商店
我們還和手機淘寶的很多客戶進行合作，通過我們的3D實景技術将他們線下的實體店搬到手淘，讓普通使用者在家就可以享受身臨其境逛實體店的體驗。虛拟堆頭、3D虛拟導購、3D商品展示、自動漫遊、3D音/視訊、虛拟地圖和導航等一系列技術提升逛商場和看商品的使用者體驗。
3.6 全息店鋪應用案例：95公益周、3D全景虛拟展廳、成都1919旗艦店、背景華倫天奴店
3.2 房産展銷
房産展銷業務帶給了使用者具有較強沉浸感以及互動性的購房體驗，例如使用者可以全3D的檢視整個樓盤的周邊配套，基于我們的大氣系統、PBR、SSAO、CSM等技術，進入到某一個特定房間内檢視24小時的陽光投射變化以及窗外的景色的真實感渲染，進而讓一房一景的購房體驗得以實作，而在室外，甚至可以自己在樓盤地面行走體驗樓盤的綠化和設施覆寫。我們的引擎在房産展銷項目中支撐了以下業務:
數字沙盤
我們的引擎在數字沙盤業務中提供了一種全息房産能力，在技術上，全息房産渲染中很重要的一點是強調真實性，尤其是能和開發商的效果圖打通，是以整體的渲染風格是一種帶有效果圖風格的真實感渲染風格。我們通過在各個環節加入特定的算法來達到這樣的渲染效果：首先是基本的光照材質，我們基于PBR并在此基礎上調整算法細節，以支援玻璃，牆體，草坪等材質的真實感渲染。其次是大場景的陰影，為了能夠準确表現出整個小區的宏觀陰影以及各個屋子的細節陰影照射情況，我們采用了CSM陰影算法技術，該技術可以動态的依據相機視錐體渲染合适的陰影圖進而使我們看到的永遠是有較多細節的陰影。最後，為了營造整個小區的空間層次感，我們使用了螢幕空間環境光遮蔽技術（SSAO）以及環境霧效果，使得幾何體的全局光照遮蔽更加真實且遠距離建築産生一定的模棱層次感。
3.7 TIDE.JS引擎渲染的數字沙盤效果
虛拟看房
VR看房近幾年逐漸成為各類房源APP的标配，相較于傳統的房屋照片，3D房屋戶型+360高清全景模式，可以更直覺的展示房屋空間資訊。結合我們引擎提供的中介語音帶看、3D量尺、VR虛拟帶看、3D家電随心擺等功能，将會幫助購房或租房者更真實的了解房屋戶型尺寸和場景細節。該功能今年上線。
3.3 空間資産管理平台
我們引擎同樣支撐了空間資産管理平台項目，為建築、園區、城市等提供3D空間資産管理與渲染服務。結合我們團隊BIM翻模、三維重建等3D資料生産服務，将我們生産的BIM模型、傾斜攝影模型、三維室内掃描模型等3D空間地圖做為管理平台的底座，向下打通樓宇内各類IoT裝置，向上為開發者提供了能耗、安防等運維子產品的SDK，以支援第三方開發者各類場景的運維、管理和渲染開發。下面介紹一下我們TIDE.JS引擎在空間資産管理平台支援的各類業務。
智慧樓宇/園區
在智慧樓宇業務中，我們的引擎支撐了整個智慧樓宇的前端渲染展示和控制。對于樓宇中的監控，除了通過拾取單個執行個體來獲得其狀态之外，我們還需要對監控錄像、監控區域進行檢視。監控區域的3D渲染可以讓樓宇管理者清晰了解到監控是否存在死角、監控更新與選型的需求。結合RFID等定位裝置，我們也可以實時展示樓宇中人員和物資的軌迹，并根據規則觸發報警。
智慧樓宇的管理中，各裝置之間大多數情況下是互不關聯、可獨立插拔的，借助我們引擎元件化的特性，我們引入插件化設計，便于開發者對于不同裝置元素的呈現和插拔，以适應關注不同裝置的使用者的需求。此外，我們也将在未來開發規則引擎，以互動式方式定義不同子產品間的信号處理規則，進而支援不同部門間的資訊關聯，如資損問題涉及的安保和物業部門、訪客問題涉及的安保和人力部門等。
3.8 智慧樓宇業務操作示例
大規模傾斜攝影
我們引擎還提供了大規模和高精度渲染的能力，以支援城市級空間數字渲染。基于我們的3D引擎，我們提供了從建築到城市不同規模尺度的底圖渲染能力，在3D渲染和互動方面，我們通過實時IBL(Image Based Lighting)、動态紋理、PBR、考慮順序的半透明、Cascaded Shadow Mapping等技術讓整個建築物乃至建築群更自然、真實地呈現和操作。下面展示了我們渲染杭州市區120平方公裡區域的傾斜攝影模型，模型精度5cm内，總資料規模為738GB，能夠在PC和部分手機端流暢運作。
3.9 智慧城市業務杭州主城區傾斜攝影模型展示
四、未來展望
未來，我們将會完善全息店鋪和空間資産管理平台上的互動和開發模式。
一方面，我們引擎将推動全息店鋪服務SaaS化，為我們的合作方優化3D編輯中台互動，提升使用者體驗。此外，我們還将制定3D數字店鋪資料規範，包括場景資料規範、3D内容資料規範，友善其他室内掃描服務商、AR/VR内容服務商接入平台，搭建我們自己的3D内容素材庫及生産平台，進一步豐富店鋪線上3D營運工具，提升營運轉化率和産品價值。
另一方面，我們會繼續沉澱空間資産管理平台的技術能力，搭建空間資産管理開發平台，為開發者提供更多IoT的3D渲染及控制邏輯，和材質樣式、互動邏輯、場景動畫等更豐富的編輯功能。我們也将會推動人工智能實驗室BIM翻模、高精路網、傾斜攝影等資料服務無縫接入我們的開發平台，如為BIM翻模提供輕量化引擎、為高精路網提供線上編輯中台，為客戶提供資料服務及平台搭建的全套解決方案。
歡迎掃碼加入社群