Chrome di Android XR mendukung WebXR. WebXR adalah standar terbuka dari W3C yang menghadirkan API XR berperforma tinggi ke browser yang didukung. Jika membangun untuk web, Anda dapat meningkatkan kualitas situs yang ada dengan model 3D atau membangun pengalaman imersif baru.
Fitur WebXR berikut didukung oleh Chrome untuk Android XR:
- Device API
- Modul AR
- Modul Gamepad
- Hit Test Module
- Input Tangan
- Anchor
- Penginderaan Kedalaman
- Estimasi Cahaya
Untuk melihat cara kerja WebXR, luncurkan Chrome di perangkat Android XR atau Emulator Android XR dan jelajahi contoh WebXR resmi.
Prasyarat: Pilih 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 adegan 3D dan pembuatan interaksi kustom atau kompleks, sebaiknya gunakan three.js dan babylon.js.
- Untuk pembuatan prototipe cepat atau penggunaan sintaksis seperti HTML untuk menentukan adegan 3D, sebaiknya gunakan A-Frame dan model-viewer.
- Anda juga dapat meninjau framework dan contoh kode lainnya.
Jika Anda lebih suka menggunakan JavaScript dan WebGL native, lihat WebXR di GitHub untuk membuat eksperimen WebXR pertama Anda.
Menyesuaikan untuk Android XR
Jika 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 mengadaptasi kode input agar dapat menggunakan tangan terlebih dahulu.
Saat bekerja dengan WebXR di Android XR, Anda mungkin perlu mengupdate kode untuk mengompensasi fakta bahwa ada dua layar—satu untuk setiap mata.
Tentang memastikan rasa kedalaman di WebXR
Saat pengguna menempatkan objek virtual di ruang fisiknya, skalanya harus akurat sehingga objek tersebut tampak seolah-olah benar-benar berada di sana. Misalnya, di aplikasi belanja furnitur, pengguna harus yakin bahwa kursi berlengan virtual akan pas di ruang keluarga mereka.
Chrome untuk Android XR mendukung Modul Penginderaan 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 penginderaan kedalaman di ponsel, penginderaan 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.viewsmenampilkan tampilan untuk setiap mata dan loop for yang sesuai 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 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 adegan.
Perangkat seperti ponsel atau perangkat XR yang berfokus pada pengontrol mungkin belum mendukung input tangan. Anda mungkin perlu memperbarui 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 menggabungkan mencubit dengan WebXR API untuk menunjukkan pengguna "menghapus" permukaan ruang virtual untuk menampilkan jendela tembus pandang ke dunia nyata.
Demo WebXR tentang penggunaan jepitan 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 API WebXR memerlukan izin pemetaan 3D dan pelacakan kamera. Akses ke data wajah, mata, dan tangan yang dilacak juga dilindungi oleh izin. Jika semua izin yang diperlukan diberikan, panggilan navigator.xr.requestSession('immersive-ar', options) akan menampilkan sesi WebXR yang valid.
Preferensi izin yang dipilih oleh pengguna tetap berlaku untuk setiap domain. Mengakses pengalaman WebXR di domain yang berbeda 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 dengan benar situasi saat izin ditolak.