Saat bersiap untuk Google I/O, kami ingin menyoroti berbagai kemungkinan menarik dari augmented reality (AR) di web. Chacmool adalah demo pengalaman web pendidikan yang kami buat untuk menunjukkan betapa mudahnya AR berbasis web membantu pengguna berinteraksi dengan pengalaman AR. Web membuat AR nyaman dan dapat diakses di mana saja.
Kini kami telah mengaktifkan demo ini di
Chrome Canary
di
perangkat Android yang kompatibel dengan ARCore dengan Android O atau yang lebih baru. Anda juga harus
menginstal ARCore.
Pekerjaan ini bergantung pada proposal WebXR baru (WebXR Hit Test API), sehingga berada di bawah flag dan dimaksudkan agar tetap di Canary saat kami menguji dan meningkatkan proposal API baru dengan anggota Immersive Web Community Group lainnya. Bahkan,
untuk mengakses demo, Anda harus mengaktifkan dua tanda di chrome://flags:
#webxr dan #webxr-hit-test. Setelah mengaktifkan keduanya dan memulai ulang Canary, Anda dapat melihat demo Chacmool.
Pengalaman AR Chacmool berpusat pada pendidikan, dengan memanfaatkan sifat imersif dan interaktif AR untuk membantu pengguna mempelajari pahatan Chacmool kuno. Pengguna dapat menempatkan patung seukuran aslinya dan berpindah-pindah untuk melihat patung tersebut dari berbagai sudut dan jarak. Dengan sifat imersif AR, pengguna dapat bebas menjelajahi, menemukan, dan bermain dengan konten, seperti yang dapat mereka lakukan di dunia nyata. Saat melihat objek dalam AR, bukan melihatnya di layar 2D datar, kita bisa mendapatkan pemahaman mendalam tentang apa yang kita lihat karena kita dapat melihatnya dari berbagai sudut dan jarak yang berbeda menggunakan model interaksi yang sangat intuitif: berjalan di sekitar objek, dan semakin dekat atau semakin jauh secara fisik. Selain itu, dalam pengalaman ini, ada anotasi yang ditempatkan langsung pada patung. Hal ini memungkinkan pengguna untuk langsung menghubungkan apa yang dijelaskan dalam teks dan letak fitur-fitur tersebut pada patung.
Demo ini dibuat selama sekitar satu bulan untuk dibuat, dengan memanfaatkan beberapa komponen dari demo AR berbasis web pertama tim WebXR, WebAR-Article. Informasi tentang patung ini berasal dari halaman Google Seni & Budaya, dan model 3D disediakan oleh partner Google Seni & Budaya, CyArk. Agar model 3D siap digunakan di web, kombinasi Meshlab dan Mesh Mixer digunakan untuk memperbaiki model dan menghapus mesh-nya untuk mengurangi ukuran filenya. Kemudian, Draco, library untuk mengompresi dan mendekompresi mesh geometris 3D dan cloud titik digunakan untuk mengurangi ukuran file model dari 44,3 megabyte menjadi hanya 225 kilobyte. Terakhir, pekerja web digunakan untuk memuat model di thread latar belakang sehingga halaman tetap interaktif saat model dimuat dan didekompresi, yaitu operasi yang biasanya akan menyebabkan jank dan mencegah halaman di-scroll.
Kami tidak cukup menekankan bahwa, karena kami melakukan pengembangan di desktop dan men-deploy ke ponsel, penggunaan alat proses debug jarak jauh Chrome untuk membantu memeriksa pengalaman akan menciptakan siklus iterasi yang sangat cepat di antara perubahan kode, dan ada alat developer yang luar biasa di Chrome untuk proses debug dan pemeriksaan performa.
Praktik terbaik untuk pengalaman AR/VR
Sebagian besar pedoman desain dan engineering untuk desain bagi pengalaman AR native berlaku untuk membuat pengalaman AR berbasis web. Jika Anda ingin mempelajari praktik terbaik umum lebih lanjut, lihat panduan desain AR yang baru-baru ini kami rilis.
Secara khusus, saat mendesain pengalaman AR berbasis web, sebaiknya gunakan seluruh layar (yaitu gunakan layar penuh yang mirip dengan cara pemutar video menggunakan layar penuh di perangkat seluler) saat menggunakan AR. Hal ini mencegah pengguna men-scroll tampilan atau terganggu oleh elemen lain di halaman web. Transisi ke AR harus lancar dan lancar, yang menunjukkan tampilan kamera sebelum memasuki orientasi AR (misalnya, menggambar reticle). Hal yang penting untuk diperhatikan tentang AR berbasis web adalah, tidak seperti native, developer belum memiliki akses ke bingkai kamera, estimasi pencahayaan, anchor, atau bidang, jadi penting bagi desainer dan developer untuk mempertimbangkan batasan ini saat mendesain pengalaman AR berbasis web.
Selain itu, karena beragamnya perangkat yang digunakan untuk pengalaman web, penting untuk mengoptimalkan performa guna menciptakan pengalaman pengguna terbaik. Jadi: pastikan jumlah poly tetap rendah, cobalah untuk mengurangi cahaya sebanyak mungkin, lakukan prakomputasi bayangan jika memungkinkan, dan minimalkan panggilan gambar. Saat menampilkan teks dalam AR, gunakan teknik rendering teks modern (yaitu berbasis kolom jarak bertanda) untuk memastikan teks jelas dan dapat dibaca dari semua jarak dan sudut. Saat menempatkan anotasi, pikirkan pandangan pengguna sebagai input lain, dan hanya tampilkan anotasi jika relevan (yaitu anotasi berbasis kedekatan yang muncul saat pengguna berfokus pada area minat).
Terakhir, karena konten ini berbasis web, penting juga untuk menerapkan praktik desain terbaik umum untuk web. Pastikan situs memberikan pengalaman yang baik di seluruh perangkat (desktop, tablet, seluler, headset, dll.) - mendukung progressive enhancement berarti juga mendesain untuk perangkat yang tidak mendukung AR (yaitu menampilkan penampil model 3D di perangkat non-AR).
Jika Anda tertarik untuk mengembangkan pengalaman AR berbasis web sendiri, kami memiliki postingan pendamping di sini yang akan memberikan detail selengkapnya tentang cara mulai membangun AR di Web secara mandiri. (Anda juga dapat melihat sumbernya dalam demo Chamool.) WebXR Device API aktif dalam pengembangan dan kami mengharapkan masukan agar kami dapat memastikannya mendukung semua jenis aplikasi dan kasus penggunaan. Jadi, buka GitHub dan bergabunglah dalam diskusi ini.