Przygotowując się do konferencji Google I/O, chcieliśmy podkreślić niesamowite możliwości, jakie daje rzeczywistość rozszerzona (AR) w internecie. Chacmool to edukacyjna prezentacja internetowa, którą stworzyliśmy, aby pokazać, jak łatwo i łatwo AR w internecie może ułatwić użytkownikom korzystanie z nich. Dzięki internetowi AR jest wygodne i dostępne, gdziekolwiek jesteś.
Udostępniliśmy tę wersję demonstracyjną w Chrome Canary na urządzeniach z Androidem zgodnych z ARCore z Androidem O lub nowszym. Musisz też zainstalować ARCore.
Działanie tej funkcji opiera się na nowej ofercie WebXR (WebXR Hit Test API), która nie jest chroniona, dlatego pozostanie w wersji Canary, ponieważ będziemy testować i ulepszać nową propozycję interfejsu API we współpracy z innymi członkami grupy Immersive Web Community Group. Aby uzyskać dostęp do wersji demonstracyjnej, musisz włączyć 2 flagi w chrome://flags:
#webxr i #webxr-hit-test. Gdy włączysz je i ponownie uruchomisz Canary, możesz wypróbować wersję demonstracyjną Chacmool.
Doświadczenie AR Chacmool koncentruje się na edukacji. Wykorzystano wciągającą i interaktywną interaktywną atmosferę, aby użytkownicy mogli lepiej poznać starożytne rzeźby Chacmool. Użytkownicy mogą np. umieścić w swoim realnym rozmiarze posąg i rozejrzeć się pod różnymi kątami i z różnych odległości. Rzeczywistość AR pozwala użytkownikom swobodnie odkrywać, odkrywać i bawić się treściami – zupełnie tak jak w prawdziwym świecie. Gdy oglądasz obiekt w AR, a nie na płaskim ekranie 2D, możemy lepiej go zrozumieć, ponieważ widzimy go z wielu różnych kątów i odległości za pomocą bardzo intuicyjnego modelu interakcji: wędrowania wokół niego oraz przybliżania się lub oddalania. Dodatkowo bezpośrednio na rzeźbie są umieszczone adnotacje. Dzięki temu użytkownicy mogą w sposób bezpośredni powiązać to, co zostało opisane w tekście, z tym, gdzie znajdują się te elementy rzeźby.
Ta wersja demonstracyjna powstała w ciągu miesiąca, wykorzystując niektóre komponenty z pierwszej internetowej prezentacji AR zespołu WebXR – WebAR-Article. Informacje o rzeźbie pochodzą ze strony Google Arts & Culture, a model 3D został dostarczony przez partnera Google Arts & Culture, firmę CyArk. Aby przygotować model 3D do wyświetlania w internecie, do naprawienia modelu użyto kombinacji siatki i miksera siatki, a następnie przerobiliśmy jego siatkę w celu zmniejszenia rozmiaru pliku. Następnie użyto biblioteki Draco do kompresowania i dekompresowania geometrycznych siatek i chm punktowych 3D, aby zmniejszyć rozmiar pliku modelu z 44,3 megabajta do zaledwie 225 kilobajtów. Wreszcie skrypt internetowy służy do wczytywania modelu w wątku w tle, dzięki czemu strona pozostaje interaktywna podczas wczytywania i dekompresowania modelu. Operacja ta zwykle powoduje zacinanie się i zapobiega przewijaniu strony.
Nie ma wątpliwości, że programujemy na komputerach i wdrażamy na telefonach, dlatego za pomocą narzędzi do zdalnego debugowania w Chrome, które pozwalają badać środowisko, można szybko przeprowadzić cykl iteracyjny pomiędzy zmianami w kodzie. W Chrome są też świetne narzędzia dla programistów do debugowania i sprawdzania wydajności.
Sprawdzone metody dotyczące rzeczywistości rozszerzonej i VR
Większość wytycznych projektowych i inżynieryjnych dotyczących projektowania natywnych reklam AR ma zastosowanie do tworzenia stron AR w internecie. Jeśli chcesz dowiedzieć się więcej o ogólnych sprawdzonych metodach, przeczytaj niedawno opublikowane wytyczne dotyczące projektowania elementów AR.
W szczególności przy projektowaniu AR w przeglądarce najlepiej jest korzystać z całego ekranu (tzn. korzystać z trybu pełnoekranowego, tak jak w przypadku odtwarzaczy na urządzeniach mobilnych). Zapobiega to przewijaniu widoku i przyciąganiu uwagi innych elementów strony internetowej. Przejście do AR powinno być płynne i płynne – obraz z kamery powinien być widoczny przed uruchomieniem AR (np. gdy narysujesz siatkę obrotową). W przypadku AR w przeglądarce internetowej deweloperzy nie mają jeszcze dostępu do kadru, funkcji szacowania oświetlenia, elementów zakotwiczonych ani samolotów (w przeciwieństwie do wersji natywnej), więc projektanci i deweloperzy powinni pamiętać o tych ograniczeniach podczas projektowania internetowego środowiska AR.
Ponadto ze względu na różnorodność urządzeń używanych do przeglądania stron internetowych ważne jest także optymalizowanie wydajności w celu zapewnienia użytkownikom jak najlepszych wrażeń. Dlatego: ogranicz liczbę bloków wielobocznych, postaraj się unikać światła, jeśli to możliwe, w miarę możliwości obliczać cienie i minimalizować liczbę wywołań rysowania. W przypadku wyświetlania tekstu w AR stosuj nowoczesne techniki renderowania tekstu (tzn. oparte na podpisanej odległości), aby zapewnić, że tekst jest wyraźny i czytelny z każdej odległości i pod każdym kątem. Umieszczając adnotacje, traktuj spojrzenie użytkownika jak dodatkowe dane wejściowe i wyświetlaj adnotacje tylko wtedy, gdy są istotne (np. adnotacje dotyczące bliskości, które wyświetlają się, gdy użytkownik skupia się na interesującym obszarze).
Ponieważ są to treści internetowe, warto zastosować również ogólne sprawdzone metody projektowania witryn. Witryna powinna działać prawidłowo na wszystkich urządzeniach (komputer, tablet, telefon komórkowy, zestaw słuchawkowy itp.). Obsługa progresywnego ulepszania oznacza również projektowanie na urządzenia inne niż AR (np. wyświetlanie modeli 3D na urządzeniach innych niż AR).
Jeśli interesuje Cię tworzenie własnych internetowych funkcji AR, tutaj znajdziesz wpis z dodatkowymi informacjami o tym, jak samodzielnie zacząć tworzyć elementy AR w internecie. (Możesz też sprawdzić źródło prezentacji Chacmool). Cały czas pracujemy nad interfejsem WebXR Device API. Chętnie dowiemy się, jaka jest jego obsługa we wszystkich typach aplikacji i przypadkach użycia. Odwiedź GitHuba i dołącz do rozmowy.