ARKit: Yüzey Algılama

ARKit ile obje eklemeden önce yüzey algılaması yapılmalıdır. Yüzey algılamasını öğrenin!💫

Merhaba TurkishKit okuyucuları!🖖 Yeni bir ARKit makalesi ile karşınızdayız. Bugün sizinle ARKit kütüphanesinde yüzey algılama işlemini öğreneceğiz. Hazırsanız hiç vakit kaybetmeden başlayalım!🤓

Bir önceki ARKit makalemizi okumadıysanız, okumanızı kesinlikle tavsiye ederim!🤩 Buraya tıklayarak okuyabilirsiniz!

Yüzey Algılama Nedir?

Yüzey algılamak, ARKit kütüphanesinin telefonunuzun kamerasından dış dünyayı algılamasıdır. Yani bu süreç, sizin dış dünyaya obje eklemeniz veya herhangi bir değişiklik yapmanız değil, dış dünyadan veri toplamanızla gerçekleşir.

Yüzey Algılama Neden Önemlidir?

Yüzey algılama kullanarak dış dünyadan topladığınız verilere göre AR ortamınızı hazırlayabilirsiniz. Mesela sanal bir laboratuvar kurmak isterseniz, yarattığınız eşyaları ve objeleri, gerçek dünyada bir masa veya bir yüzeyin üstüne koymak isteyebilirsiniz. Havada uçuşurlarsa çok gerçekçi durmaz. Bu nedenle AR uygulamaları yaratırken, yüzeyi algılayabilmek çok önemlidir.

Adım Adım Yüzey Algılamak

Adım 1: Xcode Uygulamasını açın ve ARKit uygulaması oluşturun.

“ViewController.swift” dosyasına girdiğinizde karşınıza aşağıdaki gibi bir ekran çıkacaktır. Bu ekranda bulunmayan her kodu, “ViewController” dosyanızdan silebilirsiniz, şimdilik kullanmayacağız.

import UIKit
import SceneKit
import ARKit
class ViewController: UIViewController, ARSCNViewDelegate {
    @IBOulet var sceneView: ARSCNView!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        sceneView.delegate = self
        sceneView.showsStatistics = true
        let scene = SCNScene(named: "art.scnassets/ship.scn")!
        sceneView.scene = scene
    }
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        let configuration = ARWorldTrackingConfiguration()
        sceneView.session.run(configuration)
    }
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        sceneView.session.pause()
    }
}

ARKit üzerinden dış dünyayı algılayabilmek için dosyamızda olan ARWorldTrackingConfiguration() kütüphanesinin uzatmalarını kullanacağız.

Dış dünya algılamak için kullanılan kütüphane bu şekilde dosyamızda bulunmaktadır:

let configuration = ARWorldTrackingConfiguration()

Adım 2: “planeDetection” kullanarak yüzey algılayın.

ARKit’te yüzey algılamak “planeDetection” adı ile geçmektedir. Bir yüzey algılarken, o yüzeyin tamamını algılamak isteriz. “planeDetection”, koordinat düzlemi gibi çalışmaktadır. Bir yüzeyi algılarken, dış dünyaya bir tane koordinat düzlemi yerleştirir ve arada kalan alanlara bakmaya çalışır. Koordinat düzlemindeki tüm boyutları algılayabilmek için hem yatay hem de düşey ekseni kontrol etmek gerekir. Bunun için, “configuration” özelliğini sanal ortamımıza eklemeden önce ona, yüzeyi algılamasını söylemeliyiz.

“configuration” özelliğini tanımladıktan sonra şu kod yazılmalıdır:

configuration.planeDetection = [.horizontal, .vertical]

Ancak, böyle yazınca kodunuzda hata çıkabilir çünkü yatay ve düşey eksende algılama özelliği, iOS 11.3 ve üstü sürülümlerin desteklediği bir özelliktir. Bu nedenle, daha düşük sürülümlerde, sadece yatay eksende algılama yapmak gerekir.

Daha düşük sürülümler için yatay eksende algılamak için şu kodu eklemek gerekir:

if #available(iOS 11.3, *) {
    configuration.planeDetection = [.horizontal, .vertical]
} else {
    configuration.planeDetection = .horizontal
}

Adım 3: Algıladığımız yüzeye bir obje ekleyin.

ARKit, “configuration” özelliğini otomatik olarak uygulama açıldığında çalıştırdığından, düz yüzeyler algılayabilmiş olduk. Bu noktada, algıladığımız yüzeyleri kontrol edebilmek için onlara bir obje yerleştirmeyi deneyebiliriz. Algılanan yüzeylere bir torus objesi yerleştirelim

