ARKit: Çizim Uygulaması

ARKit kütüphanesini kullanarak üç boyutlu çizimler yapabileceğiniz uygulamalar geliştirebilirsiniz.

Merhaba sevgili TurkishKit okuyucuları!✌️ Bugün sizlere ARKit kullanarak çevrenize resim çizebileceğiniz bir uygulama yapmayı göstereceğiz. Hem de 15 dakikanızı bile almayacak.😎

Yazı Önerisi

ARKit serisinin tüm yazılarını aşağıdaki linke tıklayarak keşfedebilirsiniz.

TurkishKit

Projemize Başlayalım!

İlk olarak Xcode uygulamasından her zamanki gibi yeni bir “Single View App” projesi oluşturuyoruz.

Ekranımıza ARSCNView elemanını ekleyip tüm ekranımızı kaplayacak şekilde ayarlıyoruz. “Constrait”lerini ekliyoruz.

Ekranın altına “Çiz” yazan bir buton ekliyoruz. “Constraint”lerini aşağıdaki gibi ayarlıyoruz.

Ekran tasarımımız bu kadar basitti. Şimdi uygulamamızı kodlamaya geçebiliriz.🤘

Ekranımıza eklediğimiz ARSCNView elemanını “Outlet” kullanarak View Controller kodumuza bağlıyoruz. Adını “sceneView” olarak ayarlıyoruz.

Ekranımızı ve ARKit özelliklerini ayarlayabilmek için bir dizi kod yazmamız gerekecektir. Öncellikle ARKit kütüphanesini eklememiz gerekir.

Kodunuzun en başına bunu ekleyin:

import ARKit

Sonra “configuration” elemanını tanımlamamız gerekir. Daha önceki makalelerden “configuration” elemanının pozisyonunuzu belirlemek için kullanıldığını hatırlayabilirsiniz.

Bu kodu sceneView ile yaptığınız bağlantının altına yazın:

let configuration = ARWorldTrackingConfiguration()

View Controller sınıfımız herhangi bir ARKit “delegate” elemanından referans almıyor. Bu yüzden öncellikle sınıfımıza ARSCNViewDelegate ekleyelim.

ARSCNViewDelegate, ARSCN komutlarını kullanmamıza imkan sağlayacaktır:

