Google I/O'ya hazırlanırken web'de artırılmış gerçekliğin (AR) heyecan verici olanaklarını vurgulamak istedik. Chacmool, web tabanlı AR'nin kullanıcıların artırılmış gerçeklik deneyimleriyle etkileşimde bulunmalarına ne kadar yardımcı olabileceğini göstermek için geliştirdiğimiz eğitici bir web deneyimi demosudur. Web, Artırılmış Gerçeklik'i (AR) rahat ve her yerden erişilebilir hale getirir.
Bu demoyu artık Android O veya sonraki sürümleri çalıştıran ARCore uyumlu Android cihazlarda Chrome Canary'de etkinleştirdik. ARCore'u da yüklemeniz gerekir.
Bu çalışma yeni bir WebXR teklifine (WebXR Hit Test API) dayandığından bir işaret altında ve yeni API teklifini Immersive Web Community Group'un diğer üyeleriyle test edip hassaslaştırırken Canary'de kalması amaçlanıyor. Aslında demoya erişmek için chrome://flags:
#webxr ve #webxr-hit-test'de iki işareti etkinleştirmeniz gerekir. Bu iki özelliği de etkinleştirip Canary'yi yeniden başlattıktan sonra Chacmool demosuna göz atabilirsiniz.
Chacmool AR deneyimi, kullanıcıların antik Chacmool heykellerini öğrenmesine yardımcı olmak için AR'ın etkileyici ve etkileşimli doğasından yararlanan eğitim odaklıdır. Kullanıcılar, gerçek boyutlu bir heykele yer verip heykeli farklı açılardan ve mesafelerden görmek için etrafta dolaşabiliyor. AR'nin etkileyici doğası, kullanıcıların tıpkı gerçek dünyada olduğu gibi içeriği özgürce keşfetmelerine, keşfetmelerine ve oynamalarına olanak tanır. Bir nesneyi düz bir 2D ekranda görmek yerine artırılmış gerçeklikte (AR) görüntülerken, neye baktığımızı derin bir şekilde anlayabiliyoruz, çünkü nesneyi son derece sezgisel bir etkileşim modeli kullanarak (nesnenin etrafında yürüme ve fiziksel olarak yaklaşma veya uzaklaşma) ne kadar farklı açılardan ve mesafelerden görebiliyoruz. Ayrıca bu deneyimde, doğrudan heykelin üzerine yerleştirilen ek açıklamalar var. Bu, kullanıcıların metinde açıklanan öğeleri ve bu özelliklerin heykelin üzerindeki yerini doğrudan bağlamasını sağlar.
Bu demo, WebXR ekibinin ilk web tabanlı AR demosu olan WebAR-Article'daki bazı bileşenlerden faydalanarak yaklaşık bir ay boyunca derlendi. Heykelle ilgili bilgiler Google'ın Arts & Culture sayfasından alınmıştır ve 3D model, Google Arts & Culture'ın iş ortağı CyArk tarafından sağlanmıştır. 3D modeli web için hazır hale getirmek amacıyla, modeli onarmak ve dosya boyutunu küçültmek için ağını belirlemek amacıyla Meshlab ve Mesh Mixer'ın bir kombinasyonu kullanıldı. Ardından, modelin dosya boyutunu 44,3 megabayttan 225 kilobayta düşürmek için, 3D geometrik ağları ve nokta bulutlarını sıkıştırmak ve açmak için kullanılan bir kitaplık olan Draco kullanıldı. Son olarak, modeli bir arka plan iş parçacığına yüklemek için bir web çalışanı kullanılır. Böylece, model yüklenirken ve sıkıştırılmış hali açılmışken sayfa etkileşimli kalır. Bu işlem genellikle jank'a neden olur ve sayfanın kaydırılmasını engeller.
Masaüstünde geliştirme yaptığımız ve bir telefona dağıttığımız için, deneyimi incelemeye yardımcı olan Chrome'un uzaktan hata ayıklama araçlarını kullanmak, kod değişiklikleri arasında çok hızlı bir yineleme döngüsü oluşturur. Ayrıca Chrome'da hata ayıklama ve performans kontrolü için harika geliştirici araçları da bulunduğundan bunu ne kadar vurgulasak azdır.
AR/VR deneyimleri için en iyi uygulamalar
Yerel artırılmış gerçeklik (AR) deneyimleri için tasarım yapmayla ilgili tasarım ve mühendislik yönergelerinin çoğu, web tabanlı artırılmış gerçeklik 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. video oynatıcıların mobil cihazda tam ekrana geçmesine benzer şekilde tam ekrana geçmek) en iyi yöntemdir. Bu, kullanıcıların görünümü kaydırmasını veya web sayfasındaki diğer öğelerin dikkatlerinin dağılmasını önler. AR'ye geçiş akıcı ve pürüzsüz olmalı, AR'ye ilk katılımdan önce kamera görünümü gösterilmelidir (ör. retikül çizme). Web tabanlı AR ile ilgili unutulmaması gereken önemli nokta, yerel uygulamaların aksine, geliştiricilerin kamera çerçevesine, aydınlatma tahminine, çapalara veya düzlemlere (henüz) erişiminin olmamasıdır. Bu nedenle, tasarımcıların ve geliştiricilerin web tabanlı bir AR deneyimi tasarlarken bu sınırlamaları göz önünde bulundurmaları önemlidir.
Buna ek olarak, web deneyimleri için kullanılan cihazların çeşitliliği nedeniyle, performansın en iyi kullanıcı deneyimini oluşturacak şekilde optimize edilmesi önemlidir. Bu nedenle: Çoklu sayıları düşük tutun, mümkün olduğunca az ışık kullanmaya çalışın, mümkünse gölgeleri önceden hesaplayın ve çizim çağrılarını en aza indirin. Artırılmış gerçeklikte (AR) metin görüntülerken, metnin tüm mesafeler ve açılardan net ve okunabilir olduğundan emin olmak için modern (ör. işaretli mesafe alanına dayalı) metin oluşturma teknikleri kullanın. Ek açıklamaları yerleştirirken kullanıcının bakışını başka bir giriş gibi düşünün ve ek açıklamaları yalnızca alakalı olduklarında gösterin (ör. kullanıcı, ilgi alanına giren bir alana odaklandığında gösterilen 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 uygulamak önemlidir. Sitenin tüm cihazlarda (masaüstü, tablet, cep telefonu, mikrofonlu kulaklık vb.) iyi bir deneyim sunduğundan emin olun. Progresif geliştirmeyi desteklemek, AR özellikli olmayan cihazlar için de tasarım yapmak anlamına gelir (ör. AR olmayan cihazlarda 3D model görüntüleyici gösterin).
Web tabanlı Artırılmış Gerçeklik (AR) deneyimleriniz geliştirmek ilginizi çekiyorsa, Web'de AR oluşturmaya nasıl başlayacağınızla ilgili ayrıntılı bilgiyi burada bulabilirsiniz. (Chacmool demosunun kaynağına da göz atabilirsiniz.) WebXR Device API aktif olarak geliştirme aşamasındadır. Her türlü uygulamayı ve kullanım alanını etkinleştirebilmek için geri bildirimlerinizi öğrenmek isteriz. Bu yüzden lütfen GitHub'a gidin ve sohbete katılın.