Torus

Öncelikle bir tane “renderer” fonksiyonu oluşturmamız gerekecektir. “Renderer” fonksiyonu, yüzeyde bir obje oluşturmamızı sağlayacaktır.

viewWillAppear() fonksiyonunundan sonra renderer fonksiyonu oluşturun:

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
}

Bir torus objesi eklemek için, geçen makalelerde olduğu gibi, bir node oluşturmak gerekir. Bir “SCNTorus” oluşturup bu objenin rengini ve büyüklüğünü belirleyelim.

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
    let torus = SCNTorus(ringRadius: 0.3, pipeRadius: 0.01)
    torus.firstMaterial?.diffuse.contents = UIColor.red.withAlphaComponent(0.7)
}

Oluşturduğumuz torus objesini algıladığımız yüzeyde oluşturacağımız node unsuruna ekleyelim.

Torus objesini oluşturduktan sonra şu kodu ekleyin:

node.geometry = torus

Adım 4: Ortama ışık ekleyin.

Dış dünyadan algıladığınız düz yüzeye bir obje eklemeyi başardınız! Şimdi objeyi düzgün bir şekilde görebilmek için ortamınıza ışık eklemeniz gerekecektir. Bu noktada herhangi bir ışık ekleyebilirsiniz ancak biraz daha gerçekçi ve boyutlu gözükmesi için Directional Light ve Omni Light özelliklerini birlikte kullanabilirsiniz.

art.scnassets dosyanızın içinde bulunan ship.scn dosyasına girip Apple’ın önceden oluşturduğu objeyi silebilirsiniz. Kodunuzda, uygulama açıldığında bu ortam gerçek dünyaya entegre edilecektir.

Sağ üst köşede bulunan “+” düğmesine basarak ortamınıza Directional Light ve Omni Light ekleyin.

Eklediğiniz ışıklar ortamınızda şu şekilde gözükmelidir.

Directional Light ışığının açısını aşağıya eğilecek şekilde ayarlayın. Bu, objenize ışığın çaprazdan gelmesini sağlayacaktır. Omni Light ışığının rengini gri rengine dönüştürürseniz gölgeleriniz daha gerçekçi gözükecektir.

Adım 5: Uygulamanızı telefonunuzda çalıştırın.

ARKit kütüphanesinin yüzey algılama özelliğini kullanabiliyorsunuz! Bunu deneyebilmek için telefonunuzu bilgisayarınıza bağlayın. “Build” seçeneklerinden kendi cihazınızı seçin ve cihazınızda uygulamanızı çalıştırın! Aşağıdaki gibi gözükecektir.

Sonuç Kodu:

ViewController.swift dosyasındaki kod şu şekilde gözükmelidir:

import UIKit
import SceneKit
import ARKit
class ViewController: UIViewController, ARSCNViewDelegate {
    @IBOutlet var sceneView: ARSCNView!
    override func viewDidLoad() {
        super.viewDidLoad()
        sceneView.delegate = self
        sceneView.showsStatistics = true
        let scene = SCNScene(named: "art.scnassets/ship.scn")!
        sceneView.scene = scene
    }
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        let configuration = ARWorldTrackingConfiguration()
        if #available(iOS 11.3, *) {
            configuration.planeDetection = [.horizontal, .vertical]
        } else {
            configuration.planeDetection = .horizontal
        }
        sceneView.session.run(configuration)
    }
    
    func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
        let torus = SCNTorus(ringRadius: 0.2, pipeRadius: 0.02)
        torus.firstMaterial?.diffuse.contents = UIColor.red.withAlphaComponent(0.7)
        node.geometry = torus
    }
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        sceneView.session.pause()
    }
}

Adım 6: Algıladığınız alanın tamamını görebilmek için Plane Anchor oluşturun.

Algıladığınız alanının tamamını görebilmek için bir plane objesi ekleyebilirsiniz. Plane objesi, algıladığınız alanın tamamını size göstermeye uygundur.

Bir plane oluştururken dikkat etmemiz gereken noktalar vardır. Kodumuzun başında düz bir yüzey algılayabilmek için planeDetection özelliğini kullandık. Ancak yeni bir plane oluştururken, planeDetection özelliği, dış dünyadaki ortamı algılamak yerine oluşturulan plane objesini algılar. Bu noktada, uygulamanız dış ortamı algılamayı bırakır ve tamamen sanal ortamda algılamaya geçer.

Bunun olmasını istemezsiniz. Olmasını engellemek için plane objemizi bir ARAnchor olarak tanımlamamız gerekir.

