Augmented reality: Anda mungkin sudah mengetahuinya

Jika Anda sudah menggunakan WebXR Device API, Anda sudah melalui proses tersebut.

Joe Medley

WebXR Device API dikirimkan pada musim gugur yang lalu di Chrome 79. Seperti yang telah dinyatakan, implementasi API Chrome sedang dalam proses. Chrome dengan senang hati mengumumkan bahwa beberapa pekerjaan telah selesai. Dua fitur baru telah hadir di Chrome 81:

• Jenis sesi augmented reality.
• Pengujian hit.

Artikel ini membahas augmented reality. Jika sudah menggunakan WebXR Device API, Anda akan senang mengetahui bahwa hanya ada sedikit hal baru yang perlu dipelajari. Tahapan masuk ke sesi WebXR umumnya sama. Menjalankan loop frame sebagian besar sama. Perbedaannya terletak pada konfigurasi yang memungkinkan konten ditampilkan dengan tepat dalam augmented reality. Jika Anda tidak terbiasa dengan konsep dasar WebXR, Anda harus membaca postingan saya sebelumnya tentang WebXR Device API, atau setidaknya terbiasa dengan topik yang dibahas di dalamnya. Anda harus mengetahui cara meminta dan memasuki sesi dan mengetahui cara menjalankan loop frame.

Untuk informasi tentang hit test, lihat artikel pendamping Memosisikan objek virtual dalam tampilan dunia nyata. Kode dalam artikel ini didasarkan pada contoh Sesi AR Imersif (sumber demo) dari contoh WebXR Device API Immersive Web Working Group.

Sebelum mendalami kode, Anda harus menggunakan contoh Sesi AR Imersif setidaknya sekali. Anda memerlukan ponsel Android modern dengan Chrome 81 atau yang lebih baru.

Apa kegunaannya?

Augmented reality akan menjadi tambahan yang berharga bagi banyak halaman web baru atau yang sudah ada dengan memungkinkannya menerapkan kasus penggunaan AR tanpa meninggalkan browser. Misalnya, AI Google dapat membantu orang-orang belajar di situs pendidikan, dan memungkinkan calon pembeli untuk memvisualisasikan objek di rumah mereka saat berbelanja.

Pertimbangkan kasus penggunaan kedua. Bayangkan simulasi penempatan representasi objek virtual seukuran aslinya dalam adegan nyata. Setelah ditempatkan, gambar akan tetap berada di permukaan yang dipilih, terlihat seperti jika item sebenarnya berada di permukaan tersebut, dan memungkinkan pengguna untuk berpindah-pindah di sekitarnya serta lebih dekat atau jauh darinya. Hal ini memberi audiens pemahaman yang lebih dalam tentang objek daripada yang mungkin dilakukan dengan gambar dua dimensi.

Aku sedikit terlalu cepat. Untuk benar-benar melakukan yang sudah saya jelaskan, Anda memerlukan fungsi AR dan beberapa cara untuk mendeteksi permukaan. Artikel ini membahas yang pertama. Artikel yang menyertainya di WebXR Hit Test API (ditautkan di atas) mencakup kedua hal tersebut.

Meminta sesi

Cara meminta sesi sama seperti yang Anda lihat sebelumnya. Pertama-tama, cari tahu apakah jenis sesi yang Anda inginkan tersedia di perangkat saat ini dengan memanggil xr.isSessionSupported(). Minta 'immersive-ar', bukan 'immersive-vr' seperti sebelumnya.

if (navigator.xr) {
  const supported = await navigator.xr.isSessionSupported('immersive-ar');
  if (supported) {
    xrButton.addEventListener('click', onButtonClicked);
    xrButton.textContent = 'Enter AR';
    xrButton.enabled = supported; // supported is Boolean
  }
}

Seperti sebelumnya, tombol ini mengaktifkan tombol 'Enter AR'. Saat pengguna mengkliknya, panggil xr.requestSession(), yang juga meneruskan 'immersive-ar'.

let xrSession = null;
function onButtonClicked() {
  if (!xrSession) {
    navigator.xr.requestSession('immersive-ar')
    .then((session) => {
      xrSession = session;
      xrSession.isImmersive = true;
      xrButton.textContent = 'Exit AR';
      onSessionStarted(xrSession);
    });
  } else {
    xrSession.end();
  }
}

Properti praktis

Anda mungkin memperhatikan bahwa saya menyoroti dua baris dalam contoh kode terakhir. Objek XRSession tampaknya memiliki properti yang disebut isImmersive. Ini adalah properti kemudahan yang saya buat sendiri, dan bukan bagian dari spesifikasi. Saya akan menggunakannya nanti untuk membuat keputusan tentang apa yang akan ditampilkan kepada penonton. Mengapa properti ini tidak merupakan bagian dari API? Karena aplikasi Anda mungkin perlu melacak properti ini secara berbeda, penulis spesifikasi memutuskan untuk menjaga API tetap bersih.

Memasuki sesi

Ingat seperti apa tampilan onSessionStarted() di artikel saya sebelumnya:

function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  xrSession.requestReferenceSpace('local-floor')
  .then((refSpace) => {
    xrRefSpace = refSpace;
    xrSession.requestAnimationFrame(onXRFrame);
  });
}