class ViewController: UIViewController, ARSCNViewDelegate {

Uygulamanızın herhangi bir sorunla karşılaşmaması için ve aniden kapanmaması için “debug” seçeneklerini ekleyelim.

Bu kodu “super.viewDidLoad()” kodunun altına ekleyin. Uygulamanız her kendini yenilediğinde debug kodunun çalışması gerekir ki sürekli debug edebilsin. Aynı zamanda uygulama ilk açıldığında da çalışması gerekir:

self.sceneView.debugOptions = [ARSCNDebugOptions.showWorldOrigin, ARSCNDebugOptions.showFeaturePoints]

Az önce yazdığımız kodun altına uygulamamızın ne kadar iyi çalıştığını anlayabilmek için istatistiklerini yazdıralım. Bu istatistikler uygulamamızın en altında belirecektir ve saniyede ne kadar analiz yaptığını belirtecektir.

self.sceneView.showsStatistics = true

Son olarak tabiiki de tüm bu tanımladığımız özelliklerin uygulama açılınca sürekli olarak çalışmasını istiyoruz. Ondan aşağıdaki kodları ekleyelim.

self.sceneView.session.run(configuration)
self.sceneView.delegate = self

Uygulama açıldığında kullanıcıdan kamerasını kullanabilmek için izin almamız gerekir. Ondan sağda bulunan “Info.plist” dosyasına girip ilk seçeneği “Privacy-Camera Usage Description” olarak değiştirelim ve yanına kullanıcının kamerasını kullanabilmek için bir mesaj bırakalım.

Renderer fonksiyonu ekleyelim. Bu fonksiyon uygulamamızın sürekli yenilenmesini sağlayacaktır. Bu fonksiyonun içine pozisyon kodlarını ve çizim kodlarını ekleyeceğiz.

Şimdi “Çiz” butonunumuzdan bir outlet bağlantısı yaratalım. Bu bağlantıyı sceneView bağlantısının üzerine sürükleyelim.

@IBOutlet weak var ciz: UIButton!

Pozisyonumuzun uygulama tarafından sürekli fark edilebilmesi için birkaç kafa karıştırıcı değişken tanımlamamız gerekecektir.

Renderer fonksiyonunun içine bir “pointOfView” değişkeni tanımayalım. Bu ilk açılışta olmayacağı için uygulamamızın hata vermemesi için guard kullanarak tanımlamamız gerekecektir.

guard let pointOfView = self.sceneView.pointOfView else {return}

Bir tane “transform” değişkeni yaratıp matrix değerlerini “pointOfView” değişkenimizle aynı yapalım.

Bu kodu “pointOfView” değişkenini tanımladığımız kodun altına yazalım.

let transform = pointOfView.transform

Ekranımızın oryantasyonunu — matrix değerlerine göre dünyadaki yerini — ayarlayabilmek için bir “orientation” değişkeni tanımlayalım. “Orientation” değişkeni vektörel değerler almalıdır.

Bu kodu “transform” değişkenini tanımladığımız kodun altına yazalım. m31, m32 ve m33 değerleri “transform” değişkeninden alınan float değerlerini ifade eder:

let orientation = SCNVector3(-transform.m31, -transform.m32, -transform.m33)

Lokasyonumuzu ayarlayabilmek için tekrardan “transform” değişkeninin “float” değerlerini kullanarak bir vektör olan “location” adında bir değişken tanımlayalım.

Bu kodu tanımladığımız oryantasyon değişkeninin altına yazalım:

let location = SCNVector3(transform.m41, transform.m42, transform.m43)

Şimdi pozisyonumuzu bu tanımladığımız iki vektörün birleşimine ayarlayalım ve oryantasyonumuzun x, y ve z değerlerini konsola yazdıralım.

Böylece pozisyonumuz eksiksiz bir şekilde belirtilmiş olacaktır ve bir hata olduğunda konsoldan kontrol edebileceğizdir:

let position = location + orientation
print(orientation.x, orientation.y, orientation.z)

Kodunuzun protokol hatası verdiğini göreceksinizdir. Bunu önleyebilmek için yeni bir SCNVector3 geri döndüren bir fonksiyon yazmanız gerekecektir. View Controller elemanımızın altına alttaki fonksiyonu yazın.

func + (left: SCNVector3, right: SCNVector3) -> SCNVector3 {
        
    return SCNVector3Make(left.x + right.x, left.y + right.y, left.z + right.z)
}

Şimdi sıra asıl kodlamayı yapmakta. Ekranımıza “pointer” ile çizebilmek için renderer fonksiyonunun altına kod yazmamız gerekecektir. Bu kod hem sürekli yenilenmelidir hem de eski çizimleri yok etmememelidir.

İlk olarak position değişkeninin adını “currentPositionOfCamera”’na değiştirin ve print fonksiyonunu kaldırın. Böylece kodunuz daha okunulabilir olur.

let currentPositionOfCamera = location + orientation

Çiz butonuna basıldığında kodun sürekli çalışması ve önceki resimlerin silinmemesi gerekir. Bu nedenle “DispatchQueue.main.async” fonksiyonunu kullanmamız gerekir. Bu fonksiyon arkada çalışan ana fonksiyona ara verdirir ve kullanıcı fonksiyonu kullanmayana kadar çalışır.

Butonumuza basıldığında bu fonksiyon çalışmalıdır. Bu kodu “currentPositionOfCamera” değişkeninin altına yazın:

DispatchQueue.main.async {
    if self.ciz.isHighlighted {
    }
}

Daha önceki ARKit makalelerimizde de yaptığımız gibi ekrana bir “node” eklememiz gerekecektir çizim yapabilmek için. Çizgiler noktalardan oluşur mantığıyla ilerleyince pointer koordinat düzleminde nereye giderse aralara küçük noktalar eklememiz gerekecektir.

Aşağıdaki kodu ile “çiz” butonu basılı iken “pointer” nereye bakarsa oralara küçük kırmızı noktacıklar ekleyebiliriz. Bu fonksiyonun çalıştığını kontrol edebilmek için konsola mesaj yazdırmayı unutmayın!

DispatchQueue.main.async {
    if self.ciz.isHighlighted {
        let sphereNode = SCNNode(geometry:SCNSphere(radius:0.02))
        sphereNode.position = currentPositionOfCamera
        self.sceneView.scene.rootNode.addChildNode(sphereNode)
        sphereNode.geometry?.firstMaterial?.diffuse.contents = UIColor.red
        print("Çiz butonuna basılmaktadır")
    }
}

Butona basılı olmadığı zaman uygulamamızın nasıl çalışacağını belirlemek için bir tane “else” ifadesi ekleyelim.

Bir tane “pointer” değişkeni tanımlayıp küre halide ekranımızın ortasında görünmesini sağlayalım.

Bu kodu “else” ifadesinin içine yazın:

let pointer = SCNNode(geometry: SCNSphere(radius:0.01))

“Pointer”ın adını ve pozisyonunu belirleyelim. Pointer, kalem gibi ekranın ortasında düğmeye basılmayınca duracaktır.

Bu kodu pointer değişkenini tanımladığınız kodun altına yazın:

pointer.name = "pointer"
pointer.position = currentPositionOfCamera

Bu noktada işler biraz karışıyor. Pointer objemizin sürekli olarak ekrana küçük noktalar yaratmaması için ve ekranda tek bir nokta olarak kalabilmesi için aşağıdaki kodu eklememiz gerekir. Bu hareket edince ekrana çizgiler çizilmesini önleyecektir.

self.sceneView.scene.rootNode.enumerateChildNodes({(node, _)
    in
    if node.name == "pointer {
        node.removeFromParentNode()
    }
})

