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

WebXR Device API, geçen sonbaharda Chrome 79’da piyasaya sürüldü. Daha sonra belirtildiği gibi, Chrome’un API’yi uygulaması devam eden bir çalışmadır. Chrome, çalışmaların bir kısmının bittiğini duyurmaktan mutluluk duyar. Chrome 81’de iki yeni özellik geldi:

Bu makale artırılmış gerçekliği kapsar. WebXR Cihaz API’sini zaten kullandıysanız, öğrenecek çok az yeni şey olduğunu bilmek sizi mutlu edecektir. Bir WebXR oturumuna girmek büyük ölçüde aynıdır. Bir çerçeve döngüsünü ç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 izin veren yapılandırmalarda yatmaktadır. WebXR’nin temel kavramlarına aşina değilseniz, WebXR Cihaz API’sindeki önceki yazılarımı okumalı veya en azından burada ele alınan konulara aşina olmalısınız. Bir oturumu nasıl talep edeceğinizi ve gireceğinizi bilmelisiniz ve bir çerçeve döngüsünü nasıl çalıştıracağınızı bilmelisiniz.

İsabet testi hakkında bilgi için, sanal nesneleri gerçek dünya görünümlerinde konumlandırma ek makalesine bakın. Bu makaledeki kod, Sürükleyici AR Oturumu örneğine dayanmaktadır (gösteri kaynak) Sürükleyici Web Çalışma Grubundan WebXR Cihaz API örnekleri.

Koda dalmadan önce şunu kullanmalısınız: Sürükleyici AR Oturumu örneği en azından bir kere. Chrome 81 veya sonraki sürümlere sahip modern bir Android telefona ihtiyacınız olacak.

Ne işe yarar? #

Artırılmış gerçeklik, tarayıcıdan ayrılmadan AR kullanım durumlarını uygulamalarına izin vererek, birçok mevcut veya yeni web sayfasına değerli bir katkı olacaktır. Örneğin, insanların eğitim sitelerinde öğrenmelerine yardımcı olabilir ve potansiyel alıcıların alışveriş yaparken evlerindeki nesneleri görselleştirmelerine olanak sağlayabilir.

İkinci kullanım durumunu ele alalım. Sanal bir nesnenin gerçek boyutlu bir temsilini gerçek bir sahneye yerleştirdiğinizi hayal edin. Görüntü yerleştirildikten sonra seçilen yüzeyde kalır, gerçek öğe o yüzeyde olsaydı olacağı boyutta görünür ve kullanıcının hem onun etrafında hem de ona daha yakın veya daha uzağa hareket etmesine olanak tanır. Bu, izleyicilere nesneyi iki boyutlu bir görüntü ile mümkün olandan daha derin bir şekilde anlamalarını sağlar.

Biraz kendimin önüne geçiyorum. Açıkladığım şeyi gerçekten yapmak için, AR işlevine ve bazı yüzeyleri tespit etme araçlarına ihtiyacınız var. Bu makale ilkini kapsar. WebXR İsabet Testi API’si ile ilgili ekteki makale (yukarıya bağlantılıdır) ikincisini kapsar.

oturum talep etme #

Bir seans talep etmek, daha önce gördüklerinize çok benzer. İlk olarak, istediğiniz oturum türünün mevcut cihazda mevcut olup olmadığını arayarak öğrenin. xr.isSessionSupported(). talep etmek yerine 'immersive-vr' daha önce olduğu gibi, istek 'immersive-ar'.

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
  }
}

Daha önce olduğu gibi, bu bir ‘AR Gir’ düğmesini etkinleştirir. Kullanıcı tıkladığında, ara xr.requestSession()ayrıca geçiyor 'immersive-ar'.

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();
  }
}

Bir kolaylık özelliği #

Son kod örneğinde iki satırı vurguladığımı muhtemelen fark etmişsinizdir. bu XRSession nesne adında bir özelliğe sahip gibi görünüyor isImmersive. Bu, kendi oluşturduğum bir kolaylık özelliğidir ve spesifikasyonun bir parçası değildir. Bunu daha sonra izleyiciye ne göstereceğime karar vermek için kullanacağım. Bu özellik neden API’nin bir parçası değil? Uygulamanızın bu özelliği farklı şekilde izlemesi gerekebileceğinden, özellik yazarları API’yi temiz tutmaya karar verdi.

Bir oturuma girme #

