Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Augmented Reality
Code

Kode App mengukur dengan ARKit: Menempatkan Objek di Scene

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ridho Anbia Habibullah (you can also view the original English article)

Seiring dengan banyak hal lain yang telah segera digantikan oleh teknologi modern kita, terlihat seolah-olah pita pengukur umum mungkin berikutnya. Dalam seri tutorial dua bagian ini, kami belajar bagaimana menggunakan kenyataan yang ditambah dan kamera di perangkat iOS Anda untuk membuat sebuah aplikasi yang akan melaporkan jarak antara dua titik.

Di posting pertama, kami membuat proyek aplikasi dan mengodekan elemen antarmuka utamanya. Di posting ini, kita akan menyelesaikannya dengan mengukur antara dua titik di scene AR. Jika belum, ikutilah dengan posting pertama untuk menyiapkan proyek ARKit Anda.

Menangani keran

Inilah salah satu bagian terbesar dari tutorial ini: menangani saat pengguna mengetuk dunia mereka untuk mendapatkan bola agar tampil tepat di tempat mereka mengetuk. Nantinya, kita akan menghitung jarak antar bola ini untuk akhirnya menunjukkan jarak penggunanya.

Tekan Gesture Recognizer

Langkah pertama dalam memeriksa keran adalah dengan membuat alat pengaman isyarat saat aplikasi diluncurkan. Untuk melakukan ini, buat tap handler sebagai berikut:

Baris pertama membuat instance dari kelas UITapGestureRecognizer () dan melewati dua parameter pada inisialisasi: target dan tindakan. Targetnya adalah penerima pemberitahuan yang dikenalkan oleh pengenal ini, dan kami ingin kelas ViewController menjadi target. Tindakannya hanyalah sebuah metode yang harus dipanggil setiap kali ada keran.

Untuk mengatur jumlah keran, tambahkan ini:

Selanjutnya, instance dari kelas yang kita buat sebelumnya perlu mengetahui berapa banyak keran sebenarnya dibutuhkan untuk mengaktifkan recognizer. Dalam kasus kami, kami hanya memerlukan satu ketuk, namun di aplikasi lain, Anda mungkin perlu memiliki lebih banyak (seperti keran dua kali) untuk beberapa kasus.

Tambahkan handler ke pemandangan seperti ini:

Terakhir, baris kode tunggal ini hanya menambahkan gesture recognizer ke sceneView, di situlah kita akan melakukan segalanya. Di sinilah preview kamera akan sebaik apa yang akan diklik pengguna secara langsung agar mendapatkan bola agar tampil di layar, jadi masuk akal untuk menambahkan recognizer ke tampilan yang akan berinteraksi dengan pengguna.

Metode Handle Tap

Saat kami membuat UITapGestureRecognizer (), Anda mungkin ingat bahwa kami menetapkan metode handleTap ke dalam tindakan. Sekarang, kami siap untuk menyatakan metode itu. Untuk melakukannya, cukup tambahkan yang berikut ke aplikasi Anda:

Meskipun deklarasi fungsi mungkin cukup jelas, Anda mungkin bertanya-tanya mengapa ada tag @objc di depannya. Pada versi Swift saat ini, untuk mengekspos metode ke Objective-C, Anda memerlukan tag ini. Yang perlu Anda ketahui adalah bahwa #selector membutuhkan metode yang dimaksud agar tersedia untuk Objective-C. Terakhir, parameter metode akan membiarkan kita mendapatkan lokasi yang tepat yang disadap di layar.

Deteksi lokasi

Langkah selanjutnya dalam membuat bola kita muncul dimana pengguna disadap adalah dengan mendeteksi posisi yang tepat yang mereka tapped. Sekarang, ini tidak sesederhana mendapatkan lokasi dan menempatkan bola, tapi saya yakin Anda akan menguasainya dalam waktu singkat.

Mulailah dengan menambahkan tiga baris kode berikut ke metode handleTap () Anda:

Jika Anda mengingat parameter yang kami ambil dalam metode handleTap (), Anda mungkin ingat bahwa itu bernama sender, dan itu adalah tipe UITapGestureRecognizer. Nah, baris kode pertama ini hanya mengambil lokasi keran di layar (relatif terhadap tampilan pemandangan), dan menyetelnya ke location bernama konstan.

