Sanal gerçeklik, artırılmış gerçeklik ve bu ikisinin arasındaki her şey gibi çeşitli sürükleyici deneyimlere hazırlanmanıza yardımcı olacak temel bilgiler.
Chrome 79 ile birlikte web'de sürükleyici deneyimler kullanıma sunuldu. WebXR Device API, sanal gerçekliği kullanıma sunarken Chrome 81'de artırılmış gerçeklik desteği kullanıma sunuluyor. GamePad API'deki bir güncelleme, kontrollerin gelişmiş kullanımını VR'ye genişletiyor. Firefox Reality, Oculus Browser, Edge ve Magic Leap'in Helio tarayıcısı da dahil olmak üzere diğer tarayıcılar da yakında bu özellikleri destekleyecek.
Bu makale, sürükleyici web ile ilgili bir serinin başlangıcıdır. Bu bölümde, temel bir WebXR uygulaması oluşturmanın yanı sıra XR oturumuna girme ve oturumdan çıkma konuları ele alınmaktadır. Sonraki makalelerde çerçeve döngüsü (WebXR deneyiminin temel aracı), artırılmış gerçekliğin özellikleri ve AR oturumundaki yüzeyleri algılama aracı olan WebXR Hit Test API ele alınacaktır. Aksi belirtilmedikçe, bu ve sonraki makalelerde ele aldığım her şey hem AR hem de VR için eşit şekilde geçerlidir.
Tam sayfa web nedir?
Tam gerçeklikten tamamen sanala kadar bir yelpazede yer alan ve aralarında farklı düzeylerde sürükleyicilik bulunan artırılmış gerçeklik ve sanal gerçeklik terimlerini, sürükleyici deneyimleri tanımlamak için kullanıyor olsak da birçok kişi bu terimleri farklı şekilde değerlendiriyor. XR'deki "X", etkileyici deneyimler yelpazesinde her şeyi temsil eden bir tür cebirsel değişken olarak bu düşünceyi yansıtmayı amaçlar.
Tam sayfa deneyimlerine örnek olarak aşağıdakiler verilebilir:
- Oyunlar
- 360° videolar
- Immersive ortamlarda sunulan geleneksel 2D (veya 3D) videolar
- Ev satın alma
- Ürünleri satın almadan önce evinizde görüntüleme
- Etkileyici sanat
- Henüz kimsenin aklına gelmemiş bir şey
Kavramlar ve kullanım
WebXR Device API'nin kullanımıyla ilgili temel bilgilerden birkaçını açıklayacağım. Burada verdiğimizden daha ayrıntılı bilgi edinmek istiyorsanız Immersive Web Çalışma Grubu'nun WebXR örneklerine veya MDN'nin giderek artan referans materyallerine göz atın. WebXR Device API'nin eski sürümlerini biliyorsanız bu materyallerin tümünü gözden geçirmeniz gerekir. Değişiklikler oldu.
Bu makaledeki kod, Immersive Web Çalışma Grubu'nun temel örnek kodunu (demo, kaynak) temel alır ancak netlik ve basitlik için düzenlenmiştir.
WebXR spesifikasyonunun oluşturulması kapsamında, kullanıcıları korumak için güvenlik ve gizlilik önlemleri de geliştirildi. Bu nedenle, uygulamalar belirli şartlara uymalıdır. Bir web sayfası veya uygulama, izleyiciden hassas bir şey isteyebilmesi için etkin ve odaklanmış olmalıdır. Web sayfaları veya uygulamalar HTTPS üzerinden sunulmalıdır. API'nin kendisi, çalışması için ihtiyaç duyduğu sensörlerden ve kameralardan elde edilen bilgileri korumak üzere tasarlanmıştır.
Oturum isteğinde bulunma
XR oturumuna girmek için kullanıcı hareketi gerekir. Bunu yapmak için XRSystem
'ü (navigator.xr
aracılığıyla) test etmek üzere özellik algılama özelliğini kullanın ve XRSystem.isSessionSupported()
'ye telefon edin. Chrome 79 ve 80 sürümlerinde XRSystem
nesnesinin XR
olarak adlandırıldığını unutmayın.
Aşağıdaki örnekte, 'immersive-vr'
oturum türünde bir sanal gerçeklik oturumu istediğimi belirtiyorum. Diğer oturum türleri 'immersive-ar'
ve 'inline'
'dır. Satır içi oturum, içeriği HTML içinde sunmak için kullanılır ve genellikle tanıtım amaçlı içerikler için kullanılır. Immersive AR Session (Immersive AR Oturumu) örneği bunu göstermektedir. Bu konuyu daha ayrıntılı bir şekilde bir sonraki makalede açıklayacağım.
Sanal gerçeklik oturumlarının desteklendiğini öğrendikten sonra, kullanıcı hareketi almamı sağlayan bir düğmeyi etkinleştiririm.
if (navigator.xr) {
const supported = await navigator.xr.isSessionSupported('immersive-vr');
if (supported) {
xrButton.addEventListener('click', onButtonClicked);
xrButton.textContent = 'Enter VR';
xrButton.enabled = supported; // supported is Boolean
}
}
Düğmeyi etkinleştirdikten sonra bir tıklama etkinliği bekleyip oturum isteğinde bulunurum.
let xrSession = null;
function onButtonClicked() {
if (!xrSession) {
navigator.xr.requestSession('immersive-vr')
.then((session) => {
xrSession = session;
xrButton.textContent = 'Exit XR';
onSessionStarted(xrSession);
});
} else {
xrSession.end();
}
}
Bu koddaki nesne hiyerarşisine dikkat edin. navigator
örneğinden xr
örneğine ve ardından XRSession
örneğine taşınır. API'nin eski sürümlerinde, komut dosyasının oturum istemeden önce cihaz istemesi gerekiyordu. Artık cihaz, dolaylı olarak edinilir.
Oturum açma
Oturum aldıktan sonra oturumu başlatmam ve girmem gerekiyor. Ancak önce birkaç ayar yapmam gerekiyor. Kullanıcı çıktığında uygulamanın veya web sayfasının sıfırlanabilmesi için oturumun bir onend
etkinlik işleyiciye ihtiyacı vardır.
Sahnemde çizim yapmak için bir <canvas>
öğesine de ihtiyacım var. XR uyumlu bir WebGLRenderingContext veya WebGL2RenderingContext olmalıdır.
Tüm çizimler bunlar veya Three.js gibi WebGL tabanlı bir çerçeve kullanılarak yapılır.
Artık çizim yapabileceğim bir yerim var. Şimdi de çizim için bir içerik kaynağına ihtiyacım var. Bunun için XRWebGLLayer
örneği oluşturuyorum. XRSession.updateRenderState()
işlevini çağırarak onu kanvasla ilişkilendiriyorum.
Oturum açtıktan sonra, sanal gerçeklikte nesnelerin nerede olduğunu belirlemenin bir yoluna ihtiyacım var. Referans alanı gerekir. 'local-floor'
referans alanı, orijinin izleyicinin yakınında bulunduğu, y ekseninin zemin seviyesinde 0 olduğu ve hareket etmesinin beklenmediği bir alandır. Başka referans alanı türleri de vardır ancak bu konu burada ele alabileceğimden daha karmaşıktır. Ekranda çizim yaparken referans alanına ihtiyacım olacağından referans alanını bir değişkene kaydediyorum.
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
let canvas = document.createElement('canvas');
webGLRenContext = canvas.getContext('webgl', { xrCompatible: true });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(xrSession, webGLRenContext)
});
xrSession.requestReferenceSpace('local-floor')
.then((refSpace) => {
xrRefSpace = refSpace;
xrSession.requestAnimationFrame(onXRFrame);
});
}
Referans alanı aldıktan sonra XRSession.requestAnimationFrame()
işlevini çağırıyorum.
Bu, sanal içeriğin sunulmaya başladığı ana işaret eder. Bu işlem, çerçeve döngüsünde yapılır.
Kare döngüsü çalıştırma
Çerçeve döngüsü, içeriğin ekrana tekrar tekrar çizildiği, kullanıcı aracısı tarafından kontrol edilen sonsuz bir döngüdür. İçerik, kare adı verilen ayrı bloklar halinde çizilir. Karelerin art arda gelmesi hareket yanılsaması oluşturur. Saniyedeki kare sayısı, VR uygulamaları için 60 ila 144 arasında olabilir. Android için AR, saniyede 30 kare hızında çalışır. Kodunuz belirli bir kare hızını varsaymamalıdır.
Çerçeve döngüsü için temel süreç şu şekildedir:
XRSession.requestAnimationFrame()
Hizmetleri İçin Arayın. Kullanıcı aracısı, yanıt olarak sizin tanımladığınızXRFrameRequestCallback
öğesini çağırır.- Geri çağırma işlevinizin içinde:
XRSession.requestAnimationFrame()
numaralı telefonu tekrar arayın.- İzleyicinin pozunu alın.
WebGLFramebuffer
öğesiniXRWebGLLayer
'danWebGLRenderingContext
'ye iletin ("bağlayın").- Her
XRView
nesnesini iterleyerekXRViewport
değeriniXRWebGLLayer
'den alıpWebGLRenderingContext
'a aktarın. - Görüntü çerçevesine bir şey çizin.
Bu makalenin geri kalanında, 1. adım ve 2. adımın bir kısmı (XRFrameRequestCallback
'yi ayarlama ve çağırma) açıklanmaktadır. 2. adımdaki diğer öğeler II. bölümde ele alınmıştır.
XRFrameRequestCallback
XRFrameRequestCallback
, sizin tarafınızdan tanımlanır. İki parametre alır: bir DOMHighResTimeStamp
ve bir XRFrame
örneği. XRFrame
nesnesi, ekranda tek bir kare oluşturmak için gereken bilgileri sağlar. DOMHighResTimeStamp
bağımsız değişkeni gelecekte kullanılmak üzeredir.
Başka bir işlem yapmadan önce bir sonraki animasyon karesini isteyeceğim. Daha önce de belirtildiği gibi, karelerin zamanlaması kullanıcı aracısı tarafından temel donanıma göre belirlenir. Önce bir sonraki kareyi istemek, geri çağırma sırasında bir hata oluşursa kare döngüsünün devam etmesini sağlar.
function onXRFrame(hrTime, xrFrame) {
let xrSession = xrFrame.session;
xrSession.requestAnimationFrame(onXRFrame);
// Render a frame.
}
Bu noktada izleyici için bir şeyler çizme zamanı gelmiştir. Bu konuyu 2. bölümde ele alacağız. Oraya gitmeden önce size bir oturumu nasıl sonlandıracağınızı göstereyim.
Oturumu sonlandırma
Tam sayfa oturumu, XRSession.end()
çağrısı yoluyla kendi kodunuz tarafından sonlandırılmak da dahil olmak üzere çeşitli nedenlerle sonlandırılabilir. Diğer nedenler arasında kulaklığın bağlantısının kesilmesi veya başka bir uygulamanın kulaklığı kontrol etmesi yer alır. Bu nedenle, iyi çalışan bir uygulama end
etkinliğini izlemelidir. Bu durum oluştuğunda oturumu ve ilgili oluşturma nesnelerini atayın. Sonlandırılmış bir tam sayfa oturumu devam ettirilemez. Uygulamamın, sürükleyici deneyime yeniden girmek için yeni bir oturum başlatması gerekiyor.
Oturum açma bölümünde, kurulum sırasında bir onend
etkinlik işleyici eklediğimi hatırlayın.
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
// More setup…
}
Etkinlik işleyicinin içinde, kullanıcı oturuma girmeden önceki uygulama durumunu geri yükleyin.
function onSessionEnded(event) {
xrSession = null;
xrButton.textContent = 'Enter VR';
}
Sonuç
Web XR veya AR uygulaması yazmak için ihtiyaç duyduğunuz her şeyi açıklamadım. Kodu kendi başınıza anlamaya ve denemeye başlamak için yeterli bilgiyi verdiğimi umuyorum. Bir sonraki makalede, içeriğin ekrana çizildiği kare döngüsünü açıklayacağım.
Unsplash'ta JESHOOTS.COM tarafından çekilen fotoğraf