如何使用JavaScript開發AR(增強現實)移動應用 (一)Motion TrackingEnvironmental understanding - 環境識别Light estimation - 光源估算

本文封面配圖是去年Jerry看的一部電影《異形：契約》的劇照。

所謂AR(Augmented Reality), 即增強現實，是一種将通過計算機渲染出的虛拟圖像與真實世界巧妙融合的手段，背後廣泛運用了多媒體、三維模組化、實時跟蹤、智能互動、傳感等多種計算機技術，将程式代碼生成的文字、圖像、三維模型、音樂、視訊等虛拟資訊模拟仿真後，顯示在終端使用者通過移動裝置的攝像頭觀察到的真實世界中，虛拟和真實的兩種世界互為補充，進而讓終端使用者感受到真實世界被“增強”的體驗。

前端開發者的一個福音，就是如今我們可以僅僅憑借JavaScript技能，就能開發一個支援增強實作的移動應用了。使用的工具是React-Native + ViroReact.

下面這個視訊是Jerry的同僚，SAP成都研究院數字創新空間的開發工程師Leo Wang用React-Native加上ViroReact的組合做的一個小例子：

React-Native在國内早已不是一個新技術了。區分于另一種通過JavaScript語言開發移動應用的Cordova開源項目，React Native産出的并不是運作在移動裝置作業系統的WebView控件裡這種混合應用，而是一個真正的原生移動應用，所使用的基礎UI元件和原生應用完全一緻。從使用者體驗上來說，React-Native打包而成的原生應用給終端使用者的使用感受同用Objective-C或Java編寫的原生應用相比幾乎無法區分。

ViroReact, 是基于React-Native的一個開發庫，給React-Native的開發人員提供了一種通過JavaScript語言開發跨平台的支援AR的原生移動應用的手段。

官網：

https://docs.viromedia.com/docs/viro-platform-overview

盡管在React-Native項目裡引入ViroReact的依賴隻需要一行代碼，但這隻是冰山一角：

我們打開一個聲明了如上依賴的React-Native應用，npm install安裝依賴後，在node_modules檔案夾下面能看見ViroReact的實作。

ViroReact官網裡聲稱的“一次編寫，到處運作“的特性也展現在這：ViroReact提供了一個跨iOS和Android平台的高性能3D渲染引擎，分别基于iOS的ARKit和Android的ARCore.

因為Jerry平時使用的是Android手機并且是一個Android粉，是以本文着重介紹ARCore.

在ViroReact庫檔案夾下的android子檔案夾内，我們看到了名為arcore的檔案夾。那麼要使用ViroReact，我們得先了解ARCore是個什麼東西。

ARCore是Google為Android提供的開發AR原生應用的一個平台, 以SDK的方式，為開發者提供了AR應用必需的三大功能：

1. Motion Tracking - 運動跟蹤
2. Environmental understanding - 環境識别
3. Light estimation - 光源估算

Motion Tracking

當我們移動Android手機時，ARCore使用一個稱為COM(Concurrent Odometry & Mapping，并行測距映射)的程序，結合手機硬體傳感器，來确定手機在真實世界的準确位置和姿勢。當真實世界的景物出現在手機攝像頭裡并發生位移變化後，ARCore使用一系列算法标注出圖像上的特征點，并基于這些特征點來計算位置的變化。

大家看前文Leo視訊中在攝像頭裡顯示的特斯拉汽車，能發現随着手機位置的變化，汽車在攝像頭裡顯示的3D形象也随之變化，仿佛是一個存在于真實世界中的物體一樣。這種效果就是ARCore的功勞：手機攝像頭捕捉到的視覺資訊，結合手機裝置中慣性測量單元(Inertial Measurement Unit，簡稱IMU，由三個單軸的加速度計和三個單軸的陀螺儀組成)測量出的慣性測量值進行綜合計算，就能渲染出攝像頭内的虛拟物體，并確定随着時間推移和手機的位移變化，在現實世界中位置和朝向也能跟着變化的效果。​

一系列出現在攝像頭中的真實世界裡水準面或者垂直面(比如桌子表面或者牆壁)上的特征點，都是ARCore試圖識别環境的輸入。ARCore以這些特征點為輸入，識别出真實世界的平面和邊界資訊之後，就能允許開發者通過程式設計的方式，在這些識别出的平台上放置一些虛拟物體。

我們在攝像頭裡觀察到的真實世界的所有物體，無不被各種強弱各異的光線所籠罩，進而形成灰階不一的陰影效果。如果通過代碼投射到真實世界裡的虛拟物體，不支援這種被光源照射的陰影效果，則虛拟物體的逼真程度會大打折扣。

好消息是，ARCore具有探測真實環境下的光照資訊，開發者可以通過ARCore捕獲到出現在攝像頭裡的真實世界的平均光照強度，進而将這些光照資訊投射給虛拟物體，進一步增加其真實感。

一個SDK就支援這麼多強大的功能，谷歌不愧是谷歌啊!

支援ARCore的Android手機型号清單，可以從Google官網獲得：

https://developers.google.com/ar/discover/supported-devices

在三星應用商店或者騰訊應用包裡搜尋ARCore并下載下傳：

安裝之後，我們就可以開始用ViroReact進行應用開發了。請關注Jerry後續的文章來獲得技術細節。感謝閱讀。

本文來自雲栖社群合作夥伴“汪子熙”，了解相關資訊可以關注微信公衆号"汪子熙"。