Augmented reality untuk web

Joe Medley
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 berdasarkan apa yang ada di perangkat komputasi. Di sisi lain, AR memungkinkan Anda untuk merender objek virtual di dunia nyata. Untuk memungkinkan 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 dimaksudkan agar tetap berada dalam Canary dalam waktu dekat. Kami menginginkan periode pengujian yang berkepanjangan karena ini adalah proposal API yang sangat baru dan kami ingin memastikan proposal ini andal dan tepat bagi developer.

Selain Chrome Canary, Anda juga memerlukan:

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

Itu benar-benar web

Di Google IO tahun ini, kami mendemonstrasikan augmented reality dengan build awal Chrome. Saya mengatakan sesuatu berulang kali kepada developer dan non-developer selama tiga hari tersebut, yang saya harap saya bisa memasukkannya ke dalam artikel web imersif: "Ini hanya web".

"Ekstensi Chrome apa yang harus saya instal?" "Tidak ada perpanjangan waktu. Ini hanyalah web."

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

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

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

Terkait IO, jika Anda ingin mendengar lebih banyak tentang web imersif secara umum, di mana letaknya, di mana akan melihat video ini.

Apa kegunaannya?

{i>Augmented reality<i} akan menjadi tambahan yang berharga untuk banyak halaman web yang ada. Misalnya, AI generatif dapat membantu orang-orang belajar di situs pendidikan, dan memungkinkan calon pembeli memvisualisasikan objek di rumah mereka saat berbelanja.

Demo kami menggambarkan hal ini. Model ini memungkinkan pengguna menempatkan representasi objek seukuran aslinya seolah-olah dalam kenyataan. Setelah ditempatkan, gambar tetap berada pada platform yang dipilih, ukurannya akan terlihat seperti jika item sebenarnya berada di permukaan tersebut, dan memungkinkan pengguna untuk berpindah-pindah serta bergerak di sekitarnya, lebih dekat atau lebih jauh darinya. Hal ini memberi pelihat pemahaman lebih dalam tentang objek daripada yang dapat dilakukan dengan gambar dua dimensi.

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

Satu hal yang tidak ditunjukkan oleh demo dan video adalah bagaimana AR dapat mengilustrasikan ukuran objek nyata. Video di sini menampilkan demo edukasi yang kami buat dengan nama Chacmool. Artikel pendamping menjelaskan demo ini secara mendetail. Hal yang penting untuk diskusi ini adalah saat Anda menempatkan patung Chacmool dalam augmented reality, Anda melihat ukurannya seolah-olah berada di dalam ruangan bersama Anda.

Contoh Chacmool bersifat edukasional, tetapi bisa juga dengan mudah dianggap komersial. Bayangkan situs belanja furnitur yang memungkinkan Anda menempatkan sofa di ruang keluarga. Aplikasi AR akan memberi tahu apakah sofa sesuai dengan ruang Anda dan tampilannya di samping furnitur lainnya.

Sinar pemancar, hit test, dan reticle

Masalah utama yang harus dipecahkan saat menerapkan augmented reality adalah cara menempatkan objek dalam tampilan dunia nyata. Metode untuk melakukan hal ini disebut transmisi sinar. Transmisi sinar berarti menghitung perpotongan antara sinar pointer dan permukaan di dunia nyata. Persimpangan tersebut disebut hit dan menentukan apakah hit telah terjadi atau tidak adalah hit test.

Inilah 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 contoh dan klik "Mulai AR".

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

AR berjalan pada 30 frame per detik

Demo AR Hit Test

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

Gambar yang bergerak dengan perangkat Anda dan yang berupaya 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. Tapi sebenarnya tidak demikian. Dalam demo Chacmool, misalnya, sebuah kotak persegi panjang yang kurang lebih bentuknya sama dengan dasar objek yang diletakkan.

Sampai ke kode

Demo Chacmool menunjukkan tampilan AR dalam aplikasi produksi. Untungnya, ada demo yang jauh lebih sederhana di repo sampel 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 memasuki sesi AR dan menjalankan loop render sama, untuk AR dan untuk VR. Anda dapat membaca artikel saya sebelumnya jika belum familier. Lebih spesifiknya, memasuki dan menjalankan sesi AR terlihat hampir sama seperti memasuki sesi jendela ajaib VR. Seperti jendela ajaib, jenis sesi tidak boleh imersif dan frame jenis referensi harus 'eye-level'.

API baru

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

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

Tiga argumen untuk metode ini mewakili pancaran sinar. Transmisi sinar ditentukan oleh dua titik pada sinar tersebut (origin dan direction) dan tempat titik-titik tersebut dihitung dari (frameOfReference). Asal dan arah keduanya merupakan vektor 3D. Terlepas dari nilai yang Anda kirimkan, nilai tersebut akan dinormalisasi (dikonversi) ke durasi 1.

Memindahkan reticle

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

Mulai dengan callback requestAnimationFrame(). Seperti pada VR, Anda membutuhkan 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 di mana sinar dipancarkan. Kode contoh menggunakan library matematika gl-matrix. Tetapi gl-matrix bukan sebuah persyaratan. Yang penting adalah mengetahui apa yang Anda hitung dengannya dan itu 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 terlalu jelas dalam contoh hit test, Anda masih harus melakukan loop melalui tampilan untuk menggambar scene. Menggambar dilakukan menggunakan WebGL API. Anda dapat melakukannya jika Anda benar-benar ambisius. Meskipun demikian, sebaiknya gunakan kerangka kerja. Contoh web imersif menggunakan web yang dibuat hanya untuk demo yang disebut Cottontail, dan Three.js telah mendukung WebXR sejak bulan Mei.

Menempatkan objek

Sebuah objek ditempatkan dalam AR saat pengguna mengetuk layar. Untuk itu, gunakan peristiwa select. Yang penting dalam langkah ini adalah mengetahui di mana harus meletakkannya. Karena reticle yang bergerak memberi Anda sumber hit test yang konstan, cara paling sederhana untuk menempatkan objek adalah dengan menggambarnya di lokasi reticle pada pengujian hit terakhir. Jika perlu, misalnya Anda memiliki alasan yang sah untuk tidak menampilkan reticle, Anda dapat memanggil requestHitTest() dalam peristiwa tertentu seperti yang ditunjukkan dalam contoh.

Kesimpulan

Cara terbaik untuk mendapatkan handle dalam masalah ini adalah dengan mengikuti kode contoh atau mencoba codelab. Semoga saya punya cukup latar belakang untuk memahami keduanya.

Kita belum selesai membangun API web yang imersif, bukan dengan jangka panjang. Kami akan memublikasikan artikel baru di sini selagi membuat kemajuan.