做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

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

2022-11-15    seo達人

云網絡 · 產品體系可視化

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

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

圖片

— 探索云上網絡

 

圖片

— 探索跨地域網絡

 

圖片

— 探索混合云網絡

 

云網絡 · 產品形象設定

由于用戶終端硬件性能差異會很大,所以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)提升模型渲染性能。

圖片

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

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

圖片

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

 

多終端性能適配 (Adaptive Rendering)

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

圖片

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

 


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

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


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


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

日歷

鏈接

個人資料

藍藍設計的小編 http://91whvog3.cn

存檔