Saya perlu menambahkan beberapa hal untuk memperhitungkan rendering augmented reality. Nonaktifkan latar belakang Pertama, saya akan menentukan apakah saya memerlukan latar belakang. Ini adalah tempat pertama saya akan menggunakan properti kenyamanan saya.

function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  if (session.isImmersive) {
    removeBackground();
  }

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
  xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
    xrSession.requestAnimationFrame(onXRFrame);
  });

}

Ruang referensi

Artikel saya sebelumnya membaca sekilas ruang referensi. Sampel yang saya jelaskan menggunakan dua di antaranya, jadi saatnya untuk mengoreksi kekurangan itu.

Catatan: Penjelasan lengkap tentang ruang referensi akan lebih panjang daripada yang dapat saya berikan di sini. Saya hanya akan membahas ruang referensi sehubungan dengan augmented reality.

Ruang referensi menjelaskan hubungan antara dunia virtual dan lingkungan fisik pengguna. Hal ini dilakukan dengan:

• Menentukan asal untuk sistem koordinat yang digunakan untuk menyatakan posisi di dunia virtual.
• Menentukan apakah pengguna akan berpindah dalam sistem koordinat tersebut.
• Apakah sistem koordinat tersebut memiliki batas yang telah ditetapkan sebelumnya. (Contoh yang ditampilkan di sini tidak menggunakan sistem koordinat dengan batas yang telah ditetapkan sebelumnya.)

Untuk semua ruang referensi, koordinat X menyatakan ke kiri dan ke kanan, Y dinyatakan ke atas dan ke bawah, dan Z menyatakan maju dan mundur. Nilai positifnya masing-masing adalah kanan, atas, dan mundur.

Koordinat yang ditampilkan oleh XRFrame.getViewerPose() bergantung pada jenis ruang referensi yang diminta. Hal ini dijelaskan lebih lanjut saat kita masuk ke loop frame. Saat ini, kita perlu memilih jenis referensi yang sesuai untuk augmented reality. Sekali lagi, ini menggunakan properti praktis saya.

let refSpaceType
function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  if (session.isImmersive) {
    removeBackground();
  }

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
  xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
    xrSession.requestAnimationFrame(onXRFrame);
  });
}

Jika telah membuka Contoh Sesi AR Imersif, Anda akan melihat bahwa pada awalnya adegannya statis dan bukan realitas yang ditambah. Anda dapat menarik dan menggeser dengan jari untuk berpindah-pindah di adegan. Jika Anda mengklik "MULAI AR", latar belakang akan hilang dan Anda dapat berpindah-pindah di adegan dengan menggerakkan perangkat. Mode tersebut menggunakan jenis ruang referensi yang berbeda. Teks yang ditandai di atas menunjukkan cara pemilihan teks ini. Class ini menggunakan jenis referensi berikut:

local - Asal berada di posisi pelihat pada saat pembuatan sesi. Artinya, pengalaman ini tidak harus memiliki lantai yang didefinisikan dengan baik, dan posisi asal yang tepat dapat bervariasi menurut platform. Meskipun tidak ada batas ruang yang telah ditetapkan sebelumnya, konten diharapkan dapat dilihat tanpa gerakan selain rotasi. Seperti yang Anda lihat dari contoh AR kami sendiri, beberapa gerakan di dalam ruang dapat terjadi.

viewer - Paling sering digunakan untuk konten yang ditampilkan secara inline di halaman, ruang ini mengikuti perangkat penampil. Ketika diteruskan ke getViewerPose, kode ini tidak memberikan pelacakan, sehingga selalu melaporkan pose di asal kecuali jika aplikasi mengubahnya dengan XRReferenceSpace.getOffsetReferenceSpace(). Contoh ini menggunakannya untuk mengaktifkan penggeseran berbasis sentuhan pada kamera.

Menjalankan loop frame

Secara konseptual, tidak ada yang berubah dari apa yang saya lakukan di sesi VR yang dijelaskan dalam artikel sebelumnya. Teruskan jenis ruang referensi ke XRFrame.getViewerPose(). XRViewerPose yang ditampilkan akan digunakan untuk jenis ruang referensi saat ini. Menggunakan viewer sebagai setelan default memungkinkan halaman menampilkan pratinjau konten sebelum izin pengguna diminta untuk AR atau VR. Hal ini menggambarkan poin penting: konten inline menggunakan loop frame yang sama dengan konten imersif, sehingga mengurangi jumlah kode yang perlu dipertahankan.

function onXRFrame(hrTime, xrFrame) {
  let xrSession = xrFrame.session;
  xrSession.requestAnimationFrame(onXRFrame);
  let xrViewerPose = xrFrame.getViewerPose(refSpaceType);
  if (xrViewerPose) {
    // Render based on the pose.
  }
}

Kesimpulan

Rangkaian artikel ini hanya membahas dasar-dasar penerapan konten imersif di web. Lebih banyak kemampuan dan kasus penggunaan disajikan oleh contoh WebXR Device API dari Immersive Web Working Group. Kami juga baru saja memublikasikan artikel hit test yang menjelaskan API untuk mendeteksi platform dan menempatkan item virtual dalam tampilan kamera dunia nyata. Lihat dan tonton blog Web.dev untuk artikel lainnya dalam setahun ke depan.

Foto oleh David Grandmougin di Unsplash