WebXR Device API'yi daha önce kullandıysanız işin büyük bir kısmını tamamlamışsınız demektir.
WebXR Device API geçen sonbahar Chrome 79'da kullanıma sunuldu. O zaman da belirtildiği gibi, Chrome'un API'yi uygulama süreci devam etmektedir. Chrome, çalışmaların bir kısmının tamamlandığını duyurmaktan memnuniyet duyuyor. Chrome 81'de iki yeni özellik kullanıma sunuldu:
Bu makalede artırılmış gerçeklik ele alınmaktadır. WebXR Device API'yi zaten kullandıysanız öğrenecek çok az şey olduğunu görmek sizi memnun edecektir. WebXR oturumuna girmek büyük ölçüde aynıdır. Çerçeve döngüsü çalıştırmak büyük ölçüde aynıdır. Farklılıklar, içeriğin artırılmış gerçeklik için uygun şekilde gösterilmesine olanak tanıyan yapılandırmalardadır. WebXR'nin temel kavramlarına aşina değilseniz WebXR Device API ile ilgili önceki gönderilerimi okumalı veya en azından bu gönderilerde ele alınan konulara aşina olmalısınız. Oturum isteğinde bulunmayı ve oturuma girmeyi, ayrıca kare döngüsünü nasıl çalıştıracağınızı bilmeniz gerekir.
İsabet testi hakkında bilgi edinmek için Sanal nesneleri gerçek dünya görünümlerinde konumlandırma başlıklı makaleyi inceleyin. Bu makaledeki kod, Immersive Web Çalışma Grubu'nun WebXR Device API örneklerinden Immersive AR Session örneğini (demokaynağı) temel alır.
Kodu incelemeden önce Immersive AR Session örneğini en az bir kez kullanmanız gerekir. Chrome 81 veya sonraki bir sürümün yüklü olduğu modern bir Android telefona ihtiyacınız vardır.
Ne için faydalıdır?
Artırılmış gerçeklik, tarayıcıdan ayrılmadan AR kullanım alanlarını uygulamalarına olanak tanıyarak birçok mevcut veya yeni web sayfasına değerli bir katkı sunacaktır. Örneğin, kullanıcıların eğitim sitelerinde bilgi edinmelerine yardımcı olabilir ve potansiyel alıcıların alışveriş yaparken evlerindeki nesneleri görselleştirmesine olanak tanıyabilir.
İkinci kullanım alanını düşünün. Sanal bir nesnenin gerçek boyutlu bir temsilini gerçek bir sahneye yerleştirmeyi simüle ettiğinizi düşünün. Yerleştirilen resim, seçilen yüzeyde kalır, gerçek öğe o yüzeyde olsaydı sahip olacağı boyutta görünür ve kullanıcının etrafında hareket etmesine, ona yaklaşmasına veya ondan uzaklaşmasına olanak tanır. Bu sayede izleyiciler, nesne hakkında iki boyutlu bir resimle mümkün olandan daha derin bir anlayışa sahip olur.
Konuyu biraz ileriye götürüyoruz. Açıkladığım şeyi aslında yapmak için AR işlevine ve yüzeyleri algılamaya yönelik bazı yöntemlere ihtiyacınız vardır. Bu makalede birincisi ele alınmaktadır. WebXR Hit Test API ile ilgili makalede (yukarıda bağlantısı verilmiştir) ikincisi ele alınmıştır.
Oturum isteğinde bulunma
Oturum isteğinde bulunma işlemi, daha önce gördüğünüz işlemlere çok benzer. Öncelikle xr.isSessionSupported() işlevini çağırarak istediğiniz oturum türünün mevcut cihazda kullanılıp kullanılamadığını öğrenin. Önceki gibi 'immersive-vr' yerine 'immersive-ar' isteyin.
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
}
}
Bu işlem, daha önce olduğu gibi "AR'ye gir" düğmesini etkinleştirir. Kullanıcı düğmeyi tıkladığında xr.requestSession() işlevini çağırın ve 'immersive-ar' parametresini de iletin.
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();
}
}
Kolaylık tesisi
Son kod örneğinde iki satırı vurguladığımı fark etmişsinizdir.
XRSession nesnesinin isImmersive adlı bir özelliği var. Bu, spesifikasyonun bir parçası olmayan, kendim oluşturduğum bir kolaylık özelliğidir. İzleyiciye ne göstereceğime karar vermek için daha sonra kullanacağım. Bu özellik neden API'nin
bir parçası değil? Uygulamanızın bu özelliği farklı şekilde izlemesi gerekebileceğinden, spesifikasyon yazarları API'yi temiz tutmaya karar verdi.
Oturum açma
Önceki makalemde onSessionStarted() ürününün nasıl göründüğüne dikkat edin:
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);
});
}
Artırılmış gerçekliği oluşturmak için birkaç şey eklemem gerekiyor. Arka planı kapatın Öncelikle arka plana ihtiyacım olup olmadığını belirlerim. Bu, kolaylık mülkümümü kullanacağım ilk yer.
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);
});
}
Referans alanlar
Önceki makalelerimde referans alanlarına değinmiştim. Açıkladığım örnekte bunlardan iki tanesi kullanılıyor. Bu eksikliği düzeltme zamanı geldi.
Referans alanı, sanal dünya ile kullanıcının fiziksel ortamı arasındaki ilişkiyi tanımlar. Bunu şu şekilde yapar:
- Sanal dünyadaki konumları ifade etmek için kullanılan koordinat sisteminin orijinini belirtme.
- Kullanıcının söz konusu koordinat sistemi içinde hareket etmesinin beklenip beklenmediğini belirleme.
- Bu koordinat sisteminin önceden belirlenmiş sınırları olup olmadığı. (Burada gösterilen örneklerde önceden belirlenmiş sınırları olan koordinat sistemleri kullanılmamaktadır.)
Tüm referans alanlarında X koordinatı soldan sağa, Y koordinatı yukarıdan aşağıya, Z koordinatı ise ileriden geriye doğru yönleri ifade eder. Pozitif değerler sırasıyla sağ, yukarı ve geriye doğrudur.
XRFrame.getViewerPose() tarafından döndürülen koordinatlar, istenen referans alanı türüne bağlıdır.
Bu konuyla ilgili daha fazla bilgiyi kare döngüsüne geldiğimizde vereceğiz. Şu anda, artırılmış gerçeklik için uygun
bir referans türü seçmemiz gerekiyor. Burada da kolaylık özelliğimi kullanıyorum.
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);
});
}
Immersive AR Session Sample (Immersive AR Oturumu Örneği) sayfasını ziyaret ettiyseniz başlangıçta sahnenin statik olduğunu ve hiç artırılmış gerçeklik içermediğini fark edeceksiniz. Sahnede gezinmek için parmağınızla sürükleyebilir ve kaydırabilirsiniz. "AR'I BAŞLAT"ı tıklarsanız arka plan kaybolur ve cihazı hareket ettirerek sahnede hareket edebilirsiniz. Modlar farklı referans alanı türleri kullanır. Yukarıdaki vurgulanan metin, bunun nasıl seçildiğini gösterir. Aşağıdaki referans türlerini kullanır:
local: Kaynak, oturum oluşturulurken izleyicinin konumundadır. Bu nedenle, deneyim iyi tanımlanmış bir zemine sahip olmayabilir ve başlangıç noktasının tam konumu platforma göre değişebilir. Alan için önceden belirlenmiş sınırlar olmasa da içeriğin döndürme dışında hareket olmadan görüntülenebilmesi beklenir. Kendi AR örneğimizde görebileceğiniz gibi, alanda biraz hareket olabilir.
viewer: Bu alan en çok sayfada satır içinde sunulan içerikler için kullanılır. Bu alan, görüntüleyen cihazı takip eder. getViewerPose'a geçirildiğinde hiçbir izleme sağlamaz ve bu nedenle, uygulama XRReferenceSpace.getOffsetReferenceSpace() ile değiştirmediği sürece her zaman kaynakta bir poz bildirir. Sana Özel örneğinde, kameranın dokunmatik tabanlı kaydırılmasını sağlamak için bu yöntem kullanılır.
Kare döngüsü çalıştırma
Kavramsal olarak, önceki makalelerimde açıklanan VR oturumunda yaptığımdan farklı bir şey yapmadım. Referans alan türünü XRFrame.getViewerPose()'e iletin.
Döndürülen XRViewerPose, mevcut referans alanı türü içindir. Varsayılan olarak viewer kullanılması, bir sayfanın AR veya VR için kullanıcı izni istenmeden önce içerik önizlemelerini göstermesine olanak tanır. Bu, önemli bir noktayı göstermektedir: Satır içi içerik, tam sayfa içerikle aynı çerçeve döngüsünü kullanır ve bu sayede, bakımı gereken kod miktarını azaltır.
function onXRFrame(hrTime, xrFrame) {
let xrSession = xrFrame.session;
xrSession.requestAnimationFrame(onXRFrame);
let xrViewerPose = xrFrame.getViewerPose(refSpaceType);
if (xrViewerPose) {
// Render based on the pose.
}
}
Sonuç
Bu makale serisi, yalnızca web'de etkileyici içerik uygulamayla ilgili temel bilgileri kapsar. Immersive Web Working Group'un WebXR Device API örnekleri, daha birçok özelliği ve kullanım alanını sunmaktadır. Ayrıca, yüzeyleri algılamak ve sanal öğeleri gerçek kamera görüntüsüne yerleştirmek için kullanılan bir API'yi açıklayan bir hit testi makalesi de yayınladık. Önümüzdeki yıl yayınlanacak diğer makaleler için bu web sitelerine göz atın ve web.dev blogunu izleyin.
Fotoğraf: David Grandmougin, Unsplash