Web için artırılmış gerçeklik

Joe Medley
Joe Medley
GitHub

Chrome 67'de, hem artırılmış gerçeklik (AR) hem de sanal gerçeklik (VR) için WebXR Device API'yi duyurmuştuk. Ancak yalnızca VR özellikleri etkinleştirilmişti. VR, tamamen bir bilgisayar cihazındaki içeriklere dayalı bir deneyimdir. Öte yandan AR, sanal nesneleri gerçek dünyada oluşturmanıza olanak tanır. Bu nesnelerin yerleştirilmesine ve izlenmesine izin vermek için Chrome Canary'a WebXR Hit Test API'yi ekledik. Bu API, gerçek dünyaya nesne yerleştiren sürükleyici web kodlarına yardımcı olan yeni bir yöntemdir.

Nerede bulabilirim?

Bu API'nin yakın gelecekte Canary'da kalması planlanmaktadır. Bu çok yeni bir API önerisi olduğundan ve hem sağlam hem de geliştiriciler için doğru olduğundan emin olmak istediğimizden uzun bir test dönemi istiyoruz.

Chrome Canary'nin yanı sıra aşağıdakilere de ihtiyacınız vardır:

Bu bilgilerle, demolara göz atabilir veya codelab'imizi deneyebilirsiniz.

Bu sadece web

Bu yılki Google IO'da, Chrome'un erken bir sürümüyle artırılmış gerçekliği gösterdik. Bu üç gün boyunca hem geliştiricilere hem de geliştirici olmayanlara tekrar tekrar söylediğim bir şey vardı. Immersive web makaleme eklemeyi bilseydim keşke: "Bu sadece web."

"Hangi Chrome uzantısını yüklemem gerekiyor?" "Uzantı yok. Bu sadece web."

"Özel bir tarayıcıya ihtiyacım var mı?" "Bu sadece web."

"Hangi uygulamayı yüklemem gerekiyor?" "Özel bir uygulama yok. Yalnızca web'den erişiliyor."

Bunu web'e adanmış bir web sitesinde okuduğunuz için sizin için açık bir konu olabilir. Bu yeni API ile demolar oluşturuyorsanız bu soruya hazırlıklı olun. Bunu çok sık göreceksiniz.

IO'dan bahsetmişken, genel olarak sürükleyici web hakkında daha fazla bilgi edinmek, nerede olduğunu ve nereye gittiğini öğrenmek istiyorsanız bu videoya göz atın.

Ne için faydalıdır?

Artırılmış gerçeklik, mevcut birçok web sayfasına değerli bir katkı olacaktı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.

Demolarımız bunu göstermektedir. Kullanıcıların bir nesnenin gerçek boyutlu bir temsilini gerçekmiş gibi yerleştirmesine olanak tanır. Yerleştirilen resim, seçilen yüzeyde kalır, gerçek öğe o yüzeydeymiş gibi görünür ve kullanıcının etrafında hareket etmesine, ona yaklaşmasına veya ondan uzaklaşmasına olanak tanır. Bu sayede izleyiciler, iki boyutlu bir resimle mümkün olandan daha derin bir şekilde nesneyi anlayabilir.

Tüm bunlarla neyi kastettiğimden emin değilseniz demoları kullandığınızda ne demek istediğimi anlayacaksınız. Demoyu çalıştırabilecek bir cihazınız yoksa bu makalenin üst kısmındaki video bağlantısına göz atın.

Demo ve videoda gösterilmeyen bir şey de AR'ın gerçek bir nesnenin boyutunu nasıl aktarabildiğidir. Bu videoda, Chacmool adlı eğitim amaçlı bir demo gösterilmektedir. Bu demo, eşlik eden makalede ayrıntılı olarak açıklanmaktadır. Bu tartışmada önemli olan nokta, Chacmool heykelini artırılmış gerçekliğe yerleştirdiğinizde heykelin boyutunu sanki odanızdaymış gibi görmenizdir.

Chacmool örneği eğiticidir ancak ticari de olabilir. Oturma odanıza koltuk yerleştirmenize olanak tanıyan bir mobilya alışveriş sitesi düşünün. Artırılmış gerçeklik uygulaması, kanepenin alanınıza sığıp sığmadığını ve diğer mobilyalarınızın yanında nasıl görüneceğini size gösterir.

Işın yayma, isabet testi ve nişangah

Artırılmış gerçekliği uygularken çözülmesi gereken önemli bir sorun, nesnelerin gerçek dünya görünümüne nasıl yerleştirileceğidir. Bu işlemin yöntemine ışın oluşturma denir. Işın oluşturma, işaretçi ışını ile gerçek dünyadaki bir yüzey arasındaki kesişimi hesaplamayı ifade eder. Bu kesişime isabetler adı verilir ve isabet olup olmadığının belirlenmesi isabetler testi olarak adlandırılır.

Chrome Canary'da yeni kod örneğini denemek için iyi bir zaman. Herhangi bir işlem yapmadan önce doğru işaretleri etkinleştirdiğinizden emin olun. Ardından numuneyi yükleyin ve "AR'ı başlat"ı tıklayın.

Birkaç noktaya dikkat edin. Öncelikle, diğer etkileyici örneklerden tanıyabileceğiniz hız göstergesi 60 yerine saniyede 30 kare gösterir. Bu, web sayfasının kameradan görüntü alma hızıdır.

