Artırılmış gerçeklik: Bunu zaten biliyor olabilirsiniz

WebXR Device API'yi daha önce kullandıysanız işin büyük bir kısmını tamamlamışsınız demektir.

Joe Medley
Joe Medley

WebXR Device API, geçen sonbaharda Chrome 79 ile kullanıma sunulmuştu. O zaman da belirtildiği gibi, Chrome'un API'yi uygulama süreci devam etmektedir. Chrome, çalışmaların bir kısmının tamamlandığını duyurmaktan memnuniyet duyuyor. Chrome 81'de iki yeni özellik kullanıma sunuldu:

Bu makalede artırılmış gerçeklik ele alınmaktadır. WebXR Device API'yi daha önce kullandıysanız öğrenmeniz gereken çok az yeni bilgi olduğunu bilmek sizi mutlu edecektir. WebXR oturumuna girmek büyük ölçüde aynıdır. Çerçeve döngüsü çalıştırmak büyük ölçüde aynıdır. Farklılıklar, içeriğin artırılmış gerçeklik için uygun şekilde gösterilmesine olanak tanıyan yapılandırmalardadır. WebXR'nin temel kavramlarına aşina değilseniz WebXR Device API ile ilgili önceki gönderilerimi okumanız veya en azından bu gönderilerde ele alınan konulara aşina olmanız gerekir. Oturum isteğinde bulunmayı ve oturuma girmeyi, ayrıca kare döngüsünü nasıl çalıştıracağınızı bilmeniz gerekir.

İsabet testi hakkında bilgi edinmek için Sanal nesneleri gerçek dünya görünümlerinde konumlandırma başlıklı makaleyi inceleyin. Bu makaledeki kod, Immersive Web Çalışma Grubu'nun WebXR Device API örneklerinden Immersive AR oturumu örneğini (demo kaynağı) temel alır.

Kodu incelemeden önce Immersive AR Session örneğini en az bir kez kullanmanız gerekir. Chrome 81 veya sonraki bir sürümün yüklü olduğu modern bir Android telefona ihtiyacınız vardır.

Ne için faydalıdır?

Artırılmış gerçeklik, tarayıcıdan ayrılmadan AR kullanım alanlarını uygulamalarına olanak tanıyarak birçok mevcut veya yeni web sayfasına değerli bir katkı sunacaktır. Örneğin, kullanıcıların eğitim sitelerinde bilgi edinmesine yardımcı olabilir ve potansiyel alıcıların alışveriş yaparken evlerinde nesneleri görselleştirmesine olanak tanıyabilir.

İkinci kullanım alanını düşünün. Gerçek bir sahneye sanal bir nesnenin gerçek boyutlu bir temsilini yerleştirmeyi simüle ettiğinizi düşünün. Yerleştirilen resim, seçilen yüzeyde kalır, gerçek öğe o yüzeyde olsaydı sahip olacağı boyutta görünür ve kullanıcının etrafında dolaşmasına, ona yaklaşmasına veya ondan uzaklaşmasına olanak tanır. Bu sayede izleyiciler, nesne hakkında iki boyutlu bir resimle mümkün olandan daha derin bir anlayışa sahip olur.

Konuyu biraz ileriye götürüyoruz. Açıkladığım işlemi gerçekten yapmak için AR işlevine ve yüzeyleri algılama yöntemlerine ihtiyacınız vardır. Bu makalede ilk seçenek ele alınmaktadır. WebXR Hit Test API ile ilgili makalede (yukarıda bağlantısı verilmiştir) ikincisi ele alınmıştır.

Oturum isteğinde bulunma

Oturum isteğinde bulunma işlemi, daha önce gördüğünüz işlemlere çok benzer. Öncelikle xr.isSessionSupported() işlevini çağırarak istediğiniz oturum türünün mevcut cihazda kullanılıp kullanılamadığını öğrenin. Önceki gibi 'immersive-vr' yerine 'immersive-ar' isteyin.

if (navigator.xr) {
  const supported = await navigator.xr.isSessionSupported('immersive-ar');
  if (supported) {
    xrButton.addEventListener('click', onButtonClicked);
    xrButton.textContent = 'Enter AR';
    xrButton.enabled = supported; // supported is Boolean
  }
}

Bu işlem, daha önce olduğu gibi bir "AR'ye gir" düğmesini etkinleştirir. Kullanıcı tıkladığında xr.requestSession() işlevini çağırın ve 'immersive-ar' parametresini de iletin.

let xrSession = null;
function onButtonClicked() {
  if (!xrSession) {
    navigator.xr.requestSession('immersive-ar')
    .then((session) => {
      xrSession = session;
      xrSession.isImmersive = true;
      xrButton.textContent = 'Exit AR';
      onSessionStarted(xrSession);
    });
  } else {
    xrSession.end();
  }
}

Kolaylık tesisi

Son kod örneğinde iki satırı vurguladığımı fark etmişsinizdir. XRSession nesnesinin isImmersive adlı bir özelliği var. Bu, spesifikasyonun bir parçası olmayan, kendim oluşturduğum bir kolaylık özelliğidir. İzleyiciye ne göstereceğime karar vermek için daha sonra kullanacağım. Bu mülk neden API'nin bir parçası değil? Uygulamanızın bu özelliği farklı şekilde izlemesi gerekebileceğinden, spesifikasyon yazarları API'yi temiz tutmaya karar verdi.

Oturum açma

Önceki makalemde onSessionStarted()'ün nasıl göründüğünü hatırlayın:

