Tam sayfa web, tarayıcı üzerinden barındırılan sanal dünya deneyimleri anlamına gelir. Bu sanal gerçeklik deneyimlerinin tamamı tarayıcıda veya VR özellikli kulaklıklarda gösterildi.
Sürükleyici web, tarayıcı üzerinden barındırılan sanal dünya deneyimleri anlamına gelir. Bu kapsamda, tarayıcıda veya Google Daydream, Oculus Rift, Samsung Gear VR, HTC Vive ve Windows Mixed Reality kulaklıkları gibi VR özellikli kulaklıklarda sunulan sanal gerçeklik (VR) deneyimlerinin tamamının yanı sıra AR özellikli mobil cihazlar için geliştirilen artırılmış gerçeklik deneyimleri de yer alır.
Sürükleyici deneyimleri tanımlamak için iki terim kullanıyor olsak da bu terimler, tam gerçeklikten tamamen sürükleyici bir VR ortamına kadar uzanan ve aralarında çeşitli AR seviyeleri bulunan bir spektrum olarak düşünülmelidir.
Tam sayfa deneyimlerine örnek olarak aşağıdakiler verilebilir:
- 360 derecelik etkileyici videolar
- Immersive ortamlarda sunulan geleneksel 2D (veya 3D) videolar
- Veri görselleştirmeleri
- Ev alışverişi
- Sanat
- Henüz kimsenin aklına gelmemiş bir şey
Oraya nasıl giderim?
Üç boyutlu web, yaklaşık bir yıldır embriyonik biçimde kullanıma sunuldu. Bu işlem, Chrome 62'den bu yana kaynak denemesinde bulunan WebVR 1.1 API üzerinden gerçekleştirildi. Bu API, Firefox ve Edge'in yanı sıra Safari için bir polyfill tarafından da desteklenir.
Ancak artık devam etmenin zamanı geldi.
Kaynak denemesi 24 Temmuz 2018'de sona erdi ve spesifikasyonun yerini WebXR Device API ile yeni bir kaynak denemesi aldı.
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ı önemli değişiklikler yapılması gerektiği ortaya çıktı. Edindiğimiz derslerin tam listesi burada açıklanamayacak kadar uzundur ancak API'nin ana JavaScript iş parçacığına açıkça bağlı olması, geliştiricilerin açıkça yanlış yapılandırmalar oluşturması için çok fazla fırsat sunması ve sihirli pencere gibi yaygın kullanımların kasıtlı bir özellikten ziyade yan etki olması gibi sorunları içerir. (Sihirli pencere, uygulamanın cihazın yön sensörüne göre tek bir görünüm oluşturduğu, sürükleyici içerikleri kulaklık kullanmadan görüntüleme tekniğidir.)
Yeni tasarım, daha basit uygulamalar ve önemli performans iyileştirmeleri sağlar. Aynı zamanda AR ve diğer kullanım alanları ortaya çıkıyordu. Bu nedenle, API'nin gelecekte bu kullanım alanlarını desteklemek için genişletilebilir olması önemli hale geldi.
WebXR Device API, bu genişletilmiş kullanım alanları dikkate alınarak tasarlanmış ve adlandırılmıştır ve daha iyi bir yol sunar. WebVR'yi uygulayanlar, WebXR Device API'ye geçiş yapmayı taahhüt etti.
WebXR Device API nedir?
WebXR Device API, önceki WebVR spesifikasyonu gibi Google, Microsoft, Mozilla ve diğer şirketlerin katkıda bulunduğu Immersive Web Community Group'un bir ürünüdür. "XR'deki X", sürükleyici deneyimler yelpazesinde 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ştirildi. Artırılmış gerçeklik, Chrome 69'da kullanıma sunuldu. Bu konu hakkında daha fazla bilgiyi Web için artırılmış gerçeklik başlıklı makalede bulabilirsiniz.
Bu yeni API'nin bu tür bir makalede ele alınabilecek çok daha fazla özelliği var. WebXR örneklerinde nelerin olduğunu anlamaya başlamanız için size yeterli bilgi vermek istiyorum. Daha fazla bilgiyi hem orijinal açıklama hem de Immersive Web'i İlk Kullananlar Kılavuzu'nda bulabilirsiniz. Orijinal deneme ilerledikçe bu listeyi genişleteceğiz. Sorunları açabilir veya pull istekleri gönderebilirsiniz.
Bu makalede, XR oturumunu başlatma, durdurma ve çalıştırma ile girişleri işleme hakkında bazı temel bilgilerden bahsedeceğim.
Ekrana artırılmış gerçeklik (AR)/sanal gerçeklik (VR) içeriği çizme konusundan bahsedeceğim. WebXR Device API, görüntü oluşturma özellikleri sunmaz. Bu size bağlıdır. Çizim, WebGL API'leri kullanılarak yapılır. Gerçekten iddialıysanız bunu yapabilirsiniz. Yine de, bir çerçeve kullanmanızı öneririz. Tam sayfa web örnekleri, yalnızca demolar için oluşturulan Cottontail adlı bir web sitesini kullanır. Three.js, Mayıs ayından beri WebXR'yi destekliyor. A-Frame hakkında hiçbir şey duymadım.
Uygulamayı 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 kulaklığa takmasını istiyorsanız bu, sürükleyici oturum olarak adlandırılır ve kullanıcının giriş için bir hareket yapması gerekir.
- Saniyede 60 resim karesi sağlayan bir oluşturma döngüsü çalıştırmak için oturumu kullanın. Her karede ekrana uygun içerikler çizin.
- Kullanıcı çıkmaya karar verene kadar oluşturma döngüsünü çalıştırın.
- XR oturumunu sonlandırın.
Bu konuyu biraz daha ayrıntılı bir şekilde inceleyip bazı kodlar ekleyelim. Az sonra size göstereceğim uygulama için uygulama çalıştıramazsınız. Ancak bu, yalnızca bir fikir vermek içindir.
XR cihaz isteğinde bulunma
Burada standart özellik algılama kodunu tanıyabilirsiniz. Bunu checkForXR() gibi bir işleve sarmalayabilirsiniz.
Tam sayfa oturum kullanmıyorsanız işlevin reklamını yapmayı ve kullanıcı hareketi almayı atlayabilir, doğrudan oturum isteğinde bulunmaya geçebilirsiniz. Tam katılımlı oturum, kulaklık gerektiren oturumdur. Yoğun olmayan bir oturumda yalnızca içerik cihaz ekranında gösterilir. Sanal gerçeklik veya artırılmış gerçeklik denildiğinde çoğu kişi ilk olarak sanal gerçekliği düşünür. İ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 iste
Cihazımız ve kullanıcı hareketimiz hazır olduğuna göre oturum açmanın zamanı geldi. Tarayıcı, oturum oluşturmak için çizim yapacağı bir kanvasa ihtiyaç duyar.
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 kodunu biraz çözmek için bu adımın kodunu girmeniz gerekir. Bu konuyu açıklamak için size bir sürü kelime atacağım. Son koda göz atmak istiyorsanız ileriye atlayarak hızlıca göz atın ve ardından açıklamanın tamamı için geri dönün. Tahmin edemeyeceğiniz çok şey vardır.
Oluşturma döngüsü için temel süreç şu şekildedir:
- Animasyon çerçevesi isteyin.
- Cihazın konumuyla ilgili sorgu.
- Cihazın konumuna göre içeriği cihazın konumuna çizin.
- Giriş cihazları için gereken işlemleri yapın.
- Kullanıcı çıkmaya karar verene kadar saniyede 60 kez tekrarlayın.
Sunum karesi isteme
"Çerçeve" kelimesi, Web XR bağlamında birkaç anlama sahiptir. Bunlardan ilki, koordinat sisteminin orijininin nereden hesaplandığını ve cihaz hareket ettiğinde bu orijine ne olduğunu tanımlayan referans çerçevesidir. (Kullanıcı hareket ettiğinde görünüm aynı kalır mı yoksa gerçek hayatta olduğu gibi kayar mı?)
İkinci kare türü, XRFrame nesnesi tarafından temsil edilen sunu karesidir. Bu nesne, cihazda AR/VR sahnesinin tek bir karesini oluşturmak için gereken bilgileri içerir. requestAnimationFrame() çağrılarak bir sunu çerçevesi alındığından bu durum biraz kafa karıştırıcıdır.
Bu sayede window.requestAnimationFrame() ile uyumlu olur.
Size daha fazla bilgi vermeden önce bazı kodlar paylaşacağım. 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 ikili kullanımına
dikkat edin. requestAnimationFrame() için yordamlı ç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, görüntü cihazının nereye baktığını
bilmeniz ve ekrana erişmeniz gerekir. Genel olarak, bir nesnenin AR/VR'deki konumuna ve yönüne poz denir. Hem izleyiciler hem de giriş cihazları bir duruşa sahiptir. (Giriş cihazlarını daha sonra ele alacağız.) Hem izleyici hem de giriş cihazı pozları, sütun büyük düzeninde bir Float32Array içinde depolanan 4x4 matris olarak tanımlanır. Mevcut animasyon karesi nesnesinde XRFrame.getDevicePose() çağrısı yaparak izleyicinin duruşunu alırsınız.
Her zaman, bir poz alıp almadığınızı kontrol edin. Bir sorun oluştuysa ekrana çizim yapmak istemezsiniz.
let pose = xrFrame.getDevicePose(xrFrameOfRef);
if (pose) {
// Draw something to the screen.
}
Görüntüleme sayısı
Pozu kontrol ettikten sonra bir şeyler çizme zamanı gelmiştir. Çizdiğiniz nesneye görünüm (XRView) denir. Bu noktada oturum türü önemli hale gelir. Görüntüleme sayısı, XRFrame nesnesinden dizi olarak alınır. Yoğun olmayan bir oturumdaysanız
dizide tek bir görünüm bulunur. Tam sayfa oturumundaysanız dizinde her göz için bir tane olmak üzere iki tane vardır.
for (let view of xrFrame.views) {
// Draw something to the screen.
}
Bu, WebXR ile diğer sürükleyici sistemler arasındaki önemli bir farktır. Tek bir görünümde iterasyon yapmanın bir anlamı yokmuş gibi görünse de bu işlem, çeşitli cihazlar için tek bir oluşturma yoluna sahip olmanızı sağlar.
Oluşturma döngüsünün tamamı
Tüm bunları bir araya getirirsem aşağıdaki kodu elde ederim. Giriş cihazları için bir yer tutucu bıraktım. Bu konuyu daha sonraki bir bölümde ele alacağım.
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ırma
XR oturumu, XRSession.end() çağrısı aracılığıyla kendi kodunuz tarafından sonlandırılmak da 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 uygulama tarafından kontrol edilmesi olabilir. Bu nedenle, iyi çalışan bir uygulama son etkinliği izlemelidir ve etkinlik gerçekleştiğinde oturumu ve oluşturucu nesnelerini siler. Sonlandırılan XR oturumları 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?
Uygulama ömrü gibi, AR veya VR'de nesnelerle nasıl etkileşime geçeceğinize dair size kısa bir bakış sunacağım.
WebXR Device API, kullanıcı girişi için "işaretle ve tıkla" yaklaşımını benimser. Bu yaklaşımda her giriş kaynağının, giriş cihazının nereye işaret ettiğini gösteren tanımlanmış bir işaretçi ışını ve bir öğenin ne zaman seçildiğini gösteren etkinlikleri vardır.
Uygulamanız, işaretçi ışını çizer ve işaretçi ışınının nereye baktığını gösterir. Kullanıcı giriş cihazını tıkladığında özellikle select, selectStart ve selectEnd etkinlikleri tetiklenir. 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ı, kontrol cihazı ile işaret ettikleri nesne arasındaki soluk bir çizgidir. Ancak uygulamanızın bunu çizmesi gerekir. Yani giriş cihazının pozunu almak ve konumundan AR/VR alanındaki bir nesneye doğru bir çizgi çizmek gerekir. Bu süreç yaklaşık olarak şu şekilde işler:
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 Topluluğu Grubu'ndaki Giriş İzleme örneğinin basitleştirilmiş bir sürümüdür. Çerçeve oluşturmada olduğu gibi, işaretçi ışınını ve cihazı çizmek 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
AR/VR'de nesneleri işaretlemek pek işe yaramaz. Kullanıcıların faydalı bir şey yapabilmesi için seçim yapabilmesi gerekir. WebXR Device API, kullanıcı etkileşimlerine yanıt vermek için üç etkinlik sağlar: select, selectStart ve selectEnd. Beklemediğim bir tuhaflığı var: Yalnızca bir giriş cihazının tıklandığını söyler. Bu metrik, ortamda hangi öğenin tıklandığını size söylemez. Etkinlik işleyicileri XRSession nesnesine eklenir ve kullanılabilir hale gelir gelmez 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);
});
Daha fazla bağlam bilgisi için bu kod bir Giriş Seçimi örneğine dayanır.
Neyin tıklandığını öğrenmek için bir poz verin. (Şaşırdınız mı? Bence öyle değil.) Bu konudaki ayrıntılar, uygulamanıza veya kullandığınız çerçeveye özeldir ve bu nedenle bu makalenin kapsamı dışındadır. Cottontail'ın yaklaşımı Giriş Seçimi örneğinde gösterilmektedir.
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 bakma
Daha önce de belirttiğim gibi, artırılmış gerçekliğin Chrome 69'da (Canary'de Haziran 2018'de) kullanıma sunulması bekleniyor. Yine de şu ana kadar öğrendiklerimizi denemenizi öneririm. Bu özelliği iyileştirmek için geri bildirimlerinize ihtiyacımız var. WebXR Hit Test için ChromeStatus.com'u izleyerek ilerleme durumunu takip edin. Ayrıca, poz izlemeyi iyileştirecek WebXR Anchor'u da izleyebilirsiniz.