Mulai menggunakan Streetscape Geometry dan API anchor atap di ARCore

Mulai menggunakan Streetscape Geometry dan API anchor atap di ARCore

Tentang codelab ini

Terakhir diperbarui Apr 20, 2023

Ditulis oleh Dereck Bridie

1. Sebelum memulai

ARCore adalah framework Google untuk membangun pengalaman augmented reality (AR) di smartphone. Geospatial Streetscape Geometry dan API anchor atap membuat pengalaman AR dapat memahami aneka gedung di sekitar pengguna Anda.

Dalam codelab ini, Anda akan membangun aplikasi AR yang memvisualisasikan streetscape geometry di area Anda dan memungkinkan Anda mendekorasi sisi-sisinya. Selanjutnya, Anda akan menggunakan anchor atap untuk menambahkan dekorasi ke atap gedung di sekitar Anda.

Prasyarat

• Pengetahuan dasar tentang AR
• Pengetahuan dasar tentang ARCore Geospatial API

Yang akan Anda pelajari

• Cara menyiapkan project Google Cloud yang dapat menggunakan ARCore Geospatial API.
• Cara memperoleh streetscape geometry dari Geospatial API.
• Cara memvisualisasikan gedung dan medan yang diperoleh dari streetscape geometry.
• Cara melakukan penghitungan dasar atas poligon yang diperoleh.
• Cara menjalankan hit-test atas geometri.
• Cara menggunakan anchor atap untuk menyematkan konten ke bagian atas gedung.

Yang Anda butuhkan

• Perangkat Android yang didukung ARCore yang terhubung dengan kabel USB ke mesin pengembangan dan dikonfigurasi dengan proses debug USB.
• Layanan Google Play untuk AR versi 1.37 atau yang lebih baru yang diinstal di perangkat pengembangan Android.
• Android Studio yang diinstal dan dikonfigurasi untuk membangun aplikasi Android.

2. Menyiapkan lingkungan

Untuk menggunakan Geospatial API dengan Kotlin dan Android Studio, Anda memerlukan project Google Cloud dan project awal kami.

Menyiapkan project Google Cloud

ARCore Geospatial API terhubung dengan Google Cloud untuk menyediakan informasi lokasi dari Sistem Pemosisi Visual (VPS) Google di area-area yang dicakup oleh Google Street View.

Untuk menggunakan server ini di project Anda, ikuti langkah-langkah berikut:

1. Buat project di Google Cloud.
2. Di kolom Project name, masukkan nama yang sesuai, misalnya ARCore Geospatial API project, lalu pilih sebuah lokasi.
3. Klik Create.
4. Di Konsol Google Cloud di halaman pemilih project, klik Create Project.
5. Klik link berikut guna melihat ARCore API untuk project ini, lalu klik Enable:
   Enable the ARCore API
6. Buat kunci API untuk project Anda:
   1. Di bagian APIs & services, pilih Credentials.
   2. Klik Create credentials dan pilih API key.
   3. Catat kunci ini karena Anda akan memerlukannya nanti.

Anda telah membuat project Google Cloud dengan otorisasi kunci API, dan sekarang Anda siap menggunakan Geospatial API dalam contoh project.

Menyiapkan Android Studio

Untuk membantu Anda mulai menggunakan Geospatial API, kami menyediakan project awal yang mencakup dasar-dasar project ARCore yang terintegrasi dengan Geospatial API.

Untuk menyiapkan Android Studio, ikuti langkah-langkah berikut:

1. Buka Android Studio dan lakukan salah satu tindakan berikut:
   • Jika sudah ada project yang terbuka, klik File > New > Project from version control.
   • Jika jendela Welcome to Android Studio ditampilkan, klik Get from VCS.
2. Pilih Git dan masukkan https://github.com/google-ar/codelab-streetscape-geometry-rooftop-anchors.git untuk mengimpor project.

Mengintegrasikan kunci API dengan project Android Studio

Untuk mengaitkan kunci API dari Google Cloud dengan project Anda, ikuti langkah-langkah berikut:

1. Di Android Studio, klik app > src dan klik dua kali AndroidManifest.xml.
2. Temukan entri meta-data berikut:

   <meta-data
       android:name="com.google.android.ar.API_KEY"
       android:value="API_KEY" />
   

