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 kullanıma sunuldu. 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 teklifi olduğu ve hem sağlam hem de geliştiriciler için doğru olduğundan emin olmak istediğimiz için test süresinin uzatılmasını istiyoruz.

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

Bunları kullanarak demolara katılabilir 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 gösterim oluşturuyorsanız bu soruya hazırlıklı olun. Bunu çok sık göreceksiniz.

IO'dan bahsederken genel olarak etkileyici web hakkında daha fazla bilgi edinmek isterseniz bu videoyu izleyebilirsiniz.

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 ürünlerin evlerinde nasıl görüneceğini görmesine olanak tanıyabilir.

Demolarımız bunu göstermektedir. Bu reklamlar, kullanıcıların bir nesnenin gerçek boyutlu bir temsilini sanki gerçektenmiş gibi yerleştirmelerine 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 ayrıntılı 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 ayrıntılı olarak tamamlayıcı bir makalede açıklanmıştır. Bu tartışma için önemli olan, Chacmool heykelini artırılmış gerçeklikle yerleştirdiğinizde, sanki gerçekten sizinle aynı odadaymış gibi boyutunu görmenizdir.

Chacmool örneği eğiticidir ancak ticari de olabilir. Oturma odanıza koltuk yerleştirebileceğiniz bir mobilya alışverişi sitesi düşünün. AR uygulaması, koltuğun alanınıza uyup uymadığını ve diğer mobilyalarınızın yanında nasıl görüneceğini söyler.

Işın aleti, vuruş testleri ve retiküller

Artırılmış gerçeklik uygulanırken çözülmesi gereken temel sorunlardan biri, nesnelerin gerçek dünyaya 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 hesaplamaktır. Bu kesişime isabetle karşılaşma adı verilir ve isabetle karşılaşmanın olup olmadığını belirleme işlemine isabetle karşılaşma testi adı verilir.

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 saniyede 60 kare yerine 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 Hit Test demosu

Dikkat etmeniz gereken bir diğer şey de 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 retikül, yerleştirilecek resmin bir kopyasıdır. Ancak böyle olması gerekmez. Örneğin, Chacmool demosunda bu, yaklaşık olarak yerleştirilen nesnenin tabanıyla aynı şekle sahip dikdörtgen bir kutudur.

Koda kadar

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 geliyor. 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ü yoğun olmamalıdır ve referans türünün çerçevesi '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ını, ışın üzerindeki iki noktayla (origin ve direction) ve bu noktaların (frameOfReference) hesaplandığı yerle tanımlanır. Başlangıç ve 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 ettirdikçe retikül de bir nesnenin yerleştirilebileceği konumu bulmaya çalıştığı için onunla birlikte hareket etmesi gerekir. Bu, nişangahın her karede yeniden çizilmesi gerektiği anlamına gelir.

requestAnimationFrame() geri aramasıyla 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.
  }
}

Seansınızı ve pozunuzu tamamladıktan sonra ışının nerede yayıldığı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 konumundan cihaz konumunu alın. Işınınızı elinize alı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. Yine de, bir çerçeve kullanmanızı öneririz. Tam sayfa web örneklerinde, yalnızca demolar için oluşturulan Cottontail kullanılır ve 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 anlamanıza yetecek kadar temel bilginin olduğunu umuyorum.

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