蘋果在 WWDC 上發佈了ARKit 全新的AR框架,使得開發者可以更快速的為iphone或ipad 構建增強現實應用,這也毫無疑問的使得ios成為全球最大的AR開發平臺。所以了我們也開設了ARkit技術分享與開發教程這一全新系列幫助大家更好的瞭解ARKit。這一次給大家帶來 通過Xcode快速的為iphone或ipad構建AR應用(翻譯並整理於:https://next.reality.news/)
預覽:
開發準備
在Mac電腦上下載並安裝MacOS 10.13和Xcode 9的測試版本。並使你的iphone或ipad升級ios 11版本
首先在Xcode裡創建一個新的項目。
選擇增強現實應用程序圖標,然後單擊“下一步”按鈕,按順序操作。
一切都加載完畢後,我們就進入到項目裡:
修改模型
ps:以下操作其實也無關緊要,因為sample 中蘋果已經準備好了默認的模型在項目裡,這裡教大家如何替換模型
我們需要準備一些dae格式的3d模型,在本次案例的演示中,我們使用一個類似廣告牌的模型。我們可以在TurboSquid網站上進行下載(https://www.turbosquid.com/3d-models/free-billboard-games-3d-model/1129110)。
下載完成之後,我們需要解壓來完成廣告牌上紋理的替換。首先我們準備一張圖片:
然後打開我們下載的模型文件夾,可以看到billboard.dae文件和紋理的“tex”子文件夾。打開“tex”文件夾。
將“pict1.jpg”和“pict2.jpg”替換我們所準備好的圖片。
效果如圖:
Xcode默認的AR項目自帶了一個3D模型,我們需要用我們剛創建的模型替換它。查看我們的Project Navigator,找到一個名為art.scnassets的文件夾。
選擇“ship.scn”和“texture.png”,然後刪除。
按住Control鍵,選擇“art.scnassets”文件夾。然後選擇“Add Files to art.scnassets”。
現在我們事先準備好的模型就已經導入完畢了。
接下來,我們需要對模型的位置等信息進行設置。點擊下面的截圖中的紅色箭頭指向的小圖標。
我們需要手動輸入我們的設置(大家可以參考下數值)
Position x:0.255 y: - 57 z:-87
Scale x:0.09 y:0.09 z:0.09
我們需要在ViewController.swift文件中更改一行代碼。雙擊該文件在主窗口中打開代碼。向下滾動代碼到具有下面突出顯示的文本的行。把“ship.scn”改成“billboard.dae”。
let scene = SCNScene(named: art.scnassets/billboard.dae")!
然後我們運行測試,就會實現此效果。
代碼分析(1)
對於ARKit,我們需要重點了解ARSession。它是管理創建AR體驗所需的運動跟蹤和圖像處理的對象。
在 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