Comienza a usar las APIs de Streetscape Geometry y Rooftop en ARCore

Comienza a usar las APIs de Streetscape Geometry y Rooftop en ARCore

Acerca de este codelab

Última actualización: abr 20, 2023

Escrito por Dereck Bridie

1. Antes de comenzar

ARCore es el framework de Google para crear experiencias de realidad aumentada (RA) en smartphones. Las APIs de Streetscape Geometry y Rooftop de Geospatial ayudan a tus experiencias de RA a comprender los edificios alrededor de tus usuarios.

En este codelab, crearás una app de RA que visualice la geometría del paisaje urbano de tu zona y te permita decorar sus lados. Luego, usarás anclas de techo para agregar una decoración a la parte superior de los techos que te rodean.

Requisitos previos

• Conocimientos básicos de RA
• Conocimientos básicos de la API de ARCore Geospatial

Qué aprenderás

• Cómo configurar un proyecto de Google Cloud en el que se puedan usar las APIs de ARCore Geospatial
• Cómo obtener la geometría del paisaje urbano a partir de la API de Geospatial
• Cómo visualizar edificios y terrenos obtenidos a partir de la geometría del paisaje urbano
• Cómo realizar cálculos básicos sobre los polígonos obtenidos
• Cómo realizar una prueba de posicionamiento en la geometría
• Cómo usar anclas de techo para fijar contenido a la parte superior de los edificios

Requisitos

• Tener un dispositivo Android compatible con ARCore conectado mediante cable USB a tu máquina de desarrollo y configurado con depuración por USB
• Tener instalado Servicios de Google Play para RA versión 1.37 o posterior en el dispositivo de desarrollo Android
• Tener instalado y configurado Android Studio para compilar apps para Android

2. Configura tu entorno

Para usar las APIs de Geospatial con Kotlin y Android Studio, necesitas un proyecto de Google Cloud y nuestro proyecto inicial.

Configura un proyecto de Google Cloud

La API de ARCore Geospatial se conecta con Google Cloud para proporcionar información de localización del sistema de posicionamiento visual (VPS) de Google en las zonas cubiertas por Google Street View.

Para usar este servidor en tu proyecto, sigue estos pasos:

1. Crea un proyecto en Google Cloud.
2. En el campo Nombre del proyecto, escribe un nombre apropiado como ARCore Geospatial API project y elige una ubicación.
3. Haz clic en Crear.
4. En la consola de Google Cloud, en la página del selector de proyectos, haz clic en Crear proyecto.
5. Haz clic en el siguiente vínculo y ve la API de ARCore para este proyecto. Luego, haz clic en Habilitar:
   Habilitar API de ARCore
6. Crea una clave de API para tu proyecto:
   1. En APIs y servicios, selecciona Credenciales.
   2. Haz clic en Crear credenciales y selecciona Clave de API.
   3. Anota la clave porque la necesitarás más adelante.

Creaste un proyecto de Google Cloud con autorización de clave de API. Ahora puedes usar la API de Geospatial en el proyecto de muestra.

Configura Android Studio

Para comenzar a usar la API de Geospatial, proporcionamos un proyecto inicial que incluye los conceptos básicos de un proyecto de ARCore integrado en la API de Geospatial.

Para configurar Android Studio, sigue estos pasos:

1. Abre Android Studio y realiza una de las siguientes acciones:
   • Si ya tienes un proyecto abierto, haz clic en File > New > Project from version control.
   • Si ves la ventana Welcome to Android Studio, haz clic en Get from VCS.
2. Selecciona Git y, luego, ingresa https://github.com/google-ar/codelab-streetscape-geometry-rooftop-anchors.git para importar el proyecto.

Integra la clave de API al proyecto de Android Studio

Para asociar la clave de API de Google Cloud al proyecto, sigue estos pasos:

1. En Android Studio, haz clic en app > src y haz doble clic en AndroidManifest.xml.
2. Busca las siguientes entradas de meta-data:

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

3. Reemplaza el marcador de posición API_KEY con la clave de API que creaste en tu proyecto de Google Cloud. El valor almacenado en com.google.android.ar.API_KEY autoriza a esta app a usar la API de Geospatial.

Verifica tu proyecto

• Para verificar tu proyecto, ejecuta la app en tu dispositivo de desarrollo. En la parte superior de la pantalla, deberías observar una vista de cámara, además de información de depuración geoespacial. También deberías ver botones y controles que parecen no tener funcionalidad; tú programarás la funcionalidad en el proyecto a lo largo de este codelab.

Precaución: Si la API de Geospatial no se inicializa, asegúrate de que la clave de API se haya insertado en tu archivo AndroidManifest.xml exactamente como se muestra en Google Cloud.

3. Visualiza los datos de geometría del paisaje urbano

Después de confirmar que la API de Geospatial funciona en tu dispositivo, obtienes la geometría del paisaje urbano desde la API.

Habilita la geometría del paisaje urbano

1. En el archivo StreetscapeGeometryActivity.kt, busca la siguiente línea:

   // TODO: Enable Streetscape Geometry.
   

2. Después de esta línea, habilita el modo de geometría del paisaje urbano:

   streetscapeGeometryMode = Config.StreetscapeGeometryMode.ENABLED
   

   Cuando la API de Geospatial y el modo de geometría del paisaje urbano están activados, tu app puede recibir información sobre la geometría del paisaje urbano alrededor del usuario.

