來自我的博客minecode.link

前言

蘋果推出ARKit半年了，開發(fā)者對其興趣有增無減，AR產(chǎn)業(yè)也借蘋果谷歌等廠商的努力得到了快速發(fā)展。作為廣大iOS開發(fā)者的一員，我也加入了學(xué)習(xí)AR的隊(duì)伍中。
得益于SceneKit優(yōu)越的性能和封裝，ARKit的開發(fā)也如魚得水，如果你有SceneKit開發(fā)經(jīng)驗(yàn)，那么短時(shí)間開發(fā)出一款很酷的AR應(yīng)用不是難事。這次，我們嘗試使用ARKit來制作一個(gè)傳送門（或者說哆啦A夢的任意門）

項(xiàng)目效果：

AR任意門

前期準(zhǔn)備

制作前，我們需要準(zhǔn)備好任意門中的3D模型，以及任意門中的天空盒貼圖。
在這里我使用了大學(xué)的鐘塔模型，使用了Cinema4D制作，SceneKit支持dae或obj格式的模型，導(dǎo)入后可以轉(zhuǎn)換成SceneKit對應(yīng)的scn格式。
天空盒貼圖是什么？游戲中對于一些有邊界地圖，想要創(chuàng)造遠(yuǎn)距離場景的視覺效果，就可以采用將天空盒包裹當(dāng)前真實(shí)場景的方法，如CS。

天空盒的示例圖，圖片來自網(wǎng)絡(luò)

模型文件，使用Cinema4D制作

項(xiàng)目的配置

1. Info.plist的配置
AR需要使用攝像頭權(quán)限，在Info.plis中添加“Privacy - Camera Usage Description”鍵值

Info.plist的設(shè)置

2. 界面設(shè)置
顯示AR攝像機(jī)，需要使用AR場景控件，拖ARKit Scene View至故事版，同時(shí)我們需要放置按鈕以及檢測到平面的提示Label

界面設(shè)置

開始Coding

1. 配置ARSceneView
ARKit追蹤需要一個(gè)AR世界追蹤配置項(xiàng)，可以通過實(shí)例化ARWorldTrackingConfiguration類來實(shí)現(xiàn)（早期是ARWorldTrackingSessionConfiguration）。
我們想要追蹤水平面，從而放置傳送門模型，所以在此將其planeDetection設(shè)置為追蹤水平面。

    // 用于配置AR世界追蹤
    // The Configuration of World Tracking
    let configuration = ARWorldTrackingConfiguration()
    var planeAnchor: ARPlaneAnchor?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 設(shè)置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. 獲取追蹤平面
我們在上一步設(shè)置了水平面追蹤，在這里進(jìn)行設(shè)置。
ARKit提供了識別水平面的代理方法，在ARSCNViewDelegate中。ARKit會不停追蹤平面，當(dāng)追蹤到新平面(plane)時(shí)，會向該平面上添加錨點(diǎn)(anchor)。代理中為我們提供了這一代理方法。對于追蹤到的平面，會添加ARAnchor，而如果檢測到的是用戶設(shè)置的檢測平面(我們之前設(shè)置的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. 獲取平面的位置
上一步我們獲取了水平面對應(yīng)的ARPlaneAnchor，而此時(shí)我們需要獲取該平面在AR世界中的位置信息。
方法就是使用transform屬性，該屬性返回一個(gè)matrix_float4x4結(jié)構(gòu)體。了解過計(jì)算機(jī)圖形學(xué)的應(yīng)該知道，圖形的變換矩陣正是這樣的一個(gè)結(jié)構(gòu)。我們可以通過修改transform中的對應(yīng)位置值，就可以對圖形進(jìn)行自由變換。
而我們現(xiàn)在只需要獲取他的坐標(biāo)信息，也就對應(yīng)著第3行的前三個(gè)值。同時(shí)，在SceneKit中三維坐標(biāo)使用的是SCNVector3。所以我們在此擴(kuò)展SCNVector3以便復(fù)用。

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. 設(shè)置模型
在創(chuàng)建模型之前，我們先創(chuàng)建一個(gè)模型的集合，拓展名為scnassets。接下來我們創(chuàng)建一個(gè)天空盒，并將想要往其中放置的模型也一并放置。天空盒的材質(zhì)設(shè)置為我們準(zhǔn)備好的天空盒貼圖。
但是現(xiàn)在有一個(gè)問題，如何才能使這個(gè)天空盒在外面不可見而在里面可見呢？
答案就是，使用渲染順序，渲染順序在前的優(yōu)先渲染，渲染順序決定了模型之間的關(guān)系，我們可以通過優(yōu)先渲染前面的透明遮罩平面來來后面的內(nèi)容“被透明”。
所以在每一個(gè)平面上添加一個(gè)名為“mask”的平面，大小與父平面相同即可，厚度盡可能小就好。
如下圖，具體請見工程源文件。

模型設(shè)置

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)

接下來就是實(shí)現(xiàn)的重點(diǎn)：如何可以讓天空盒從外面不可見？
剛才談到了，我們可以通過讓一個(gè)渲染順序更靠前的透明平面遮擋來實(shí)現(xiàn)讓某個(gè)平面“被透明”的效果，而這樣也可以使另一個(gè)方向觀察不受影響。
在SceneKit中，渲染順序?qū)?yīng)renderingOrder屬性，數(shù)值越小越優(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é)點(diǎn)取出并設(shè)置渲染順序即可。

6. 重置AR場景
很多時(shí)候我們想要重置AR追蹤，并將現(xiàn)有節(jié)點(diǎn)全部移除?？梢酝ㄟ^如下代碼實(shí)現(xiàn)：

    func reset() {
        // 清除節(jié)點(diǎn)之前先停止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項(xiàng)目：
https://github.com/Minecodecraft/ARDoor

如果有問題，歡迎評論區(qū)留言