Beberapa dasar untuk mempersiapkan Anda menghadapi spektrum pengalaman imersif: virtual reality, augmented reality, dan lainnya.
Pengalaman imersif hadir di web pada Chrome 79. WebXR Device API menghadirkan VR, sementara dukungan untuk AR hadir di Chrome 81. Sementara update pada GamePad API memperluas penggunaan kontrol lanjutan ke VR. Browser lain akan segera mendukung spesifikasi ini, termasuk Firefox Reality, Oculus Browser, Edge, dan browser Helio Magic Leap, di antara lainnya.
Artikel ini memulai rangkaian tentang web imersif. Bagian ini membahas cara menyiapkan aplikasi WebXR dasar serta memasuki dan keluar dari sesi XR. Artikel berikutnya akan membahas loop frame (pekerja keras pengalaman WebXR), detail augmented reality, dan WebXR Hit Test API, yaitu cara mendeteksi platform dalam sesi AR. Kecuali jika dinyatakan lain, semua yang saya bahas dalam artikel ini dan artikel berikutnya berlaku sama untuk AR dan VR.
Apa yang dimaksud dengan web imersif?
Meskipun kita menggunakan dua istilah untuk mendeskripsikan pengalaman imersif—augmented reality dan virtual reality—banyak orang menganggapnya sebagai spektrum dari realitas lengkap hingga sepenuhnya virtual, dengan tingkat imersi di antaranya. 'X' dalam VR dimaksudkan untuk mencerminkan pemikiran tersebut dengan menjadi semacam variabel aljabar yang mewakili apa pun dalam spektrum pengalaman imersif.
Contoh pengalaman imersif meliputi:
- Game
- Video 360°
- Video 2D (atau 3D) tradisional yang disajikan dalam lingkungan imersif
- Pembelian rumah
- Melihat produk di rumah Anda sebelum membelinya
- Seni imersif
- Sesuatu yang keren yang belum terpikirkan oleh siapa pun
Konsep dan penggunaan
Saya akan menjelaskan beberapa dasar penggunaan WebXR Device API. Jika Anda memerlukan penjelasan lebih mendalam dari yang telah saya berikan, lihat contoh WebXR dari Immersive Web Working Group atau materi referensi yang terus berkembang dari MDN. Jika sudah terbiasa dengan versi awal WebXR Device API, Anda harus membaca semua materi ini. Ada perubahan.
Kode dalam artikel ini didasarkan pada contoh dasar Immersive Web Working Group (demo, source), tetapi diedit untuk kejelasan dan kesederhanaan.
Bagian dari pembuatan spesifikasi WebXR adalah memperjelas langkah keamanan dan privasi untuk melindungi pengguna. Oleh karena itu, implementasi harus mematuhi persyaratan tertentu. Halaman web atau aplikasi harus aktif dan difokuskan sebelum dapat meminta informasi sensitif apa pun dari pelihat. Halaman web atau aplikasi harus ditayangkan melalui HTTPS. API itu sendiri dirancang untuk melindungi informasi yang diperoleh dari sensor dan kamera, yang diperlukan agar dapat berfungsi.
Meminta sesi
Memasuki sesi XR memerlukan gestur pengguna. Untuk mendapatkannya, gunakan deteksi
fitur untuk menguji XRSystem
(melalui navigator.xr
) dan melakukan panggilan ke
XRSystem.isSessionSupported()
. Perhatikan bahwa di Chrome versi 79 dan 80, objek XRSystem
disebut XR
.
Pada contoh di bawah, saya telah menunjukkan bahwa saya
ingin sesi virtual reality dengan jenis sesi 'immersive-vr'
. Jenis sesi
lainnya
adalah 'immersive-ar'
dan 'inline'
. Sesi inline digunakan untuk menampilkan konten
dalam HTML dan terutama digunakan untuk konten teaser. Contoh Sesi AR
Imersif
menunjukkan hal ini. Saya akan menjelaskannya di artikel berikutnya.
Setelah mengetahui bahwa sesi virtual reality didukung, saya mengaktifkan tombol yang memungkinkan saya memperoleh gestur pengguna.
if (navigator.xr) {
const supported = await navigator.xr.isSessionSupported('immersive-vr');
if (supported) {
xrButton.addEventListener('click', onButtonClicked);
xrButton.textContent = 'Enter VR';
xrButton.enabled = supported; // supported is Boolean
}
}
Setelah mengaktifkan tombol, saya menunggu peristiwa klik, lalu meminta sesi.
let xrSession = null;
function onButtonClicked() {
if (!xrSession) {
navigator.xr.requestSession('immersive-vr')
.then((session) => {
xrSession = session;
xrButton.textContent = 'Exit XR';
onSessionStarted(xrSession);
});
} else {
xrSession.end();
}
}
Perhatikan hierarki objek dalam kode ini. Pengujian ini berpindah dari navigator
ke xr
ke
instance XRSession
. Pada versi awal API, skrip harus meminta
perangkat sebelum meminta sesi. Sekarang, perangkat diperoleh secara implisit.
Masuk ke sesi
Setelah mendapatkan sesi, saya harus memulai dan memasukinya. Namun, pertama-tama, saya perlu
menyiapkan beberapa hal. Sesi memerlukan pengendali peristiwa onend
agar aplikasi atau halaman web dapat direset saat pengguna keluar.
Saya juga memerlukan elemen <canvas>
untuk menggambar tampilan. Konteks ini harus berupa
WebGLRenderingContext
atau
WebGL2RenderingContext
yang kompatibel dengan XR.
Semua gambar dilakukan menggunakan framework tersebut atau framework berbasis WebGL seperti
Three.js.
Setelah memiliki tempat untuk menggambar, saya memerlukan sumber konten untuk menggambar
di atasnya. Untuk itu, saya membuat instance XRWebGLLayer
. Saya mengaitkannya dengan
kanvas dengan memanggil XRSession.updateRenderState()
.
Setelah berada dalam sesi, saya memerlukan cara untuk menentukan lokasi berbagai hal dalam virtual
reality. Saya memerlukan ruang referensi. Ruang referensi 'local-floor'
adalah ruang
tempat asal berada di dekat penampil dan sumbu y adalah 0 di tingkat lantai
dan tidak diharapkan untuk bergerak. Ada jenis ruang referensi
lainnya,
tetapi itu adalah topik yang lebih rumit daripada yang dapat saya bahas di sini. Saya menyimpan
ruang referensi ke variabel karena saya akan membutuhkannya saat menggambar ke layar.
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
let canvas = document.createElement('canvas');
webGLRenContext = canvas.getContext('webgl', { xrCompatible: true });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(xrSession, webGLRenContext)
});
xrSession.requestReferenceSpace('local-floor')
.then((refSpace) => {
xrRefSpace = refSpace;
xrSession.requestAnimationFrame(onXRFrame);
});
}
Setelah mendapatkan ruang referensi, saya memanggil XRSession.requestAnimationFrame()
.
Ini adalah awal presentasi konten virtual, yang dilakukan dalam loop
bingkai.
Menjalankan loop frame
Loop frame adalah loop tanpa batas yang dikontrol oleh agen pengguna tempat konten digambar berulang kali ke layar. Konten digambar dalam blok terpisah yang disebut frame. Urutan frame menciptakan ilusi gerakan. Untuk aplikasi VR, frame per detik dapat berkisar antara 60 hingga 144. AR untuk Android berjalan pada 30 frame per detik. Kode Anda tidak boleh mengasumsikan kecepatan frame tertentu.
Proses dasar untuk loop frame adalah:
- Hubungi
XRSession.requestAnimationFrame()
. Sebagai respons, agen pengguna memanggilXRFrameRequestCallback
, yang ditentukan oleh Anda. - Di dalam fungsi callback Anda:
- Hubungi
XRSession.requestAnimationFrame()
lagi. - Dapatkan pose penampil.
- Teruskan ('bind')
WebGLFramebuffer
dariXRWebGLLayer
keWebGLRenderingContext
. - Lakukan iterasi pada setiap objek
XRView
, ambilXRViewport
-nya dariXRWebGLLayer
, lalu teruskan keWebGLRenderingContext
. - Menggambar sesuatu ke framebuffer.
- Hubungi
Bagian lain dari artikel ini menjelaskan langkah 1 dan bagian dari langkah 2, menyiapkan
dan memanggil XRFrameRequestCallback
. Item lainnya dari langkah 2
akan dibahas di bagian II.
XRFrameRequestCallback
XRFrameRequestCallback
ditentukan oleh Anda. Pengujian ini menggunakan dua parameter: DOMHighResTimeStamp
dan instance XRFrame
. Objek XRFrame
memberikan
informasi yang diperlukan untuk merender satu frame ke layar. Argumen
DOMHighResTimeStamp
adalah untuk penggunaan mendatang.
Sebelum melakukan hal lain, saya akan meminta frame animasi berikutnya. Seperti yang dinyatakan sebelumnya, pengaturan waktu frame ditentukan oleh agen pengguna berdasarkan hardware yang mendasarinya. Meminta frame berikutnya terlebih dahulu memastikan bahwa loop frame berlanjut jika ada sesuatu selama callback yang menampilkan error.
function onXRFrame(hrTime, xrFrame) {
let xrSession = xrFrame.session;
xrSession.requestAnimationFrame(onXRFrame);
// Render a frame.
}
Pada tahap ini, saatnya menggambar sesuatu untuk penonton. Itu adalah diskusi untuk bagian II. Sebelum melanjutkan, izinkan saya menunjukkan cara mengakhiri sesi.
Mengakhiri sesi
Sesi imersif dapat berakhir karena beberapa alasan, termasuk berakhir oleh kode
Anda sendiri melalui panggilan ke XRSession.end()
. Penyebab lainnya termasuk headset
terputus atau aplikasi lain mengambil kontrolnya. Itulah sebabnya
aplikasi yang berperilaku baik harus memantau peristiwa end
. Jika terjadi, hapus
sesi dan objek render terkait. Sesi imersif yang telah berakhir tidak dapat
dilanjutkan. Untuk memasuki kembali pengalaman imersif, aplikasi saya perlu memulai sesi
baru.
Ingat dari Memasuki sesi bahwa selama penyiapan, saya menambahkan pengendali peristiwa onend
.
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
// More setup…
}
Di dalam pengendali peristiwa, pulihkan status aplikasi sebelum pengguna memasuki sesi.
function onSessionEnded(event) {
xrSession = null;
xrButton.textContent = 'Enter VR';
}
Kesimpulan
Saya belum menjelaskan semua yang Anda perlukan untuk menulis aplikasi Web XR atau AR. Semoga saya telah memberi Anda cukup informasi untuk mulai memahami kode itu sendiri, dan cukup untuk mulai bereksperimen. Dalam artikel berikutnya, saya akan menjelaskan loop bingkai, tempat konten digambar ke layar.
Foto oleh JESHOOTS.COM di Unsplash