Sanal gerçeklik web'e geliyor

Sanal gerçeklik, artırılmış gerçeklik ve bu ikisi arasında kalan her şey gibi çeşitli sürükleyici deneyimlere hazırlanmak için bilmeniz gereken bazı temel bilgiler.

Joe Medley

Chrome 79'da web'e etkileyici deneyimler geldi. WebXR Device API, sanal gerçekliği kullanıma sunarken artırılmış gerçeklik desteği Chrome 81'de kullanıma sunulacak. GamePad API'sinde yapılan bir güncelleme ise kontrollerin gelişmiş kullanımını VR'a genişletiyor. Firefox Reality, Oculus Browser, Edge ve Magic Leap'in Helio tarayıcısı gibi 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ının nasıl ayarlanacağı ve XR oturumuna nasıl girilip çıkılacağı açıklanmaktadır. İlerleyen makalelerde, WebXR deneyiminin temel unsuru olan kare döngüsü, artırılmış gerçekliğin ayrıntıları ve bir AR oturumunda yüzeyleri algılamanın bir yolu 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 geçerlidir.

İçine girilebilen web nedir?

Sürükleyici deneyimleri tanımlamak için iki terim (artırılmış gerçeklik ve sanal gerçeklik) kullanıyor olsak da birçok kişi bu deneyimleri, tamamen gerçeklikten tamamen sanal olana kadar uzanan bir spektrumda, arada farklı düzeylerde sürükleyicilikle değerlendirir. XR'deki "X", bu düşünceyi yansıtmak için tasarlanmıştır ve sürükleyici deneyimler spektrumundaki her şeyi temsil eden bir tür cebirsel değişkendir.

Görsel deneyimlerin, tamamen gerçeklikten tamamen sürükleyiciye kadar olan spektrumunu gösteren bir grafik. — Etkileyici deneyimlerin yelpazesi

Immersive deneyimlere örnek olarak aşağıdakiler verilebilir:

Oyunlar
360° videolar
İçine çeken bir ortamda sunulan geleneksel 2 boyutlu (veya 3 boyutlu) videolar
Ev satın alma
Satın almadan önce ürünleri evinizde görüntüleme
Etkileyici sanat
Henüz kimsenin düşünmediği, ilgi çekici bir şey

Kavramlar ve kullanım

WebXR Device API'yi kullanmayla ilgili birkaç temel bilgiyi açıklayacağım. Verdiğim bilgilerden daha fazla derinliğe ihtiyacınız varsa Immersive Web Working Group'un WebXR örneklerine veya MDN'nin büyüyen referans malzemelerine göz atın. WebXR Device API'nin önceki sürümlerini biliyorsanız bu materyalin tamamına göz atmanız gerekir. Değişiklikler yapıldı.

Bu makaledeki kod, Immersive Web Working Group'un temel örneklerine (demo, kaynak) dayanmaktadır ancak netlik ve basitlik için düzenlenmiştir.

WebXR spesifikasyonunu oluşturma sürecinde, kullanıcıları korumak için güvenlik ve gizlilik önlemleri de geliştirildi. Bu nedenle, uygulamalar belirli şartlara uymalıdır. Web sayfası veya uygulamanın, izleyiciden hassas bir istekte bulunabilmesi için etkin ve odaklanmış olması gerekir. Web sayfaları veya uygulamalar HTTPS üzerinden sunulmalıdır. API'nin kendisi, çalışmak için ihtiyaç duyduğu sensörlerden ve kameralardan elde edilen bilgileri koruyacak şekilde tasarlanmıştır.

Oturum isteğinde bulunma

XR oturumuna girmek için kullanıcı hareketi gerekir. Bunu elde etmek için XRSystem (navigator.xr aracılığıyla) test etmek üzere özellik algılamayı kullanın ve XRSystem.isSessionSupported()'ye çağrı yapın. 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 içerikleri için tercih edilir. Immersive AR Session örneğinde bu durum gösterilmektedir. Bu konuyu sonraki bir makalede açıklayacağım.

Sanal gerçeklik oturumlarının desteklendiğini öğrendikten sonra, kullanıcı hareketi elde etmemi sağlayan bir düğme etkinleştiriyorum.

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 tıklama etkinliğini bekliyor ve ardından oturum isteğinde bulunuyorum.

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 öğesinden xr öğesine ve XRSession örneğine taşınır. API'nin ilk sürümlerinde, bir komut dosyasının oturum isteğinde bulunmadan önce cihaz isteğinde bulunması gerekiyordu. Artık cihaz dolaylı olarak edinilir.

