全真3D實踐: 云網(wǎng)絡體驗館

2022-11-15    seo達人

云網(wǎng)絡 · 產(chǎn)品體系可視化

來到云網(wǎng)絡體驗館,看到的是整個云網(wǎng)絡核心架構的速寫圖景 —— 云上網(wǎng)絡、跨地域、混合云。
抽象的云網(wǎng)絡產(chǎn)品體系在這里被具象化,吸引用戶去深入探索云網(wǎng)絡。

我們通過三維探索的體驗方式,用視覺、動畫、空間去講述云網(wǎng)絡抽象的業(yè)務架構,幫助用戶從立體視角,去直觀的領略云網(wǎng)絡產(chǎn)品的功能與架構。
多場景間無縫切換銜接,單場景內沉浸式體驗:

圖片

— 探索云上網(wǎng)絡

 

圖片

— 探索跨地域網(wǎng)絡

 

圖片

— 探索混合云網(wǎng)絡

 

云網(wǎng)絡 · 產(chǎn)品形象設定

由于用戶終端硬件性能差異會很大,所以Web端的Run-time 3D體驗對性能優(yōu)化,模型的設計都有專業(yè)要求。
3D渲染要盡可能的降低性能消耗,同時兼顧產(chǎn)品體系可視化的美觀與識別性。所以我們對16個云網(wǎng)絡產(chǎn)品,在云產(chǎn)品形象、REAL 3D 產(chǎn)品模型資產(chǎn)庫V1.0的基礎上,進一步優(yōu)化升級了視覺設定。
以負載均衡的產(chǎn)品形象設定為例:

圖片

 

云網(wǎng)絡 ·  REAL 3D技術沉淀

動畫路由 (Animation Router)

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

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

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

 

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

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

圖片

— 模型面數(shù)優(yōu)化+合并、背面剔除(Backface Culling),以及烘焙

為了控制每一幀顯卡GPU進行渲染批次DrawCall的次數(shù),我們通過REAL 3D圖形合并能力,將動畫邏輯類似的三維元素進行合并渲染,最終平均渲染批次從平均50次每幀降為平均30次每幀。

圖片

— 實例合并渲染、DrawCall與性能控制

 

多終端性能適配 (Adaptive Rendering)

本次體驗館上線到阿里云官網(wǎng),面對性能各異的消費級電腦,我們準備了多套性能適配方案。全真3D對設備支持情況進行硬件與GPU的檢測,適配跨度從Fallback到四層性能分層,以控制渲染畫布的精細度(DevicePixelRatio)與渲染幀率(Adaptive FrameRate)。

圖片

全真3D致力于云產(chǎn)品架構可視化,與升維下一代云產(chǎn)品管控體驗。
整個云網(wǎng)絡體驗館,協(xié)同產(chǎn)品運營與前后端工程師,阿里云設計中心的設計師完成了從體驗維度(業(yè)務邏輯、體驗設計)、視覺維度(界面、模型資產(chǎn))、到技術維度(3D圖形開發(fā))的快速建構。
設計的邊界,可能存在于我們不滿足于現(xiàn)狀,而偏執(zhí)探尋的下一種可能里。

 


作者:阿里云設計中心
轉載請注明:學UI網(wǎng)》全真3D實踐: 云網(wǎng)絡體驗館

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。


藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