Jika sudah menggunakan WebXR Device API, Anda sudah hampir selesai.
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 memasuki sesi serta 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 yang berharga untuk banyak halaman web yang ada atau baru dengan memungkinkannya menerapkan kasus penggunaan AR tanpa keluar dari 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 akan tetap di permukaan yang dipilih, muncul dengan ukuran yang sama seperti jika item sebenarnya berada di permukaan tersebut, dan memungkinkan pengguna untuk bergerak di sekitarnya serta lebih dekat 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, 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, tindakan 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 praktis 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 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 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 yang akan saya gunakan untuk properti praktis.
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 untuk sistem koordinat yang digunakan untuk menyatakan 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-pindah di sekitar tampilan. Jika Anda mengklik "MULAI AR", latar belakang akan hilang dan Anda dapat berpindah-pindah di sekitar scene dengan menggerakkan perangkat. Mode ini 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, metode ini tidak menyediakan
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 yang berubah dari yang saya lakukan dalam sesi VR yang dijelaskan dalam
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 menggambarkan 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 ditampilkan 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