Inizia a utilizzare le API Streetscape Geometry e Rooftop Anchors in ARCore

1. Prima di iniziare

ARCore è il framework di Google per la creazione di esperienze di realtà aumentata (AR) sugli smartphone. Le API Geospatial Streetscape Geometry e Rooftop Anchor aiutano le tue esperienze AR a comprendere gli edifici intorno agli utenti.

In questo codelab, creerai un'app AR che visualizza la geometria del paesaggio urbano nella tua zona e ti consente di decorarne i lati. Poi, usi gli ancoraggi sul tetto per aggiungere una decorazione alla parte superiore dei tetti intorno a te.

Prerequisiti

• Conoscenza di base della AR
• Conoscenza di base dell'API ARCore Geospatial

Obiettivi didattici

• Come configurare un progetto Google Cloud che possa utilizzare le API ARCore Geospatial.
• Come ottenere la geometria di streetscape dall'API Geospatial.
• Come visualizzare edifici e terreni ottenuti dalla geometria di streetscape.
• Come eseguire calcoli di base sui poligoni ottenuti.
• Come eseguire un test di riscontro sulla geometria.
• Come utilizzare gli ancoraggi sul tetto per collegare i contenuti alla parte superiore degli edifici.

Che cosa ti serve

• Un dispositivo Android ARCore supportato collegato con un cavo USB alla macchina di sviluppo e configurato con il debug USB.
• Google Play Services per AR 1.37 o versioni successive installato sul dispositivo di sviluppo Android.
• Android Studio installato e configurato per creare app per Android.

2. Configura l'ambiente

Per utilizzare le API Geospatial con Kotlin e Android Studio, devi disporre di un progetto Google Cloud e del nostro progetto iniziale.

Configura un progetto Google Cloud

L'API ARCore Geospatial si connette a Google Cloud per fornire informazioni di localizzazione dal Visual Positioning System (VPS) di Google nelle aree coperte da Google Street View.

Per utilizzare questo server nel tuo progetto:

1. Crea un progetto in Google Cloud.
2. Nel campo Nome progetto, inserisci un nome appropriato, ad esempio ARCore Geospatial API project, e scegli una località.
3. Fai clic su Crea.
4. Nella console Google Cloud, nella pagina di selezione del progetto, fai clic su Crea progetto.
5. Fai clic sul seguente link per visualizzare l'API ARCore per questo progetto e fai clic su Attiva:
   Attiva l'API ARCore
6. Crea una chiave API per il tuo progetto:
   1. In API e servizi, seleziona Credenziali.
   2. Fai clic su Crea credenziali e seleziona Chiave API.
   3. Prendi nota della chiave perché ti servirà in seguito.

Hai creato un progetto Google Cloud con autorizzazione tramite chiave API e sei pronto per utilizzare l'API Geospatial nel progetto di esempio.

Configurare Android Studio

Per iniziare a utilizzare l'API Geospatial, abbiamo fornito un progetto iniziale che include le basi di un progetto ARCore integrato con l'API Geospatial.

Per configurare Android Studio:

1. Apri Android Studio ed esegui una delle seguenti operazioni:
   • Se hai già aperto un progetto, fai clic su File > Nuovo > Progetto dal controllo della versione.
   • Se visualizzi la finestra Benvenuto in Android Studio, fai clic su Ottieni da VCS.
2. Seleziona Git e inserisci https://github.com/google-ar/codelab-streetscape-geometry-rooftop-anchors.git per importare il progetto.

Integrare la chiave API con il progetto Android Studio

Per associare la chiave API di Google Cloud al tuo progetto:

1. In Android Studio, fai clic su app > src e doppio clic su AndroidManifest.xml.
2. Trova le seguenti voci meta-data:

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

3. Sostituisci il segnaposto API_KEY con la chiave API che hai creato nel tuo progetto Google Cloud. Il valore memorizzato in com.google.android.ar.API_KEY autorizza questa app a utilizzare l'API Geospatial.

Verificare il progetto

• Per verificare il progetto, esegui l'app sul dispositivo di sviluppo. Nella parte superiore dello schermo dovresti vedere una visualizzazione della videocamera e informazioni di debug geospaziali. Dovresti anche vedere pulsanti e controlli che sembrano non avere funzionalità; programmerai questa funzionalità nel tuo progetto durante questo codelab.

Attenzione:se l'API Geospatial non viene inizializzata, assicurati che la chiave API sia stata inserita nel file AndroidManifest.xml esattamente come viene visualizzata in Google Cloud.

3. Visualizzare i dati di geometria di streetscape

Dopo aver confermato che l'API Geospatial funziona sul tuo dispositivo, ottieni la geometria streetscape dall'API Geospatial.

Attiva geometria streetscape

1. Nel file StreetscapeGeometryActivity.kt, trova la seguente riga:

   // TODO: Enable Streetscape Geometry.
   

2. Dopo questa riga, attiva la modalità streetscape-geometry:

   streetscapeGeometryMode = Config.StreetscapeGeometryMode.ENABLED
   

   Quando sono attivi la modalità API Geospatial e streetscape-geometry, la tua app può ricevere informazioni su streetscape-geometry relative all'utente.

Ottenere la geometria dello streetscape

1. Nel file StreetscapeGeometryActivity.kt, trova la seguente riga:

   // TODO: Obtain Streetscape Geometry.
   

