作者 | 徐新宇
Fidelity Labs介紹
當下元宇宙概念火熱，各類商業巨頭正在搶占市場，很多元宇宙産品也應運而生。而沉浸感和去中心化是元宇宙的兩個核心要素。可預見不遠的未來，VR和AR的各類應用會在元宇宙開花。那如何快速去實作一個VR應用呢，AWS給了我們一些靈感，那就是我們可以通過Amazon Sumerian實作VR/AR場景。
上圖是富達實驗室（Fidelity Labs），富達投資（Fidelity Investments）旗下的金融科技孵化器的孵化項目，通過VR技術給金融行業使用者帶來具有資料可視化的托管VR體驗。
利用虛拟形象+文本轉換對于金融走勢進行播報，并通過預輸入的手勢提供更強的場景感以及情感的渲染。通過VR技術使資料立體化、虛拟化。
看起來非常高大上的效果使用了3D可視化技術、Webgl技術、3D模組化技術、虛拟人技術、NLP（自然語言處理）技術、VR技術、文字語音轉換技術等。
那是不是意味着這種項目的開發是遙不可及的呢？當然不是，我們将通過Amazon Sumerian來實作個簡易版Fidelity Labs demo。
使用Amazon Sumerian建立場景
上面說到通過Amazon Amplify+Amazon Sumerian我們也可以快速實作類似這樣的Web/APP端VR應用，那什麼是Amazon Sumerian？
Amazon Sumerian采用最新的WebGL和WebXR标準，能直接在Web浏覽器中營造沉浸式體驗、在幾秒鐘内通過簡單的URL進行存取，還能夠在專為AR/VR設計的主流硬體平台上執行。建立一次場景就可以部署到任何地方。
它在使用起來比一些專業的平台，像3Dmax、ue4、U3D會削減一部分功能。但是他的上手難度更低，輕量級的核心子產品使得很多前端工程師了解一些基礎3D知識也能快速上手。
Sumerian還提供包括簡單形狀、3D模型、Hosts、紋理和腳本的庫，與虛拟現實（VR）相關的資産包，和為iOS和Android裝置開發增強現實（AR）應用程式的模闆、資産和示例項目，友善快速開發。
那麼我們可以實作很多能力拓展比如3DWeb、擴增實境、虛拟實境、教育訓練模拟、生産制造場景應用+案例。最重要的是它基于Web，可拓展性和适應性就變得非常的好。
下面我們通過一個簡單的例子來實作一個簡易版VR應用，建立具有 Sumerian資産庫、狀态機動畫并支援虛拟現實（VR）的場景。然後導入到Amazon Amplify建立的應用中實作閉環。
建立項目
由于 Amazon Sumerian不要求具有3D圖形制作或程式設計經驗即可建構豐富的互動式VR和AR場景，是以讓我們來快速使用Sumerian儀表闆建立項目。
在 Sumerian儀表闆中，隻需按下按鈕即可輕松建立一個新場景。
新場景的預設視圖會打開并顯示在Sumerian編輯器中。在編輯器中打開剛建立的場景後，就可以将assets輕松導入我的場景中。
導入Host
下一步從Sumerian庫導入Host。Host是Sumerian提供的具有内置動畫并支援語音的角色模型。
1、選擇Import assets（導入資源）
2、選擇Cristine然後，選擇添加
當資産包完成加載後，将Host實體從Asset（資産）面闆拖動到畫布中，然後配置行為。
我們可以通過将腳本或狀态機元件附加到實體來向場景中添加行為。
利用狀态機，可以通過選擇事件所觸發的操作并将其組織成狀态來以可視化方式添加行為。将狀态機添加到Cristine實體來對它及其子級進行動畫處理。
比如我們想控制人物的模型變化，那就可以使用狀态機對Cristine進行動畫處理。
1、在實體面闆中選擇Cristine
2、在檢查器面闆中，選擇添加元件。然後選擇Statemachine（狀态機）
3、單擊行為字段旁邊的加号來建立新行為。将它命名為animate
這些區域有：狀态機面闆将顯示，其中具有單個狀态。将狀态命名為up，然後選擇添加操作
4、RELATEAnimate中，選擇T間旋轉。應用以下屬性：
- Z 旋轉–-24
- 相對— 已禁用
- Time–1000
- 緩變類型–線性
- 方向–In
5、選擇添加操作，然後添加一個Wait (等待)action.應用以下屬性：
- Time–2000
- 随機–0
6、在狀态機面闆中，選擇複制狀态複制up。輕按兩下新狀态來在檢查器面闆中打開它
7、将它的名稱更改為down，然後将旋轉值從-24到0
8、在狀态機面闆中，每個狀态顯示了兩個事件，一個事件在動畫結束時發生，另一個事件在等待操作結束時發生。單擊等待結束事件up，然後将一條線拖動到沿向下狀态。然後反方向執行相同的操作
這樣一個簡單動畫就完成了。
為Host配置語音
然後我們給人物增加語音，在畫布或實體面闆中選擇Host：
1、RELATE語音中，将一些文本檔案放置到語音字段上
2、為Host選擇語音
3、為Host添加腳本元件
4、單擊腳本字段旁邊的加号，然後選擇Custom（自定義）
5、單擊腳本執行個體參數中的編輯（鉛筆圖示）來在文本編輯器中打開腳本。您還可以按J鍵來
6、随時打開文本編輯器
7、輕按兩下腳本名稱（Script）中的文檔清單來将名稱更改為RandomSpeech
8、将占位符setup函數替換為以下代碼：
此腳本會等待AWS開發工具包加載并檢索憑證。然後，它會擷取對同一實體 （Host）上的語音元件的引用，并擷取所有附加的語音清單。它從數組中選擇語音并進行播放。
傳回到語音元件，然後單擊每個語音檔案旁邊的來添加手勢标記。這樣我們也可以通過自帶的手勢動畫，讓人物一邊講話一邊揮動手勢。
添加VR模式
到現在為止，我們隻在播放模式下使用了标準錄影機。接下來我們添加虛拟現實 （VR）裝置可讓使用者使用VR耳機和頭部跟蹤在3D中檢視場景。
1、選擇Import assets（導入資産），然後将CoreVR資産包添加到您的場景中
2、當資産包完成加載後，将VRCamerARig實體拖動到畫布上以将它添加到您的場景中
3、選擇VRCamerARig 實體
4、選擇VRCamerARig元件
5、選擇目前VRCamerARig選項來啟用此裝置
6、取消選中從目前錄影機開始選項。這樣，當使用者進入VR模式時，能夠使用場景中所放置的錄影機裝置，而不是使用非VR錄影機的位置
7、在實體面闆中，将VRCamerARig實體拖動到Cristine實體上以使其成為user 錄影機的同級
8、選擇user相機。單擊Transform（變換）部分中的齒輪圖示，然後選擇Copy（複制）來複制變換值
選擇相機照相機。單擊Transform（變換）部分中的齒輪圖示，然後選擇Paste （粘貼）來粘貼user錄影機中的變換值
10、使用綠色變換搖桿來調整VR錄影機相對于Cristine的高度
調試完成後我們的場景就制作完成了。
釋出場景
單擊Sumerian控制台右上角的釋出下拉菜單，然後單擊私下托管：
如果您的場景已經公開釋出，您将需要使用以下說明取消釋出然後再次釋出。
然後将提示您顯示以下對話框。點選釋出按鈕：
現在單擊下載下傳JSON配置按鈕以下載下傳将用于在Amazon Amplify中配置您的場景的場景配置JSON：
Amazon Amplify建立應用并導入配置
我們已經完成了一個場景的搭建，但是目前還缺少載體應用去展示我們的VR場景。接下來我們會使用Amazon Amplifyy去搭建應用。
Amazon Amplify是一組專門建構的工具和服務，使前端Web和移動開發人員可以快速、輕松地在AWS上建構全堆棧應用程式，并可以靈活地利用廣泛的AWS 服務進一步定制應用程式。Amplify支援針對Web應用程式的JavaScript、React、AngulAR、Vue和Next.js，以及針對移動應用程式的Android、iOS、React Native、Ionic和Flutter。友善快速的搭建一個應用，把想法進行轉換。
我們用簡單幾步，通過Amazon Amplify 5分鐘啟動一個應用：
1、檢查環境
通過在終端/控制台視窗中運作node -v 和npm -v，驗證您至少運作的是 Node.js版本12.x以及npm版本6.x或更高版本。我這裡node版本14.15.4和npm版本6.14.10。
2、電腦安裝aws amplify腳手架 ，類似于vue/cli
npm install -g @aws-amplify/cli
3、配置Amplify
amplify configure
打開浏覽器并登入AWS控制台建立IAM使用者
4、建立一個react前端應用
npx create-react-app amplify-vr-app
cd amplify-vr-app
5、然後初始化項目，逐漸按預設需配置
amplify init
6、安裝Amplify React庫@amazon-amplify/ui-react (包含 React UI 元件)
npm install@amazon-amplify/ui-react
7、為應用程式建立前端。打開src/App.js file檔案并将其全部内容替換為以下代碼：
本地啟動服務後，效果展示：
npm start
是不是非常快速！除此之外AWS提供了Amazon Amplify Studio，允許開發人員使用最少的編碼在AWS上快速建構Web應用程式。而且AWS不僅建立應用快，并且全流程全棧生态鍊條。保證品質與研發進度的平衡。
設定配置
應用啟動後，我們要将場景跑入到應用中，首先我們通過amplify add xr添加XR子產品包，CLI将提示XR類别的配置選項，例如場景名稱辨別符和Sumerian 場景json配置檔案。
XR類别将設定并利用Authentication類别來設定場景授權。
記下您在CLI提示中提供的場景名稱。在架構中使用XR類别時，此值将用作場景的辨別符。
配置XR選項後更新amplify push。
期間顯示的XR資源amplify push代表為場景建立的IAM政策。這不會更改 Sumerian控制台中顯示的場景。一個名為的配置檔案aws-exports.js将被複制到您配置的源目錄中，例如./src. 該檔案将包含您配置的所有場景的清單。
導入現有的 XR 資源
将以下代碼添加到您的應用程式以配置XR類别：
您可以向場景配置添加可選的釋出參數：
配置前端：
有關在Amplify項目中使用amplify xr Amplify CLI類型的更多資訊可以使用amplify xr help指令。
場景使用
XR 類别允許使用方法将 Sumerian場景渲染為DIVHTML元素loadScene。加載場景後，XR.stARt方法将啟動場景。要渲染場景，請在方法調用中傳遞場景名稱和元素的id：
此外，您可以将Sumerian Scene UI元件用于開箱即用的UI解決方案。
開發-傳遞-管理全流程全棧鍊條及周邊服務
實際上我們現在已經實作了一個簡易的FidelityLabs demo。如果我們想繼續完善整個開發鍊路呢，比如Web端或者後端的補充完善等等？Amazon Amplify當然是支援的
AWS Amplify的完整生态中一個重要組成部分就是他的開發-傳遞-管理全流程全棧鍊條。
包含但不限于Amplify指令行界面(CLI)、Amplify UI Components 、Amplify庫、Amazon Amplify控制台等子產品。
我們可以根據個人喜好、習慣。實際項目中使用Amazon Amplify Studio 的簡單點選式可視化界面或者Amplify指令行界面(CLI)來建立我們的後端，Amazon Amplify會自動預置AWS服務（例如亞馬遜用于身份驗證的Cognito， 亞馬遜 用于資料庫的DynamoDB， 亞馬遜用于存儲的S3等）。一旦提供了這些服務，我們就可以使用Amazon Amplify Studio建立Web應用程式。
那麼對于UI層群組件層，AWS提供類似業内的antd、element、vant這種的UI庫。但更貼切的是，AWS還配套了一個Amplify庫，友善調用一些函數能力。甚至AWS還提供了低代碼解決方案。
這就意味着我們可以使用預先建構的UI元件庫建構UI，将來自AWS服務的資料或功能整合到UI中，并通過與Figma（一種用于設計和原型UI的流行工具）的內建與UX設計師協作——所有這些都無需編寫任何代碼。UI完成後，Amazon Amplify Studio自動将其轉換為JavaScript或TypeScript代碼，是以我們可以靈活地完全自定義應用程式的設計或行為，以提供最佳的最終使用者體驗，同時提高研發的效率。
除了上面可以快速制作3D VR應用，AWS還孵化了AmazonLumberyARd開放3D引擎。這種更适合更加專業的工程師進行差異化開發。
這就意味着我們可以實作一個demo，但不僅僅隻能實作一個demo。
除了XR能力集以外，Amazon Sumerian生态周邊還有其他的服務、如aws AI、aws ML（沉浸式機器學習）、aws geo、aws機器人等等。
這就意味着，我們可以通過AWS能力的插拔式組合去快速的搭建一個沉浸式應用。
後疫情時代，線上辦公、線上參會的常态成為了可能。我們可以通過Amazon Location Service建立一個沉浸式參會應用。讓觀衆線上上得到身臨其境的沉浸式體驗，将線下論壇的盛況在雲端實作了數字孿生。
通過Amplify Geo Amazon Sumerian進行整合，我們就可以實作3D的導航，比如大型展廳參會導航應用，除了提供地圖+3D實景。還可以通過Al+ML+機器人進行一個參會的講解。通過NPL自然語言處理，可以處理參會人員交流中的情感回報，對于大會滿意度衡量名額提供資料集合。
并可以為與會者提供有關路線、位置、距離和預估通勤時間等準确資訊。這樣無論是線上線下參會，都可以提供差異化的服務。