全真3D實踐: 云網絡體驗館

阿里云 · 云網絡在全球21個地域、63個可用區、120多個POP點、2800多個邊緣節點提供全球網絡服務。企業提供完善的云上網絡、跨地域網絡、混合云網絡產品體系，滿足不同場景的網絡需求，力爭拓寬設計的邊界，為科技商業化賦能。

此次「阿里云設計中心」云網絡體驗設計團隊攜手全真3D能力?(了解全真3D)，用專業的三維可視化，把抽象的云網絡產品體系轉化為感性易懂的可視具像。以WebGL的強大實時渲染能力，打造一個不限時空場地的在線體驗館。在全真3D不斷的迭代中，我們用圖形技術與設計增加產品價值。

①云網絡 · 產品體系可視化

來到云網絡體驗館，看到的是整個云網絡核心架構的速寫圖景 ——?云上網絡、跨地域、混合云。

抽象的云網絡產品體系在這里被具象化，吸引用戶去深入探索云網絡。

我們通過三維探索的體驗方式，用視覺、動畫、空間去講述云網絡抽象的業務架構，幫助用戶從立體視角，去直觀的領略云網絡產品的功能與架構。

多場景間無縫切換銜接，單場景內沉浸式體驗：

— 探索云上網絡

— 探索跨地域網絡

— 探索混合云網絡

②云網絡 · 產品形象設定

由于用戶終端硬件性能差異會很大，所以Web端的Run-time 3D體驗對性能優化，模型的設計都有專業要求。

3D渲染要盡可能的降低性能消耗，同時兼顧產品體系可視化的美觀與識別性。所以我們對16個云網絡產品，在云產品形象、REAL 3D 產品模型資產庫V1.0的基礎上，進一步優化升級了視覺設定。

以負載均衡的產品形象設定為例：

③云網絡 ·? REAL 3D技術沉淀

〇動畫路由 (Animation Router)

經過三維具象化后的云網絡核心架構，共有5大模塊共14個頁面。為了減少性能開銷和切換動畫流暢，所有這些頁面動畫都需要渲染在同一個 HTML <Canvas> 元素內，而非頁面跳轉。

基于全真3D的底層能力 —— GDS，我們為此設計并開發了一個支持URL路由的三維動畫架構管理模塊，將每個頁面的三維場景、動畫、和攝像機實現動畫變換和頁面路由的雙向綁定。當用戶在進入頁面或跳轉時，對這些動畫數值進行賦值和插值計算，以此實現動畫順滑過渡的路由管理。

— GDS：阿里云設計中心自研WebGL圖形技術能力，由豐富的WebGL代碼組件構成

〇低實例化合并渲染 (Less DrawCalls)

完成功能和動畫的開發之后，很重要的一步是渲染性能的優化，在計算與渲染里，實例越少，DrawCalls越少，意味著性能越高。首先是模型面數，在進行3D低面布線建模（Topology）并烘焙AO（Ambient Occlusion）貼圖后，我們對模型進行了低實例化合并，同時根據攝像機運動角度，我們還使用背面剔除（Backface Culling）提升模型渲染性能。