利用iOS ARKit制作AR傳送門

來自我的博客minecode.link

前言

蘋果推出ARKit半年了攻询,開發(fā)者對其興趣有增無減债查,AR產業(yè)也借蘋果谷歌等廠商的努力得到了快速發(fā)展亚再。作為廣大iOS開發(fā)者的一員告喊,我也加入了學習AR的隊伍中。
得益于SceneKit優(yōu)越的性能和封裝惜索,ARKit的開發(fā)也如魚得水特笋,如果你有SceneKit開發(fā)經驗,那么短時間開發(fā)出一款很酷的AR應用不是難事门扇。這次雹有,我們嘗試使用ARKit來制作一個傳送門(或者說哆啦A夢的任意門)

項目效果:


AR任意門



前期準備

制作前,我們需要準備好任意門中的3D模型臼寄,以及任意門中的天空盒貼圖霸奕。
在這里我使用了大學的鐘塔模型,使用了Cinema4D制作吉拳,SceneKit支持dae或obj格式的模型质帅,導入后可以轉換成SceneKit對應的scn格式。
天空盒貼圖是什么留攒?游戲中對于一些有邊界地圖煤惩,想要創(chuàng)造遠距離場景的視覺效果,就可以采用將天空盒包裹當前真實場景的方法炼邀,如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. 設置模型
在創(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

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末肛冶,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子扯键,更是在濱河造成了極大的恐慌睦袖,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,273評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件荣刑,死亡現場離奇詭異馅笙,居然都是意外死亡,警方通過查閱死者的電腦和手機厉亏,發(fā)現死者居然都...
    沈念sama閱讀 94,349評論 3 398
  • 文/潘曉璐 我一進店門董习,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事「校” “怎么了?”我有些...
    開封第一講書人閱讀 167,709評論 0 360
  • 文/不壞的土叔 我叫張陵窝趣,是天一觀的道長。 經常有香客問我训柴,道長哑舒,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,520評論 1 296
  • 正文 為了忘掉前任幻馁,我火速辦了婚禮洗鸵,結果婚禮上越锈,老公的妹妹穿的比我還像新娘。我一直安慰自己膘滨,他們只是感情好瞪浸,可當我...
    茶點故事閱讀 68,515評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著吏祸,像睡著了一般。 火紅的嫁衣襯著肌膚如雪钩蚊。 梳的紋絲不亂的頭發(fā)上贡翘,一...
    開封第一講書人閱讀 52,158評論 1 308
  • 那天,我揣著相機與錄音砰逻,去河邊找鬼鸣驱。 笑死,一個胖子當著我的面吹牛蝠咆,可吹牛的內容都是我干的踊东。 我是一名探鬼主播,決...
    沈念sama閱讀 40,755評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼刚操,長吁一口氣:“原來是場噩夢啊……” “哼闸翅!你這毒婦竟也來了?” 一聲冷哼從身側響起菊霜,我...
    開封第一講書人閱讀 39,660評論 0 276
  • 序言:老撾萬榮一對情侶失蹤坚冀,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后鉴逞,有當地人在樹林里發(fā)現了一具尸體记某,經...
    沈念sama閱讀 46,203評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,287評論 3 340
  • 正文 我和宋清朗相戀三年构捡,在試婚紗的時候發(fā)現自己被綠了液南。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,427評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡勾徽,死狀恐怖滑凉,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情捂蕴,我是刑警寧澤譬涡,帶...
    沈念sama閱讀 36,122評論 5 349
  • 正文 年R本政府宣布,位于F島的核電站啥辨,受9級特大地震影響涡匀,放射性物質發(fā)生泄漏。R本人自食惡果不足惜溉知,卻給世界環(huán)境...
    茶點故事閱讀 41,801評論 3 333
  • 文/蒙蒙 一陨瘩、第九天 我趴在偏房一處隱蔽的房頂上張望腕够。 院中可真熱鬧,春花似錦舌劳、人聲如沸帚湘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,272評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽大诸。三九已至,卻和暖如春贯卦,著一層夾襖步出監(jiān)牢的瞬間资柔,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1 272
  • 我被黑心中介騙來泰國打工撵割, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留贿堰,地道東北人。 一個月前我還...
    沈念sama閱讀 48,808評論 3 376
  • 正文 我出身青樓啡彬,卻偏偏與公主長得像羹与,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子庶灿,可洞房花燭夜當晚...
    茶點故事閱讀 45,440評論 2 359

推薦閱讀更多精彩內容

  • ARKit ARKit框架通過集成iOS設備攝像頭和運動功能纵搁,在您的應用程序或游戲中產生增強現實體驗。 概述 增強...
    暗夜夜夜行路閱讀 5,804評論 0 17
  • Introducing ARKit iOS 11 引入 ARKit往踢,這是 個全新的框架诡渴,允許開發(fā)者輕松地為 iP...
    沒八阿哥的程序閱讀 2,425評論 1 9
  • ARkit Introducing ARKit iOS 11引入ARKit,這是 個全新的框架菲语,允許開發(fā)者輕松地為...
    坤哥愛卿閱讀 1,342評論 0 1
  • 早魔都和小伙伴們 今天談談買房還是買股票: 區(qū)分年齡妄辩,家庭整體配置,本金大小(過去積蓄) 沒房買房山上,貨幣量持續(xù)增長...
    五彩冰峰閱讀 114評論 0 0
  • 本篇是根據ProGit整理的常用Git命令眼耀,注釋比較簡單,如需詳細了解Git,請閱讀ProGit佩憾。 狀態(tài)檢查 標簽...
    Bean_Do閱讀 281評論 0 1