Przygotowując się do konferencji Google I/O, chcieliśmy pokazać, jakie ciekawe możliwości daje rzeczywistość rozszerzona (AR) w internecie. Chacmool to edukacyjna prezentacja internetowa, którą stworzyliśmy, aby pokazać, jak łatwo można za pomocą rzeczywistości rozszerzonej w internecie zachęcić użytkowników do korzystania z tej technologii. Internet sprawia, że AR jest wygodny i dostępny wszędzie.
Demo jest teraz dostępne w Chrome Canary na urządzeniach z Androidem O lub nowszym zgodnych z ARCore. Musisz też zainstalować ARCore.
Te zmiany opierają się na nowej propozycji WebXR (WebXR Hit Test API), dlatego są oznaczone flagą i mają pozostać w wersji Canary, dopóki będziemy testować i doskonalić nową propozycję interfejsu API z innymi członkami grupy Immersive Web Community. Aby uzyskać dostęp do wersji demonstracyjnej, musisz włączyć 2 flagi w sekcjach chrome://flags:
#webxr i #webxr-hit-test. Gdy włączysz te opcje i ponownym uruchomieniu Canary, możesz sprawdzić wersję demonstracyjną Chacmool.
Funkcja AR Chacmool ma charakter edukacyjny i wykorzystuje immersyjny i interakcyjny charakter AR, aby pomóc użytkownikom dowiedzieć się więcej o starożytnych rzeźbach Chacmool. Użytkownicy mogą umieścić w swojej rzeczywistości posąg w naturalnej wielkości i przesuwać się wokół niego, aby oglądać go pod różnymi kątami i z różnych odległości. Wciągający charakter rzeczywistości rozszerzonej pozwala użytkownikom swobodnie odkrywać i bawić się treściami, tak jak w rzeczywistym świecie. Gdy oglądamy obiekt w AR, w przeciwieństwie do oglądania go na płaskim ekranie 2D, możemy lepiej zrozumieć, na co patrzymy, ponieważ możemy go oglądać pod wieloma różnymi kątami i odległościami, korzystając z bardzo intuicyjnego modelu interakcji: poruszając się wokół obiektu i fizycznie zbliżając się do niego lub oddalając. W ramach tej funkcji znajdziesz też adnotacje umieszczone bezpośrednio na rzeźbie. Dzięki temu użytkownicy mogą bezpośrednio powiązać opisany w tekście element z jego położeniem na rzeźbie.
Ta wersja demonstracyjna została przygotowana w ciągu około miesiąca, wykorzystując niektóre komponenty z pierwszego internetowego dema AR zespołu WebXR, WebAR-Article. Informacje o rzeźbie pochodzą z strony Google Arts & Culture, a model 3D został udostępniony przez partnera Google Arts & Culture, firmę CyArk. Aby przygotować model 3D na potrzeby internetu, wykorzystano programy Meshlab i Mesh Mixer do naprawy modelu oraz skompresowania jego siatki w celu zmniejszenia rozmiaru pliku. Następnie wykorzystano Draco, czyli bibliotekę do kompresji i dekompresji geometrycznych siatek 3D oraz chmur punktów, aby zmniejszyć rozmiar pliku modelu z 44,3 MB do zaledwie 225 KB. W końcu do wczytania modelu na wątku tła służy proces wątek, dzięki któremu strona pozostaje interaktywna podczas wczytywania i rozpakowywania modelu. Ta operacja zwykle powoduje zacinanie i uniemożliwia przewijanie strony.
Nie możemy przecenić tego, że ponieważ pracowaliśmy nad wersją na komputery, a na telefony ją wdrażaliśmy, korzystaliśmy z narzędzi do zdalnego debugowania w Chrome, aby sprawdzać działanie aplikacji. Dzięki temu mogliśmy szybko iterować między zmianami w kodzie. W Chrome są też świetne narzędzia dla programistów do debugowania i sprawdzania wydajności.
Sprawdzone metody dotyczące doświadczeń AR/VR
Większość wytycznych projektowania i inżynierii na potrzeby tworzenia natywnych doświadczeń AR ma zastosowanie do tworzenia doświadczeń AR w internecie. Jeśli chcesz dowiedzieć się więcej o ogólnych sprawdzonych metodach, zapoznaj się z niedawno opublikowanymi wytycznymi dotyczącymi projektowania rozszerzonej rzeczywistości.
Szczególnie podczas projektowania AR w internecie najlepiej jest używać całego ekranu (czyli włączyć tryb pełnoekranowy w sposób podobny do tego, w jaki włącza się pełnoekranowy odtwarzacz wideo na urządzeniu mobilnym). Zapobiega to przewijaniu widoku przez użytkowników lub rozpraszaniu ich przez inne elementy na stronie internetowej. Przejście do AR powinno być płynne i bezproblemowe.Przed rozpoczęciem korzystania z AR należy wyświetlić widok z kamery (np. przez narysowanie siatki). Ważne jest, aby pamiętać, że w przypadku AR w przeglądarce deweloperzy nie mają dostępu do ramki aparatu, szacowania oświetlenia, kotwic ani płaszczyzn (jeszcze), tak jak w przypadku natywnych AR. Dlatego projektanci i deweloperzy powinni mieć na uwadze te ograniczenia podczas projektowania AR w przeglądarce.
Ponadto ze względu na różnorodność urządzeń używanych do przeglądania stron internetowych ważne jest, aby optymalizować wydajność, aby zapewnić użytkownikom jak najlepsze wrażenia. Dlatego: utrzymaj niską liczbę wielokątów, staraj się używać jak najmniejszej liczby świateł, w miarę możliwości obliczaj wcześniej cienie i minimalizuj wywołania rysowania. Wyświetlając tekst w rozszerzonej rzeczywistości, używaj nowoczesnych technik renderowania tekstu (np. opartych na podpisanym polu odległości) w celu zapewnienia, że tekst jest wyraźny i czytelny z dowolnej odległości i pod dowolnym kątem. Podczas umieszczania adnotacji weź pod uwagę spojrzenie użytkownika jako kolejny element wejściowy i wyświetlaj adnotacje tylko wtedy, gdy są one istotne (np. adnotacje oparte na odległości, które wyświetlają się, gdy użytkownik skupia się na obszarze zainteresowania).
Ponieważ te treści są dostępne w internecie, ważne jest też stosowanie ogólnych sprawdzonych metod projektowania dla sieci. Zadbaj o to, aby witryna zapewniała dobre wrażenia na różnych urządzeniach (komputerach, tabletach, urządzeniach mobilnych, goglach itp.). Obsługa ulepszania progresy oznacza też projektowanie na urządzenia bez obsługi AR (np. wyświetlanie przeglądarki modeli 3D na urządzeniach bez AR).
Jeśli chcesz tworzyć własne AR w internecie, przeczytaj ten artykuł, w którym znajdziesz więcej informacji o tym, jak zacząć tworzyć AR w internecie. (możesz też sprawdzić źródło wersji demonstracyjnej Chamcool). Interfejs WebXR Device API jest aktywnie rozwijany. Bardzo cenimy opinie użytkowników, które pomogą nam zapewnić obsługę wszystkich typów aplikacji i przypadków użycia. Wejdź na GitHub i dołącz do dyskusji!