Oturum girme

Oturum aldıktan sonra oturumu başlatıp 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şleyicisine ihtiyacı vardır.

Ayrıca sahnemi çizebileceğim bir <canvas> öğesine de ihtiyacım var. XR ile uyumlu bir WebGLRenderingContext veya WebGL2RenderingContext olmalıdır. Tüm çizimler bu kitaplıklar veya Three.js gibi WebGL tabanlı bir çerçeve kullanılarak yapılır.

Çizim yapabileceğim bir yerim olduğuna göre, şimdi de çizim yapabileceğim bir içerik kaynağına ihtiyacım var. Bunun için XRWebGLLayer örneği oluşturuyorum. XRSession.updateRenderState() işlevini çağırarak tuvalle ilişkilendiriyorum.

Bir oturumdayken sanal gerçeklikte nerede olduğumu belirlemem gerekiyor. Referans alanına ihtiyacım var. 'local-floor' referans alanı, başlangıç noktasının izleyicinin yakınında bulunduğu, y ekseninin zemin seviyesinde 0 olduğu ve hareket etmesinin beklenmediği bir alandır. Başka referans uzayları da vardır ancak bu konu burada ele alabileceğimizden daha karmaşıktır. Çizim yaparken ekranda kullanacağım için 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şlandığı noktadır. Sunum, kare 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 sıralanması hareket yanılsaması oluşturur. VR uygulamalarında saniyedeki kare sayısı 60 ile 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ünün temel süreci şöyledir:

XRSession.requestAnimationFrame() Hizmetleri İçin Arayın. Buna karşılık kullanıcı aracısı, sizin tanımladığınız XRFrameRequestCallback işlevini çağırır.
Geri çağırma işlevinizin içinde:
1. XRSession.requestAnimationFrame() numaralı telefonu tekrar arayın.
2. İzleyicinin pozunu alın.
3. WebGLFramebuffer öğesini XRWebGLLayer öğesinden WebGLRenderingContext öğesine aktarın.
4. Her XRView nesnesini yineleyin, XRWebGLLayer öğesinden XRViewport özelliğini alın ve WebGLRenderingContext öğesine iletin.
5. Çerçeve arabelleğine bir şeyler çizin.

Bu makalenin geri kalanında 1. adım ve 2. adımın bir kısmı (XRFrameRequestCallback'yı ayarlama ve çağırma) açıklanmaktadır. 2. adımın kalan öğeleri II. bölümde ele alınmaktadır.

XRFrameRequestCallback

XRFrameRequestCallback sizin tarafınızdan tanımlanır. Bu yöntem iki parametre alır: DOMHighResTimeStamp ve XRFrame örneği. XRFrame nesnesi, tek bir karenin ekranda oluşturulması için gereken bilgileri sağlar. DOMHighResTimeStamp bağımsız değişkeni gelecekte kullanılmak üzere ayrılmıştır.

Başka bir işlem yapmadan önce bir sonraki animasyon karesini isteyeceğim. Daha önce belirtildiği gibi, karelerin zamanlaması, temel donanıma göre kullanıcı aracısı tarafından belirlenir. Önce 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, II. Bölüm'de ele alınacak bir konudur. Oraya gitmeden önce bir oturumu nasıl sonlandıracağınızı göstereyim.

Oturumu sonlandırma

Bir etkileyici oturum, XRSession.end() çağrısı aracılığıyla kendi kodunuzla sonlandırma da dahil olmak üzere çeşitli nedenlerle sona erebilir. 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 davranan bir uygulama end etkinliğini izlemelidir. Bu durum oluştuğunda oturumu ve ilgili oluşturma nesnelerini silin. Sona erdirilen bir etkileyici oturum devam ettirilemez. Uygulamamın yeni bir oturum başlatması gerekiyor.

Oturuma girme bölümünde kurulum sırasında bir onend etkinlik işleyicisi eklediğimi hatırlıyorum.

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 gereken her şeyi açıklamadım. Umarım, kodu kendiniz anlamaya başlamanız ve denemeler yapmanız için yeterli bilgiyi vermişimdir. Bir sonraki makalede, içeriğin ekrana çizildiği yer olan çerçeve döngüsünü açıklayacağım.

Sanal gerçeklik web'e geliyor Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.