醬學堂之 ARKit 開發

iPhone TeX Xcode 虛擬現實 AR醬 2017-06-12

蘋果在 WWDC 上發佈了ARKit 全新的AR框架,使得開發者可以更快速的為iphone或ipad 構建增強現實應用,這也毫無疑問的使得ios成為全球最大的AR開發平臺。所以了我們也開設了ARkit技術分享與開發教程這一全新系列幫助大家更好的瞭解ARKit。這一次給大家帶來 通過Xcode快速的為iphone或ipad構建AR應用(翻譯並整理於:https://next.reality.news/)

醬學堂之 ARKit 開發

預覽:

醬學堂之 ARKit 開發

開發準備

在Mac電腦上下載並安裝MacOS 10.13和Xcode 9的測試版本。並使你的iphone或ipad升級ios 11版本

醬學堂之 ARKit 開發

首先在Xcode裡創建一個新的項目。

醬學堂之 ARKit 開發

選擇增強現實應用程序圖標,然後單擊“下一步”按鈕,按順序操作。

醬學堂之 ARKit 開發

醬學堂之 ARKit 開發

醬學堂之 ARKit 開發

一切都加載完畢後,我們就進入到項目裡:

醬學堂之 ARKit 開發

修改模型

ps:以下操作其實也無關緊要,因為sample 中蘋果已經準備好了默認的模型在項目裡,這裡教大家如何替換模型

我們需要準備一些dae格式的3d模型,在本次案例的演示中,我們使用一個類似廣告牌的模型。我們可以在TurboSquid網站上進行下載(https://www.turbosquid.com/3d-models/free-billboard-games-3d-model/1129110)。

醬學堂之 ARKit 開發

下載完成之後,我們需要解壓來完成廣告牌上紋理的替換。首先我們準備一張圖片:

醬學堂之 ARKit 開發

然後打開我們下載的模型文件夾,可以看到billboard.dae文件和紋理的“tex”子文件夾。打開“tex”文件夾。

醬學堂之 ARKit 開發

將“pict1.jpg”和“pict2.jpg”替換我們所準備好的圖片。

醬學堂之 ARKit 開發

效果如圖:

醬學堂之 ARKit 開發

Xcode默認的AR項目自帶了一個3D模型,我們需要用我們剛創建的模型替換它。查看我們的Project Navigator,找到一個名為art.scnassets的文件夾。

醬學堂之 ARKit 開發

選擇“ship.scn”和“texture.png”,然後刪除。

醬學堂之 ARKit 開發

按住Control鍵,選擇“art.scnassets”文件夾。然後選擇“Add Files to art.scnassets”。

醬學堂之 ARKit 開發

醬學堂之 ARKit 開發

現在我們事先準備好的模型就已經導入完畢了。

醬學堂之 ARKit 開發

接下來,我們需要對模型的位置等信息進行設置。點擊下面的截圖中的紅色箭頭指向的小圖標。

醬學堂之 ARKit 開發

醬學堂之 ARKit 開發

我們需要手動輸入我們的設置(大家可以參考下數值)

Position x:0.255 y: - 57 z:-87

Scale x:0.09 y:0.09 z:0.09

我們需要在ViewController.swift文件中更改一行代碼。雙擊該文件在主窗口中打開代碼。向下滾動代碼到具有下面突出顯示的文本的行。把“ship.scn”改成“billboard.dae”。

醬學堂之 ARKit 開發

let scene = SCNScene(named: art.scnassets/billboard.dae")!

然後我們運行測試,就會實現此效果。

醬學堂之 ARKit 開發

代碼分析(1)

對於ARKit,我們需要重點了解ARSession。它是管理創建AR體驗所需的運動跟蹤和圖像處理的對象。

醬學堂之 ARKit 開發

在 AR 場景中,首先就是要配置一個 ARSession對象,用來管理攝像頭拍攝和對設備動作進行處理。

1.從 Session 中檢索視頻幀和追蹤信息;

2.將這些幀圖像作為背景,渲染到自定義視圖當中;

3.使用追蹤信息,在相機圖像上方定位並繪製 AR 內容。

在ARSession中有兩個重要的類,分別是:ARSCNView與ARSKView。前者主要通過3D SceneKit內容增強了相機視圖,後者2D SpriteKit內容的相機視圖。

我們啟動ARSession

override func viewWillAppear(_ animated: Bool) {

super.viewWillAppear(animated)

// 創建 Session 配置

let configuration = ARWorldTrackingSessionConfiguration()

configuration.planeDetection = .horizontal

// 運行視圖 Session

sceneView.session.run(configuration)

}

然後使用SceneKit或SpriteKit將虛擬內容放置在視圖中。

ARKit會將SceneKit 自動匹配到現實世界中,所以放置一個虛擬對象,為了使其看起來保持真實的位置,這要求你適當地設置模型的位置。例如,在默認配置中,以下代碼將10釐米的立方體放置在相機初始位置前20釐米處:

letcubeNode =SCNNode(geometry:SCNBox(width:0.1, height:0.1, length:0.1, chamferRadius:0))

cubeNode.position =SCNVector3(0,0, -0.2)

sceneView.scene.rootNode.addChildNode(cubeNode)

當然你可以使用ARAnchor類來跟蹤現實世界的位置,例如,當啟用平面檢測時,ARKit會為每個檢測到的平面添加並更新錨點。要為這些錨點添加可視化內容,可以執行以下方法:ARSCNViewDelegate

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {

guard let planeAnchor = anchor as? ARPlaneAnchor else { return }

let plane = SCNPlane(width: CGFloat(planeAnchor.extent.x), height: CGFloat(planeAnchor.extent.z))

let planeNode = SCNNode(geometry: plane)

planeNode.position = SCNVector3Make(planeAnchor.center.x, 0, planeAnchor.center.z)

planeNode.transform = SCNMatrix4MakeRotation(-Float.pi / 2, 1, 0, 0)

node.addChildNode(planeNode)

}

SpriteKit 的操作就簡單許多,它可以顯示浮動的2D圖像在3D空間中。

var translation = matrix_identity_float4x4

translation.columns.3.z = -0.2

let transform = simd_mul(view.session.currentFrame.camera.transform, translation)

let anchor = ARAnchor(transform: transform)

view.session.add(anchor: anchor)

func view(_ view: ARSKView, nodeFor anchor: ARAnchor) -> SKNode? {

return SKLabelNode(text:"")

}

ARKit的開發文檔也在開發的過程中不斷了解與分析,會不斷更新的。

好了,下一篇章我們將帶來ARKit結合unity 的開發應用。

AR醬原創,轉載務必註明

微信號AR醬(ARchan_TT)

AR醬官網:www.arjiang.com

相關推薦

推薦中...