2. Dopo questa riga, ottieni la geometria dello streetscape recuperando tutti gli oggetti Trackable e filtrando in base a StreetscapeGeometry:

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

   Utilizzi queste geometrie in una semplice visualizzazione fornita nel progetto di esempio. Questa visualizzazione mostra ogni edificio o poligono del terreno con un colore diverso.
3. Nella riga successiva, aggiungi il seguente codice:

   streetscapeGeometryRenderer.render(render, streetscapeGeometry)
   

4. Esegui l'app e visita un edificio nella tua zona.
5. Al termine della localizzazione geospaziale, tocca Impostazioni e attiva la visualizzazione della geometria streetscape.
6. Guarda un edificio in AR. Ogni edificio segmentato ha il proprio colore e vengono visualizzati gli enum Quality e Type della geometria più centrale.

Attenzione:se non riesci a visualizzare la geometria dello streetscape o non vedi alcuna decorazione quando tocchi lo schermo, segui questi passaggi per ripristinare il checkpoint del codelab:

1. In Android Studio, fai clic su VCS > Git > Branches > Checkout > step-3. Si torna al terzo passaggio.
2. Aggiungi la chiave API al file AndroidManifest.xml come descritto nelle istruzioni di configurazione.

4. Esegui un test di hit con i dati di geometria streetscape

Ora che puoi vedere la geometria dello streetscape, puoi utilizzare un test di hit per decorare l'edificio. Un test di riscontro trova un'intersezione tra la geometria virtuale e un raggio. Utilizzi un test di hit per trovare la geometria su cui tocca un utente.

Eseguire un test di impatto

In questa sezione, posiziona una stella sulla facciata dell'edificio quando l'utente tocca la sua geometria. Lo fai con un test di hit dal punto di vista dell'utente nel mondo e registri gli oggetti AR che incontra durante l'uscita. Quindi, utilizzi queste informazioni per verificare se l'utente ha toccato un poligono di un edificio.

1. Nel file StreetscapeCodelabRenderer.kt, trova la seguente riga:

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

2. Dopo questa riga, aggiungi il seguente codice:

   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
   

   Questo codice utilizza le coordinate del centro per trovare una geometria streetscape che sia un edificio. Utilizzi questo risultato per aggiungere decorazioni.

Aggiungere una decorazione a forma di stella quando si tocca

1. Nel file StreetscapeCodelabRenderer.kt, trova la seguente riga:

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

2. Dopo questa riga, aggiungi il seguente codice:

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

   La classe ObjectPlacementHelper determina una posizione appropriata per inserire la stella esaminando la posa del colpo. L'oggetto starAnchors viene utilizzato per visualizzare le stelle nella visualizzazione AR.

Prova

1. Esegui l'app e visita un edificio nella tua zona.
2. Al termine della localizzazione geospaziale, punta la videocamera verso l'edificio e tocca lo schermo. Vedi una stella apparire sull'edificio al centro dello schermo.

Attenzione:se non riesci a vedere la geometria dello streetscape o non vedi alcuna decorazione quando tocchi lo schermo, segui questi passaggi:

1. In Android Studio, fai clic su VCS > Git > Branches > Checkout > step-4.
2. Aggiungi la chiave API al file AndroidManifest.xml come descritto nelle istruzioni di configurazione.

5. Utilizzare i dati di ancoraggio sul tetto

Infine, utilizzi i punti di ancoraggio sul tetto per aggiungere decorazioni alla parte superiore dell'edificio. Gli ancoraggi sul tetto ti aiutano ad aggiungere ancoraggi AR alla parte superiore degli edifici con una latitudine e una longitudine. Utilizzi questi ancoraggi per attaccare i fumetti agli edifici intorno all'utente.

Aggiungere comportamenti alla modalità a palloncino

Il progetto ha due modalità di posizionamento degli asset: la modalità a girasole che hai già utilizzato e la modalità a palloncino.

Per programmare il comportamento della modalità a palloncino:

1. Nel file StreetscapeCodelabRenderer.kt, trova la seguente riga:

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

2. Utilizza la posa di successo per creare un punto ideale per il tuo palloncino:

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

3. Converti la variabile transformedPose in una posa geospaziale:

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

4. Crea un ancoraggio sul tetto con la latitudine e la longitudine trasformate:

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

Prova

1. Esegui l'app e visita un edificio nella tua zona.
2. Al termine della localizzazione geospaziale, passa alla modalità a fumetto e tocca un edificio. Vedi apparire una mongolfiera sopra l'edificio.

Se non riesci a replicare il comportamento previsto, segui questi passaggi:

1. In Android Studio, fai clic su VCS > Git > Branches > Checkout > step-5.
2. Aggiungi la chiave API al file AndroidManifest.xml come descritto nelle istruzioni di configurazione.

6. Conclusione

Complimenti! Hai creato un'app AR che visualizza la geometria del paesaggio urbano nella tua zona e ti consente di decorarne i lati con delle stelle. Hai anche utilizzato gli ancoraggi sui tetti per aggiungere un palloncino sulla cima dei tetti intorno a te.

Scopri di più

• Guida per gli sviluppatori di Streetscape Geometry
• Guida per gli sviluppatori di ancore sul tetto
• Panoramica dell'API Geospatial