筆者之前的文章 使用 JavaScript 開發AR(擴增實境)移動應用的預備知識和環境搭建，介紹了使用擴增實境開發庫 ViroReact 進行應用開發所需掌握的一些最基礎的概念和環境搭建步驟。

本文開始詳細介紹使用 ViroReact 進行編碼開發的技術細節。

按照本文步驟開發而成的應用效果，可以從下面兩個影片 demo 檢視：

- https://v.qq.com/x/page/o3003z9y4m7.html
- https://v.qq.com/x/page/q3003wozfve.html

這個擴增實境應用支援實時地更換特斯拉車身的顏色，能夠幫助使用者方便地檢視同一型號的特斯拉汽車，在不同車身顏色外觀下的不同視覺效果。

![](https://img-blog.csdnimg.cn/img_convert/dc46af2b5ca871b91e0b7986c8e2ffa9.png)

ViroReact 的[官網](https://docs.viromedia.com/docs/tutorial-ar)有一個步驟非常詳細的嚮導：

![](https://img-blog.csdnimg.cn/img_convert/05a35a46af4cf65d5331f6c115c48a90.png)

一步步照著做，最後就能透過手機攝像頭，在真實的場景裡能看到一個硬編碼的Hello World字串和一些 3D 物體。

![](https://img-blog.csdnimg.cn/img_convert/788d316270af59db763831799ec8e500.png)

這個 Hello World 級別的原始碼在ViroReact官網上能下載，大家可以下載到本地執行，跑通之後，就能繼續學習本文餘下部分介紹的技術細節了。

開啟基於 ViroReact 的 Node.js 專案，找到 package.json，專案名稱為ViroSample, 裡面宣告瞭對React-Native和React-viro的依賴。

![](https://img-blog.csdnimg.cn/img_convert/787dbe1ea7fd6a91c0c6e7aba578ca7d.png)

React-Native 加 ViroReact這套組合的妙處在於“一次編寫，到處執行”的跨平臺特性。編寫一次JavaScript程式碼，能在iOS和Android兩套作業系統裡以原生應用的方式執行。

以Android為例，執行命令列react-native start 加上react-native run-android 後，在android資料夾裡能找到針對Android平臺生成的原生應用部分原始碼。最重要的兩個應用引導檔案，一個是MainActivity.java, 透過回撥函式的方式返回了AR應用的專案名稱：

![](https://img-blog.csdnimg.cn/img_convert/88d6fe89f1ad9181d970cb24a0f6f34f.png)

MainApplication.java的getJSMainModuleName透過回撥函式的方式指明瞭JavaScript入口模組的名稱：

![](https://img-blog.csdnimg.cn/img_convert/5625e5d1e61466db5efcfadbfe21b8e4.png)

因為本文不是React-Native的講解文章，所以不深入闡述React-Native應用在Android平臺的啟動原理，感興趣的朋友可以自行搜尋。React-Native生態圈非常活躍，類似的原理分析文章數不勝數。

![](https://img-blog.csdnimg.cn/img_convert/9c231cc54a10c2ef5f43ffa61fe047c5.png)

React-Native + ViroReact開發的擴增實境應用，其典型實現套路Jerry歸納起來就三步：Match - Replace - Augment

# Match - 匹配

由於擴增實境應用都是將程式碼生成的虛擬物品疊加到現實場景中，因此應用開發人員需要幫助ViroReact找到現實場景中的一個依附平面，這樣ViroReact可以把這個依附平面對映到手機的二維螢幕上，接下來 ViroReact 就能在二維螢幕上繪製虛擬物體了。

ViroReact提供了一個標籤 `ViroARImageMarker`, 顧名思義，該標籤能夠允許應用開發人員定義一個“Marker”(標識，標記)。

![](https://img-blog.csdnimg.cn/img_convert/a7596163bb4c710e0b6117d0cd12e197.png)

用程式設計術語來說，這個標籤定義的就是一個place holder，透過target屬性，關聯一個應用開發人員指定的圖片。當使用者使用擴增實境應用透過攝像頭在現實世界掃描到和ViroARImageMarker指定的圖片相匹配的圖形時，ViroReact就會將Marker指定的圖形替換成應用開發人員事先準備好的3D模型。這個匹配 - 替換過程是ViroReact自動完成的，應用開發人員只需要提供Marker指向的圖片和待替換的3D模型即可。採用這種方式實現的AR應用也稱為Marker based AR應用(當然還有不借助Marker實現的AR應用).

從上圖能看出target指向的Marker內容為一個名為logo的物件，這個物件透過API ViroARTrackingTargets.createTargets建立，輸入引數是該圖片在AR專案裡的相對路徑：

![](https://img-blog.csdnimg.cn/img_convert/df550284fc20503a59bf5e1400fd8de0.png)

該圖片如下所示。這也是為什麼我們在演示這個應用時，第一步總是先在電腦上開啟這張圖片，然後再用手機攝像頭去掃描的原因。

![](https://img-blog.csdnimg.cn/img_convert/86c9a41244474621e49575b988833cad.png)

# Replace - 替換

ViroReact將現實世界的圖形和AR應用的Image Marker匹配後，就會自動使用一個3D物件替換並渲染到Marker所在的位置上。

待替換的3D物件透過標籤Viro3DObject定義，有三個重要的屬性需要指定：

![](https://img-blog.csdnimg.cn/img_convert/d41c52acbcbc1d2841365fb0aff3917e.png)

- source和resources：3D模型檔案，一般透過專業的3D軟體生成。Windows10自帶的Paint 3D軟體可以開啟.obj結尾的模型檔案：

![](https://img-blog.csdnimg.cn/img_convert/4c8a52a78a37724b7f3397efde8dc854.png)

您可以檢視下面的影片來360度全方位觀察 demo 中使用的特斯拉的3D模型：

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

我們很容易觀察到，在 Paint 3D 裡看到的這輛特斯拉汽車，表面毫無光澤，而Leo影片中的特斯拉，外表可以更換不同的顏色，這是透過給3D模型新增不同的texture(紋理)來實現的。
我們透過ViroMaterials.createMaterials，傳入不同的texture引數，生成不同的Material物件，最後賦給上圖Viro3DObject的materials屬性，即完成了待替換3D物件的宣告。

![](https://img-blog.csdnimg.cn/img_convert/5e70f3869a1adff0692021d0b03565bf.png)

透過使用React程式設計動態修改Viro3DObject materials屬性的值，我們就能實現動態修改攝像頭裡觀察到的特斯拉車身的顏色。

當然這些不同的texture對應的圖形檔案也需要專業人員製作才行：

![](https://img-blog.csdnimg.cn/img_convert/8aaab7a0d3206c6fcad96de433d3d4f7.png)

# Augment 增強

這一步是即使從未接觸過AR應用開發的程式設計師也非常熟悉的：標籤Viro3DObject支援各種事件響應函式，比如點選之後觸發的onClick回撥函式:

![](https://img-blog.csdnimg.cn/img_convert/2148c9754c5e183c57fbc3470f319acd.png)

我們把自己實現的_toggleButtons函式註冊到onClick事件上，當特斯拉模型被點選之後，我們就可以彈出演示影片裡的顏色選擇選單，允許使用者指定新的車身顏色。

因為Viro3DObject的materials屬性繫結的React模型欄位為this.state.texture, 因此使用者選擇了新的顏色後，呼叫React的this.setState方法將texture屬性設定成選中的顏色，即可實現車身顏色的動態重新整理。

![](https://img-blog.csdnimg.cn/img_convert/a5a8425a25202389c2b194369705edfc.png)

# 總結

本文從之前的文章使用 JavaScript 開發AR(擴增實境)移動應用的預備知識和環境搭建出發，以一個具體的 ViroReact 專案出發，詳細介紹了擴增實境應用編碼開發的`匹配，替換和增強`的實現三部曲。

使用 ViroReact 開發增強實現應用的一個具體例子

相關文章