Selanjutnya, kita melakukan sesuatu yang disebut hit test pada SceneView itu sendiri. Apa ini, secara sederhana, adalah memeriksa pemandangan benda nyata, seperti tabel, permukaan, dinding, lantai, dll. Hal ini memungkinkan kita untuk mendapatkan rasa kedalaman dan untuk mendapatkan pengukuran yang cukup akurat antara dua titik. Selain itu, kami menentukan jenis objek yang akan dideteksi, dan seperti yang Anda lihat, kami mengatakannya untuk mencari featurePoints, yang pada dasarnya adalah permukaan datar, yang masuk akal untuk aplikasi pengukuran.

Terakhir, baris kode mengambil hasil yang paling akurat, yang dalam kasus hitTest adalah hasil terakhir, dan memeriksa apakah tidak nil. Jika ya, itu mengabaikan sisa garis dalam metode ini, tapi jika memang ada hasilnya, itu akan diberikan ke hasil yang disebut result.

Matriks

Jika Anda berpikir kembali ke kelas aljabar kelas menengah Anda, Anda mungkin ingat matriks, yang mungkin tidak sepenting masa lalu seperti sekarang. Mereka biasanya digunakan dalam tugas-tugas terkait grafis komputer, dan kita akan mendapatkan sekilas tentang mereka di aplikasi ini.

Tambahkan baris berikut ke metode handleTap () Anda, dan kami akan membahasnya secara rinci:

Sebelum masuk ke baris pertama kode, penting untuk dipahami bahwa uji coba yang kami lakukan sebelumnya mengembalikan jenis matriks_float4x4, yang pada dasarnya merupakan matriks nilai float empat per empat. Karena kita berada di SceneKit, kita perlu mengubahnya menjadi sesuatu yang dapat dimengerti SceneKit-dalam kasus ini, ke SCNMatrix4.

Kemudian, kita akan menggunakan matriks ini untuk membuat SCNVector3, yang, seperti namanya, adalah vektor dengan tiga komponen. Seperti yang telah Anda duga, komponen-komponen itu adalah x, y, dan z, untuk memberi kita posisi di luar angkasa. transform.m41, transform.m42, dan transform.m43 adalah nilai koordinat yang relevan untuk tiga komponen vektor.

Terakhir, mari kita gunakan metode newSphere () yang telah kita buat sebelumnya, bersamaan dengan informasi lokasi yang kami parsing dari acara sentuhan, untuk membuat bola dan menugaskannya ke lingkaran yang disebut sphere.

Memecahkan Double-Tap Bug

Sekarang, Anda mungkin telah menyadari sedikit kelemahan dalam kode kita; Jika pengguna terus mengetuk, bola baru akan terus tercipta. Kami tidak menginginkan ini karena membuat sulit untuk menentukan bidang mana yang perlu diukur. Juga, sulit bagi pengguna untuk melacak semua bidang!

Memecahkan Dengan Array

Langkah pertama untuk mengatasi hal ini adalah dengan membuat sebuah array di bagian atas kelas.

Ini adalah rangkaian SCNNodes karena itulah tipe yang kami kembalikan dari metode newSphere () kami yang kami buat menjelang awal tutorial ini. Nantinya, kita akan menempatkan bidang dalam array ini dan memeriksa berapa banyak yang ada. Berdasarkan hal tersebut, kita bisa memanipulasi jumlah mereka dengan cara menghapus dan menambahkannya.

Opsional Binding

Selanjutnya, kita akan menggunakan serangkaian pernyataan if-else dan untuk loop untuk mencari tahu apakah ada bidang dalam array atau tidak. Sebagai permulaan, tambahkan pengikatan opsional berikut ke aplikasi Anda:

Pertama, katai memeriksa apakah ada item dalam array spheres, dan jika tidak, jalankan kode di bagian yang else.

Mengaudit Sphere

Setelah itu, tambahkan yang berikut ke bagian pertama (jika if cabang) dari pernyataan if-else Anda:

Karena kita sudah dalam acara tap, kita tahu bahwa kita menciptakan bidang lain. Jadi jika sudah ada satu bola, kita perlu mendapatkan jarak dan menampilkannya ke pengguna. Anda bisa memanggil metode distance () di sphere, karena nantinya, kita akan membuat perpanjangan SCNNode.

