Chrome tarayıcısı AR efekti ekler, Google, Web AR uygulama teknolojisini ayrıntılı olarak açıklıyor
Google, web'de VR / AR deneyimine her zaman büyük önem vermiştir. Google, Daydream VR platformuna güvenerek, Chrome tarayıcısında VR efektlerini desteklemektedir. Artık Leifeng.com, bir geliştirme ve keşif döneminden sonra Google'ın Chrome üzerindeki AR etkisini resmi olarak göstermeye başladığını anlıyor.
Google blogunda şunları söyledi: "Önümüzdeki birkaç ay içinde AR deneyimini destekleyen yüz milyonlarca cihaz Android ve iOS cihazlar olacak, yani cep telefonları aracılığıyla sanal nesneleri gerçek dünyaya yerleştirebilirsiniz. Pek çok kişi bu ürünü deneyimleyebilir. Web'de sanal gerçeklik etkilerinin nasıl elde edileceğini araştırıyoruz. O andan itibaren herkes tarayıcı aracılığıyla büyülü bir AR deneyimi yaşayabilir. "
Blog gönderisinde Google, 3D prototip görüntüleyicisini, Makaleyi ve tarayıcıda AR'nin nasıl kullanılacağını gösterdi ve teknik uygulamanın ayrıntılarını açıkladı. Leifeng.com orijinal metninde değişmeyen bir düzenleme yaptı. Web AR'nin nasıl uygulandığına bir göz atalım.
Prototip nasıl çalışır?
Article, tüm tarayıcılarda çalışabilen bir 3B model görüntüleyicidir. Masaüstünde, kullanıcılar 3B modeli görüntülerken modeli döndürmek veya yakınlaştırmak için kaydırmak için sürükleyebilir. Cep telefonunda da deneyim benzer. Kullanıcılar modeli döndürmek için tıklayabilir veya sürükleyebilir veya yakınlaştırmak ve uzaklaştırmak için iki parmağını kullanabilir.
(Masaüstü modeli görüntü efekti)
Modelin statik bir görüntü değil, 3 boyutlu ve etkileşimli olduğunu göstermek için kullanıcı sayfayı çevirdiğinde model biraz dönecektir.
AR sayesinde modeller daha gerçekçi olabilir. AR'nin benzersiz gücü, sanal ve gerçekliğin birleşiminde yatmaktadır. Böylece, web'de gezinirken bir model bulabilir, gerçek boyutunu görmek için odaya yerleştirebilir ve etrafında dolaşabiliriz.
Makale AR'yi destekleyen cihazlara ve tarayıcılara yüklendiğinde, tarayıcının altında bir AR düğmesi görünecektir. AR düğmesine basmak, cihazın kamerasını etkinleştirecek ve kullanıcının önünde yerde bir işaret gösterecektir. Kullanıcı ekrana dokunduğunda, 3B model işaretleme çizgisinde görünecek ve zeminde gerçek boyutta görünecektir. Kullanıcı, görüntülerin ve videoların veremeyeceği bir hacim ve doğruluk hissini elde etmek için nesnenin etrafında hareket edebilir.
(AR cihazında Makale tarama efektini kullanın)
Kullanıcılar modeli yeniden konumlandırmak için tıklayıp sürüklemekten de üzülebilir. Gölgeler ve aydınlatma gibi bazı ince özellikler, modelin ortama uyum sağlamasına yardımcı olabilir.
Kullanıcı testinden, net arayüz etkileşim ipuçlarının, kullanıcıların AR'nin nasıl çalıştığını anlamalarına yardımcı olmanın anahtarı olduğunu öğrendik. Örneğin kullanıcı, sistemin üzerine modelin yerleştirilebileceği bir yüzeyi tanımasını beklediğinde, zeminde kullanıcının hareketine göre eğilecek bir daire belirecektir. Bu, sanal nesneler ve fiziksel ortam arasındaki etkileşim olan AR etkileşiminin tanıtılmasına yardımcı olabilir.
Düşük seviyeli teknik detaylar
Uyarlanabilir model görüntüleyici Makalesini oluşturmak için Three.js'yi kullandık. Three.js, geliştiricilerin Web GL'nin temel teknolojisine erişmesini kolaylaştırır ve Three.js, geliştiriciler için öğrenme maliyetini düşürmek için çok sayıda vaka, belge ve çok sayıda yanıt içerir.
Sorunsuz etkileşim ve dinamik efektler sağlamak için, etkiye katkıda bulunan şu faktörleri optimize ettik:
-
Düşük poligon modeli kullanılır;
-
Sahnedeki aydınlatma miktarını dikkatlice kontrol edin;
-
Cep telefonundaki gölge etkisini azalttı;
-
Simülatör kullanıcı arayüzünü oluştururken, efekti sınırsız çözünürlükle verimli bir şekilde oluşturmak için bir mesafe işlevine işaret eden bir gölgelendirici uygulayın.
Yineleme süresini hızlandırmak için, UX değişikliklerini tespit etmemize olanak tanıyan bir masaüstü AR simülatörü oluşturduk. Bu, değişikliklerin aynı anda yapılmasına izin verir. Simülatörden önce, değişiklikler ne kadar küçük olursa olsun, mobil cihaza yeniden yüklenmesi gerekir.Her oluşturma-itme-yükleme döngüsü 10 saniyeden fazla sürer. Simülatör ile ayarlamaları masaüstünde önizleyebilir ve tamamlandıktan sonra mobil cihaza aktarabiliriz.
Simülatör, masaüstü AR polyfill ve Three.js üzerine inşa edilmiştir. İndex.js dosyasında yorumlanmayan bir kod satırı varsa, gri bir ızgara ortamı sunacak ve gerçek dünyadaki fiziksel hareketin yerini alacak klavye ve fare kontrolleri ekleyecektir. Simülatör, Makalenin proje kitaplığında yer almaktadır.
Uzay giysisi modeli Poly'den (Google'ın 3B model kitaplığı) gelir. Poly'deki birçok modelin lisansı, yaratıcı tarafından yetkilendirildiği sürece kullanıcıların kopyalamasına veya yeniden tasarlamasına olanak tanıyan Creative Commons Attribution aracılığıyla verilir.
Makalenin 2D kısmı, hazır kütüphaneler ve web araçları üzerinedir. Düzen ve düzene ve genel temaya uyum sağlamak için Bootstrap'i kullandık (bu, geliştiricilerin farklı cihaz ekran boyutlarına yanıt verebilecek mükemmel web sitelerini kolayca oluşturmasına olanak tanır). Wikipedia ve Medium'a saygı göstermek için Bootswatch'ın Paper temasını benimsedik. Bağımlılıkları, sınıfları yönetmek ve adımlar oluşturmak için NPM, ES6, Babel ve Webpack kullandık.
Geleceğe bak
Leifeng.com'a göre, web AR büyük bir potansiyele sahiptir ve alışveriş, eğitim, eğlence vb. İçin kullanılabilir. Makale, bir dizi prototip oluşturma aracından biridir ve keşfedilmeye değer daha çok şey vardır: sanal 3B nesneleri gerçek dünyayla birleştirmek için ışık tahmini nasıl kullanılır ve modelin doğru konumuna anlatı UI ek açıklamaları nasıl eklenir. Web'de Mobil AR şu anda çok ilginç çünkü hala keşfedilmeye değer birçok şey var. Google'ın deneysel tarayıcısı hakkında daha fazla bilgi edinmek ve kendi prototipinizi oluşturmaya başlamak istiyorsanız, lütfen Google'ın geliştirici sayfasına gidin.
Google Lei Feng net derlemesi aracılığıyla
