使用ARKit實現WebAR效果

關於更多機器學習、人工智能、加強現實、Unity、Unreal資源和技術乾貨，能夠關注公衆號：AIRX社區

【AR優秀開源項目】專欄會按期爲你們推薦一些可移植性強的、可二次開發應用的、可落地實際場景使用的實戰工程源碼分享給你們。本部分分享的是使用ARKit實如今Web端的AR效果！

要求

WebARonARKit創建在iOS ARKit的基礎上，iOS ARKit須要具備A9 +處理器且運行iOS 11的iOS設備。爲得到最佳效果，咱們建議如下操做之一：

• iPad（2017）

• iPad Pro（9.七、10.5或12.9英寸）

• iPhone 7及以上設備

Step 1:下載連接

做者：google-ar

下載連接：

github.com/google-ar/W…

或點擊下方的‘閱讀原文’進行下載

Step 2:項目效果預覽

Step 3:如何使用

1. 克隆WebARonARKit GitHub存儲庫。

2. 啓動Xcode 9。

3. 使用Xcode 9從克隆的WebARonARKit存儲庫中打開Xcode項目（.xcodeproj）。

4. 從項目導航器中選擇WebARonARKit項目文件（左列頂部的藍色圖標），而後在下選擇WebARonARKit目標Targets。

5. 確保設備已鏈接到計算機，而後從Product >> Destination菜單或從用戶界面左上角的運行按鈕旁邊的下拉菜單中選擇設備，將其設置爲構建目標。

6. 構建完成並將其推送到設備後，該應用會自動打開。你可能必須按照屏幕上的說明受權開發人員賬戶將其推送到設備上。請注意，首次運行應用程序時，安裝正確的用戶配置文件可能須要一些時間。

要構建可與適用於Android的 WebARonARKit和WebARonARCore一塊兒使用的AR Web體驗，咱們建議使用three.ar.js，這是一個與流行的three.js WebGL框架一塊兒使用的程序庫。Three.ar.js提供了常見的AR構建塊，例如在現實世界表面上繪製的可見光罩和示例場景。

調試

可使用MacOS Safari遠程檢查和調試WebARonARKit中的頁面，但這須要MacOS Safari 11.0（做爲Safari Technology Preview提供）或更高版本。你能夠從developer.apple.com/safari/tech… Safari 11 。

Step 4:WebARonARKit如何工做

WebARonARKit創建在如下基礎上：

1. WKWebView：WKWebView是一個iOS類，使開發人員能夠將Web視圖嵌入其本機應用程序中，並經過自定義API向網絡內容公開本機設備功能。在咱們的案例中，咱們使用WKWebView將ARKit功能公開給Web內容。諸如Cordova之類的本機/ Web應用程序框架使用相似的方法。

2. WebVR API的擴展：WebVR API（v1.1）爲咱們提供了AR所需的大部分功能。而後，咱們對其進行擴展以添加其餘一些要點：運動跟蹤，相機視頻饋送的渲染以及對現實世界的基本瞭解。

詳細信息參考：

github.com/google-ar/W…