Tam sayfa web, tarayıcı aracılığıyla barındırılan sanal dünya deneyimleri anlamına gelir. Bu sanal gerçeklik deneyiminin tamamı tarayıcıda veya VR özellikli başlıklarda gösteriliyordu.
Tam sayfa web, tarayıcı aracılığıyla barındırılan sanal dünya deneyimleri anlamına gelir. Bu, tarayıcıda veya Google'ın Daydream, Oculus Rift, Samsung Gear VR, HTC Vive ve Windows Karma Gerçeklik Başlıkları gibi VR özellikli mikrofonlu kulaklıklarda görülen tüm sanal gerçeklik (VR) deneyimlerinin yanı sıra, AR özellikli mobil cihazlar için geliştirilen artırılmış gerçeklik deneyimlerini kapsar.
Etkileyici deneyimleri tanımlamak için iki terim kullansak da bu deneyimleri, tam gerçeklikten tamamen etkileyici bir sanal gerçeklik ortamına uzanan bir spektrumla, aralarında çeşitli AR seviyelerinin de bulunduğu bir spektrum olarak düşünülmelidir.
Etkileyici deneyimlere örnek olarak aşağıdakiler verilebilir:
- Etkileyici 360° videolar
- Üç boyutlu bir ortamda sunulan geleneksel 2D (veya 3D) videolar
- Veri görselleştirmeleri
- Ev alışverişi
- Sanat
- Henüz kimsenin aklına gelmeyen harika bir şey
Oraya nasıl giderim?
Üç boyutlu web, neredeyse bir yıldır embriyonik biçimde kullanımda. Bu işlem, Chrome 62'den bu yana kaynak denemesinde mevcut olan WebVR 1.1 API üzerinden gerçekleştirildi. Bu API, Firefox ve Edge'in yanı sıra Safari için çoklu dolgu tarafından da desteklenir.
Ama şimdi devam etme zamanı.
Kaynak denemesi 24 Temmuz 2018'de sona ermiş ve bu spesifikasyonun yerini WebXR Device API ve yeni bir kaynak denemesi almıştır.
WebVR 1.1'e ne oldu?
WebVR 1.1'den çok şey öğrendik, ancak zaman içinde geliştiricilerin oluşturmak istediği uygulama türlerini desteklemek için bazı büyük değişikliklere ihtiyaç duyulduğunu gördük. Alınan derslerin tam listesi burada ele alınamayacak kadar uzundur ancak API'nin açık bir şekilde ana JavaScript iş parçacığına bağlanması, geliştiricilerin bariz şekilde yanlış yapılandırmalar ayarlaması için çok fazla fırsat sunması ve sihirli pencere gibi yaygın kullanımların bilinçli bir özellik değil, yan etki olması gibi sorunları içerir. (Sihirli pencere, mikrofonlu kulaklık olmadan etkileyici içerikleri görüntülemek için kullanılan bir tekniktir. Bu teknikte uygulama, cihazın yön sensörüne bağlı olarak tek bir görünüm oluşturur.)
Yeni tasarım, uygulamaları daha basit hale getiriyor ve büyük performans iyileştirmeleri sağlıyor. Aynı zamanda, artırılmış gerçeklik (AR) ve diğer kullanım alanları ortaya çıktı ve API'nin gelecekte bunları destekleyecek şekilde genişletilebilir olması önem kazandı.
WebXR Device API, bu genişletilmiş kullanım alanları dikkate alınarak tasarlanmış ve adlandırılmış olup daha iyi bir yol sunar. WebVR'nin kullanıcıları, WebXR Device API'ye geçiş yapmayı taahhüt ediyor.
WebXR Device API nedir?
Öncesindeki WebVR spesifikasyonu gibi WebXR Device API de Google, Microsoft, Mozilla ve diğer ülkelerden katkıda bulunanların bulunduğu Immersive Web Community Group'un bir ürünüdür. "XR'deki X", etkileyici deneyimler spektrumundaki herhangi bir şeyi temsil eden bir tür cebirsel değişken olarak tasarlanmıştır. Daha önce bahsedilen kaynak denemesinde ve polyfill aracılığıyla kullanılabilir.
Bu makale ilk olarak Chrome 67 beta döneminde yayınlandığında, yalnızca VR özellikleri etkinleştirilmişti. Artırılmış gerçeklik Chrome 69'da kullanıma sunuldu. Web için Artırılmış Gerçeklik sayfasından bu konuyla ilgili bilgi edinebilirsiniz.
Bu yeni API'de, bunun gibi bir makalede anlatabileceğimden daha fazla şey var. WebXR örneklerini daha iyi anlamanızı sağlayacak bilgileri vermek istiyorum. Daha fazla bilgiyi hem orijinal açıklayıcıda hem de Immersive Web İlk Kullanıcılar Kılavuzumuzda bulabilirsiniz. Kaynak denemesi ilerledikçe uygulama kapsamını genişleteceğim. Sorunları açabilir veya pull istekleri gönderebilirsiniz.
Bu makalede, bir XR oturumunu başlatma, durdurma ve çalıştırmanın yanı sıra girişleri işlemeyle ilgili bazı temel bilgileri ele alacağız.
Burada artırılmış gerçeklik/sanal gerçeklik içeriğinin ekrana nasıl çizileceğini ele almayacağım. WebXR Device API, resim oluşturma özellikleri sağlamaz. Bu size bağlıdır. Çizim, WebGL API'leri kullanılarak yapılır. Gerçekten hırslıysanız bunu yapabilirsiniz. Yine de bir çerçeve kullanmanızı öneririz. Tam sayfa web örnekleri, Cottontail adlı demolar için oluşturulan bir örneği kullanır. Three.js, WebXR'yi Mayıs ayından beri destekliyor. A-Frame hakkında hiçbir şey duymadım.
Uygulama başlatma ve çalıştırma
Temel süreç şu şekildedir:
- XR cihazı isteyin.
- Mümkünse XR oturumu isteyin. Kullanıcının telefonunu bir mikrofonlu kulaklığa takmasını istiyorsanız buna etkileyici oturum adı verilir ve giriş için kullanıcı hareketi gerekir.
- Bu oturumu, saniyede 60 resim karesi sağlayan bir oluşturma döngüsü çalıştırmak için kullanın. Her bir karede ekrana uygun içerik çizin.
- Kullanıcı çıkmaya karar verene kadar oluşturma döngüsünü çalıştırın.
- XR oturumunu sonlandırın.
Bunu biraz daha ayrıntılı olarak inceleyelim ve bazı kodlar ekleyelim. Size göstereceğimden bir uygulamayı çalıştıramazsınız. Ama tekrarlayalım, bir fikir vermek istiyoruz.
XR cihazı isteyin
Burada, standart özellik algılama kodunu tanırsınız. Bunu, checkForXR() gibi bir işlev içine sarmalayabilirsiniz.
Kapsamlı bir oturum kullanmıyorsanız, işlevlerin reklamını yapmayı ve kullanıcı hareketini almayı atlayıp doğrudan oturum isteme adımına geçebilirsiniz. Etkileyici oturumlarda mikrofonlu kulaklık kullanılması gerekir. Yoğun olmayan oturumlarda ise içerik cihaz ekranında gösterilir. Sanal gerçeklikten veya artırılmış gerçekten bahsederken çoğu kişi bu kavramı düşünüyor. İkincisi bazen "sihirli pencere" olarak adlandırılır.
if (navigator.xr) {
navigator.xr.requestDevice()
.then(xrDevice => {
// Advertise the AR/VR functionality to get a user gesture.
})
.catch(err => {
if (err.name === 'NotFoundError') {
// No XRDevices available.
console.error('No XR devices available:', err);
} else {
// An error occurred while requesting an XRDevice.
console.error('Requesting XR device failed:', err);
}
})
} else{
console.log("This browser does not support the WebXR API.");
}
XR oturumu isteyin
Artık cihazımızı ve kullanıcı hareketimizi aldığımıza göre sıra oturum almaya geldi. Oturum oluşturmak için tarayıcının üzerinde çizim yapacağı bir tuvale ihtiyacı vardır.
xrPresentationContext = htmlCanvasElement.getContext('xrpresent');
let sessionOptions = {
// The immersive option is optional for non-immersive sessions; the value
// defaults to false.
immersive: false,
outputContext: xrPresentationContext
}
xrDevice.requestSession(sessionOptions)
.then(xrSession => {
// Use a WebGL context as a base layer.
xrSession.baseLayer = new XRWebGLLayer(session, gl);
// Start the render loop
})
Oluşturma döngüsünü çalıştırma
Bu adımın kodu, karışıklığı biraz çözer. Çözmek için sana birkaç kelime fırlatmak üzereyim. Kodun son haline göz atmak isterseniz hızlıca göz atmak için ileriye gidin, ardından tam açıklamayı görmek için geri dönün. Tahmin edemediğiniz birçok bilgi var.
Oluşturma döngüsü için temel süreç şu şekildedir:
- Animasyon karesi isteğinde bulunun.
- Cihazın konumuna ilişkin sorgu.
- İçeriği cihazın konumuna göre çizin.
- Giriş cihazları için gereken işleri yapın.
- Kullanıcı çıkmaya karar verene kadar bu işlemi saniyede 60 kez tekrarlayın.
Sunu çerçevesi isteme
"Çerçeve" kelimesinin Web XR bağlamında birkaç anlamı vardır. Bunlardan ilki, koordinat sisteminin başlangıç noktasının nereden hesaplandığını ve cihaz hareket ettiğinde söz konusu kaynağa ne olduğunu tanımlayan referans çerçevesidir. (Kullanıcı hareket ettiğinde görünüm aynı mı kalıyor yoksa gerçek hayatta olduğu gibi mi değişiyor?)
İkinci çerçeve türü, XRFrame nesnesiyle temsil edilen sunum çerçevesidir. Bu nesne, cihaza bir AR/VR sahnesinin tek bir karesini oluşturmak için gereken bilgileri içerir. Bir sunu çerçevesi requestAnimationFrame() çağrısıyla alındığı için bu durum biraz kafa karıştırıcıdır.
Bu nedenle window.requestAnimationFrame() ile uyumlu.
Konuyu daha fazla özetlemeden önce size birkaç kod vereceğim. Aşağıdaki örnekte, oluşturma döngüsünün nasıl başlatıldığı ve sürdürüldüğü gösterilmektedir. Kelime çerçevesinin iki kez
kullanıldığına dikkat edin. Ayrıca, requestAnimationFrame() öğesine yapılan yinelemeli çağrıya dikkat edin. Bu işlev saniyede 60 kez çağrılır.
xrSession.requestFrameOfReference('eye-level')
.then(xrFrameOfRef => {
xrSession.requestAnimationFrame(onFrame(time, xrFrame) {
// The time argument is for future use and not implemented at this time.
// Process the frame.
xrFrame.session.requestAnimationFrame(onFrame);
}
});
Pozlar
Ekrana bir şey çizmeden önce, ekran cihazının nereye
işaret ettiğini bilmeniz ve ekrana erişmeniz gerekir. Genel olarak, bir şeyin AR/VR'deki konumuna
ve yönüne poz denir. Hem izleyicilerin hem de giriş
cihazlarının pozisyonu var. (Giriş cihazlarını daha sonra açıklayacağım.) Hem görüntüleyen hem de giriş cihazı duruşları, sütun ana sırasına göre Float32Array içinde depolanan 4'e 4 boyutunda bir matris olarak tanımlanır. İzleyicinin pozunu, mevcut animasyon çerçevesi nesnesinde XRFrame.getDevicePose() çağrısı yaparak alırsınız.
Pozunuzu geri alıp almadığınızı görmek için her zaman test edin. Bir şeyler ters gittiyse
ekrana çizim yapmak istemezsiniz.
let pose = xrFrame.getDevicePose(xrFrameOfRef);
if (pose) {
// Draw something to the screen.
}
Görüntüleme
Pozu kontrol ettikten sonra bir şeyler çizmenizin zamanı gelmiş demektir. Çizdiğiniz nesneye görünüm (XRView) adı verilir. Burada oturum türü önem kazanır. Görünümler XRFrame nesnesinden dizi olarak alınır. Yoğun içerikli olmayan bir oturumda
dizinin bir görünümü vardır. Üç boyutlu bir oturumdaysanız dizide her göz için bir tane olmak üzere
iki adet bulunur.
for (let view of xrFrame.views) {
// Draw something to the screen.
}
Bu, WebXR ile diğer kapsamlı sistemler arasındaki önemli bir farktır. Tek bir görünümde yineleme yapmak anlamsız gelse de, bunu yapmak çeşitli cihazlar için tek bir oluşturma yoluna sahip olmanıza olanak tanır.
Oluşturma döngüsünün tamamı
Tüm bunları bir araya getirirsek, aşağıdaki kodu alırım. Giriş cihazları için bir yer tutucu bıraktım. Buna daha sonra değineceğim.
xrSession.requestFrameOfReference('eye-level')
.then(xrFrameOfRef => {
xrSession.requestAnimationFrame(onFrame(time, xrFrame) {
// The time argument is for future use and not implemented at this time.
let pose = xrFrame.getDevicePose(xrFrameOfRef);
if (pose) {
for (let view of xrFrame.views) {
// Draw something to the screen.
}
}
// Input device code will go here.
frame.session.requestAnimationFrame(onFrame);
}
}
XR oturumunu sonlandır
XR oturumu, XRSession.end() numaralı telefona yapılan bir çağrı aracılığıyla kendi kodunuzla sona erdirme de dahil olmak üzere çeşitli nedenlerle sonlandırılabilir. Diğer nedenler arasında mikrofonlu kulaklığın bağlantısının kesilmesi veya başka bir uygulamanın mikrofonun kontrolünü ele geçirmesi yer alır. Bu nedenle, iyi çalışan bir uygulama son etkinliği izlemeli ve etkinlik gerçekleştiğinde oturumu ve oluşturucu nesnelerini silmelidir. Sonlandırılan XR oturumu devam ettirilemez.
xrDevice.requestSession(sessionOptions)
.then(xrSession => {
// Create a WebGL layer and initialize the render loop.
xrSession.addEventListener('end', onSessionEnd);
});
// Restore the page to normal after immersive access has been released.
function onSessionEnd() {
xrSession = null;
// Ending the session stops executing callbacks passed to the XRSession's
// requestAnimationFrame(). To continue rendering, use the window's
// requestAnimationFrame() function.
window.requestAnimationFrame(onDrawFrame);
}
Etkileşim nasıl çalışır?
Uygulamanın ömrü boyunca olduğu gibi size artırılmış gerçeklik (AR) veya VR'da nesnelerle nasıl etkileşimde bulunacağınıza dair bir fikir vereceğim.
WebXR Device API, kullanıcı girişi için "işaretle ve tıkla" yaklaşımını benimser. Bu yaklaşımda, her giriş kaynağında, giriş cihazının işaret ettiği yeri gösteren tanımlı bir işaretçi ışını ve bir öğe seçildiğinde bunu belirten etkinlikler bulunur.
Uygulamanız işaretçi ışını alarak nereye doğru uzandığını gösterir. Kullanıcı giriş cihazını tıkladığında etkinlikler tetiklenir (özellikle select, selectStart ve selectEnd). Uygulamanız neyin tıklandığını belirler ve uygun şekilde yanıt verir.
Giriş cihazı ve işaretçi ışın
Kullanıcılar için işaretçi ışın, kumanda ile işaret ettikleri nokta arasındaki soluk bir çizgi gibidir. Fakat uygulamanızın bunu çizmesi gerekiyor. Bu, giriş cihazının pozunu almak ve bulunduğu konumdan AR/VR alanındaki bir nesneye bir çizgi çizmek anlamına gelir. Bu işlem kabaca aşağıdaki gibidir:
let inputSources = xrSession.getInputSources();
for (let xrInputSource of inputSources) {
let inputPose = frame.getInputPose(inputSource, xrFrameOfRef);
if (!inputPose) {
continue;
}
if (inputPose.gripMatrix) {
// Render a virtual version of the input device
// at the correct position and orientation.
}
if (inputPose.pointerMatrix) {
// Draw a ray from the gripMatrix to the pointerMatrix.
}
}
Bu, Immersive Web Community Group'a ait Giriş İzleme örneğinin sadeleştirilmiş bir sürümüdür. Çerçeve oluşturmada olduğu gibi, işaretçi ışını çizmek ve cihazı kullanmak size kalmıştır. Daha önce de belirtildiği gibi bu kod, oluşturma döngüsünün bir parçası olarak çalıştırılmalıdır.
Sanal alanda öğe seçme
Artırılmış gerçeklik (AR)/sanal gerçeklikte (VR) yalnızca bir şeylere işaret etmek pek işe yaramaz. Yararlı bir şey yapabilmek için
kullanıcıların öğeleri seçebilmesi gerekir. WebXR Device API, kullanıcı etkileşimlerine yanıt vermek için üç etkinlik sağlar: select, selectStart ve selectEnd. Beklemediğim bir şekilde ilginç bir şeyler gördüler: Size sadece bir giriş cihazının tıklandığını söylerler. Bu etiketler, ortamdaki hangi öğenin tıklandığını size bildirmez. Etkinlik işleyiciler XRSession nesnesine eklenir ve kullanılabilir olur olmaz eklenmelidir.
xrDevice.requestSession(sessionOptions)
.then(xrSession => {
// Create a WebGL layer and initialize the render loop.
xrSession.addEventListener('selectstart', onSelectStart);
xrSession.addEventListener('selectend', onSelectEnd);
xrSession.addEventListener('select', onSelect);
});
Bu kod, daha fazla içerik isterseniz bir Giriş Seçimi örneğine dayanır.
Neyin tıklandığını öğrenmek için poz kullanın. (Şaşırdın mı? Hiç düşünmemiştim.) Bununla ilgili ayrıntılar uygulamanıza veya kullandığınız çerçeveye özgüdür, dolayısıyla bu makalenin kapsamı dışındadır. Cottontail'in yaklaşımı Giriş Seçimi örneğindedir.
function onSelect(ev) {
let inputPose = ev.frame.getInputPose(ev.inputSource, xrFrameOfRef);
if (!inputPose) {
return;
}
if (inputPose.pointerMatrix) {
// Figure out what was clicked and respond.
}
}
Sonuç: Geleceğe bakmak
Daha önce de belirttiğim gibi, artırılmış gerçeklik, Chrome 69'da (Canary, Haziran 2018'de bir tarihte) beklenmektedir. Yine de, şu ana kadar sunulan özellikleri denemenizi öneririz. Daha iyi hale getirmek için geri bildirime ihtiyacımız var. WebXR İsabet Testi için ChromeStatus.com sayfasını izleyerek ilerleme durumunu takip edin. Ayrıca, poz izlemeyi iyileştirecek WebXR Anchors öğesini de takip edebilirsiniz.