Halaman ini diterjemahkan oleh Cloud Translation API.

Augmented reality untuk web

Joe Medley

Di Chrome 67, kami mengumumkan WebXR Device API untuk augmented reality (AR) dan virtual reality (VR), meskipun hanya fitur VR yang diaktifkan. VR adalah pengalaman yang sepenuhnya didasarkan pada apa yang ada di perangkat komputasi. Di sisi lain, AR memungkinkan Anda merender objek virtual di dunia nyata. Untuk mengizinkan penempatan dan pelacakan objek tersebut, kami baru saja menambahkan WebXR Hit Test API ke Chrome Canary, metode baru yang membantu kode web imersif menempatkan objek di dunia nyata.

Di mana saya bisa mendapatkannya?

API ini akan tetap berada di Canary dalam waktu dekat. Kami menginginkan periode pengujian yang berkepanjangan karena ini adalah proposal API yang sangat baru dan kami ingin memastikannya andal dan tepat untuk developer.

Selain Chrome Canary, Anda juga memerlukan:

Smartphone yang kompatibel dan menjalankan Android O atau yang lebih baru.
Untuk menginstal ARCore.
Dua tanda Chrome (chrome://flags): WebXRDevice API (#webxr) dan WebXR Hit Test (#webxr-hit-test)

Dengan ini, Anda dapat mempelajari demo atau mencoba codelab kami.

Hanya web

Di Google IO tahun ini, kami mendemonstrasikan augmented reality dengan build awal Chrome. Selama tiga hari tersebut, saya berulang kali mengatakan sesuatu kepada developer dan non-developer yang seharusnya saya masukkan ke dalam artikel web imersif: "Itu hanya web."

"Ekstensi Chrome apa yang perlu saya instal?" "Tidak ada perpanjangan. Ini hanya web."

"Apakah saya memerlukan browser khusus?" "Itu hanya web."

"Aplikasi apa yang perlu saya instal?" "Tidak ada aplikasi khusus. Hanya web."

Hal ini mungkin sudah jelas bagi Anda karena Anda membacanya di situs yang ditujukan untuk web. Jika Anda membuat demonstrasi dengan API baru ini, bersiaplah untuk pertanyaan ini. Anda akan sering mendapatkannya.

Terkait IO, jika Anda ingin mengetahui lebih lanjut tentang web imersif secara umum, lokasinya dan tempat untuk menonton video ini.

Untuk apa hal ini berguna?

Augmented reality akan menjadi tambahan yang berharga untuk banyak halaman web yang ada. Misalnya, teknologi ini dapat membantu orang belajar di situs pendidikan, dan memungkinkan calon pembeli memvisualisasikan objek di rumah mereka saat berbelanja.

Demo kami menggambarkan hal ini. Fitur ini memungkinkan pengguna menempatkan representasi objek seperti dalam kenyataan. Setelah ditempatkan, gambar akan tetap berada di permukaan yang dipilih, muncul dengan ukuran yang sama seperti jika item sebenarnya berada di permukaan tersebut, dan memungkinkan pengguna untuk bergerak di sekitarnya serta lebih dekat atau lebih jauh dari gambar. Hal ini memberi penonton pemahaman yang lebih mendalam tentang objek daripada yang mungkin dilakukan dengan gambar dua dimensi.

Jika Anda tidak yakin dengan maksud saya, semuanya akan menjadi jelas saat Anda menggunakan demo. Jika Anda tidak memiliki perangkat yang dapat menjalankan demo, lihat link video di bagian atas artikel ini.

Satu hal yang tidak ditampilkan dalam demo dan video adalah cara AR dapat menyampaikan ukuran objek nyata. Video di sini menunjukkan demo edukasi yang kami buat bernama Chacmool. Artikel pendamping menjelaskan demo ini secara mendetail. Hal yang penting untuk diskusi ini adalah saat Anda menempatkan patung Chacmool dalam augmented reality, Anda akan melihat ukurannya seolah-olah patung tersebut benar-benar ada di ruangan bersama Anda.

Contoh Chacmool bersifat edukatif, tetapi juga dapat bersifat komersial. Bayangkan situs belanja furnitur yang memungkinkan Anda menempatkan sofa di ruang tamu. Aplikasi AR memberi tahu Anda apakah sofa sesuai dengan ruangan Anda dan bagaimana tampilannya di samping furnitur Anda yang lain.

Raycast, hit test, dan reticle

Masalah utama yang harus dipecahkan saat menerapkan augmented reality adalah cara menempatkan objek dalam tampilan dunia nyata. Metode untuk melakukannya disebut ray casting. Ray casting berarti menghitung persimpangan antara ray pointer dan permukaan di dunia nyata. Persimpangan tersebut disebut hit dan menentukan apakah hit telah terjadi adalah hit test.

Ini adalah saat yang tepat untuk mencoba contoh kode baru di Chrome Canary. Sebelum melakukan apa pun, periksa kembali apakah Anda telah mengaktifkan tanda yang benar. Sekarang muat sampel dan klik "Start AR".

Perhatikan beberapa hal. Pertama, pengukur kecepatan yang mungkin Anda kenal dari contoh imersif lainnya menampilkan 30 frame per detik, bukan 60. Ini adalah kecepatan halaman web menerima gambar dari kamera.

AR berjalan pada kecepatan 30 frame per detik

Demo Hit Test AR

Hal lain yang harus Anda perhatikan adalah gambar bunga matahari. Kamera ini bergerak saat Anda bergerak dan menempel ke permukaan seperti lantai dan permukaan meja. Jika Anda mengetuk layar, bunga matahari akan ditempatkan di permukaan dan bunga matahari baru akan bergerak bersama perangkat.

Gambar yang bergerak dengan perangkat Anda, dan yang mencoba mengunci ke permukaan disebut reticle. Reticle adalah gambar sementara yang membantu menempatkan objek dalam augmented reality. Dalam demo ini, reticle adalah salinan gambar yang akan ditempatkan. Namun, tidak harus demikian. Dalam demo Chacmool, misalnya, bentuknya adalah kotak persegi panjang yang bentuknya kurang lebih sama dengan dasar objek yang ditempatkan.

Mendapatkan kode

Demo Chacmool menunjukkan tampilan AR dalam aplikasi produksi. Untungnya, ada demo yang jauh lebih sederhana di repo contoh WebXR. Kode contoh saya berasal dari demo AR Hit Test di repositori tersebut. FYI, saya suka menyederhanakan contoh kode untuk membantu Anda memahami apa yang terjadi.

Dasar-dasar untuk memasuki sesi AR dan menjalankan loop render adalah sama untuk AR seperti halnya untuk VR. Anda dapat membaca artikel saya sebelumnya jika tidak memahaminya. Lebih spesifik lagi, memasuki dan menjalankan sesi AR hampir sama seperti memasuki sesi jendela ajaib VR. Seperti jendela ajaib, jenis sesi harus non-immersive dan jenis referensi frame harus 'eye-level'.

API baru

Sekarang, saya akan menunjukkan cara menggunakan API baru. Ingat bahwa dalam AR, reticle mencoba menemukan permukaan sebelum item ditempatkan. Hal ini dilakukan dengan pengujian hit. Untuk melakukan hit test, panggil XRSession.requestHitTest(). Tampilannya terlihat seperti ini:

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

Tiga argumen untuk metode ini mewakili {i>ray cast<i}. Ray cast ditentukan oleh dua titik pada sinar (origin dan direction) dan tempat titik tersebut dihitung dari (frameOfReference). Asal dan arah adalah vektor 3D. Apa pun nilai yang Anda kirimkan, nilai tersebut akan dinormalisasi (dikonversi) menjadi panjang 1.

Memindahkan reticle

Saat Anda menggerakkan perangkat, reticle harus bergerak bersamanya saat mencoba menemukan lokasi tempat objek dapat ditempatkan. Artinya, reticle harus digambar ulang di setiap frame.

Mulai dengan callback requestAnimationFrame(). Seperti halnya VR, Anda memerlukan sesi dan pose.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

Setelah Anda memiliki sesi dan pose, tentukan tempat sinar ditransmisikan. Contoh kode menggunakan library matematika gl-matrix. Namun, gl-matrix bukan persyaratan. Yang penting adalah mengetahui apa yang Anda hitung dengan parameter ini dan bahwa parameter ini didasarkan pada posisi perangkat. Ambil posisi perangkat dari XRPose.poseModalMatrix. Dengan ray cast di tangan, panggil requestHitTest().

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

Meskipun tidak terlihat jelas dalam contoh hit test, Anda masih harus melakukan loop tampilan untuk menggambar scene. Gambar dilakukan menggunakan API WebGL. Anda bisa melakukannya jika Anda benar-benar ambisius. Namun, sebaiknya gunakan framework. Contoh web imersif menggunakan contoh yang dibuat khusus untuk demo yang disebut Cottontail, dan Three.js telah mendukung WebXR sejak Mei.

Menempatkan objek

Objek ditempatkan di AR saat pengguna mengetuk layar. Untuk itu, Anda menggunakan peristiwa select. Hal yang penting dalam langkah ini adalah mengetahui tempat untuk meletakkannya. Karena reticle yang bergerak memberi Anda sumber hit test yang konstan, cara termudah untuk menempatkan objek adalah dengan menggambarnya di lokasi reticle pada hit test terakhir. Jika perlu, misalnya Anda memiliki alasan yang sah untuk tidak menampilkan retikel, Anda dapat memanggil requestHitTest() dalam peristiwa yang dipilih seperti yang ditunjukkan dalam contoh.

Kesimpulan

Cara terbaik untuk memahami hal ini adalah dengan mempelajari kode contoh atau mencoba codelab. Semoga kami telah memberikan latar belakang yang cukup untuk memahami keduanya.

Kita belum selesai membangun API web imersif, bukan secara jangka panjang. Kami akan memublikasikan artikel baru di sini seiring dengan progres kami.