Selanjutnya, kita perlu tahu apakah sudah ada lebih dari maksimal dua bidang. Untuk melakukan ini, kami hanya menggunakan properti hitungan dari rangkaian sphere kami dan sebuah pernyataan if. Kami iterasi melalui semua bidang dalam array dan menghapusnya dari tempat kejadian. (Jangan khawatir, kita akan beberapa dari mereka kembali nanti.)

Akhirnya, karena kita sudah berada dalam pernyataan if yang mengatakan bahwa ada lebih dari dua bidang, kita dapat menghapus yang ketiga dalam array sehingga kita memastikan bahwa hanya dua yang tertinggal dalam array setiap saat.

Menambahkan Spheres

Akhirnya, di klausul else, kita tahu bahwa array spheres kosong, jadi yang perlu kita lakukan adalah menambahkan bidang yang kita buat pada saat pemanggilan metode. Di dalam klausul Anda yang else, tambahkan ini:

Yay! Kami hanya menambahkan sphere ke array bola kami, dan array kami siap untuk keran berikutnya. Kami sekarang telah mempersiapkan array kami dengan bidang yang seharusnya ada di layar, jadi sekarang, mari kita tambahkan ini ke array.

Untuk iterate melalui dan menambahkan spheres, tambahkan kode ini:

Ini hanya sederhana for loop, dan kita menambahkan spheres (SCNNode) sebagai anak dari simpul akar adegan. Di SceneKit, ini adalah cara yang lebih disukai untuk menambahkan sesuatu.

Metode lengkap

Inilah metode handleTap () terakhir yang seharusnya terlihat seperti:

Menghitung Jarak

Sekarang, jika Anda ingat, kami memanggil metode distance (to:) di SCNNode, bola, dan saya yakin Xcode berteriak kepada Anda karena menggunakan metode yang tidak diumumkan. Mari kita akhiri sekarang, dengan membuat perpanjangan kelas SCNNode.

Untuk membuat ekstensi, lakukan saja di luar kelas ViewController Anda:

Ini hanya memungkinkan Anda mengubah kelas (seolah-olah Anda sedang mengedit kelas yang sebenarnya). Kemudian, kita akan menambahkan metode yang akan menghitung jarak antara dua node.

Inilah deklarasi fungsi untuk melakukan itu:

Jika Anda akan melihat, ada parameter yang merupakan kode SCNNode lainnya, dan mengembalikan CGFloat sebagai hasilnya. Untuk perhitungan sebenarnya, tambahkan ini ke fungsi distance () Anda:

Tiga baris kode pertama mengurangi posisi x, y, dan z dari SCNNode saat ini dari koordinat node yang dilewatkan sebagai parameter. Kita kemudian akan menghubungkan nilai-nilai ini ke dalam rumus jarak jauh untuk mendapatkan jarak. Juga, karena saya menginginkan hasilnya dalam inci, saya telah menciptakan sebuah konstanta untuk tingkat konversi antara meter dan inci untuk memudahkan konversi di kemudian hari.

Sekarang, untuk mendapatkan jarak di antara kedua simpul itu, pikirkan kembali kelas matematika sekolah menengah Anda: Anda mungkin ingat rumus jarak untuk bidang Cartesian. Di sini, kami menerapkannya pada poin dalam ruang tiga dimensi.

Akhirnya, kita mengembalikan nilai dikalikan dengan rasio konversi inci untuk mendapatkan satuan ukuran yang sesuai. Jika Anda tinggal di luar Amerika Serikat, Anda dapat membiarkannya dalam meter atau mengubahnya menjadi sentimeter jika Anda mau.

Kesimpulan

Nah, itu bungkusnya! Inilah tugas akhir proyek Anda:

Final result showing the measuring app in action

Seperti yang bisa Anda lihat, pengukurannya tidak sempurna, tapi menurut perkiraan komputer 15 inci berukuran sekitar 14,998 inci, jadi tidak jelek!

Anda sekarang tahu bagaimana mengukur jarak dengan menggunakan perpustakaan baru Apple, ARKit. Aplikasi ini dapat digunakan untuk banyak hal, dan saya menantang Anda untuk memikirkan berbagai cara agar hal ini dapat digunakan di dunia nyata, dan pastikan untuk meninggalkan pemikiran Anda di komentar di bawah ini.

Juga, pastikan untuk memeriksa repo GitHub untuk aplikasi ini. Dan saat Anda masih di sini, lihat tutorial pengembangan iOS lainnya di sini di Envato Tuts +!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.