如何使用JavaScript開發AR(加強現實)移動應用 (一)

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

所謂AR(Augmented Reality), 即加強現實，是一種將經過計算機渲染出的虛擬圖像與真實世界巧妙融合的手段，背後普遍運用了多媒體、三維建模、實時跟蹤、智能交互、傳感等多種計算機技術，將程序代碼生成的文字、圖像、三維模型、音樂、視頻等虛擬信息模擬仿真後，顯示在終端用戶經過移動設備的攝像頭觀察到的真實世界中。虛擬和真實的兩種世界互爲補充，從而讓終端用戶感覺到真實世界被「加強」的體驗。

前端開發者的一個福音，就是現在咱們能夠僅僅憑藉JavaScript技能，就能開發一個支持加強實現的移動應用了。使用的工具是React-Native + ViroReact.

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

https://v.qq.com/x/page/k0922pnusxp.html

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，由三個單軸的加速度計和三個單軸的陀螺儀組成)測量出的慣性測量值進行綜合計算，就能渲染出攝像頭內的虛擬物體，並確保隨着時間推移和手機的位移變化，在現實世界中位置和朝向也能跟着變化的效果。

Environmental understanding - 環境識別

一系列出如今攝像頭中的真實世界裏水平面或者垂直面(好比桌子表面或者牆壁)上的特徵點，都是ARCore試圖識別環境的輸入。ARCore以這些特徵點爲輸入，識別出真實世界的平面和邊界信息以後，就能容許開發者經過編程的方式，在這些識別出的平面上放置一些虛擬物體。

Light estimation - 光源估算

咱們在攝像頭裏觀察到的真實世界的全部物體，無不被各類強弱各異的光線所籠罩，從而造成灰度不一的陰影效果。若是經過代碼投射到真實世界裏的虛擬物體，不支持這種被光源照射的陰影效果，則虛擬物體的逼真程度會大打折扣。

好消息是，ARCore具備探測真實環境下的光照信息，開發者能夠經過ARCore捕獲到出如今攝像頭裏的真實世界的平均光照強度，從而將這些光照信息投射給虛擬物體，進一步增長其真實感。

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

支持ARCore的Android手機型號列表，能夠從Google官網得到：

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

在三星應用商店或者騰訊應用包裏搜索ARCore並下載：

安裝以後，咱們就能夠開始用ViroReact進行應用開發了。請關注Jerry後續的文章來得到技術細節。感謝閱讀。https://mp.weixin.qq.com/s/gLRJNoKJ8vqIFgYdM_WxFw