精讀《快速上手構建ARKit應用》

04-28

精讀《快速上手構建ARKit應用》

原文地址: how-to-make-your-own-arkit-app-in-5-minutes-using-react-native

引言

ARKit是蘋果推出的增強現實套裝，而react-native-arkit是基於此的上層封裝。對於前端開發而言，這可能是最快上手ARKit的方式了，本周精讀讓我們來初窺ARKit和React Native ARKit這個庫。

概要

本次精讀我們帶來的是一篇《快速上手構建ARKit應用》，原文鏈接如上。原文標題更加直接，直譯的話是「如何在5分鐘里利用react native搭建出你自己的ARKit應用」。確實，這篇文章整體也非常明確，以跑起整個ARKit Demo為最直接最主要的目的。

跑起ARKit，也很簡單。硬體上，只要有一台iPhone 6S以上的手機；軟體上，只要準備好最新版本的XCode和日常開發要用的Node環境了就好。按照react-native-arkit的裡面的README就可以跑起來了。這個庫不

3 精讀

在開始精讀前，我先拋出我的問題三連：Why AR? Why ARKit? Why React Native ARKit?

3.1 Why AR?

在之前的第43期精讀評論中，我們探討了AR對於和前端結合的可能性。總的來說，AR把前端開發不再局限在有限的屏幕空間上，對於可視化等對前端展示空間有強烈需求的細分領域，AR是一個很值得研究的內容。如果對於這一塊內容有興趣，歡迎回看第43期精讀評論《精讀〈增強現實與可視化〉》。

3.2 Why ARKit?

為什麼選擇 ARKit 入手進行實驗？其因有二。第一，相比於 Microsoft HoloLens 的價格，售價只有它三分之一的iPhone X無論是體積重量，還是性價比，抑或是保有量都是大大佔優的。噢對，說到保有量，iPhone 6S及以上都支持ARKit。所以說iPhone是我們身邊最容易接觸到的AR設備是不為過的。第二，ARKit對於硬體的利用能力非一般的前端庫可以做到的。大部分的AR前端庫可以做到利用陀螺儀來構建一個三維立體空間。但是ARKit更進一步，他利用高頻調用攝像頭，通過對圖像進行識別分析，可以進行空間感知，例如可以識別出一個平面。而這些都是ARKit所提供的，我們只需要調用它的能力就好了。對於開發者而言，ARKit會比一般的AR庫更近一步。

3.3 Why React Native ARKit?

對於當下的前端開發，所有事情可以分為兩種——0. 可以用 JavaScript 寫的 1. 其他。至於為什麼選擇react-native-arkit這個庫，原因自然也可以理解。相比於用原生的Swift來開發，React Native 的開發方式對於前端而言明顯是更加容易上手了。對於嘗試新東西，這也未嘗不可。

3.4 About Demo

相比於原文中從初始化開始的步驟，官方還提供了一個已經配置好的官方Demo。使用這個，如果環境沒有問題，的確只需要5分鐘就可以跑起來一個ARKit應用了。

上面的圖片來自原文，可以看到，在react-native-arkit這個庫裡面的所支持的9種基本圖形和文字。使用如下已經封裝好的React Native組件就可以直接使用了。

<ARKit.Box pos={{ x: 0, y: 0, z: 0 }} shape={{ width: 0.1, height: 0.1, length: 0.1, chamfer: 0.01 }}/>

https://www.zhihu.com/video/964796937463189504 React Native ARKit 幾何構造?

v.youku.com

上面的一個視頻片段是我們在跑起來Demo後的立體效果。可以很清楚地看到，ARKit感知到了房間這個立方體空間後所構建出來的AR的效果。

https://www.zhihu.com/video/964796859718475776 React Native ARKit 平面識別?

v.youku.com

而最後的這段視頻會更加有趣一些，中央的紅圈的出現邏輯是停留在最近識別出的一個平面上。我們可以看到首先識別出了地面，紅圈隨地面而動；再移向桌面時，很快又識別出了桌面，重新生成了一個停留在桌面上的紅圈。通過這一段可以看出無論是明暗劃分明顯的地面，還是堆滿雜物的桌面，ARKit都可以很輕鬆的識別出來。

4. 總結

蘋果的ARKit對空間平面的感知能力勝過了一般的AR渲染庫。而iPhone 6S就能跑的特性又讓我們覺得AR其實並沒有那麼遙遠。在此基礎之上的React Native封裝react-native-arkit，讓我們通過JS就擁有操作ARKit的能力。這的確是一個快速上手ARKit的方式。

5 更多討論

討論地址是：精讀《快速上手構建ARKit應用》 · Issue #70 · dt-fe/weekly

如果你想參與討論，請點擊這裡，每周都有新的主題，每周末發布。