Mengembangkan dengan WebXR

Chrome di Android XR mendukung WebXR. WebXR adalah standar terbuka oleh W3C yang menghadirkan XR API berperforma tinggi ke browser yang didukung. Jika membuat aplikasi untuk web, Anda dapat meningkatkan kualitas situs yang ada dengan model 3D atau membuat pengalaman imersif baru.

Fitur WebXR berikut didukung oleh Chrome untuk Android XR:

Untuk melihat cara kerja WebXR, luncurkan Chrome di perangkat Android XR atau Emulator Android XR, lalu jelajahi contoh WebXR resmi.

Prasyarat: Memilih framework WebXR

Sebelum Anda mulai mengembangkan, penting untuk memilih framework WebXR yang tepat. Hal ini secara signifikan meningkatkan produktivitas Anda sendiri dan meningkatkan kualitas pengalaman yang Anda buat.

  • Untuk kontrol penuh atas tampilan 3D dan pembuatan interaksi kustom atau kompleks, sebaiknya gunakan three.js dan babylon.js.
  • Untuk membuat prototipe dengan cepat atau menggunakan sintaksis mirip HTML untuk menentukan tampilan 3D, sebaiknya gunakan A-Frame dan model-viewer.
  • Anda juga dapat meninjau lebih banyak framework dan kode contoh.

Jika Anda lebih suka menggunakan JavaScript dan WebGL native, lihat WebXR di GitHub untuk membuat eksperimen WebXR pertama Anda.

Beradaptasi untuk Android XR

Jika sudah memiliki pengalaman WebXR yang berjalan di perangkat lain, Anda mungkin perlu memperbarui kode untuk mendukung WebXR dengan benar di Android XR. Misalnya, pengalaman WebXR yang berfokus pada perangkat seluler harus beradaptasi dari satu layar menjadi dua layar stereo di Android XR. Pengalaman WebXR yang menargetkan perangkat seluler atau headset yang ada mungkin perlu menyesuaikan kode input agar mengutamakan tangan.

Saat menggunakan WebXR di Android XR, Anda mungkin perlu mengupdate kode untuk mengkompensasi fakta bahwa ada dua layar—satu untuk setiap mata.

Tentang memastikan kedalaman di WebXR

Saat pengguna menempatkan objek virtual di ruang fisiknya, skalanya harus akurat sehingga tampak seolah-olah benar-benar ada di sana. Misalnya, di aplikasi belanja furnitur, pengguna perlu memercayai bahwa kursi santai virtual akan cocok dengan ruang tamu mereka.

Chrome untuk Android XR mendukung Modul Deteksi Kedalaman di WebXR, yang meningkatkan kemampuan perangkat untuk memahami dimensi dan kontur lingkungan dunia nyata. Informasi kedalaman ini memungkinkan Anda membuat interaksi yang lebih imersif dan realistis, sehingga membantu pengguna membuat keputusan yang tepat.

Tidak seperti sensor kedalaman di ponsel, sensor kedalaman di Android XR bersifat stereoskopik, yang melakukan streaming dua peta kedalaman secara real-time untuk penglihatan binokular. Anda mungkin perlu mengupdate kode WebXR untuk mendukung frame kedalaman stereo dengan benar.

Contoh berikut merender informasi kedalaman secara stereoskopis:

// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const baseLayer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);

  if (pose) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);

    // Clears the framebuffer.
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Note: Two views will be returned from pose.views.
    for (const view of pose.views) {
      const viewport = baseLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      const depthData = frame.getDepthInformation(view);
      if (depthData) {
        renderDepthInformationGPU(depthData, view, viewport);
      }
    }
  } else {
    console.error('Pose unavailable in the current frame!');  }
}

Poin penting tentang kode

  • Pose yang valid harus ditampilkan untuk mengakses data kedalaman.
  • pose.views menampilkan tampilan untuk setiap mata dan loop yang sesuai untuknya berjalan dua kali.

Visualisasi kedalaman real-time menggunakan WebXR depth sensing API. Merah menunjukkan piksel yang lebih dekat, sedangkan biru menunjukkan piksel yang lebih jauh.

Menambahkan interaksi tangan di WebXR

Menambahkan interaksi tangan ke aplikasi WebXR Anda akan meningkatkan engagement pengguna dengan memungkinkan pengalaman yang lebih intuitif dan imersif.

Input tangan adalah mekanisme interaksi utama di Android XR. Chrome untuk Android XR mendukung Hand Input API sebagai input default. API ini memungkinkan pengguna berinteraksi dengan objek virtual secara alami, menggunakan gestur dan gerakan tangan untuk mengambil, mendorong, atau memanipulasi elemen dalam tampilan.

Perangkat seperti ponsel atau perangkat XR yang berfokus pada pengontrol mungkin belum mendukung input tangan. Anda mungkin perlu mengupdate kode WebXR untuk mendukung input tangan dengan benar. Sesi VR Imersif dengan Tangan menunjukkan cara mengintegrasikan pelacakan tangan ke dalam project WebXR Anda.

Animasi berikut menunjukkan contoh penggabungan cubit dengan WebXR API untuk menunjukkan pengguna "menghapus" permukaan ruang virtual untuk menampilkan jendela pass-through ke dunia nyata.

Demo WebXR tentang penggunaan cubit tangan untuk menghapus layar agar dapat melihat realitas fisik.

Izin di WebXR

Saat Anda menggunakan WebXR API yang memerlukan izin, Chrome akan meminta pengguna untuk memberikan izin ke situs. Semua WebXR API memerlukan izin pemetaan 3D dan pelacakan kamera. Akses data wajah, mata, dan tangan yang dilacak juga dilindungi oleh izin. Jika semua izin yang diperlukan diberikan, memanggil navigator.xr.requestSession('immersive-ar', options) akan menampilkan sesi WebXR yang valid.

Preferensi izin yang dipilih oleh pengguna akan tetap ada untuk setiap domain. Mengakses pengalaman WebXR di domain lain akan menyebabkan Chrome meminta izin lagi. Jika pengalaman WebXR memerlukan beberapa izin, Chrome akan meminta setiap izin satu per satu.

Seperti semua izin di web, Anda harus menangani situasi saat izin ditolak dengan benar.