全真3D實(shí)踐: 云網(wǎng)絡(luò)體驗(yàn)館

2022-11-15    seo達(dá)人

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

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

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

圖片

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

 

圖片

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

 

圖片

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

 

②云網(wǎng)絡(luò) · 產(chǎn)品形象設(shè)定

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

圖片

 

③云網(wǎng)絡(luò) ·  REAL 3D技術(shù)沉淀

〇動畫路由 (Animation Router)

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

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

— GDS：阿里云設(shè)計(jì)中心自研WebGL圖形技術(shù)能力，由豐富的WebGL代碼組件構(gòu)成

 

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

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

圖片

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

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

圖片

— 實(shí)例合并渲染、DrawCall與性能控制

 

〇多終端性能適配 (Adaptive Rendering)

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

圖片

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

 


作者：阿里云設(shè)計(jì)中心
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》全真3D實(shí)踐: 云網(wǎng)絡(luò)體驗(yàn)館

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


分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

分享本文至：

日歷

鏈接

個(gè)人資料

存檔