Saat mempersiapkan Google I/O, kami ingin menyoroti kemungkinan menarik 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 menjadi praktis dan dapat diakses di mana saja.
Sekarang 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 mengandalkan proposal WebXR baru (WebXR Hit Test API), sehingga berada di bawah tanda dan dimaksudkan untuk tetap berada di Canary saat kami menguji dan meningkatkan kualitas proposal API baru dengan anggota lain dari Grup Komunitas Web Imersif. Faktanya,
untuk mengakses demo, Anda harus mengaktifkan dua flag di chrome://flags:
#webxr
dan #webxr-hit-test
. Setelah mengaktifkan keduanya dan memulai ulang Canary, Anda dapat melihat demo Chacmool.
Pengalaman AR Chacmool berfokus pada pendidikan, memanfaatkan sifat imersif dan interaktif AR untuk membantu pengguna mempelajari patung Chacmool kuno. Pengguna dapat menempatkan patung seukuran manusia di realitas mereka dan berpindah-pindah untuk melihat patung dari berbagai sudut dan jarak. Sifat imersif AR memungkinkan pengguna menjelajahi, menemukan, dan bermain dengan konten secara bebas, 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 banyak sudut dan jarak yang berbeda menggunakan model interaksi yang sangat intuitif: berjalan di sekitar objek, dan mendekat atau menjauh 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 tempat fitur tersebut berada di patung.
Demo ini dibuat selama sekitar satu bulan, 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-nya disediakan oleh partner Google Seni & Budaya, CyArk. Untuk menyiapkan model 3D untuk web, kombinasi Meshlab dan Mesh Mixer digunakan untuk memperbaiki model dan mengurangi mesh-nya untuk mengurangi ukuran file. 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, operasi yang biasanya akan menyebabkan jank dan mencegah halaman di-scroll.
Kami tidak dapat menekankan bahwa, karena kami mengembangkan di desktop dan men-deploy ke ponsel, menggunakan alat proses debug jarak jauh Chrome untuk membantu memeriksa pengalaman akan menghasilkan siklus iterasi yang cepat dan bagus di antara perubahan kode, dan ada alat developer yang luar biasa di Chrome untuk proses debug dan memeriksa performa.
Praktik terbaik untuk pengalaman AR/VR
Sebagian besar panduan desain dan engineering untuk mendesain pengalaman AR native berlaku untuk membuat pengalaman AR berbasis web. Jika Anda ingin mempelajari lebih lanjut praktik terbaik umum, lihat pedoman desain AR yang baru saja kami rilis.
Secara khusus, saat mendesain pengalaman AR berbasis web, sebaiknya gunakan seluruh layar (yaitu, gunakan layar penuh 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 tanpa hambatan, menampilkan tampilan kamera sebelum memasuki orientasi AR (misalnya, menggambar reticle). Hal penting yang perlu 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 mengingat batasan ini saat mendesain pengalaman AR berbasis web.
Selain itu, karena adanya berbagai perangkat yang digunakan untuk pengalaman web, performa harus dioptimalkan untuk menciptakan pengalaman pengguna terbaik. Jadi: pertahankan jumlah poligon tetap rendah, cobalah untuk menggunakan sesedikit mungkin lampu, pra-komputasi bayangan jika memungkinkan, dan minimalkan panggilan gambar. Saat menampilkan teks dalam AR, gunakan teknik rendering teks modern (yaitu berbasis bidang jarak bertanda) untuk memastikan teks jelas dan dapat dibaca dari semua jarak dan sudut. Saat menempatkan anotasi, pertimbangkan tatapan 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 juga berarti 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 Anda sendiri, kami memiliki postingan pendamping di sini yang akan memberikan detail selengkapnya tentang cara memulai mem-build AR di Web sendiri. (Anda juga dapat melihat sumber untuk demo Chacmool.) WebXR Device API sedang dalam pengembangan aktif dan kami ingin mendapatkan masukan agar dapat memastikannya mengaktifkan semua jenis aplikasi dan kasus penggunaan. Jadi, buka GitHub dan bergabunglah ke percakapan.