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

Ali Poşet
Ali Polat

Chrome 67'de, yalnızca VR özellikleri etkin olmasına rağmen hem artırılmış gerçeklik (AR) hem de sanal gerçeklik (VR) için WebXR Device API'yi duyurduk. VR, tamamen bilgi işlem cihazlarında bulunanlara dayanan bir deneyimdir. Öte yandan, artırılmış gerçeklik, gerçek dünyada sanal nesneler oluşturmanıza olanak tanır. Bu nesnelerin yerleştirilmesine ve izlenmesine olanak sağlamak için WebXR Hit Test API'yi Chrome Canary'ye ekledik. Bu, nesneleri gerçek dünyaya yoğun bir şekilde yerleştirmeye yardımcı olan yeni bir yöntem.

Nereden alabilirim?

Bu API'nin yakın gelecekte Canary'de kalması amaçlanmıştır. Bu çok yeni bir API teklifi olduğundan uzun bir test dönemi istiyoruz ve bunun hem sağlam hem de geliştiriciler için doğru olduğundan emin olmak istiyoruz.

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

Bu araçlarla demolara katılabilir veya codelab'imizi deneyebilirsiniz.

Bu yalnızca web

Bu yıl Google IO'da, Chrome'un ilk derlemelerinden yararlanarak artırılmış gerçekliği tanıttık. O üç gün boyunca keşke etkileyici web makalemi buraya yazmış olsaydım da, hem geliştiricilere hem de geliştirici olmayanlara defalarca bir şey söyledim: "Bu yalnızca web."

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

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

"Hangi uygulamayı yüklemem gerekiyor?" "Özel bir uygulama yok, yalnızca web."

Bu yazıyı web'e ayrılmış bir web sitesinde okuduğunuz için durumu çok açık görebilirsiniz. Bu yeni API ile demolar oluşturuyorsanız bu soruya hazırlanın. Çok hak edeceksiniz.

IO'dan bahsetmişken, genel olarak etkileyici web hakkında daha fazla bilgi edinmek istiyorsanız bu videoya göz atın.

Ne işe yarar?

Artırılmış gerçeklik, mevcut birçok web sayfasına değerli bir katkı sağlayacak. Örneğin, kullanıcıların eğitim sitelerinde bilgi edinmesine yardımcı olabilir ve potansiyel alıcıların alışveriş sırasında evlerindeki nesneleri görselleştirmesine olanak tanıyabilir.

Demolarımız bunu gösteriyor. Kullanıcıların bir nesneyi gerçek boyutlu gibi gerçek boyutta temsil etmelerini sağlar. Resim yerleştirildiğinde, seçilen yüzeyde kalır, gerçek öğenin bu yüzeyde olması durumunda olması gereken boyutta görünür ve kullanıcının öğeye daha yakın veya daha uzak olduğu gibi etrafta da hareket edebilmesini sağlar. Bu, görüntüleyenlerin nesneyi iki boyutlu bir resimle mümkün olduğundan daha ayrıntılı bir şekilde anlamalarını sağlar.

Bunlarla ne demek istediğimden emin değilseniz demoları kullandığınızda bunu daha iyi anlayacaksınız. Demoyu çalıştırabilen bir cihazınız yoksa bu makalenin üst kısmındaki video bağlantısına göz atın.

Demoda ve videoda görülmeyen bir şey de AR'nin gerçek bir nesnenin boyutunu nasıl aktarabildiği. Buradaki videoda, oluşturduğumuz Chacmool adlı eğitici bir demo gösterilmektedir. Bu demo ayrıntılı olarak tamamlayıcı bir makalede açıklanmıştır. Bu tartışmadaki önemli nokta, Chacmool heykelini artırılmış gerçeklikte yerleştirdiğinizde, sanki gerçekten sizinle birlikte odanın içindeymiş gibi boyutunu görmenizdir.

Chacmool örneği eğitici olsa da aynı derecede ticari de olabilir. Oturma odanıza kanepe koymanıza olanak tanıyan bir mobilya alışverişi sitesi düşünün. AR uygulaması, koltuğun alanınıza uygun olup olmadığını ve diğer mobilyalarınızın yanında nasıl görüneceğini gösterir.

Işın yayınları, isabet testleri ve retiküller

Artırılmış gerçekliği uygularken çözülmesi gereken temel sorunlardan biri, nesnelerin gerçek dünyaya nasıl yerleştirileceğidir. Bunu yapma yöntemi ışın yayınlama olarak adlandırılır. Işın yayını, işaretçi ışını ile gerçek dünyadaki bir yüzey arasındaki kesişimi hesaplama anlamına gelir. Bu kesişim isabet olarak adlandırılır ve bir isabetin gerçekleşip gerçekleşmediğinin belirlenmesine isabet testi uygulanır.

Chrome Canary'deki 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. Şimdi örneği yükleyin ve "AR'yi Başlat"ı tıklayın.

Birkaç şeye dikkat edin. İlk olarak, diğer etkileyici örneklerden tanıyabildiğiniz hız ölçer saniyede 60 yerine 30 kare gösterir. Bu, web sayfasının kameradan resim alma hızıdır.

