Sanal gerçeklik web'e geliyor

Sanal gerçeklik, artırılmış gerçeklik ve diğer özellikler dahil olmak üzere birbirinden farklı deneyimlere hazır olmanızı sağlayacak bazı temel bilgiler var.

Joe Medley
Joe Medley
GitHub

Etkileyici deneyimler Chrome 79'da web'de kullanıma sunuldu. WebXR Device API, sanal gerçekliği beraberinde getirirken Chrome 81'de artırılmış gerçeklik desteği 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 bir AR oturumunda 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.

Immersive 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 gerçeklikten tamamen sürükleyici hale gelen görsel deneyimlerin çeşitliliğini gösteren grafik.
Etkileyici deneyimler yelpazesi

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 bazı temel bilgileri açıklayacağım. Buradaki bilgilerden 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 daha net ve basit olması 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üyle bir sanal gerçeklik oturumu istediğimi belirtmiştim. 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. Sonraki bir makalede bunu 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ı çıkış yaptığında uygulamanın veya web sayfasının sıfırlanabilmesi için oturumda bir onend etkinlik işleyici olmalıdır.

Sahnemi çizmek için <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 yapacak bir yerim olduğuna göre, bu alana çizim yapmak için bir içerik kaynağına ihtiyacım var. Bunun için XRWebGLLayer örneği oluşturuyorum. XRSession.updateRenderState() işlevini çağırarak bunu kanvasla ilişkilendiriyorum.

Bir oturuma girdikten sonra, sanal gerçeklikte her şeyin nerede olduğunu belirlemek için bir yönteme 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. Referans alanını bir değişkene kaydediyorum çünkü ekranda çizim yaparken bu değişkene ihtiyacım olacak.

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() adlı işletmeyi arı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 gösterilmesi 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ü için temel süreç şu şekildedir:

  1. XRSession.requestAnimationFrame() Hizmetleri İçin Arayın. Kullanıcı aracısı, yanıt olarak sizin tanımladığınız XRFrameRequestCallback öğesini çağırır.
  2. Geri çağırma işlevinizin içinde:
    1. XRSession.requestAnimationFrame() numaralı telefonu tekrar arayın.
    2. İzleyicinin pozunu alın.
    3. WebGLFramebuffer öğesini XRWebGLLayer'dan WebGLRenderingContext'ye iletin ("bağlayın").
    4. Her XRView nesnesini iterleyerek XRViewport değerini XRWebGLLayer'den alıp WebGLRenderingContext'a aktarın.
    5. Görüntü çerçevesine bir şey çizin.

Bu makalenin geri kalanında, XRFrameRequestCallback cihazının kurulumu ve çağrılması olan 1. adım ve 2. adımın bir bölümü açıklanmaktadır. 2. adımın geri kalan öğeleri Bölüm II'de 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 belirtildiği gibi, karelerin zamanlaması temel donanıma göre kullanıcı aracısı tarafından belirlenir. Önce sonraki karenin istenmesi, geri çağırma sırasında bir şey hata verirse çerçeve 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ı oturum girmeden önce uygulamanın durumunu geri yükleyin.

function onSessionEnded(event) {
  xrSession = null;
  xrButton.textContent = 'Enter VR';
}

Sonuç

Web XR veya AR uygulaması yazmak için ihtiyacınız olan 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