Obtén la geometría del paisaje urbano

1. En el archivo StreetscapeGeometryActivity.kt, busca la siguiente línea:

   // TODO: Obtain Streetscape Geometry.
   

2. Después de esta línea, accede a la geometría del paisaje urbano obteniendo todos los objetos Trackable y filtrando por StreetscapeGeometry:

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

   Estas geometrías se usan en una visualización simple que se proporciona en el proyecto de ejemplo. Esta visualización muestra cada edificio o polígono del terreno con un color diferente.
3. En la siguiente línea, agrega este código:

   streetscapeGeometryRenderer.render(render, streetscapeGeometry)
   

4. Ejecuta la app y visita un edificio de tu zona.
5. Luego de que la localización geoespacial esté completa, presiona Settings y habilita la visualización de la geometría del paisaje urbano.
6. Mira un edificio en RA. Cada edificio segmentado tiene su propio color. Además, se muestran los enums Quality y Type de la geometría más central.

Precaución: Si no puedes ver la geometría del paisaje urbano o no aparece ninguna decoración cuando presionas la pantalla, sigue estos pasos para volver a comenzar desde el punto de control del codelab:

1. En Android Studio, haz clic en VCS > Git > Branches > Checkout > step-3. Esta acción revierte el tercer paso.
2. Agrega tu clave de API al archivo AndroidManifest.xml como se detalla en las instrucciones de configuración.

4. Haz una prueba de posicionamiento con los datos de geometría del paisaje urbano

Ahora que puedes ver la geometría del paisaje urbano, puedes realizar una prueba de posicionamiento para decorar el edificio. Con una prueba de posicionamiento se encuentra una intersección entre una geometría y un rayo virtuales. Se usa para encontrar la geometría sobre la que un usuario presiona.

Realiza una prueba de posicionamiento

En esta sección, colocarás una estrella en la fachada del edificio cuando el usuario presione sobre su geometría. Para ello, deberás realizar una prueba de posicionamiento desde la perspectiva del usuario en el mundo y registrar qué objetos de RA encuentra en el camino. Luego, usarás esta información para verificar si el usuario presionó un polígono del edificio.

1. En el archivo StreetscapeCodelabRenderer.kt, busca la siguiente línea:

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

2. Después de esta línea, agrega el siguiente código:

   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
   

   Este código usa las coordenadas centrales para encontrar una geometría de paisaje urbano que sea un edificio. El resultado lo usas para agregar decoraciones.

Agrega una estrella decorativa después de presionar la pantalla

1. En el archivo StreetscapeCodelabRenderer.kt, busca la siguiente línea:

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

2. Después de esta línea, agrega el siguiente código:

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

   La clase ObjectPlacementHelper determina una ubicación apropiada para poner tu estrella observando la posición en donde se presione. El objeto starAnchors se usa para renderizar las estrellas en la vista de RA.

Ponlo a prueba

1. Ejecuta la app y visita un edificio de tu zona.
2. Cuando la localización geoespacial esté completa, apunta con la cámara al edificio y presiona la pantalla. Verás aparecer una estrella en el edificio del centro de la pantalla.

Precaución: Si no puedes ver la geometría del paisaje urbano o no aparece ninguna decoración cuando presionas la pantalla, sigue estos pasos:

1. En Android Studio, haz clic en VCS > Git > Branches > Checkout > step-4.
2. Agrega tu clave de API al archivo AndroidManifest.xml como se detalla en las instrucciones de configuración.

5. Usa los datos de las anclas de techo

Por último, usa anclas de techo para agregar adornos a la parte superior del edificio. Las anclas de techo te ayudan a fijar las anclas de RA en la parte superior de los edificios con una latitud y longitud. Usa estas anclas para fijar los globos a los edificios que rodean al usuario.

Agrega comportamientos al modo globo

El proyecto tiene dos modos de posición de recursos: el modo girasol (que ya usaste) y el modo globo.

Para programar el comportamiento para el modo globo, sigue estos pasos:

1. En el archivo StreetscapeCodelabRenderer.kt, busca la siguiente línea:

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

2. Usa la posición para presionar y crea un espacio increíble para tu globo.

   val transformedPose = ObjectPlacementHelper.createBalloonPose(hit.hitPose)
   

3. Convierte la variable transformedPose en una posición geoespacial:

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

4. Crea un ancla de techo con la latitud y longitud transformadas:

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

Pruébalo

1. Ejecuta la app y visita un edificio de tu zona.
2. Cuando la localización geoespacial esté completa, cambia al modo globo y presiona un edificio. Verás aparecer un globo sobre la parte superior del edificio.

Si no puedes replicar el comportamiento esperado, sigue estos pasos:

1. En Android Studio, haz clic en VCS > Git > Branches > Checkout > step-5.
2. Agrega tu clave de API al archivo AndroidManifest.xml como se detalla en las instrucciones de configuración.

6. Conclusión

¡Felicitaciones! Creaste una app de RA que visualiza la geometría del paisaje urbano de tu zona y te permite decorar sus lados con estrellas. También usaste anclas de techo para agregar globos a la parte superior de los techos a tu alrededor.

Más información

• Guía para desarrolladores sobre geometría del paisaje urbano
• Guía para desarrolladores sobre anclas de techos
• Descripción general de la API de Geospatial