Pierwsze kroki z interfejsami Streetscape Geometry i Rooftop anchors API w ARCore

1. Zanim zaczniesz

ARCore to platforma Google do tworzenia na smartfonach projektów rzeczywistości rozszerzonej (AR). Interfejsy Geospatial Streetscape Geometry API i Rooftop anchor API pomagają aplikacjom AR rozpoznawać budynki w pobliżu użytkowników.

W tym laboratorium kodowania utworzysz aplikację AR, która wizualizuje geometrię ulic w Twojej okolicy i umożliwia dekorowanie jej boków. Następnie za pomocą kotwic dachowych możesz dodawać dekoracje na dachach budynków w Twojej okolicy.

Wymagania wstępne

• Podstawowa wiedza na temat AR
• Podstawowa wiedza o interfejsie ARCore Geospatial API

Czego się nauczysz

• Jak skonfigurować projekt Google Cloud, który może korzystać z interfejsów ARCore Geospatial API.
• Jak uzyskać geometrię krajobrazu ulicznego z interfejsu Geospatial API.
• Jak wizualizować budynki i tereny uzyskane z geometrii widoku ulicy.
• Jak wykonywać podstawowe obliczenia na uzyskanych wielokątach.
• Jak przeprowadzić test trafienia na geometrii.
• Jak używać kotwic dachowych do przymocowywania treści do dachów budynków.

Czego potrzebujesz

• Obsługiwane urządzenie z Androidem i ARCore podłączone kablem USB do komputera deweloperskiego i skonfigurowane z debugowaniem USB.
• Na urządzeniu deweloperskim z Androidem musi być zainstalowana usługa Google Play dla AR w wersji 1.37 lub nowszej.
• Android Studio zainstalowane i skonfigurowane do tworzenia aplikacji na Androida.

2. Konfigurowanie środowiska

Aby korzystać z interfejsów Geospatial API w Kotlinie i Android Studio, potrzebujesz projektu Google Cloud i naszego projektu początkowego.

Konfigurowanie projektu Google Cloud

ARCore Geospatial API łączy się z Google Cloud, aby dostarczać informacje o lokalizacji z systemu pozycjonowania wizualnego (VPS) Google na obszarach objętych Google Street View.

Aby użyć tego serwera w projekcie, wykonaj te czynności:

1. Utwórz projekt w Google Cloud.
2. W polu Nazwa projektu wpisz odpowiednią nazwę, np. ARCore Geospatial API project, i wybierz dowolną lokalizację.
3. Kliknij Utwórz.
4. W konsoli Google Cloud na stronie wyboru projektu kliknij Utwórz projekt.
5. Aby wyświetlić interfejs ARCore API dla tego projektu, kliknij ten link i kliknij Włącz:
   Włącz interfejs ARCore API
6. Utwórz klucz interfejsu API dla projektu:
   1. W sekcji Interfejsy API i usługi wybierz Dane logowania.
   2. Kliknij Utwórz dane logowania i wybierz Klucz interfejsu API.
   3. Zapisz klucz, ponieważ będzie Ci później potrzebny.

Masz utworzony projekt Google Cloud z autoryzacją za pomocą klucza interfejsu API i możesz używać interfejsu Geospatial API w projekcie przykładowym.

Konfigurowanie Androida Studio

Aby ułatwić Ci rozpoczęcie pracy z interfejsem Geospatial API, udostępniliśmy projekt startowy, który zawiera podstawy projektu ARCore zintegrowanego z interfejsem Geospatial API.

Aby skonfigurować Android Studio, wykonaj te czynności:

1. Otwórz Android Studio i wykonaj jedną z tych czynności:
   • Jeśli masz już otwarty projekt, kliknij Plik > Nowy > Projekt z systemu kontroli wersji.
   • Jeśli zobaczysz okno Witamy w Androidzie Studio, kliknij Pobierz z VCS.
2. Wybierz Git i wpisz https://github.com/google-ar/codelab-streetscape-geometry-rooftop-anchors.git, aby zaimportować projekt.

Zintegruj klucz interfejsu API z projektem Android Studio.

Aby powiązać klucz interfejsu API z Google Cloud z projektem, wykonaj te czynności:

1. W Android Studio kliknij app > src i dwukrotnie kliknij AndroidManifest.xml.
2. Znajdź te wpisy meta-data:

   <meta-data
       android:name="com.google.android.ar.API_KEY"
       android:value="API_KEY" />
   

