利用iOS ARKit製作AR傳送門

前言

蘋果推出ARKit半年了,開發者對其興趣有增無減,AR產業也借蘋果谷歌等廠商的努力得到了快速發展。作爲廣大iOS開發者的一員,我也加入了學習AR的隊伍中。
得益於SceneKit優越的性能和封裝,ARKit的開發也如魚得水,如果你有SceneKit開發經驗,那麼短時間開發出一款很酷的AR應用不是難事。這次,我們嘗試使用ARKit來製作一個傳送門(或者說哆啦A夢的任意門)

項目效果:
AR任意門



前期準備

製作前,我們需要準備好任意門中的3D模型,以及任意門中的天空盒貼圖。
在這裏我使用了大學的鐘塔模型,使用了Cinema4D製作,SceneKit支持dae或obj格式的模型,導入後可以轉換成SceneKit對應的scn格式。
天空盒貼圖是什麼?遊戲中對於一些有邊界地圖,想要創造遠距離場景的視覺效果,就可以採用將天空盒包裹當前真實場景的方法,如CS。
天空盒的示例圖,圖片來自網絡

模型文件,使用Cinema4D製作



項目的配置

1. Info.plist的配置
AR需要使用攝像頭權限,在Info.plis中添加“Privacy - Camera Usage Description”鍵值
Info.plist的設置

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. 設置模型
在創建模型之前,我們先創建一個模型的集合,拓展名爲scnassets。接下來我們創建一個天空盒,並將想要往其中放置的模型也一併放置。天空盒的材質設置爲我們準備好的天空盒貼圖。
但是現在有一個問題,如何才能使這個天空盒在外面不可見而在裏面可見呢?
答案就是,使用渲染順序,渲染順序在前的優先渲染,渲染順序決定了模型之間的關係,我們可以通過優先渲染前面的透明遮罩平面來來後面的內容“被透明”。
所以在每一個平面上添加一個名爲“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屬性,數值越小越優先渲染。

    let child = portalNode.childNode(withName: nodeName, recursively: true)
    child?.geometry?.firstMaterial?.diffuse.contents = UIImage(named: "Model.scnassets/\(imageName).png")
    child?.renderingOrder = 200

如上面代碼所示,我們只需要把需要處理的節點取出並設置渲染順序即可。

6. 重置AR場景
很多時候我們想要重置AR追蹤,並將現有節點全部移除。可以通過如下代碼實現:

    func reset() {
        // 清除節點之前先停止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

如果有問題,歡迎評論區留言

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章