neyi hatırla onSessionStarted() önceki makalemdeki gibi görünüyordu:

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çeklik oluşturmayı hesaba katmak için birkaç şey eklemem gerekiyor. Arka planı kapatın Önce arka plana ihtiyacım olup olmadığını belirleyeceğim. Bu, kolaylık özelliğimi 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ı #

Daha önceki makalelerim referans alanlarını gözden geçirdi. Açıkladığım örnekte bunlardan ikisi kullanılıyor, bu yüzden bu eksikliği düzeltmenin zamanı geldi.

Bir 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 sistemi için orijini belirleme.
• Kullanıcının bu koordinat sistemi içinde hareket etmesinin beklenip beklenmediğinin belirtilmesi.
• Bu koordinat sisteminin önceden belirlenmiş sınırları olup olmadığı. (Burada gösterilen örnekler önceden belirlenmiş sınırlara sahip koordinat sistemlerini kullanmaz.)

Tüm referans uzayları için, X koordinatı sol ve sağı, Y yukarı ve aşağıyı, Z koordinatı ileri ve geriyi ifade eder. Pozitif değerler sırasıyla sağa, yukarıya ve geriye doğrudur.

tarafından döndürülen koordinatlar XRFrame.getViewerPose() talep edilene bağlı referans alanı türü. Çerçeve döngüsüne geldiğimizde bununla ilgili daha fazla bilgi. Şu anda, artırılmış gerçeklik için uygun bir referans türü seçmemiz gerekiyor. Yine, bu benim uygunluk özelliğimi kullanıyor.

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);
  });
}

Eğer ziyaret ettiyseniz Sürükleyici AR Oturum Örneği başlangıçta sahnenin statik olduğunu ve artırılmış gerçeklik olmadığını fark edeceksiniz. Sahnede hareket etmek için parmağınızla sürükleyip kaydırabilirsiniz. “AR’ı BAŞLAT”a tıklarsanız, arka plan kaybolur ve cihazı hareket ettirerek sahnede hareket edebilirsiniz. Modlar, farklı referans alanı türleri kullanır. Yukarıda vurgulanan metin, bunun nasıl seçildiğini gösterir. Aşağıdaki referans türlerini kullanır:

local – Başlangıç ​​noktası, oturum oluşturma sırasında izleyicinin konumundadır. Bu, deneyimin mutlaka iyi tanımlanmış bir zemine sahip olmadığı ve başlangıç ​​noktasının tam konumunun platforma göre değişebileceği anlamına gelir. Alanın önceden belirlenmiş sınırları olmamasına rağmen, içeriğin döndürme dışında herhangi bir hareket olmadan görüntülenebilmesi beklenir. Kendi AR örneğimizde görebileceğiniz gibi, alan içinde bir miktar hareket mümkün olabilir.

viewer – En sık sayfada satır içi sunulan içerik için kullanılır, bu alan görüntüleme cihazını takip eder. getViewerPose’a iletildiğinde, izleme sağlamaz ve bu nedenle, uygulama tarafından değiştirilmediği sürece her zaman kaynakta bir poz bildirir. XRReferenceSpace.getOffsetReferenceSpace(). Örnek, kameranın dokunmatik tabanlı kaydırmasını etkinleştirmek için bunu kullanır.

Çerçeve döngüsü çalıştırma #

Kavramsal olarak, önceki makalelerimde açıklanan VR oturumunda yaptığımdan hiçbir şey değişmiyor. Referans alanı türünü şuraya geçirin: XRFrame.getViewerPose(). iade edilen XRViewerPose geçerli referans alanı tipi için olacaktır. kullanma viewer varsayılan olarak, AR veya VR için kullanıcı izni istenmeden önce bir sayfanın içerik önizlemelerini göstermesine izin verir. Bu, önemli bir noktayı göstermektedir: satır içi içerik, sürükleyici içerikle aynı çerçeve döngüsünü kullanır ve korunması 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.
  }
}

Çözüm #

Bu makale dizisi, yalnızca web’de sürükleyici içerik uygulamanın temellerini kapsar. Sürükleyici Web Çalışma Grubu tarafından daha birçok yetenek ve kullanım durumu sunulmaktadır. WebXR Cihaz API örnekleri. Ayrıca, yüzeyleri algılamak ve sanal öğeleri gerçek dünya kamera görünümüne yerleştirmek için bir API’yi açıklayan bir isabet testi makalesi yayınladık. Onlara göz atın ve gelecek yıl daha fazla makale için web.dev blogunu izleyin.

fotoğrafı çeken David Grandmougin Açık Unsplash