作者 | 彭安（子奂）
業務背景
日益增長的資料中心（Internet Data Center，簡稱 IDC）規模和逐年增加的自建機房數量，對 IDC 資源管控、運維等工作提出了更高要求。以資料可視化為基礎，結合 3D 可互動場景的數字孿生應用便應運而生。為滿足不斷發展的業務與技術需要，我們提出了一套 IDC 數字孿生産品的系統性解決方案。本文主要從技術角度進行分享，介紹相關的技術方案與實作，相關設計方案更多分享詳見文末。
方案構成
業務架構
經過對線下 IDC 進行實地走訪考察，結合日常運維管理的核心訴求和應用手段，我們拆解出 IDC 數字孿生應用的層級、脈絡，得到 區域 - 機房 - 包廂 - 裝置 四級業務鍊路。同時考慮各層級的展現、互動形式，整理出一系列需求和對應功能點：
技術方案
為實作以上需求，兼顧 web 端業務的特性，我們設計并提出了一套三維互動式應用的技術方案：
方案的特色和要點主要有：
（1）光源（Light）、物體（Mesh）、資料（Data）能夠在多個場景複用
（2）視圖切換功能通過 場景（Scene）與相機（Camera）兩兩組合産生使用者界面（即使用者看到的畫面）
（3）在相機互動（Camera Control）層實作使用者互動的功能封裝，如：點選、拖拽、縮放等
三維應用架構
依照前面提出的技術方案，我們實作了一套适用于數字孿生業務的三維互動式應用架構（IDC 3D Drama）
其主要功能特性如下：
（1）開放能力 & 業務驅動
- 基于 ThreeJS 封裝，支援與 ThreeJS 能力同構
- 配置化編碼風格，适用于業務驅動的開發模式
（2）高效還原
- 圖形仿真和渲染優化，追求視覺還原和 web 性能統一
- 多領域業務資源庫，快速還原業務形态
（3）快速內建
- 子產品式引用，對前端工程、環境無特殊要求
- 按需加載和内部受控，天然支援 PWA
業務元件
為了實作業務的快速開發和落地，我們對 IDC 業務中的模型、資源進行整理，并結合代碼層面的包裝，開發了一系列的基礎元件。
下圖所示為 通用機列元件 的運作效果，元件通過資料驅動的方式進行實時渲染，在業務開發中可以通過顯式的配置和指令調用實作業務圖形編排。業務元件的開發、積累也是後續建構數字孿生應用 可視化建構 能力的重要内容。
技術原理
前端應用狀态
為了與現有的前端技術棧、工具鍊保持統一，數字孿生應用的實作本質上是在 React SPA 基礎上進行的二次開發和擴充。這裡對後文中反複提到的兩個概念作出定義（僅限于本文）：
SPA 應用：即當下的 React SPA
三維應用：基于前文的三維應用架構實作的應用執行個體，一個執行個體包含了多個場景、相機、圖形、資料源等内容，詳細概念可參考 THREE 官網文檔。
在前端單頁面應用（SPA）中，我們一般通過前端路由及其參數來控制内容“頁面”的切換，路由執行個體化後的 url 與頁面的關系往往是一一對應的。
而在數字孿生應用的實作上，還需要考慮和解決幾個問題：
（1）主視覺的運作周期。即三維應用在使用者首次通路應用頁面時啟動，在使用者關閉頁面時及時登出以釋放資源；
（2）主視覺的 跨頁面 運作。即三維應用的運作不應受頁面切換、應用狀态更新的影響；
（3）主視覺與頁面、應用的 雙向通信。應用、頁面的狀态更新可以驅動三維應用的變化（圖形節點增減、動效等），反之，三維應用的變化也能作用于應用、頁面的更新（資料圖表、文本内容變化等）。
為此，在技術實作上需保證三維應用與 SPA 在運作時的有效隔離（邏輯上的解耦），同時需要一個中間層來實作兩者間的通信（這裡實作為一個狀态機）。
使用者互動
三維應用的使用者互動主要與“相機”有關，基于 THREE 自帶的射線檢測、相機控件等能力實作了相應功能。同時考慮在業務實作上的易用性，在架構層實作了 onClick onDoubleClick onMousover 等更符合業務消費習慣的事件類型，通過回調的形式進行使用。
舉例：通過處理 onMouseover 回調實作滑鼠經過物體時的光标變化：
代碼實作
運作效果
業務元件的實作 & 使用
業務元件是業務開發的原子物料，在業務開發中，應盡量通過組合、配置和定制化的方式來實作業務邏輯。為此，我們定義了一套基本的生命周期和API，所有的業務元件的實作均需要滿足此方案（實際操作層面，通過基類的封裝和繼承、擴充來達到此效果）：
以上文中提到的 通用機列 元件為例，在業務實作中的具體用法如下：
視覺還原
在視覺方案上使用了風格更為明快的 “三維白模” 效果，為了能夠實作場景的 “像真” 和圖形細節輪廓的完整還原，還需要使用到一定的光效、投影和後期（Directinal Light、Shadow Map、SAO、FXAA 等）。下圖所示為圖像處理的前後對比，通過對光源投影、後期效果的使用和不斷調優，最終還原出較為理想的視覺效果。
其他優化
除上文所闡述内容以外，在實際的業務開發中還有很多需要考慮的因素和解決的問題：
- 應用性能（模型體積、加載政策、裝置狀态、網絡環境）
- 多端适配（移動端互動适配、浏覽器全屏等問題）
- 大屏傳遞（投屏場景下的大屏操控方案）
篇幅原因，這裡不再展開介紹，歡迎大家交流讨論。
案例展示
📢 📢 由于微信不支援浏覽外部連結，建議在浏覽器通路
案例01 - IDC 數字孿生（杭州仁和機房）
PC端 - 線上位址：
https://market.m.taobao.com/app/txddp/idc-digital-twin-pr/index.html移動端 - 請掃二維碼↓
案例02 - “無影” 線上體驗
注：此案例與為“無影”雲電腦的體驗落地頁，在技術實作上直接使用了本文的方案https://apsara-stack.aliyun.com/experience-camp/streaming
規劃與展望
不久的将來，計劃從應用、工具、資源三個層面，不斷補齊、完善生産資料和相關工具鍊，打造一站式的數字孿生應用解決方案，為 IDC 裝置運維、資源監管等業務落地和快速實踐提供穩定的能力。
面對業務的發展，相信未來會有更多可以探索的機會和實際運用的場景，如資料中心運維、線下服務體驗、智能 IOT 裝置運維等，我們期望通過在 IDC 數字孿生領域建設系統性的解決方案，形成規模化的持續傳遞能力，最終助力新基建背景下 “雲” 的發展。
歡迎交流：[email protected]