3. Ganti placeholder API_KEY dengan kunci API yang telah dibuat di project Google Cloud Anda. Nilai yang tersimpan di com.google.android.ar.API_KEY akan memberikan otorisasi kepada aplikasi ini untuk menggunakan Geospatial API.

Memverifikasi project

• Untuk memverifikasi project, jalankan aplikasi Anda di perangkat pengembangan. Anda akan melihat tampilan kamera dan informasi debug geospasial di bagian atas layar. Anda juga akan melihat tombol dan kontrol yang sepertinya tidak memiliki fungsi. Anda harus memprogram fungsi tersebut ke dalam project melalui codelab ini.

Perhatian: Jika Geospatial API tidak berjalan, pastikan kunci API yang dimasukkan ke file AndroidManifest.xml sama persis dengan yang ditampilkan di Google Cloud.

3. Memvisualisasikan data streetscape-geometry

Setelah mengonfirmasi bahwa Geospatial API dapat berjalan di perangkat Anda, dapatkan streetscape geometry dari Geospatial API.

Mengaktifkan streetscape geometry

1. Dalam file StreetscapeGeometryActivity.kt, temukan baris berikut:

   // TODO: Enable Streetscape Geometry.
   

2. Setelah baris ini, aktifkan mode streetscape-geometry:

   streetscapeGeometryMode = Config.StreetscapeGeometryMode.ENABLED
   

   Setelah Geospatial API dan mode streetscape-geometry diaktifkan, aplikasi Anda dapat menerima informasi streetscape-geometry di sekitar pengguna.

Memperoleh streetscape geometry

1. Dalam file StreetscapeGeometryActivity.kt, temukan baris berikut:

   // TODO: Obtain Streetscape Geometry.
   

2. Setelah baris ini, peroleh streetscape geometry dengan mendapatkan semua objek Trackable dan memfilternya berdasarkan StreetscapeGeometry:

   val streetscapeGeometry = session.getAllTrackables(StreetscapeGeometry::class.java)
   

   Anda akan menggunakan geometri ini dalam visualisasi sederhana yang disediakan dalam contoh project. Visualisasi ini menampilkan setiap poligon gedung atau medan dalam warna berbeda.
3. Pada baris berikutnya, tambahkan kode berikut:

   streetscapeGeometryRenderer.render(render, streetscapeGeometry)
   

4. Jalankan aplikasi dan kunjungi sebuah gedung di area Anda.
5. Setelah lokasi Geospasial dilengkapi, ketuk Settings dan aktifkan visualisasi streetscape-geometry.
6. Lihat sebuah gedung sebagai AR. Setiap segmen gedung memiliki warna berbeda, serta Enum Quality dan Type dari geometri paling tengah ditampilkan.

Perhatian: Jika Anda tidak dapat melihat streetscape geometry atau tidak melihat dekorasi apa pun saat mengetuk layar, ikuti langkah-langkah berikut untuk mereset dari checkpoint codelab:

1. Di Android Studio, klik VCS > Git > Branches > Checkout > step-3. Tindakan ini akan membawa kembali ke langkah ketiga.
2. Tambahkan kunci API Anda ke file AndroidManifest.xml seperti dijelaskan dalam petunjuk penyiapan.

4. Menjalankan hit-test dengan data streetscape-geometry

Setelah dapat melihat streetscape geometry, sekarang Anda dapat menggunakan hit-test untuk mendekorasi gedung. Hit-test mencari titik potong antara geometri virtual dan sebuah sinar. Anda menggunakan hit-test untuk menemukan geometri di mana pengguna melakukan ketukan.

Menjalankan hit-test

Di bagian ini, Anda akan menempatkan bintang di fasad gedung saat pengguna mengetuk geometri gedung tersebut. Anda melakukannya dengan hit-test dari perspektif pengguna di dunia nyata, dan mencatat objek AR mana saja yang ditemuinya ketika keluar. Selanjutnya, Anda menggunakan informasi ini untuk memeriksa apakah pengguna tersebut mengetuk poligon gedung atau tidak.

1. Dalam file StreetscapeCodelabRenderer.kt, temukan baris berikut:

   // TODO: Create an anchor for a star, and add it to the starAnchors object.
   

