Sanal nesneleri gerçek dünya görünümlerinde konumlandırma

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 şunları kapsar: WebXR İsabet Testi API’sısanal nesneleri gerçek dünyadaki kamera görüntüsüne yerleştirmenin bir yolu.

Bu makalede, bir artırılmış gerçeklik oturumunun nasıl oluşturulacağını zaten bildiğinizi ve bir çerçeve döngüsünü nasıl çalıştıracağınızı bildiğinizi varsayıyorum. Bu kavramlara aşina değilseniz, bu dizideki önceki makaleleri okumalısınız.

Sürükleyici AR oturumu örneği #

Bu makaledeki kod, Sürükleyici Web Çalışma Grubu’nun İsabet Testi örneğinde (gösteri, kaynak). Bu örnek, gerçek dünyadaki yüzeylere sanal ayçiçekleri yerleştirmenizi sağlar.

Uygulamayı ilk açtığınızda, ortasında bir nokta bulunan mavi bir daire göreceksiniz. Nokta, cihazınızdan ortamdaki noktaya hayali bir çizgi arasındaki kesişme noktasıdır. Cihazı hareket ettirdikçe hareket eder. Kesişme noktalarını bulduğunda zemin, masa üstleri ve duvarlar gibi yüzeylere yapışıyormuş gibi görünür. Bunu yapar çünkü isabet testi, kesişme noktasının konumunu ve yönünü sağlar, ancak yüzeylerin kendileri hakkında hiçbir şey söylemez.

Bu çembere denir retikül, bir nesnenin artırılmış gerçekliğe yerleştirilmesine yardımcı olan geçici bir görüntüdür. Ekrana dokunursanız, ekrana nereye dokunduğunuza bakılmaksızın, dürbün konumu ve dürbün noktasının yönlendirmesindeki yüzeye bir ayçiçeği yerleştirilir. Retikül, cihazınızla birlikte hareket etmeye devam eder.

Retikülü oluştur #

Tarayıcı veya API tarafından sağlanmadığı için retikül görüntüsünü kendiniz oluşturmalısınız. Yükleme ve çizme yöntemi çerçeveye özeldir. Doğrudan WebGL veya WebGL2 kullanarak çizmiyorsanız, çerçeve belgelerinize bakın. Bu nedenle örnekte retikülün nasıl çizildiğine dair detaya girmeyeceğim. Aşağıda bir satırını yalnızca bir nedenden dolayı gösteriyorum: böylece daha sonraki kod örneklerinde, kullandığımda ne demek istediğimi anlayacaksınız. reticle değişken.

let reticle = new Gltf2Node({url: 'media/gltf/reticle/reticle.gltf'});

oturum talep et #

Bir oturum talep ederken, talep etmelisiniz. 'hit-test' içinde requiredFeatures dizi aşağıda gösterildiği gibi.

navigator.xr.requestSession('immersive-ar', {
requiredFeatures: ['local', 'hit-test']
})
.then((session) => {
// Do something with the session
});

Bir oturuma girme #

Önceki makalelerde bir XR oturumuna girmek için kod sunmuştum. Bunun bir versiyonunu bazı eklemelerle aşağıda gösterdim. ilk ben ekledim select olay dinleyicisi Kullanıcı ekrana dokunduğunda, retikülün pozuna göre kamera görüntüsüne bir çiçek yerleştirilecektir. O olay dinleyicisini daha sonra anlatacağım.

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

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

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

  xrSession.requestReferenceSpace('viewer').then((refSpace) => {
    xrViewerSpace = refSpace;
    xrSession.requestHitTestSource({ space: xrViewerSpace })
    .then((hitTestSource) => {
      xrHitTestSource = hitTestSource;
    });
  });

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

Çoklu referans alanları #

Vurgulanan kodun arama yaptığına dikkat edin XRSession.requestReferenceSpace() iki kere. Başlangıçta bunu kafa karıştırıcı buldum. İsabet testi kodunun neden bir animasyon çerçevesi talep etmediğini (çerçeve döngüsünü başlatarak) ve çerçeve döngüsünün neden isabet testleri içermediğini sordum. Karışıklığın kaynağı, referans uzaylarının yanlış anlaşılmasıydı. Referans uzayları, bir köken ile dünya arasındaki ilişkileri ifade eder.

Bu kodun ne yaptığını anlamak için, bu örneği bağımsız bir donanım kullanarak görüntülediğinizi ve hem kulaklığınız hem de denetleyiciniz olduğunu hayal edin. Denetleyiciye olan mesafeleri ölçmek için denetleyici merkezli bir referans çerçevesi kullanırsınız. Ancak ekrana bir şey çizmek için kullanıcı merkezli koordinatlar kullanırsınız.

Bu örnekte, görüntüleyici ve denetleyici aynı cihazdır. Ama benim bir problemim var. Çizdiğim şey ortama göre sabit olmalı ama çizdiğim ‘kontrolör’ hareket ediyor.

Resim çizmek için kullanıyorum local çevre açısından bana istikrar sağlayan referans uzayı. Bunu aldıktan sonra çerçeve döngüsünü çağırarak başlatırım. requestAnimationFrame().

Vuruş testi için kullanıyorum viewer cihazın isabet testi sırasındaki duruşuna dayanan referans alanı. ‘İzleyici’ etiketi bu bağlamda biraz kafa karıştırıcı çünkü bir denetleyiciden bahsediyorum. Denetleyiciyi elektronik bir görüntüleyici olarak düşünürseniz mantıklıdır. Bunu aldıktan sonra aradım xrSession.requestHitTestSource()çizim yaparken kullanacağım isabet testi verilerinin kaynağını oluşturur.

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

