來自我的博客minecode.link
前言
蘋果推出ARKit半年了攻询,開發(fā)者對其興趣有增無減债查,AR產業(yè)也借蘋果谷歌等廠商的努力得到了快速發(fā)展亚再。作為廣大iOS開發(fā)者的一員告喊,我也加入了學習AR的隊伍中。
得益于SceneKit優(yōu)越的性能和封裝惜索,ARKit的開發(fā)也如魚得水特笋,如果你有SceneKit開發(fā)經驗,那么短時間開發(fā)出一款很酷的AR應用不是難事门扇。這次雹有,我們嘗試使用ARKit來制作一個傳送門(或者說哆啦A夢的任意門)
項目效果:
前期準備
制作前,我們需要準備好任意門中的3D模型臼寄,以及任意門中的天空盒貼圖霸奕。
在這里我使用了大學的鐘塔模型,使用了Cinema4D制作吉拳,SceneKit支持dae或obj格式的模型质帅,導入后可以轉換成SceneKit對應的scn格式。
天空盒貼圖是什么留攒?游戲中對于一些有邊界地圖煤惩,想要創(chuàng)造遠距離場景的視覺效果,就可以采用將天空盒包裹當前真實場景的方法炼邀,如CS魄揉。
項目的配置
1. Info.plist的配置
AR需要使用攝像頭權限洛退,在Info.plis中添加“Privacy - Camera Usage Description”鍵值
2. 界面設置
顯示AR攝像機,需要使用AR場景控件杰标,拖ARKit Scene View至故事版兵怯,同時我們需要放置按鈕以及檢測到平面的提示Label
開始Coding
1. 配置ARSceneView
ARKit追蹤需要一個AR世界追蹤配置項,可以通過實例化ARWorldTrackingConfiguration類來實現(早期是ARWorldTrackingSessionConfiguration)腔剂。
我們想要追蹤水平面媒区,從而放置傳送門模型,所以在此將其planeDetection設置為追蹤水平面掸犬。
// 用于配置AR世界追蹤
// The Configuration of World Tracking
let configuration = ARWorldTrackingConfiguration()
var planeAnchor: ARPlaneAnchor?
override func viewDidLoad() {
super.viewDidLoad()
// 設置AR平面檢測類型
// set the plane detecing type of world tracking
configuration.planeDetection = .horizontal
sceneView.debugOptions = [ARSCNDebugOptions.showFeaturePoints]
sceneView.session.run(configuration)
sceneView.delegate = self
sceneView.automaticallyUpdatesLighting = true
}
2. 獲取追蹤平面
我們在上一步設置了水平面追蹤袜漩,在這里進行設置。
ARKit提供了識別水平面的代理方法湾碎,在ARSCNViewDelegate中宙攻。ARKit會不停追蹤平面,當追蹤到新平面(plane)時胜茧,會向該平面上添加錨點(anchor)。代理中為我們提供了這一代理方法。對于追蹤到的平面呻顽,會添加ARAnchor雹顺,而如果檢測到的是用戶設置的檢測平面(我們之前設置的planeDetection),將會放置ARPlaneAnchor廊遍。所以我們直接判斷該anchor的類型即可嬉愧。
// MARK: - ARSCNViewDelegate implemention
extension ARViewController: ARSCNViewDelegate {
func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
// 如果檢測到的是水平面,那么就是我們需要的喉前,所以在此判斷是否為水平面
guard anchor is ARPlaneAnchor else {return}
self.planeAnchor = anchor as? ARPlaneAnchor
// 處理邏輯
}
}
3. 獲取平面的位置
上一步我們獲取了水平面對應的ARPlaneAnchor没酣,而此時我們需要獲取該平面在AR世界中的位置信息。
方法就是使用transform屬性卵迂,該屬性返回一個matrix_float4x4結構體裕便。了解過計算機圖形學的應該知道,圖形的變換矩陣正是這樣的一個結構见咒。我們可以通過修改transform中的對應位置值偿衰,就可以對圖形進行自由變換。
而我們現在只需要獲取他的坐標信息改览,也就對應著第3行的前三個值下翎。同時,在SceneKit中三維坐標使用的是SCNVector3宝当。所以我們在此擴展SCNVector3以便復用视事。
extension SCNVector3 {
init (withTransform transform: matrix_float4x4) {
self.x = transform.columns.3.x
self.y = transform.columns.3.y
self.z = transform.columns.3.z
}
}
4. 設置模型
在創(chuàng)建模型之前,我們先創(chuàng)建一個模型的集合庆揩,拓展名為scnassets俐东。接下來我們創(chuàng)建一個天空盒,并將想要往其中放置的模型也一并放置盾鳞。天空盒的材質設置為我們準備好的天空盒貼圖犬性。
但是現在有一個問題,如何才能使這個天空盒在外面不可見而在里面可見呢腾仅?
答案就是乒裆,使用渲染順序,渲染順序在前的優(yōu)先渲染推励,渲染順序決定了模型之間的關系鹤耍,我們可以通過優(yōu)先渲染前面的透明遮罩平面來來后面的內容“被透明”。
所以在每一個平面上添加一個名為“mask”的平面验辞,大小與父平面相同即可稿黄,厚度盡可能小就好。
如下圖跌造,具體請見工程源文件杆怕。
5. 使天空盒從外面不可見
首先我們先添加模型族购,代碼比較簡單,在此不贅述陵珍。
guard let portalScene = SCNScene(named: "Model.scnassets/tjgc.scn") else {return}
let portalNode = portalScene.rootNode.childNode(withName: "tjgc", recursively: false)!
let newVector3 = SCNVector3.init(withTransform: transform)
portalNode.position = SCNVector3.init(newVector3.x, newVector3.y, newVector3.z-1)
sceneView.scene.rootNode.addChildNode(portalNode)
接下來就是實現的重點:如何可以讓天空盒從外面不可見寝杖?
剛才談到了,我們可以通過讓一個渲染順序更靠前的透明平面遮擋來實現讓某個平面“被透明”的效果互纯,而這樣也可以使另一個方向觀察不受影響瑟幕。
在SceneKit中,渲染順序對應renderingOrder屬性留潦,數值越小越優(yōu)先渲染只盹。
let child = portalNode.childNode(withName: nodeName, recursively: true)
child?.geometry?.firstMaterial?.diffuse.contents = UIImage(named: "Model.scnassets/\(imageName).png")
child?.renderingOrder = 200
如上面代碼所示,我們只需要把需要處理的節(jié)點取出并設置渲染順序即可兔院。
6. 重置AR場景
很多時候我們想要重置AR追蹤殖卑,并將現有節(jié)點全部移除「讶椋可以通過如下代碼實現:
func reset() {
// 清除節(jié)點之前先停止AR會話懦鼠,否則會crash
// pause ar session before remove node, or will be crash
self.sceneView.session.pause()
self.sceneView.scene.rootNode.enumerateChildNodes { (node, _) in
node.removeFromParentNode()
}
self.planeAnchor = nil
self.addButton.isEnabled = false
// 使用重置配置啟動AR會話,場景將會被重置
// Run AR session with reset options, then session will be reset
self.sceneView.session.run(configuration, options: [.resetTracking, .removeExistingAnchors])
}
具體代碼見Github項目:
https://github.com/Minecodecraft/ARDoor