Torus objenizin kodlarını silip plane objesini “renderer” fonksiyonuna ekleyin.

“Renderer” fonksiyonunuzun içinde aşağıdaki kodu yazarak plane oluşturun:

guard let planeAnchor = anchor as? ARPlaneAnchor else {return}

Adım 7: Plane Anchor objesinin extent özelliğini tanımlayın.

Plane anchor objesinin boyutunu ayarlayabilmek, hangi eksende ne kadar büyük olduğunu bilebilmek için “extent” özelliğini kullanırız. “Extent” özelliğini oluşturduğumuz plane anchor objesinin altına ekleyelim.

Plane anchor objesinin büyüklüğünü şu kod ile belirleyin:

let extent = planeAnchor.extent

Adım 8: Plane objesini oluşturalım.

Fark ettiyseniz, şuana kadar sadece plane anchor objesi oluşturuyorduk. Şimdi, algıladığımız yüzeyin koordinatlarını da belirlediğimize göre fiziksel bir plane objesi oluşturabiliriz. Bu plane objesi, algılayabildiğimiz alanı renklendirerek bize gösterecektir.

let plane = SCNPlane(width: CGFloat(extent.x), height: CGFloat(extent.z))
plane.firstMaterial?.diffuse.contents = UIColor.red.withAlphaComponent(0.7)
let planeNode = SCNNode(geometry: plane)

Plane objesi, sanal ortama yatay şekilde değil, düşey şekilde yerleştirilir. Yani şuan algılanan alanı gösteren “plane” uygulamada aşağıdaki gibi gözükür:

Plane objesi ortamda şu şekilde dik gözükür.

Plane objesini yatay yapabilmek için x koordinatını 0 değil, -90 yapmak gerekir.

Kullanacağımız açıyı radyan cinsinden yazmak gerekir:

planeNode.eulerAngles.x = -.pi/2

Adım 9: Kodladığımız plane objesini ortama eklemek.

Artık plane objemizi de oluşturduğumuza göre objemizi oluşturduğumuz sanal ortama ekleyebiliriz.

node.addChildNode(planeNode)

Adım 10: Uygulamanızı hayata geçirin!

ARKit platformuna uygun olan cihazınızı Xcode uygulamasına bağlayıp uygulamanızı cihazınızda açabilirsiniz. Artık uygulamanızın algıladığı yüzeyler kırmızı plane objeleri ile gösterilecektir.

Sonuç Kodu:

ViewController.swift dosyasındaki kod şu şekilde gözükmelidir:

import UIKit
import SceneKit
import ARKit
class ViewController: UIViewController, ARSCNViewDelegate {
    @IBOutlet var sceneView: ARSCNView!
    override func viewDidLoad() {
        super.viewDidLoad()
        sceneView.delegate = self
        sceneView.showsStatistics = true
        let scene = SCNScene(named: "art.scnassets/ship.scn")!
        sceneView.scene = scene
    }
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        let configuration = ARWorldTrackingConfiguration()
        if #available(iOS 11.3, *) {
            configuration.planeDetection = [.horizontal, .vertical]
        } else {
            configuration.planeDetection = .horizontal
        }
        sceneView.session.run(configuration)
    }
    func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
        guard let planeAnchor = anchor as? ARPlaneAnchor else {return}
        let extent = planeAnchor.extent
        let plane = SCNPlane(width: CGFloat(extent.x), height: CGFloat(extent.z))
        plane.firstMaterial?.diffuse.contents = UIColor.red.withAlphaComponent(0.7)
        let planeNode = SCNNode(geometry: plane)
        planeNode.eulerAngles.x = -.pi/2
        node.addChildNode(planeNode)
    }
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        sceneView.session.pause()
    }
}

Adım 11: Düz yüzeyleri daha doğru algılayalım.

Şimdiye kadar kodladığımız programlar, düz yüzey algılayabiliyorlardı ancak algıladığımız alanların tamamı renklenmiyordu. Bu, programın algıladığı yüzeyleri yanıltıcı bir biçimde gösteriyordu.

Algıladığımız alanı daha doğru bir şekilde gösterebilmek için dikdörtgenler (plane) ile değil, üçgenler ile alanı adlandırabiliriz. Bu bize bir polygon şekli oluşturacaktır.

Üçgenler halinde plane objeleri koyarsak, algılanması gereken yüzey daha doğru sınırlarla algılanır.

Öncelikle, algıladığımız yüzeye sürekli üçgen koymak isteyeceğimiz için bir tane renderer fonksiyonu oluşturalım ama bu sefer, didAdd yerine didUpdate özelliğini taşıyan fonksiyonu seçelim.