2. Setelah baris ini, tambahkan kode berikut:

   val centerHits = frame.hitTest(centerCoords[0], centerCoords[1])
   val hit = centerHits.firstOrNull {
     val trackable = it.trackable
     trackable is StreetscapeGeometry && trackable.type == StreetscapeGeometry.Type.BUILDING
   } ?: return
   

   Kode ini menggunakan koordinat pusat untuk menemukan sebuah streetscape geometry yaitu sebuah gedung. Anda akan menggunakan hasil ini untuk menambahkan dekorasi.

Menambahkan dekorasi bintang setelah ketukan

1. Dalam file StreetscapeCodelabRenderer.kt, temukan baris berikut:

   // TODO: Create an anchor for a star, and add it to the starAnchors object.
   

2. Setelah baris ini, tambahkan kode berikut:

   val transformedPose = ObjectPlacementHelper.createStarPose(hit.hitPose)
   val anchor = hit.trackable.createAnchor(transformedPose)
   starAnchors.add(anchor)
   

   Class ObjectPlacementHelper menentukan lokasi yang tepat untuk menempatkan bintang Anda dengan melihat pose hit. Objek starAnchors digunakan untuk merender bintang dalam tampilan AR.

Mencobanya

1. Jalankan aplikasi dan kunjungi sebuah gedung di area Anda.
2. Setelah lokasi geospasial dilengkapi, arahkan kamera Anda ke gedung dan ketuk layar. Anda akan melihat sebuah bintang muncul di atas gedung itu di tengah-tengah layar.

Perhatian: Jika Anda tidak dapat melihat streetscape geometry atau tidak melihat dekorasi apa pun saat mengetuk layar, ikuti langkah-langkah berikut:

1. Di Android Studio, klik VCS > Git > Branches > Checkout > step-4.
2. Tambahkan kunci API Anda ke file AndroidManifest.xml seperti dijelaskan dalam petunjuk penyiapan.

5. Menggunakan data anchor atap

Terakhir, Anda akan menggunakan anchor atap untuk menambahkan dekorasi ke bagian atas gedung. Anchor atap membantu Anda menyematkan anchor AR ke bagian atas gedung beserta informasi garis lintang dan bujur. Anda menggunakan anchor ini untuk menyematkan balon ke gedung di sekitar pengguna.

Menambahkan perilaku ke mode balon

Project ini memiliki dua mode penempatan aset: mode bunga matahari yang telah Anda gunakan dan mode balon.

Untuk memprogram perilaku mode balon, ikuti langkah-langkah berikut:

1. Dalam file StreetscapeCodelabRenderer.kt, temukan baris berikut:

   // TODO: Create an anchor for a balloon and add it to the balloonAnchors object.
   

2. Gunakan pose hit untuk membuat titik yang ideal bagi balon Anda:

   val transformedPose = ObjectPlacementHelper.createBalloonPose(hit.hitPose)
   

3. Konversi variabel transformedPose menjadi pose geospasial:

   val earth = session?.earth ?: return
   val geospatialPose = earth.getGeospatialPose(transformedPose)
   

4. Buat anchor atap dengan garis lintang dan bujur yang telah ditransformasi:

   earth.resolveAnchorOnRooftopAsync(
     geospatialPose.latitude, geospatialPose.longitude,
     0.0,
     transformedPose.qx(), transformedPose.qy(), transformedPose.qz(), transformedPose.qw()
   ) { anchor, state ->
     if (!state.isError) {
       balloonAnchors.add(anchor)
     }
   }
   

Mencobanya

1. Jalankan aplikasi dan kunjungi sebuah gedung di area Anda.
2. Setelah lokasi geospasial dilengkapi, beralihlah ke mode balon dan ketuk sebuah gedung. Anda akan melihat sebuah balon ditampilkan di atas atap gedung tersebut.

Jika Anda tidak dapat mereplikasi perilaku yang diharapkan, ikuti langkah-langkah berikut:

1. Di Android Studio, klik VCS > Git > Branches > Checkout > step-5.
2. Tambahkan kunci API Anda ke file AndroidManifest.xml seperti dijelaskan dalam petunjuk penyiapan.

6. Kesimpulan

Selamat! Anda telah membangun aplikasi AR yang memvisualisasikan streetscape geometry di area Anda dan memungkinkan Anda mendekorasi sisi-sisinya dengan bintang. Anda juga telah menggunakan anchor atap untuk menambahkan balon ke atap gedung di sekitar Anda.

Mempelajari lebih lanjut

• Panduan developer streetscape geometry
• Panduan developer anchor atap
• Ringkasan Geospatial API