如何使用JavaScript開發(fā)AR(增強現(xiàn)實)移動應(yīng)用?

Jyadmin 提交于 周一, 09/23/2019 - 17:29

?

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

如今我們可以僅僅憑借JavaScript技能,就能開發(fā)一個支持增強實現(xiàn)的移動應(yīng)用了。使用的工具是React-Native + ViroReact.

React-Native在國內(nèi)早已不是一個新技術(shù)了。區(qū)分于另一種通過JavaScript語言開發(fā)移動應(yīng)用的Cordova開源項目,React Native產(chǎn)出的并不是運行在移動設(shè)備操作系統(tǒng)的WebView控件里這種混合應(yīng)用,而是一個真正的原生移動應(yīng)用,所使用的基礎(chǔ)UI組件和原生應(yīng)用完全一致。從用戶體驗上來說,React-Native打包而成的原生應(yīng)用給終端用戶的使用感受同用Objective-C或Java編寫的原生應(yīng)用相比幾乎無法區(qū)分。

ViroReact, 是基于React-Native的一個開發(fā)庫,給React-Native的開發(fā)人員提供了一種通過JavaScript語言開發(fā)跨平臺的支持AR的原生移動應(yīng)用的手段。

盡管在React-Native項目里引入ViroReact的依賴只需要一行代碼,但這只是冰山一角:

?

在React-Native項目里引入ViroReact的依賴

?

我們打開一個聲明了如上依賴的React-Native應(yīng)用,npm install安裝依賴后,在node_modules文件夾下面能看見ViroReact的實現(xiàn)。

ViroReact官網(wǎng)里聲稱的一次編寫,到處運行的特性也體現(xiàn)在這:ViroReact提供了一個跨iOS和Android平臺的高性能3D渲染引擎,分別基于iOS的ARKit和Android的ARCore.

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

在ViroReact庫文件夾下的android子文件夾內(nèi),我們看到了名為arcore的文件夾。那么要使用ViroReact,我們得先了解ARCore是個什么東西。

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

1. Motion Tracking - 運動跟蹤

2.?Environmental understanding - 環(huán)境識別

3. Light estimation - 光源估算

Motion Tracking -?運動跟蹤

當我們移動Android手機時,ARCore使用一個稱為COM(Concurrent Odometry & Mapping,并行測距映射)的進程,結(jié)合手機硬件傳感器,來確定手機在真實世界的準確位置和姿勢。當真實世界的景物出現(xiàn)在手機攝像頭里并發(fā)生位移變化后,ARCore使用一系列算法標注出圖像上的特征點,并基于這些特征點來計算位置的變化。

?

Motion Tracking -?運動跟蹤

?

手機攝像頭捕捉到的視覺信息,結(jié)合手機設(shè)備中慣性測量單元(Inertial?Measurement?Unit,簡稱IMU,由三個單軸的加速度計和三個單軸的陀螺儀組成)測量出的慣性測量值進行綜合計算,就能渲染出攝像頭內(nèi)的虛擬物體,并確保隨著時間推移和手機的位移變化,在現(xiàn)實世界中位置和朝向也能跟著變化的效果。

Environmental understanding - 環(huán)境識別

一系列出現(xiàn)在攝像頭中的真實世界里水平面或者垂直面(比如桌子表面或者墻壁)上的特征點,都是ARCore試圖識別環(huán)境的輸入。ARCore以這些特征點為輸入,識別出真實世界的平面和邊界信息之后,就能允許開發(fā)者通過編程的方式,在這些識別出的平面上放置一些虛擬物體。

Light estimation - 光源估算

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

好消息是,ARCore具有探測真實環(huán)境下的光照信息,開發(fā)者可以通過ARCore捕獲到出現(xiàn)在攝像頭里的真實世界的平均光照強度,從而將這些光照信息投射給虛擬物體,進一步增加其真實感。