3. Zastąp symbol zastępczy API_KEY kluczem API utworzonym w projekcie Google Cloud. Wartość przechowywana w com.google.android.ar.API_KEY autoryzuje tę aplikację do korzystania z interfejsu Geospatial API.

Weryfikacja projektu

• Aby zweryfikować projekt, uruchom aplikację na urządzeniu deweloperskim. U góry ekranu powinien być widoczny widok z kamery i informacje o debugowaniu geoprzestrzennym. Powinny być też widoczne przyciski i elementy sterujące, które wydają się nie działać. Ich funkcjonalność zaprogramujesz w projekcie w trakcie tego laboratorium.

Ostrzeżenie: jeśli interfejs Geospatial API nie zostanie zainicjowany, sprawdź, czy klucz interfejsu API został wstawiony do pliku AndroidManifest.xml dokładnie tak, jak jest wyświetlany w Google Cloud.

3. Wizualizacja danych geometrii widoku ulicy

Po potwierdzeniu, że interfejs Geospatial API działa na Twoim urządzeniu, możesz pobrać z niego geometrię widoku ulicy.

Włączanie geometrii krajobrazu

1. W pliku StreetscapeGeometryActivity.kt znajdź ten wiersz:

   // TODO: Enable Streetscape Geometry.
   

2. Po tej linii włącz tryb geometrii widoku ulicy:

   streetscapeGeometryMode = Config.StreetscapeGeometryMode.ENABLED
   

   Gdy interfejs Geospatial API i tryb geometrii krajobrazu ulicznego są włączone, aplikacja może otrzymywać informacje o geometrii krajobrazu ulicznego w pobliżu użytkownika.

Uzyskiwanie geometrii krajobrazu ulicy

1. W pliku StreetscapeGeometryActivity.kt znajdź ten wiersz:

   // TODO: Obtain Streetscape Geometry.
   

2. Po tej linii uzyskaj geometrię widoku ulicy, pobierając wszystkie obiekty Trackable i filtrując je według StreetscapeGeometry:

   val streetscapeGeometry = session.getAllTrackables(StreetscapeGeometry::class.java)
   

   Używasz tych geometrii w prostej wizualizacji, która jest dostępna w projekcie przykładowym. Wizualizacja ta wyświetla każdy budynek lub wielokąt terenu w innym kolorze.
3. W następnym wierszu dodaj ten kod:

   streetscapeGeometryRenderer.render(render, streetscapeGeometry)
   

4. Uruchom aplikację i odwiedź budynek w swojej okolicy.
5. Po zakończeniu lokalizacji geoprzestrzennej kliknij  Ustawienia i włącz wizualizację geometrii krajobrazu ulicznego.
6. Obejrzyj budynek w AR. Każdy segmentowany budynek ma swój kolor, a wartości wyliczeniowe Quality i Type geometrii znajdującej się w centrum są wyświetlane.

Uwaga: jeśli nie widzisz geometrii widoku ulicy lub po kliknięciu ekranu nie pojawia się żadna dekoracja, wykonaj te czynności, aby zresetować stan z punktu kontrolnego w codelabie:

1. W Android Studio kliknij VCS > Git > Branches > Checkout > step-3 (System kontroli wersji > Git > Gałęzie > Wyewidencjonuj > krok 3). Spowoduje to powrót do kroku 3.
2. Dodaj klucz interfejsu API do pliku AndroidManifest.xml zgodnie z instrukcjami konfiguracji.

4. Przeprowadzanie testu trafienia za pomocą danych geometrii widoku ulicy

Teraz, gdy widzisz geometrię widoku ulicy, możesz użyć testu trafienia, aby ozdobić budynek. Test trafienia wykrywa przecięcie między geometrią wirtualną a promieniem. Test trafienia służy do znajdowania geometrii, w którą użytkownik kliknie.

Przeprowadzanie testu trafienia

W tej sekcji umieścisz gwiazdę na fasadzie budynku, gdy użytkownik kliknie jego geometrię. W tym celu wykonujesz test trafienia z perspektywy użytkownika w świecie i rejestrujesz, które obiekty AR napotka na swojej drodze. Następnie używasz tych informacji, aby sprawdzić, czy użytkownik kliknął wielokąt budynku.

1. W pliku StreetscapeCodelabRenderer.kt znajdź ten wiersz:

   // TODO: determine the Streetscape Geometry at the center of the viewport
   

