WebXR Device API'yi daha önce kullandıysanız ilgili aşamayı geçmeniz gerekir.
WebXR Device API geçen sonbaharda Chrome 79'da kullanıma sunuldu. O zaman da belirtildiği gibi, Chrome'un API'yi uygulaması devam eden bir çalışmadır. Chrome, bu çalışmanın bir kısmının tamamlandığını duyurmaktan mutluluk duyuyor. Chrome 81'de iki yeni özellik kullanıma sunuldu:
Bu makalede artırılmış gerçeklik ele alınmaktadır. Daha önce WebXR Device API'yi kullandıysanız öğrenecek çok yeni bir şey olmadığını bilmekten mutluluk duyacaksınız. WebXR oturumuna girmek büyük ölçüde aynıdır. Kare 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ırmalarda yatar. WebXR'nin temel kavramlarına aşina değilseniz WebXR Device API'deki önceki yayınlarımı okumanız veya en azından burada ele alınan konular hakkında bilgi sahibi olmanız gerekir. Oturum isteme ve oturuma girme, kare döngüsünü çalıştırmayı bilmeniz gerekir.
İsabet testi hakkında bilgi için Sanal nesneleri gerçek dünya görünümlerinde konumlandırma adlı tamamlayıcı makaleyi okuyun. Bu makaledeki kod, Immersive Web Working Group'un WebXR Device API örneklerinden alınan Immersive AR Oturumu örneğine (demo kaynak) dayanmaktadır.
Kodun ayrıntılarına geçmeden önce Yoğun Artırılmış Artırılmış Gerçeklik (AR) Oturumu örneğini en az bir kez kullanmanız gerekir. Chrome 81 veya daha yeni bir sürüme sahip modern bir Android telefona ihtiyacınız olacak.
Ne işe yarar?
Artırılmış gerçeklik, mevcut veya yeni pek çok web sayfasına değerli bir katkı sağlayacak ve web sitelerinin tarayıcıdan ayrılmadan AR kullanım alanı uygulamasına olanak tanıyacaktır. Örneğin, kullanıcıların eğitim sitelerinde bilgi edinmesine yardımcı olabilir ve potansiyel alıcıların alışveriş yaparken evlerindeki nesneleri gözünde canlandırmalarına olanak tanıyabilir.
İkinci kullanım alanını düşünün. Sanal bir nesnenin gerçek boyutlu bir gösterimini gerçek bir sahneye yerleştirmenin simülasyonunu düşünün. Resim yerleştirildikten sonra seçili yüzeyde kalır, asıl öğenin bu yüzeyde olması durumunda olacağı boyutta görüntülenir ve kullanıcının, nesneye yaklaşabileceği gibi etraflarında da hareket edebilmesine olanak tanır. Bu sayede, izleyiciler nesneyi iki boyutlu bir resimle mümkün olandan daha ayrıntılı şekilde anlayabilir.
Kendimde biraz öndeyim. Açıkladığım şeyi yapabilmek için AR işlevine ve yüzeyleri algılamak için bazı araçlara ihtiyacınız vardır. Bu makalede önceki durum ele alınmaktadır. WebXR Hit Test API (yukarıda bağlantısı verilen) ile ilgili olan makalede ikincisi ele alınmaktadır.
Oturum isteme
Oturum isteğinde bulunma işlemi, daha önce gördüklerinize çok benzer. Öncelikle, istediğiniz oturum türünün geçerli cihazda kullanılıp kullanılamadığını öğrenmek için xr.isSessionSupported() numaralı telefonu arayın. Daha önce olduğu gibi 'immersive-vr' istemek 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
}
}
Daha önce olduğu gibi bu işlemde de bir "AR'ye gir" düğmesi etkinleşiyor. Kullanıcı bunu tıkladığında 'immersive-ar' ile birlikte xr.requestSession() numaralı telefonu arayın.
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 tesis
Son kod örneğinde iki satırı vurguladığımı muhtemelen fark etmişsinizdir.
XRSession nesnesinin isImmersive adında bir özelliği var gibi görünüyor. Bu, kendi oluşturduğum ve spesifikasyona dahil olmayan bir kolaylık. İzleyiciye ne
gösterileceğine karar vermek için bu özelliği daha sonra kullanacağım. Bu özellik neden API'nin
bir parçası değil? Uygulamanızın bu özelliği farklı bir şekilde izlemesi gerekebileceği için spesifikasyon yazarları API'yi temiz tutmaya karar verdi.
Oturuma girme
Önceki makalemde onSessionStarted() nasıl göründüğünü hatırlayın:
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çeklik oluşturma konusunda belirtmek için birkaç şey eklemem gerekiyor. Arka planı kapatın. Öncelikle, arka plana ihtiyacım olup olmadığını belirleyeceğim. Burası, kolaylık mülkümi 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ı
Daha önceki makalelerim referans boşluklarına göz attı. Açıkladığım örnek bunlardan ikisini kullanıyor, dolayısıyla bu eksikliği düzeltmenin zamanı geldi.
Referans alanı, sanal dünya ile kullanıcının fiziksel ortamı arasındaki ilişkiyi tanımlar. Bunu aşağıdaki şekilde yapar:
- Sanal dünyadaki konumları ifade etmek için kullanılan koordinat sisteminin başlangıç noktasını belirtme.
- Kullanıcının bu koordinat sistemi içinde hareket etmesinin beklenip beklenmeyeceğini belirtme.
- Koordinat sisteminde önceden belirlenmiş sınırlar olup olmadığı. (Burada gösterilen örneklerde, önceden belirlenmiş sınırlara sahip koordinat sistemleri kullanılmamaktadır.)
Tüm referans alanları için X koordinatı sol ve sağ, Y yukarı ve aşağı, Z ise ileri ve geri ifade eder. Pozitif değerler sırasıyla "sağ", yukarı" ve "geri" değerleridir.
XRFrame.getViewerPose() tarafından döndürülen koordinatlar, istenen referans alanı türüne bağlıdır.
Kare döngüsüne yaklaştığımızda bununla ilgili daha fazla bilgi edineceğiz. Şu anda artırılmış gerçeklik için uygun
bir referans türü seçmemiz gerekiyor. Burada da kolaylık
mülküm kullanılıyor.
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);
});
}
Etkileyici AR Oturumu Örneği'ni ziyaret ettiyseniz sahnenin başlangıçta sabit olduğunu ve hiç artırılmış gerçeklik olmadığını fark edeceksiniz. Sahnede gezinmek için parmağınızı sürükleyip kaydırabilirsiniz. "AR'yi BAŞLAT"ı tıklarsanız arka plan kaybolur ve cihazı hareket ettirerek sahnede gezinebilirsiniz. Modlar farklı referans alanı türleri kullanır. Yukarıda vurgulanan metin bunun nasıl seçildiğini gösterir. Aşağıdaki referans türlerini kullanır:
local: Başlangıç noktası, oturum oluşturulurken izleyicinin bulunduğu konumdur. Bu nedenle, deneyimin iyi tanımlanmış bir zemini 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 herhangi bir hareket olmadan görüntülenebilmesi beklenir. Kendi AR örneğimizden de gördüğünüz
gibi, alan içinde biraz hareket etmek mümkün olabilir.
viewer - En sık, sayfada satır içi sunulan içerik için kullanılan bu alan, görüntüleme cihazını izler. getViewerPose'a iletildiğinde hiçbir izleme sağlamaz. Bu nedenle, uygulama XRReferenceSpace.getOffsetReferenceSpace() ile değiştirmediği sürece her zaman kaynakta bir poz bildirir. Örnek, kameranın dokunmaya dayalı kaydırma özelliğini etkinleştirmek için bunu kullanır.
Kare döngüsü çalıştırma
Kavramsal olarak, sanal gerçeklik oturumunda yaptıklarımdan önceki makalelerimde
açıkladığım hiçbir şey değişmez. Referans alanı türünü XRFrame.getViewerPose() öğesine iletin.
Döndürülen XRViewerPose, geçerli referans alanı türü için olacaktır. Varsayılan olarak viewer kullanıldığında, AR veya VR için kullanıcı izni istenmeden önce sayfada içerik önizlemeleri gösterilir. Bu, önemli bir noktayı gösterir: Satır içi içerik, etkileyici içerikle aynı kare döngüsünü kullanarak korunması 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 dizisi yalnızca web’de kapsayıcı içerik uygulamayla ilgili temel bilgileri kapsamaktadır. Immersive Web Working Group'un WebXR Device API örnekleri tarafından çok daha fazla özellik ve kullanım alanı sunulmaktadır. Ayrıca, yüzeyleri algılamaya ve sanal öğeleri gerçek dünyadaki kamera görünümüne yerleştirmeye yönelik bir API'yi açıklayan bir isabet testi makalesi de yayınladık. Bunlara göz atın ve gelecek yıl daha fazla makale için The web.dev blogunu izleyin.
Fotoğraf: David Grandmougin'in Unsplash'teki fotoğrafı