如何使用JavaScript開發AR(擴增實境)移動應用 (一)

注销發表於2019-10-12

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

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


如何使用JavaScript開發AR(擴增實境)移動應用 (一)


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

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

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


如何使用JavaScript開發AR(擴增實境)移動應用 (一)


ViroReact, 是基於React-Native的一個開發庫,給React-Native的開發人員提供了一種通過JavaScript語言開發跨平臺的支援AR的原生移動應用的手段。
官網: https://docs.viromedia.com/docs/viro-platform-overview


如何使用JavaScript開發AR(擴增實境)移動應用 (一)


儘管在React-Native專案裡引入ViroReact的依賴只需要一行程式碼,但這只是冰山一角:


如何使用JavaScript開發AR(擴增實境)移動應用 (一)


我們開啟一個宣告瞭如上依賴的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是個什麼東西。


如何使用JavaScript開發AR(擴增實境)移動應用 (一)


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

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


如何使用JavaScript開發AR(擴增實境)移動應用 (一)


Motion Tracking

當我們移動Android手機時,ARCore使用一個稱為COM(Concurrent Odometry & Mapping,並行測距對映)的程式,結合手機硬體感測器,來確定手機在真實世界的準確位置和姿勢。當真實世界的景物出現在手機攝像頭裡併發生位移變化後,ARCore使用一系列演算法標註出影象上的特徵點,並基於這些特徵點來計算位置的變化。


如何使用JavaScript開發AR(擴增實境)移動應用 (一)


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

Environmental understanding - 環境識別

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


如何使用JavaScript開發AR(擴增實境)移動應用 (一)


Light estimation - 光源估算

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

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


如何使用JavaScript開發AR(擴增實境)移動應用 (一)


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

支援ARCore的Android手機型號列表,可以從Google官網獲得:

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

在三星應用商店或者騰訊應用包裡搜尋ARCore並下載:


如何使用JavaScript開發AR(擴增實境)移動應用 (一)




如何使用JavaScript開發AR(擴增實境)移動應用 (一)


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

要獲取更多Jerry的原創文章,請關注公眾號"汪子熙":



如何使用JavaScript開發AR(擴增實境)移動應用 (一)


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2659433/,如需轉載,請註明出處,否則將追究法律責任。

相關文章