Artırılmış gerçeklik (AR) saniyede 30 kare hızla çalışır

AR Hit Test demosu

Dikkat etmeniz gereken bir diğer nokta ise ayçiçeği resmidir. Siz hareket ettikçe hareket eder, zemin ve masa üstü gibi yüzeylere tutturur. Ekrana dokunduğunuzda 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 retikül denir. Retikül, artırılmış gerçeklikte bir nesne yerleştirilmesine yardımcı olan geçici bir resimdir. Bu demoda retikül, yerleştirilecek resmin bir kopyasıdır. Ama böyle olması gerekmiyor. Örneğin Chacmool demosunda bu kutu, yerleştirilen nesnenin tabanıyla hemen hemen aynı şekle sahip dikdörtgen bir kutudur.

Koda geri dön

Chacmool demosu, üretim uygulamasında AR'nin nasıl görünebileceğini göstermektedir. Neyse ki WebXR örnekleri deposunda çok daha basit bir demo bulunmaktadır. Örnek kodum, bu depodaki AR Hit Test demosundan geliyor. Neler olduğunu anlamanıza yardımcı olmak için kod örneklerini basitleştirmeyi seviyorum.

AR oturumuna girme ve oluşturma döngüsü çalıştırmayla ilgili temel bilgiler, artırılmış gerçeklik (AR) için olduğu gibi sanal gerçeklikte de aynıdır. Bilginiz yoksa önceki makalemi okuyabilirsiniz. Daha net ifade etmek gerekirse, bir AR oturumuna girmek ve çalıştırmak sanal bir sanal gerçeklik sihirli pencere oturumuna girmekle neredeyse aynıdır. Sihirli pencerede olduğu gibi, oturum türü tam sayfa olmamalı ve referans türü çerçevesi 'eye-level' olmalıdır.

Yeni API

Şimdi size yeni API'yı nasıl kullanacağınızı göstereceğim. Artırılmış gerçeklikte retikülün bir öğe yerleştirilmeden önce bir yüzey bulmaya çalıştığını hatırlayın. Bu işlem bir isabet testiyle yapılır. İsabet testi yapmak için XRSession.requestHitTest() numaralı telefonu arayın. Bu şöyle görünür:

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

Bu yöntemin üç bağımsız değişkeni ışın yayınını temsil eder. Işın yayını, ışın üzerindeki iki noktayla (origin ve direction) tanımlanır ve bu noktalar frameOfReference kaynağından hesaplanır. Başlangıç ve yön de 3D vektörlerdir. Gönderdiğiniz değerden bağımsız olarak, bu değerler 1 uzunluğuna normalleştirilir (dönüştürülür).

Retikülü hareket ettirme

Cihazınızı hareket ettirdikçe retikül, nesnenin yerleştirilebileceği bir yer bulmaya çalıştığından retikülün de onunla birlikte hareket etmesi gerekir. Bu, retikülün her karede yeniden çizilmesi gerektiği anlamına gelir.

requestAnimationFrame() geri aramasıyla başlayın. VR'da olduğu gibi, bir oturuma ve poza ihtiyacınız vardır.

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

Seansı ve pozu yaptıktan sonra, ışının nereden aktığını belirleyin. Örnek kodda gl-matrix matematik kitaplığı kullanılır. Ancak gl-matris bir gereklilik değildir. Önemli olan, cihazı kullanarak ne hesapladığınızı ve bunun cihazın konumuna dayalı olduğunu bilmektir. Cihaz konumunu XRPose.poseModalMatrix kaynağından alın. Işın tabanınız yanınızdayken 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 bariz olmasa da sahneyi çizmek için yine de görünümler arasında geçiş yapmanız gerekir. Çizim, WebGL API'leri kullanılarak yapılır. Çok hırslıysanız bunu yapabilirsiniz. Yine de bir çerçeve kullanmanızı öneririz. Tam sayfa web örnekleri, yalnızca Cottontail adlı demolar için oluşturulan bir örneği kullanır ve Three.js, WebXR'yi Mayıs ayından beri desteklemektedir.

Nesne yerleştirme

Kullanıcı ekrana dokunduğunda artırılmış gerçeklik (AR) moduna yerleştirilir. Bunun için select etkinliğini kullanırsınız. Bu adımda önemli olan, reklamın nereye yerleştirileceğini bilmektir. Hareketli retikül size sabit bir isabet testi kaynağı sağladığından, bir nesneyi yerleştirmenin en basit yolu, son darbe testinde retikülün bulunduğu konuma çizmektir. Gerekirse retikül göstermemek için geçerli bir nedeniniz olduğunu varsayalım. Bunun için örnekte gösterildiği gibi seçili etkinlikteki requestHitTest() işlevini çağırabilirsiniz.

Sonuç

Bunu belirlemenin en iyi yolu örnek koda göz atmak veya codelab'i denemektir. Umarım her ikisini de anlamlandırmak için size yeterli bilgi sunabilmişimdir.

Kapsamlı web API'leri oluşturma işimizi yakından takip etmedik. İlerleme kaydettikçe burada yeni makaleler yayınlayacağız.