Son olarak pointer objemizi ekranımıza ekleyelim ve rengini ayarlayalım.

Bu kodu pointer objesinin sürekli oluşturulmasını engellediğimiz kodun altına yazalım:

self.sceneView.scene.rootNode.addChildNode(pointer)
pointer.geometry?.firstMaterial?.diffuse.contents = UIColor.red

Sonunda kodunuz şöyle gözükmelidir:

import UIKit
import ARKit
class ViewController: UIViewController, ARSCNViewDelegate {
    @IBOutlet weak var ciz: UIButton!
    @IBOutlet weak var sceneView: ARSCNView!
    let configuration = ARWorldTrackingConfiguration()
    override func viewDidLoad() {
        super.viewDidLoad()
        self.sceneView.debugOptions = [ARSCNDebugOptions.showWorldOrigin, ARSCNDebugOptions.showFeaturePoints]
        self.sceneView.showsStatistics = true //fps bilgilerini paylaşıyor ve uygulamanın performansını gösteriyor
        self.sceneView.session.run(configuration)
        self.sceneView.delegate = self
    }
    func renderer(_renderer: SCNSceneRenderer, willRenderScene scene: SCNScene, atTime time: TimeInterval) {
        print("Render ediyor")
        guard let pointOfView = self.sceneView.pointOfView else {return}
        let transform = pointOfView.transform
        let orientation = SCNVector3(-transform.m31, -transform.m32, -transform.m33)
        let location = SCNVector3(-transform.m41, -transform.m42, -transform.m43)
        let currentPositionOfCamera = location + orientation
        DispatchQueue.main.async {
            if self.ciz.isHighlighted {
                let sphereNode = SCNNode(geometry: SCNSphere(radius: 0.02))
                sphereNode.position = currentPositionOfCamera
                self.sceneView.scene.rootNode.addChildNode (sphereNode)
                sphereNode.geometry?.firstMaterial?.diffuse.contents = UIColor.red
                print("draw button is being pressed")
            } else {
                let pointer = SCNNode(geometry: SCNSphere(radius: 0.01))
                pointer.name = "pointer"
                pointer.position = currentPositionOfCamera
                self.sceneView.scene.rootNode.enumerateChildNodes({ (node, _)
                    in
                    if node.name == "pointer" {
                        node.removeFromParentNode()
                    }
                })
                self.sceneView.scene.rootNode.addChildNode(pointer)
                pointer.geometry?.firstMaterial?.diffuse.contents = UIColor.red
            }
        }
    }
}
func + (left: SCNVector3, right: SCNVector3) -> SCNVector3 {
    return SCNVector3Make(left.x + right.x, left.y + right.y, left.z + right.z)
}

Bir ARKit makalesinin daha sonuna geldik. Bu makalede ARKit kütüphanesini kullanarak çizim yapan bir uygulama yaptık. Bir sonraki makalemizde görüşmek üzere!🥳

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

Twitter | Instagram | Facebook