AR, saniyede 30 kare hızında çalışır.

AR isabet testi demosu

Dikkat etmeniz gereken bir diğer nokta da ayçiçeği resmidir. Siz hareket ettikçe hareket eder ve zemin ve masa üstü gibi yüzeylere yapışır. Ekrana dokunduğunuzda bir yüzeye bir ayçiçeği yerleştirilir ve cihazınızla birlikte yeni bir ayçiçeği hareket eder.

Cihazınızla birlikte hareket eden ve yüzeylere kilitlenmeye çalışan görüntüye kadran denir. Nişangah, bir nesneyi artırılmış gerçekliğe yerleştirmeye yardımcı olan geçici bir resimdir. Bu demoda, nişangah yerleştirilecek resmin bir kopyasıdır. Ancak böyle olması gerekmez. Örneğin, Chacmool demosunda, yerleştirilen nesnenin tabanıyla kabaca aynı şekle sahip dikdörtgen bir kutu kullanılır.

Kodu inceleme

Chacmool demosu, AR'ın üretim uygulamasında nasıl görünebileceğini gösterir. Neyse ki WebXR örnekleri deposunda çok daha basit bir demo var. Örnek kodum, bu depodaki AR Hit Test demosundan alınmıştır. Ne olduğunu anlamanıza yardımcı olmak için kod örneklerini basitleştirmeyi tercih ediyorum.

AR oturumuna girme ve oluşturma döngüsü çalıştırma ile ilgili temel bilgiler AR için VR ile aynıdır. Konuyla ilgili bilgi edinmek için önceki makalemi okuyabilirsiniz. Daha açık belirtmek gerekirse, AR oturumuna girmek ve oturumu çalıştırmak, VR sihirli pencere oturumuna girmek ile neredeyse aynıdır. Sihirli pencerede olduğu gibi, oturum türü tam sayfa olmamalı ve referans çerçevesi türü 'eye-level' olmalıdır.

Yeni API

Şimdi yeni API'yi nasıl kullanacağınızı göstereceğim. AR'da nişangahın, bir öğe yerleştirilmeden önce yüzey bulmaya çalıştığını unutmayın. Bu işlem, isabet testi ile yapılır. İsabet testi yapmak için XRSession.requestHitTest() numaralı telefonu arayın. Bu uzantı aşağıdaki gibi görünür:

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

Bu yöntemin üç bağımsız değişkeni, bir ışın atışını temsil eder. Işın yayımı, ışın üzerindeki iki nokta (origin ve direction) ve bu noktaların hesaplandığı yer (frameOfReference) ile tanımlanır. Hem kaynak hem de yön 3D vektörlerdir. Gönderdiğiniz değerler, ne olursa olsun 1 uzunluğa normalleştirilir (dönüştürülür).

Nişangahı hareket ettirme

Cihazınızı hareket ettirdiğinizde, bir nesnenin yerleştirilebileceği bir konum bulmaya çalışırken nişangahın da onunla birlikte hareket etmesi gerekir. Bu, nişangahın her karede yeniden çizilmesi gerektiği anlamına gelir.

requestAnimationFrame() geri araması ile başlayın. VR'de olduğu gibi, bir oturum ve bir poz gerekir.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

Oturum ve pozu belirledikten sonra ışının nereye düştüğünü belirleyin. Örnek kod, gl-matrix matematik kitaplığını kullanır. Ancak gl-matrix gerekli değildir. Önemli olan, bu özelliği kullanarak neyi hesapladığınızı ve hesaplamanın cihazın konumuna bağlı olduğunu bilmektir. XRPose.poseModalMatrix'ten cihaz konumunu alın. Işınınızı hazırlayın ve requestHitTest() numaralı telefonu arayın.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

İsabet testi örneğinde çok belirgin olmasa da sahneyi çizmek için görünümleri döngüde çalıştırmanız gerekir. Çizim, WebGL API'leri kullanılarak yapılır. Gerçekten iddialıysanız bunu yapabilirsiniz. Ancak bir çerçeve kullanmanızı öneririz. Tam sayfa web örnekleri, yalnızca denemeler için oluşturulan Cottontail adlı bir tarayıcı kullanır. Three.js ise Mayıs ayından beri WebXR'yi desteklemektedir.

Nesne yerleştirme

Kullanıcı ekrana dokunduğunda bir nesne AR'ye yerleştirilir. Bunun için select etkinliğini kullanırsınız. Bu adımda önemli olan, ürünü nereye yerleştireceğinizi bilmektir. Hareketli nişangah size sürekli bir isabet testi kaynağı sağladığından, bir nesneyi yerleştirmenin en basit yolu, son isabet testinde nişangahın bulunduğu konumda çizmektir. Gerekirse, nişangah göstermemek için geçerli bir nedeniniz olduğunu söyleyerek örnekte gösterildiği gibi seçili etkinlikte requestHitTest() çağrısı yapabilirsiniz.

Sonuç

Bu konuyu anlamanın en iyi yolu, örnek kodu adım adım incelemek veya codelab'i denemektir. Her ikisini de anlamak için yeterli bilgi verdiğimi umuyorum.

Tam olarak olmasa da, sürükleyici web API'leri oluşturmaya devam ediyoruz. İlerleme kaydettikçe burada yeni makaleler yayınlayacağız.