Google I/O'ya hazırlanırken web'de artırılmış gerçekliğin (AR) sunduğu heyecan verici imkanları vurgulamak istedik. Chacmool, web tabanlı AR'ın kullanıcıların AR deneyimleriyle etkileşime geçmesine ne kadar kolay yardımcı olabileceğini göstermek için oluşturduğumuz eğitici bir web deneyimi demosudur. Web, AR'yi her yerde kullanışlı ve erişilebilir hale getirir.
Bu demoyu artık Android O veya sonraki sürümleri çalıştıran ARCore uyumlu Android cihazlarda Chrome Canary'da etkinleştirdik. Ayrıca ARCore'u yüklemeniz gerekir.
Bu çalışma yeni bir WebXR önerisine (WebXR Hit Test API) dayanır. Bu nedenle, yeni API önerisini Immersive Web Topluluk Grubu'nun diğer üyeleriyle test edip hassaslaştırdığımız sırada Canary'da kalacak şekilde işaretlenmiştir. Aslında, demoya erişmek için chrome://flags:
#webxr ve #webxr-hit-test'de iki işareti etkinleştirmeniz gerekir. Her ikisini de etkinleştirip Canary'ı yeniden başlattıktan sonra Chacmool demosuna göz atabilirsiniz.
Chacmool AR deneyimi, kullanıcıların eski Chacmool heykelleri hakkında bilgi edinmesine yardımcı olmak için AR'ın sürükleyici ve etkileşimli yapısından yararlanarak eğitime odaklanır. Kullanıcılar gerçekliklerine gerçek boyutlu bir heykel yerleştirebilir ve heykelin farklı açılardan ve mesafelerden görüntüsü için hareket edebilir. Artırılmış gerçekliğin sürükleyici yapısı, kullanıcıların gerçek dünyada olduğu gibi içerikleri özgürce keşfetmelerine, keşfettikleri içeriklerle oynamalarına olanak tanır. Bir nesneyi AR'da görüntülerken, düz bir 2D ekranda görüntülemenin aksine, çok sezgisel bir etkileşim modeli kullanarak nesneyi birçok farklı açıdan ve mesafeden görebildiğimiz için neye baktığımızı derinlemesine anlayabiliriz. Bu modelde nesnenin etrafında dolaşabilir, fiziksel olarak nesneye yaklaşabilir veya uzaklaşabilirsiniz. Ayrıca bu deneyimde doğrudan heykele yerleştirilmiş ek açıklamalar da vardır. Bu sayede kullanıcılar, metinde açıklanan özellikleri heykelin neresinde bulabileceklerini doğrudan anlayabilir.
Bu demo, WebXR ekibinin ilk web tabanlı AR demosu olan WebAR-Article'daki bazı bileşenlerden yararlanılarak yaklaşık bir ay boyunca geliştirildi. Heykel hakkındaki bilgiler Google Arts & Culture sayfasından, 3D model ise Google Arts & Culture'ın iş ortağı CyArk tarafından sağlanmıştır. 3D modeli web'e hazır hale getirmek için Meshlab ve Mesh Mixer'in bir kombinasyonu kullanılarak model onarıldı ve dosya boyutunu küçültmek için örgüsü azaltıldı. Ardından, 3D geometrik ağları ve nokta bulutlarını sıkıştırıp açma kitaplığı olan Draco kullanılarak modelin dosya boyutu 44,3 megabayttan yalnızca 225 kilobayta düşürüldü. Son olarak, modeli arka plan iş parçacığına yüklemek için bir web işleyici kullanılır. Böylece, model yüklenirken ve sıkıştırması kaldırılırken sayfa etkileşimli kalır. Bu işlem genellikle takılmalara neden olur ve sayfanın kaydırılmasını engeller.
Masaüstünde geliştirip telefona dağıttığımız için deneyimi incelemeye yardımcı olmak amacıyla Chrome'un uzaktan hata ayıklama araçlarını kullandığımızda kod değişiklikleri arasında çok hızlı bir iterasyon döngüsü oluşturduğunu ve Chrome'da hata ayıklama ve performansı kontrol etmek için harika geliştirici araçları bulunduğunu vurgulamak isteriz.
AR/VR deneyimleri için en iyi uygulamalar
Yerel AR deneyimleri için tasarım ve mühendislik kurallarının çoğu, web tabanlı AR deneyimleri oluşturmak için de geçerlidir. Genel en iyi uygulamalar hakkında daha fazla bilgi edinmek istiyorsanız kısa süre önce yayınladığımız AR tasarım yönergelerine göz atın.
Özellikle web tabanlı AR deneyimleri tasarlarken AR'ı kullanırken ekranın tamamını kullanmak (ör. mobil cihazlarda video oynatıcıların tam ekrana geçmesine benzer şekilde tam ekrana geçmek) en iyisidir. Bu sayede kullanıcıların görünümü kaydırmasını veya web sayfasındaki diğer öğelerden rahatsız olmasını önleyebilirsiniz. AR'ye geçiş sorunsuz ve pürüzsüz olmalıdır.AR oryantasyonuna girmeden önce kamera görünümü gösterilmelidir (ör. bir nişangah çizilir). Web tabanlı AR ile ilgili dikkat edilmesi gereken nokta, geliştiricilerin yerel AR'dan farklı olarak kamera çerçevesine, ışıklandırma tahminine, ankrajlara veya düzlemlere (henüz) erişememesidir. Bu nedenle, tasarımcıların ve geliştiricilerin web tabanlı bir AR deneyimi tasarlarken bu sınırlamaları göz önünde bulundurması önemlidir.
Ayrıca, web deneyimleri için kullanılan cihaz çeşitliliği nedeniyle, en iyi kullanıcı deneyimini oluşturmak için performansın optimize edilmesi önemlidir. Bu nedenle: Poligon sayısını düşük tutun, mümkün olduğunca az ışıkla idare etmeye çalışın, mümkünse gölgeleri önceden hesaplayın ve çizim çağrılarını en aza indirin. AR'da metin görüntülerken metnin tüm mesafelerden ve açılardan net ve okunaklı olduğundan emin olmak için modern (ör. imzalı mesafe alanına dayalı) metin oluşturma tekniklerini kullanın. Ek açıklamaları yerleştirirken kullanıcının bakışlarını başka bir giriş olarak düşünün ve ek açıklamaları yalnızca alakalı olduklarında gösterin (ör. kullanıcı ilgi alanı olan bir alana odaklandığında görünen yakınlığa dayalı ek açıklamalar).
Son olarak, bu içerik web tabanlı olduğundan web için genel en iyi tasarım uygulamalarını da uygulamanız önemlidir. Sitenin farklı cihazlarda (masaüstü, tablet, mobil cihaz, kulaklık vb.) iyi bir deneyim sağladığından emin olun. İlerlemeli geliştirme özelliğini desteklemek, AR özellikli olmayan cihazlar için de tasarım yapmak anlamına gelir (ör. AR özellikli olmayan cihazlarda 3D model görüntüleyici gösterme).
Kendi web tabanlı AR deneyimlerinizi geliştirmek istiyorsanız web'de AR oluşturmaya nasıl başlayacağınızla ilgili daha fazla ayrıntının yer aldığı tamamlayıcı bir makalemiz de mevcuttur. (Chacmool demosunun kaynağına da göz atabilirsiniz.) WebXR Device API aktif olarak geliştirilmektedir. Tüm uygulama ve kullanım alanlarını desteklediğinden emin olmak için geri bildirimlerinizi bekliyoruz. Lütfen GitHub'a gidip sohbete katılın.