function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  xrSession.requestReferenceSpace('local-floor')
  .then((refSpace) => {
    xrRefSpace = refSpace;
    xrSession.requestAnimationFrame(onXRFrame);
  });
}

Artırılmış gerçekliği oluşturmak için birkaç şey eklemem gerekiyor. Arka planı kapatın Öncelikle arka plana ihtiyacım olup olmadığını belirlerim. Bu, kolaylık mülkümümü kullanacağım ilk yer.

function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  if (session.isImmersive) {
    removeBackground();
  }

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
  xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
    xrSession.requestAnimationFrame(onXRFrame);
  });

}

Referans alanlar

Önceki makalelerimde referans alanlarına değinmiştim. Açıkladığım örnekte bunlardan iki tanesi kullanılıyor. Bu eksikliği düzeltme zamanı geldi.

Referans alanı, sanal dünya ile kullanıcının fiziksel ortamı arasındaki ilişkiyi tanımlar. Bunu şu şekilde yapar:

  • Sanal dünyadaki konumları ifade etmek için kullanılan koordinat sisteminin orijinini belirtme.
  • Kullanıcının bu koordinat sisteminde hareket etmesinin beklenip beklenmediğini belirtir.
  • Söz konusu koordinat sisteminin önceden belirlenmiş sınırları olup olmadığı. (Burada gösterilen örneklerde önceden belirlenmiş sınırları olan koordinat sistemleri kullanılmamaktadır.)

Tüm referans alanlarında X koordinatı soldan sağa, Y koordinatı yukarıdan aşağıya, Z koordinatı ise ileriden geriye doğru yönleri ifade eder. Pozitif değerler sırasıyla sağ, yukarı ve geriye doğrudur.

XRFrame.getViewerPose() tarafından döndürülen koordinatlar, istenen referans alanı türüne bağlıdır. Bu konuyla ilgili daha fazla bilgiyi kare döngüsüne geldiğimizde vereceğiz. Şu anda, artırılmış gerçeklik için uygun bir referans türü seçmemiz gerekiyor. Burada da kolaylık özelliğimi kullanıyorum.

let refSpaceType
function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  if (session.isImmersive) {
    removeBackground();
  }

  let canvas = document.createElement('canvas');
  gl = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
  xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
    xrSession.requestAnimationFrame(onXRFrame);
  });
}

Immersive AR Session Sample (Immersive AR Oturumu Örneği) sayfasını ziyaret ettiyseniz başlangıçta sahnenin statik olduğunu ve hiç artırılmış gerçeklik içermediğini fark edeceksiniz. Sahnede gezinmek için parmağınızla sürükleyebilir ve kaydırabilirsiniz. "AR'I BAŞLAT"ı tıklarsanız arka plan kaybolur ve cihazı hareket ettirerek sahnede hareket edebilirsiniz. Modlar farklı referans alanı türleri kullanır. Yukarıdaki vurgulanan metin, bunun nasıl seçildiğini gösterir. Aşağıdaki referans türlerini kullanır:

local: Başlangıç noktası, oturum oluşturulduğu sırada izleyicinin konumundadır. Bu, deneyimin mutlaka iyi tanımlanmış bir tabana sahip olmadığı ve kaynağın tam konumunun platforma göre değişebileceği anlamına gelir. Alan için önceden belirlenmiş sınırlar olmasa da içeriğin, döndürmekten başka bir hareket olmadan görüntülenebilmesi beklenir. Kendi AR örneğimizde görebileceğiniz gibi, alanda biraz hareket olabilir.

viewer: Sayfada satır içi olarak sunulan içerikler için en sık kullanılan bu boşluk, görüntüleme cihazını takip eder. getViewerPose işlevine iletildiğinde izleme sağlamaz ve bu nedenle, uygulama XRReferenceSpace.getOffsetReferenceSpace() ile değiştirmediği sürece her zaman orijinde bir pozu raporlar. Sana Özel örneğinde, kameranın dokunmatik kaydırma özelliğini etkinleştirmek için bu yöntem kullanılır.

Kare döngüsü çalıştırma

Kavramsal olarak, önceki makalelerimde açıklanan VR oturumunda yaptığımdan farklı bir şey yapmadım. Referans alan türünü XRFrame.getViewerPose()'e iletin. Döndürülen XRViewerPose, mevcut referans alanı türü içindir. Varsayılan olarak viewer kullanılması, bir sayfanın AR veya VR için kullanıcı izni istenmeden önce içerik önizlemeleri göstermesine olanak tanır. Bu, önemli bir noktayı göstermektedir: Satır içi içerik, tam sayfa içerikle aynı çerçeve döngüsünü kullanır ve bu sayede, bakımı gereken kod miktarını azaltır.

function onXRFrame(hrTime, xrFrame) {
  let xrSession = xrFrame.session;
  xrSession.requestAnimationFrame(onXRFrame);
  let xrViewerPose = xrFrame.getViewerPose(refSpaceType);
  if (xrViewerPose) {
    // Render based on the pose.
  }
}

Sonuç

Bu makale serisi, yalnızca web'de etkileyici içerik uygulamayla ilgili temel bilgileri kapsar. Immersive Web Çalışma Grubu'nun WebXR Device API örnekleri çok daha fazla özellik ve kullanım alanı sunar. Ayrıca, yüzeyleri algılamak ve sanal öğeleri gerçek kamera görüntüsüne yerleştirmek için kullanılan bir API'yi açıklayan bir hit testi makalesi de yayınladık. Bu makalelere göz atın ve önümüzdeki yıl web.dev blogunda yayınlanacak daha fazla makale için takipte kalın.

Fotoğraf: David Grandmougin, Unsplash