bu requestAnimationFrame() geri arama ayrıca isabet testini işlemek için yeni kod alır.

Cihazınızı hareket ettirdikçe, yüzeyleri bulmaya çalışırken retikülün de onunla birlikte hareket etmesi gerekir. Hareket yanılsaması yaratmak için her karede retikülü yeniden çizin. Ancak isabet testi başarısız olursa nişangahı göstermeyin. Bu yüzden, daha önce oluşturduğum retikül için ayarladım visible mülkiyet false.

function onXRFrame(hrTime, xrFrame) {
  let xrSession = xrFrame.session;
  xrSession.requestAnimationFrame(onXRFrame);
  let xrViewerPose = xrFrame.getViewerPose(xrRefSpace);

  reticle.visible = false;

  // Reminder: the hitTestSource was acquired during onSessionStart()
  if (xrHitTestSource && xrViewerPose) {
    let hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);
    if (hitTestResults.length > 0) {
      let pose = hitTestResults[0].getPose(xrRefSpace);
      reticle.visible = true;
      reticle.matrix = pose.transform.matrix;
    }
  }

  // Draw to the screen
}

AR’de herhangi bir şey çizmek için, izleyicinin nerede olduğunu ve nereye baktığını bilmem gerekiyor. Bu yüzden bunu test ediyorum hitTestSource ve xrViewerPose hala geçerlidir.

function onXRFrame(hrTime, xrFrame) {
  let xrSession = xrFrame.session;
  xrSession.requestAnimationFrame(onXRFrame);
  let xrViewerPose = xrFrame.getViewerPose(xrRefSpace);

  reticle.visible = false;

  // Reminder: the hitTestSource was acquired during onSessionStart()
  if (xrHitTestSource && xrViewerPose) {
    let hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);
    if (hitTestResults.length > 0) {
      let pose = hitTestResults[0].getPose(xrRefSpace);
      reticle.visible = true;
      reticle.matrix = pose.transform.matrix;
    }
  }

  // Draw to the screen
}

şimdi ben ararım getHitTestResults(). alır hitTestSource bir argüman olarak ve bir dizi döndürür HitTestResult örnekler. İsabet testi birden fazla yüzey bulabilir. Dizideki ilki, kameraya en yakın olanıdır. Çoğu zaman onu kullanacaksınız, ancak gelişmiş kullanım durumları için bir dizi döndürülür. Örneğin, kameranızın yerdeki bir masanın üzerindeki bir kutuya doğrultulmuş olduğunu hayal edin. Vuruş testinin dizideki üç yüzeyi de döndürmesi olasıdır. Çoğu durumda, umursadığım kutu olacaktır. Dönen dizinin uzunluğu 0 ise, yani herhangi bir isabet testi döndürülmezse, devam edin. Bir sonraki karede tekrar deneyin.

function onXRFrame(hrTime, xrFrame) {
  let xrSession = xrFrame.session;
  xrSession.requestAnimationFrame(onXRFrame);
  let xrViewerPose = xrFrame.getViewerPose(xrRefSpace);

  reticle.visible = false;

  // Reminder: the hitTestSource was acquired during onSessionStart()
  if (xrHitTestSource && xrViewerPose) {
    let hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);
    if (hitTestResults.length > 0) {
      let pose = hitTestResults[0].getPose(xrRefSpace);
      reticle.visible = true;
      reticle.matrix = pose.transform.matrix;
    }
  }

  // Draw to the screen
}

Son olarak, isabet testi sonuçlarını işlemem gerekiyor. Temel süreç şudur. İsabet testi sonucundan bir poz alın, retikül görüntüsünü isabet testi konumuna dönüştürün (taşıyın), ardından visible özellik doğru. Poz, bir yüzey üzerindeki bir noktanın pozunu temsil eder.

function onXRFrame(hrTime, xrFrame) {
let xrSession = xrFrame.session;
xrSession.requestAnimationFrame(onXRFrame);
let xrViewerPose = xrFrame.getViewerPose(xrRefSpace);
reticle.visible = false;
// Reminder: the hitTestSource was acquired during onSessionStart()
if (xrHitTestSource && xrViewerPose) {
let hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);
if (hitTestResults.length > 0) {
let pose = hitTestResults[0].getPose(xrRefSpace);
reticle.matrix = pose.transform.matrix;
reticle.visible = true;
}
}
// Draw to the screen
}

nesne yerleştirme #

Kullanıcı ekrana dokunduğunda AR’ye bir nesne yerleştirilir. ekledim zaten select oturuma olay işleyicisi. (Yukarıyı görmek.)

Bu adımda önemli olan nereye yerleştireceğinizi bilmektir. Hareket eden retikül size sabit bir isabet testi kaynağı sağladığından, bir nesneyi yerleştirmenin en basit yolu onu son isabet testinde retikül konumuna çizmektir.

function onSelect(event) {
if (reticle.visible) {
// The reticle should already be positioned at the latest hit point,
// so we can just use its matrix to save an unnecessary call to
// event.frame.getHitTestResults.
addARObjectAt(reticle.matrix);
}
}

Çözüm #

Bunu ele almanın en iyi yolu, basit kod ya da deneyin kod laboratuvarı. Umarım size her ikisini de anlamanız için yeterli arka plan vermişimdir.

Sürükleyici web API’leri oluşturmayı henüz bitirmedik. İlerleme kaydettikçe burada yeni makaleler yayınlayacağız.

fotoğrafı çeken daniel frank Açık Unsplash