javascript
如何使用JavaScript开发AR(增强现实)移动应用 (一)
本文封面配圖是去年Jerry看的一部電影《異形：契約》的劇照。
所謂AR(Augmented Reality), 即增強(qiáng)現(xiàn)實(shí)，是一種將通過計(jì)算機(jī)渲染出的虛擬圖像與真實(shí)世界巧妙融合的手段，背后廣泛運(yùn)用了多媒體、三維建模、實(shí)時(shí)跟蹤、智能交互、傳感等多種計(jì)算機(jī)技術(shù)，將程序代碼生成的文字、圖像、三維模型、音樂、視頻等虛擬信息模擬仿真后，顯示在終端用戶通過移動(dòng)設(shè)備的攝像頭觀察到的真實(shí)世界中，虛擬和真實(shí)的兩種世界互為補(bǔ)充，從而讓終端用戶感受到真實(shí)世界被“增強(qiáng)”的體驗(yàn)。
前端開發(fā)者的一個(gè)福音，就是如今我們可以僅僅憑借JavaScript技能，就能開發(fā)一個(gè)支持增強(qiáng)實(shí)現(xiàn)的移動(dòng)應(yīng)用了。使用的工具是React-Native + ViroReact.
下面這個(gè)視頻是Jerry的同事，SAP成都研究院數(shù)字創(chuàng)新空間的開發(fā)工程師Leo Wang用React-Native加上ViroReact的組合做的一個(gè)小例子：
React-Native在國內(nèi)早已不是一個(gè)新技術(shù)了。區(qū)分于另一種通過JavaScript語言開發(fā)移動(dòng)應(yīng)用的Cordova開源項(xiàng)目，React Native產(chǎn)出的并不是運(yùn)行在移動(dòng)設(shè)備操作系統(tǒng)的WebView控件里這種混合應(yīng)用，而是一個(gè)真正的原生移動(dòng)應(yīng)用，所使用的基礎(chǔ)UI組件和原生應(yīng)用完全一致。從用戶體驗(yàn)上來說，React-Native打包而成的原生應(yīng)用給終端用戶的使用感受同用Objective-C或Java編寫的原生應(yīng)用相比幾乎無法區(qū)分。
ViroReact, 是基于React-Native的一個(gè)開發(fā)庫，給React-Native的開發(fā)人員提供了一種通過JavaScript語言開發(fā)跨平臺(tái)的支持AR的原生移動(dòng)應(yīng)用的手段。
官網(wǎng)：https://docs.viromedia.com/docs/viro-platform-overview
盡管在React-Native項(xiàng)目里引入ViroReact的依賴只需要一行代碼，但這只是冰山一角：
我們打開一個(gè)聲明了如上依賴的React-Native應(yīng)用，npm install安裝依賴后，在node_modules文件夾下面能看見ViroReact的實(shí)現(xiàn)。
ViroReact官網(wǎng)里聲稱的“一次編寫，到處運(yùn)行“的特性也體現(xiàn)在這：ViroReact提供了一個(gè)跨iOS和Android平臺(tái)的高性能3D渲染引擎，分別基于iOS的ARKit和Android的ARCore.
因?yàn)镴erry平時(shí)使用的是Android手機(jī)并且是一個(gè)Android粉，所以本文著重介紹ARCore.
在ViroReact庫文件夾下的android子文件夾內(nèi)，我們看到了名為arcore的文件夾。那么要使用ViroReact，我們得先了解ARCore是個(gè)什么東西。
ARCore是Google為Android提供的開發(fā)AR原生應(yīng)用的一個(gè)平臺(tái), 以SDK的方式，為開發(fā)者提供了AR應(yīng)用必需的三大功能：
Motion Tracking
當(dāng)我們移動(dòng)Android手機(jī)時(shí)，ARCore使用一個(gè)稱為COM(Concurrent Odometry & Mapping，并行測距映射)的進(jìn)程，結(jié)合手機(jī)硬件傳感器，來確定手機(jī)在真實(shí)世界的準(zhǔn)確位置和姿勢。當(dāng)真實(shí)世界的景物出現(xiàn)在手機(jī)攝像頭里并發(fā)生位移變化后，ARCore使用一系列算法標(biāo)注出圖像上的特征點(diǎn)，并基于這些特征點(diǎn)來計(jì)算位置的變化。
大家看前文Leo視頻中在攝像頭里顯示的特斯拉汽車，能發(fā)現(xiàn)隨著手機(jī)位置的變化，汽車在攝像頭里顯示的3D形象也隨之變化，仿佛是一個(gè)存在于真實(shí)世界中的物體一樣。這種效果就是ARCore的功勞：手機(jī)攝像頭捕捉到的視覺信息，結(jié)合手機(jī)設(shè)備中慣性測量單元(Inertial Measurement Unit，簡稱IMU，由三個(gè)單軸的加速度計(jì)和三個(gè)單軸的陀螺儀組成)測量出的慣性測量值進(jìn)行綜合計(jì)算，就能渲染出攝像頭內(nèi)的虛擬物體，并確保隨著時(shí)間推移和手機(jī)的位移變化，在現(xiàn)實(shí)世界中位置和朝向也能跟著變化的效果。?
Environmental understanding - 環(huán)境識(shí)別
一系列出現(xiàn)在攝像頭中的真實(shí)世界里水平面或者垂直面(比如桌子表面或者墻壁)上的特征點(diǎn)，都是ARCore試圖識(shí)別環(huán)境的輸入。ARCore以這些特征點(diǎn)為輸入，識(shí)別出真實(shí)世界的平面和邊界信息之后，就能允許開發(fā)者通過編程的方式，在這些識(shí)別出的平臺(tái)上放置一些虛擬物體。
Light estimation - 光源估算
我們?cè)跀z像頭里觀察到的真實(shí)世界的所有物體，無不被各種強(qiáng)弱各異的光線所籠罩，從而形成灰度不一的陰影效果。如果通過代碼投射到真實(shí)世界里的虛擬物體，不支持這種被光源照射的陰影效果，則虛擬物體的逼真程度會(huì)大打折扣。
好消息是，ARCore具有探測真實(shí)環(huán)境下的光照信息，開發(fā)者可以通過ARCore捕獲到出現(xiàn)在攝像頭里的真實(shí)世界的平均光照強(qiáng)度，從而將這些光照信息投射給虛擬物體，進(jìn)一步增加其真實(shí)感。
一個(gè)SDK就支持這么多強(qiáng)大的功能，谷歌不愧是谷歌啊!
支持ARCore的Android手機(jī)型號(hào)列表，可以從Google官網(wǎng)獲得：
https://developers.google.com/ar/discover/supported-devices
在三星應(yīng)用商店或者騰訊應(yīng)用包里搜索ARCore并下載：
安裝之后，我們就可以開始用ViroReact進(jìn)行應(yīng)用開發(fā)了。請(qǐng)關(guān)注Jerry后續(xù)的文章來獲得技術(shù)細(xì)節(jié)。感謝閱讀。
要獲取更多Jerry的原創(chuàng)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙":
總結(jié)
以上是生活随笔為你收集整理的如何使用JavaScript开发AR(增强现实)移动应用 (一)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 抖音火山版创建圈子怎么弄
- 下一篇： gradle idea java ssm