Belajar ARKit di iOS

Membuat aplikasi iOS sederhana dengan teknologi Augmented Reality menggunakan SceneKit

Despicable Me — Moon Mission

Apakah kalian masih ingat adegan di atas? Suatu adegan dalam film pertama Despicable Me, dimana sang tokoh utama yang bernama Gru, diberi misi untuk mengecilkan bulan hingga sebesar telapak tangan. Ukuran bulan yang berdiameter 3.474,2 km dikecilkan menggunakan alat miliknya menjadi kira-kira sebesar 20 cm saja.

Anggaplah kita mendapatkan misi yang sama seperti Gru, namun sayangnya alat untuk mengecilkan benda hanyalah fiksi. Misi kita adalah mendapatkan bulan hingga sebesar telapak tangan yang bisa dibawa kemanapun kamu mau tanpa bisa dicuri oleh orang lain. Cara terbaik melakukan misi ini adalah menggunakan Augmented Reality.

Untuk bisa membuat AR dalam aplikasi iOS, kita membutuhkan sebuah library bawaan Apple yang bernama ARKit. Ketika ingin menggunakan ARKit, Xcode akan bertanya content technology apa yang akan kita pakai. Per tanggal artikel ini dibuat, ada 4 macam content technology yang bisa digunakan, yaitu RealityKit, SceneKit, SpriteKit, dan Metal. Namun, pada project ini, kita akan menggunakan SceneKit.

SceneKit adalah teknologi ARKit yang memperbolehkan pengguna untuk memasukkan 3D model ke dalam aplikasi dengan mempertahankan posisi obyek tersebut pada dunia nyata.

Setup Environment

Buat project baru, pilih “Augmented Reality App” bukan “App” biasa supaya sistem akan generate project dengan AR di dalamnya.

Selanjutnya, pilih content technology yang dibutuhkan, mari kita pilih “SceneKit”.

Understanding Project Files

Selesai membuat project kamu akan menemukan struktur file yang berbeda dengan biasanya.

Isi ViewController tampak lebih ramai dari biasanya, penuh dengan kode yang mungkin tidak bisa kamu pahami. Pada struktur projecr di sebelah kita, kamu menemukan sebuah folder yang belum kamu temui sebelumnya. Folder tersebut bernama art.scnassets. Folder ini akan bertanggung jawab atas semua 3D object dan texture yang kamu miliki.

Di dalam folder tersebut, secara default telah berisikan sebuah object dan sebuah texture. Kalau kalian run projectnya (tidak perlu mengatur apapun), kamu bisa melihat sebuah pesawat luar angkasa melayang disekitarmu.

Moon Mission

Mari kita mulai memahami project yang akan kita buat. Kita akan membuat sebuah bulan, maka kita perlu sebuah object bulat berukuran 20 cm dengan sebuah texture gambar bulan. Untuk itu, kita memerlukan sebuah gambar dengan texture bulan dengan extension png. Kalian bisa men-download texture bulan melalui link di bawah. Setelah itu, masukkan file tersebut ke dalam folder art.scnassets.

Download texture bulan : Solar Textures
Optional : Ubah nama file menjadi, moon.jpg agar mudah digunakan.

Sebelum kita memulai, kita bisa hapus beberapa bagian dalam ViewController agar tidak membingungkan mana yang digunakan dan yang tidak. Ubahlah menjadi seperti ini:

Note: Kita akan mulai koding pada tanda di atas.

Bulan itu bulat, jadi kita tidak perlu membuat 3D objectnya terlebih dahulu, cukup menggunakan class yang ada saja atau membuatnya secara programmatically.

Pertama, kita buat obyek bulat. Untuk membuatnya kita menggunakan SCNSphere dan perlu menyertakan ukuran radiusnya. Satuan pada sistem AR adalah meter bukan cm, px, atau inch. Jadi kita tulis seperti ini

let sphere = SCNSphere(radius: 0.2)

Kedua, kita mengatur texturenya. Istilah dalam 3D model yang dibutuhkan ketika membuat texture adalah material. Dalam SceneKit, ada sebuah class yang bernama SCNMaterial. Material ini kita atur agar memiliki texture moon.jpg yang sudah didownload tadi. Cara memasukkan texture ke dalam material adalah menggunakan attribute diffuse, lalu masukkan gambar menggunakan UIImage.

let material = SCNMaterial()
material.diffuse.contents = UIImage(named: “art.scnassets/moon.jpg”)

Mengapa perlu menuliskan nama folder assetnya? Karena Xcode hanya akan membaca dari root folder.

Ketiga, kita pasang material ke dalam sphere yang sudah dibuat sebelumnya. Attribute untuk memasang material bernama materials dengan tipe data array of SCNMaterial.

sphere.materials = [material]

Keempat, kita perlu mengatur posisi object yang akan dibuat berdasarkan posisi X, Y, Z. Sebelum mengatur, mari memahami axis X, Y, Z berdasarkan gambar di bawah.

SceneKit — X, Y, Z Axis

Axis X = Kiri(-) Kanan(+)
Axis Y = Bawah(-) Atas(+)
Axis Z = Belakang(-) Depan(+)

Untuk posisi objek, titik atau node yang menjadi posisi adalah titik tengah sebuah obyek. Jika obyek kita adalah bulat, maka posisi yang bisa diatur adalah titik tengah atau pusat bulat tersebut.

Pengaturan ini menggunakan sebuah class yang bernama SCNNode. Dalam class tersebut ada 2 hal yang akan kita atur, pertama adalah position dan yang kedua adalah geometry. Pada position, kita akan mengatur node dengan menggunakan SCNVector3 dan menyertakan posisi x, y, z. Sedangkan untuk geometry, kita masukkan objek yang telah dibuat.

Pada contoh ini, saya menggunakan posisi object x = 0, y = 0.1, dan z = -0.5. Artinya, posisi berada di tengah axis X, 10 cm ke atas, dan 50 cm mundur ke belakang.

let node = SCNNode()
node.position = SCNVector3(x: 0, y: 0.1, z: -0.5)
node.geometry = sphere

Terakhir, kita masukkan node yang ada ke dalam sceneView agar bisa di render oleh aplikasi.

sceneView.scene.rootNode.addChildNode(node)

Sehingga tampilan akhir ViewController bagian viewDidLoad akan menjadi seperti ini:

Kalau kalian run projectnya, kamu bisa melihat bulan di hadapanmu. Kalau kamu menaruh tanganmu di depan kamera, kamu akan memiliki bulan seperti Gru.

: . : . : . : . : . : . MISSION ACCOMPLISHED . : . : . : . : . : . :

Kesimpulan

Penggunaan Augmented Reality menggunakan SceneKit di aplikasi iOS sebenarnya mudah. Kamu hanya perlu mengetahui class milik SceneKit dan posisi X, Y, Z untuk menggunakannya. Berdasarkan tutorial di atas, pembuatan obyek, penambahan material, pengaplikasikan texture dan penerapan posisi obyek merupakan pelajaran basic dari AR, Kamu bisa mengembangkan lebih banyak dari AR ini, mungkin penambahan logika aplikasi atau menambahkan animasi.

Selamat belajar dan semoga berhasil …