didUpdate özelliği taşıyan renderer fonksiyonu şöyle gözükür:

func renderer(_ renderer: SCNSceneRenderer, didUpdate node: SCNNode, for anchor: ARAnchor){
}

Adım 12: Plane Anchor objesi oluşturalım.

Plane anchor objesini yukarıdaki gibi oluşturalım. “Plane anchor” objesinin .geometry özelliği, üçgenlerden oluşan bir mesh olarak tanımlanır. Bu özellik bizim için gereklidir çünkü alanı daha iyi ve doğru algılayabilmek için üçgenler kullanmamız gerekir.

planeAnchor objesini oluşturmak için şu kodu yazın:

guard let planeAnchor = anchor as? ARPlaneAnchor else {return}
if #available(iOS 11.3, *) {
    let planeGeometry = planeAnchor.geometry
}

Not: “planeAnchor” objesinin .geometry özelliği sadece iOS 11.3 ve daha yeni sürümlerde geçerlidir.

Adım 13: Plane objesi oluşturalım.

Yukarıda yaptığımız gibi, “plane anchor” objesi oluşturduktan sonra bir de algıladığımız alanı görebilmek için plane objesi oluşturalım. Plane objesi oluştururken, bu objenin sürekli oluşması için büyük bir bilgisayar gücüne ihtiyaç vardır. Bu yüzden MTLDevice özelliğini kullanıp, bilgisayarın GPU’suna erişmemiz gerekir. Bu özellik dışında, normal bir plane objesi oluşturacakmış gibi davranabiliriz.

MTLDevice kütüphanesini kullanarak plane objesi oluşturalım:

guard let metalDevice = MTLCreateSystemDefaultDevice() else {return}
let plane = ARSCNPlaneGeometry(device: metalDevice)
plane?.firstMaterial?.diffuse.contents = UIColor.red.withAlphaComponent(0.7)

Plane objesinin fiziksel özelliklerini belirledikten sonra, oluşturduğumuz planeGeometry özelliğini plane objesine ekleyelim. Bu plane objesinin şeklinin üçgen olmasını sağlayacaktır.

plane?.update(from: planeGeometry)

Adım 14: Plane objesini bir node olarak ortama ekleyelim.

En son adım olarak oluşturduğumuz plane objesini renderer fonksiyonundaki node’a ekleyelim. Bu, objenin sanal ortamda gözükebilmesini ve devamlı bir yüzey algılandığında, o yüzeye yerleşmesini sağlayacaktır.

node.geometry = plane

Adım 15: Kodladığınız programı telefonunuzda açın!

Artık algılanan alanları daha net ve doğru bir şekilde görebileceksinizdir. Plane objeleri, dikdörtgenler halinde yüzeylere yerleşmek yerine, sürekli üçgenler halinde yüzeylere yerleşecektir.

Sonuç Kodu:

import UIKit 
import SceneKit
import ARKit
class ViewController: UIViewController, ARSCNViewDelegate {
    @IBOutlet var sceneView: ARSCNView!
    override func viewDidLod() {
        super.viewDidLoad()
        sceneView.delegate = self
        sceneView.showsStatistics = true
        let scene = SCNScene(named: "art.scnassets/ship.scn")!
        sceneView.scene = scene
    }
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        let configuration = ARWorldTrackingConfiguration()
        if #available(iOS 11.3, *) {
            configuration.planeDetection = [.horizontal, .vertical]
        } else {
            configuration.session.run(configuration)
        }
        sceneView.session.run(configuration)
    }
    func renderer(_ renderer: SCNSceneRenderer, didUpdate node: SCNNode, for anchor: ARAnchor] {
        guard let planeAnchor = anchor as? ARPlaneAnchor else {return}
        if #available(iOS 11.3, *) {
            let planeGeometry = planeAnchor.geometry
            guard let metalDevice = MTLCreateSystemDefaultDevice() else {return}
            let plane = ARSCNPlaneGeometry(device: metalDevice)
            plane?.firstMaterial?.diffuse.content = UIColor.red.withAlphaComponent(0.7)
            plane?.update(from: planeGeometry)
            node.geometry = plane
        }
    }
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        sceneView.session.pause()
    }
}

Bir ARKit makalesinin daha sonuna geldik! Bu makalede gerçek dünyada bir yüzey algılamayı ve algılanan yüzeye obje eklemeyi öğrendik. Bir sonraki ARKit makalesinde görüşmek üzere! İyi kodlamalar!✌️

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook