Halaman ini diterjemahkan oleh Cloud Translation API.

Augmented reality: Anda mungkin sudah mengetahuinya

Jika Anda telah menggunakan WebXR Device API, Anda adalah sebagian besar perjalanan Anda.

Joe Medley

WebXR Device API dikirimkan pada musim gugur lalu di Chrome 79. Seperti yang dinyatakan saat itu, penerapan API oleh Chrome masih dalam proses. Chrome dengan senang hati mengumumkan bahwa beberapa pekerjaan telah selesai. Di Chrome 81, dua fitur baru telah hadir:

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

Untuk informasi tentang hit test, lihat artikel pendamping Memposisikan 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 mempelajari kode, Anda harus menggunakan contoh Sesi AR Imersif setidaknya sekali. Anda memerlukan ponsel Android modern dengan Chrome 81 atau yang lebih baru.

Untuk apa hal ini berguna?

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

Pertimbangkan kasus penggunaan kedua. Bayangkan simulasi menempatkan representasi objek virtual secara nyata dalam tampilan nyata. Setelah ditempatkan, gambar tetap berada di permukaan yang dipilih, muncul seperti ukuran jika item sebenarnya berada di permukaan tersebut, dan memungkinkan pengguna untuk bergerak di sekitarnya serta lebih dekat ke atau lebih jauh darinya. Hal ini memberi penonton pemahaman yang lebih mendalam tentang objek daripada yang mungkin dilakukan dengan gambar dua dimensi.

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

Meminta sesi

Meminta sesi sangat mirip dengan yang telah Anda lihat sebelumnya. Pertama-tama, cari tahu apakah jenis sesi yang Anda inginkan tersedia di perangkat saat ini dengan memanggil xr.isSessionSupported(). Alih-alih meminta 'immersive-vr' seperti sebelumnya, minta 'immersive-ar'.

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 akan 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 kenyamanan

Anda mungkin telah melihat bahwa saya menandai 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. Nanti saya akan menggunakannya untuk membuat keputusan tentang apa yang akan ditampilkan ke penonton. Mengapa properti ini tidak menjadi bagian dari API? Karena aplikasi Anda mungkin perlu melacak properti ini secara berbeda, penulis spesifikasi memutuskan untuk menjaga API tetap bersih.

Memasuki sesi

Ingat kembali 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 kemudahan 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 hanya membahas ruang referensi. Contoh yang saya jelaskan menggunakan dua di antaranya, jadi sekarang saatnya memperbaiki kelalaian tersebut.

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

Menentukan asal sistem koordinat yang digunakan untuk mengekspresikan posisi di dunia virtual.
Menentukan apakah pengguna diharapkan untuk bergerak 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 menunjukkan kiri dan kanan, Y menunjukkan atas dan bawah, dan Z menunjukkan maju dan mundur. Nilai positif masing-masing adalah kanan, atas, dan belakang.

Koordinat yang ditampilkan oleh XRFrame.getViewerPose() bergantung pada jenis ruang referensi yang diminta. Kita akan membahasnya lebih lanjut saat sampai ke loop frame. Sekarang kita perlu memilih jenis referensi yang sesuai untuk augmented reality. Sekali lagi, ini menggunakan properti kemudahan 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 mengunjungi Contoh Sesi AR Imersif, Anda akan melihat bahwa awalnya tampilan bersifat statis dan sama sekali bukan augmented reality. Anda dapat menarik dan menggeser dengan jari untuk berpindah di sekitar adegan. Jika Anda mengklik "MULAI AR", latar belakang akan hilang dan Anda dapat berpindah-pindah di sekitar scene dengan menggerakkan perangkat. Mode tersebut menggunakan jenis ruang referensi yang berbeda. Teks yang ditandai di atas menunjukkan cara memilihnya. Kode ini menggunakan jenis referensi berikut:

local - Asalnya berada di posisi penampil pada saat pembuatan sesi. Artinya, pengalaman tidak harus memiliki dasar yang ditentukan dengan baik dan posisi persis asal dapat bervariasi menurut platform. Meskipun tidak ada batasan yang telah ditetapkan sebelumnya untuk ruang, konten diharapkan dapat dilihat tanpa gerakan selain rotasi. Seperti yang dapat Anda lihat dari contoh AR kami sendiri, beberapa gerakan dalam ruang mungkin dapat dilakukan.

viewer - Paling sering digunakan untuk konten yang ditampilkan inline di halaman, ruang ini mengikuti perangkat tampilan. Saat diteruskan ke getViewerPose, fungsi ini tidak memberikan pelacakan, sehingga selalu melaporkan pose di asal, kecuali jika aplikasi mengubahnya dengan XRReferenceSpace.getOffsetReferenceSpace(). Contoh ini menggunakan hal ini untuk mengaktifkan geser kamera berbasis sentuh.

Menjalankan loop frame

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

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. Banyak kemampuan dan kasus penggunaan lainnya yang disajikan oleh contoh WebXR Device API dari Immersive Web Working Group. Kami juga baru saja memublikasikan artikel hit test yang menjelaskan API untuk mendeteksi permukaan dan menempatkan item virtual dalam tampilan kamera dunia nyata. Lihat artikel tersebut dan baca blog web.dev untuk artikel selengkapnya pada tahun mendatang.

Foto oleh David Grandmougin di Unsplash