2. Po tym wierszu dodaj ten kod:

   val centerHits = frame.hitTest(centerCoords[0], centerCoords[1])
   val hit = centerHits.firstOrNull {
     val trackable = it.trackable
     trackable is StreetscapeGeometry && trackable.type == StreetscapeGeometry.Type.BUILDING
   } ?: return
   

   Ten kod używa współrzędnych środka do znalezienia geometrii widoku ulicy, która jest budynkiem. Ten wynik służy do dodawania dekoracji.

Dodawanie gwiazdki po kliknięciu

1. W pliku StreetscapeCodelabRenderer.kt znajdź ten wiersz:

   // TODO: Create an anchor for a star, and add it to the starAnchors object.
   

2. Po tym wierszu dodaj ten kod:

   val transformedPose = ObjectPlacementHelper.createStarPose(hit.hitPose)
   val anchor = hit.trackable.createAnchor(transformedPose)
   starAnchors.add(anchor)
   

   Klasa ObjectPlacementHelper określa odpowiednie miejsce na umieszczenie gwiazdki, analizując pozycję trafienia. Obiekt starAnchors służy do renderowania gwiazd w widoku AR.

Wypróbuj

1. Uruchom aplikację i odwiedź budynek w swojej okolicy.
2. Po zakończeniu lokalizacji geoprzestrzennej skieruj aparat na budynek i kliknij ekran. Na środku ekranu na budynku pojawia się gwiazdka.

Ostrzeżenie: jeśli nie widzisz geometrii widoku ulicy lub po kliknięciu ekranu nie pojawia się żadna dekoracja, wykonaj te czynności:

1. W Android Studio kliknij VCS > Git > Branches > Checkout > step-4 (System kontroli wersji > Git > Gałęzie > Wyewidencjonuj > krok 4).
2. Dodaj klucz interfejsu API do pliku AndroidManifest.xml zgodnie z instrukcjami konfiguracji.

5. Korzystanie z danych o kotwicach na dachu

Na koniec użyj kotwic dachowych, aby dodać dekoracje na szczycie budynku. Kotwice na dachu pomagają przyłączać kotwice AR do dachów budynków za pomocą szerokości i długości geograficznej. Używasz tych punktów, aby przyczepiać balony do budynków w pobliżu użytkownika.

Dodawanie zachowań do trybu balonu

Projekt ma 2 tryby umieszczania komponentów: tryb słonecznika, którego już używasz, i tryb balonu.

Aby zaprogramować działanie w trybie balonu, wykonaj te czynności:

1. W pliku StreetscapeCodelabRenderer.kt znajdź ten wiersz:

   // TODO: Create an anchor for a balloon and add it to the balloonAnchors object.
   

2. Użyj pozycji uderzenia, aby utworzyć świetne miejsce dla balonu:

   val transformedPose = ObjectPlacementHelper.createBalloonPose(frame.camera.pose, hit.hitPose)
   

3. Przekształć zmienną transformedPose w pozycję geoprzestrzenną:

   val earth = session?.earth ?: return
   val geospatialPose = earth.getGeospatialPose(transformedPose)
   

4. Utwórz punkt zakotwiczenia na dachu z przekształconymi współrzędnymi geograficznymi:

   earth.resolveAnchorOnRooftopAsync(
     geospatialPose.latitude, geospatialPose.longitude,
     0.0,
     transformedPose.qx(), transformedPose.qy(), transformedPose.qz(), transformedPose.qw()
   ) { anchor, state ->
     if (!state.isError) {
       balloonAnchors.add(anchor)
     }
   }
   

Wypróbuj

1. Uruchom aplikację i odwiedź budynek w swojej okolicy.
2. Po zakończeniu lokalizacji geoprzestrzennej przełącz się na tryb balonu i kliknij budynek. Nad budynkiem pojawia się balon.

Jeśli nie możesz odtworzyć oczekiwanego działania, wykonaj te czynności:

1. W Android Studio kliknij VCS > Git > Branches > Checkout > step-5.
2. Dodaj klucz interfejsu API do pliku AndroidManifest.xml zgodnie z instrukcjami konfiguracji.

6. Podsumowanie

Gratulacje! Masz aplikację AR, która wizualizuje geometrię ulic w Twojej okolicy i pozwala ozdabiać je gwiazdami. Używasz też kotwic na dachu, aby dodawać balony na szczytach budynków w okolicy.

Więcej informacji

• Przewodnik dla programistów dotyczący geometrii widoku ulicy
• Przewodnik dla programistów dotyczący kotwic na dachu
• Omówienie interfejsu Geospatial API