Compila con el Creador de Geospatial y la API de Places de Google Maps Platform

1. Antes de comenzar

El Creador de Geospatial en Unity, con la tecnología de ARCore y los mosaicos fotorrealistas en 3D de Google Maps Platform, te permite crear y visualizar rápidamente experiencias de realidad aumentada (RA) para una latitud y longitud específicas, todo dentro del editor de Unity. Esto puede reducir en gran medida el tiempo que lleva crear una sola escena de RA geolocalizada para tu app, pero ¿qué sucede si quieres crear varias experiencias similares en diferentes ubicaciones? Con la API de C# en Geospatial Creator, también puedes hacerlo.

En este codelab, escribirás código en C# que usa Geospatial Creator y la API de Places de Google Maps Platform para crear varias experiencias geoespaciales a partir de una plantilla inicial. Las experiencias resultantes se pueden explorar y ajustar en el editor de Unity antes de compilarlas en una app.

El libro está a la altura correcta.

Requisitos previos

Qué aprenderás

  • Cómo usar las APIs en Geospatial Creator para crear y visualizar una experiencia geolocalizada en varias ubicaciones
  • Cómo usar la API de Places de Google Maps Platform para encontrar las ubicaciones de lugares
  • Cómo ejecutar la experiencia de RA en tu dispositivo

Requisitos

2. Configura tu entorno

Para usar Geospatial Creator, debes configurar la autorización para acceder a Photorealistic 3D Tiles, los servicios de ARCore en Google Cloud y la API de Places de Google Maps Platform.

Configura un proyecto de Google Cloud

Este codelab requiere un proyecto de Google Cloud con la facturación habilitada para acceder a las APIs del servidor de Google. La configuración de facturación es obligatoria para este codelab, pero solo se te cobrará si un proyecto excede su cuota de servicios sin cargo.

Para configurar un proyecto en Google Cloud, sigue estos pasos:

  1. Crea un proyecto en la consola de Google Cloud.Crea un proyecto de Google Cloud
  2. En el cuadro de texto Nombre del proyecto, escribe un nombre apropiado como ARCore Geospatial Project y, luego, 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. Consulta Cómo habilitar la facturación y revisa los precios de Photorealistic 3D Tiles y los precios de la API de Places (nueva).

Habilita la API de Map Tiles

La API de Map Tiles proporciona los Photorealistic 3D Tiles, que son visibles en el editor de Unity.

Habilita la API de ARCore

La API de ARCore en Google Cloud te permite acceder a la API de ARCore Geospatial en el dispositivo de destino.

Habilita la API de Places

La API de Places de Google Maps Platform te permite obtener datos de ubicación de más de 200 millones de lugares, que usarás en el codelab para encontrar lugares relacionados. Esta API proporciona resultados de búsqueda y coordenadas geográficas de lugares.

Crea una clave de API para tu proyecto

Para usar la autenticación con clave de API y autenticar tu app con los servicios remotos de Google Cloud, sigue estos pasos:

  1. En la consola de Google Cloud, en APIs y servicios, selecciona Credenciales.
  2. En la parte superior de la página, haz clic en Crear credenciales y, luego, selecciona Clave de API.
  3. Anota la clave porque la necesitarás en los próximos pasos.

Configura el software

Para comenzar a usar el software de Geospatial Creator, sigue estos pasos:

  1. Clona este repositorio.
  2. Descarga Unity Hub y úsalo para instalar la versión 2022.3 de Unity. Asegúrate de instalar las herramientas de compilación opcionales para Android o iOS.
  3. En Unity Hub, presiona Add > Add project from disk.
  4. En el panel Hierarchy, selecciona AR Geospatial Creator Origin.
  5. En el cuadro de texto Google Maps Tile API Key, ingresa la clave de API y, luego, presiona Enter (o return en macOS).Inserta tu clave de API en el origen del Creador de Geospatial
  6. En Edit > Project Settings > XR Plug-in Management > ARCore Extensions, usa la autenticación de la clave de API para Android o iOS, y luego inserta la clave de API.
  7. En File > Build Settings, cambia la plataforma de destino a Android o iOS.

3. Crea tu primer ancla

En este codelab, crearás un anclaje de RA que se puede usar en varias ubicaciones. Usarás las bibliotecas públicas de San Francisco, California, como ejemplo, pero puedes usar las ubicaciones que estén cerca de ti.

Acerca del componente Origin de Geospatial Creator

Cada escena de Unity creada con el Creador de Geospatial requiere exactamente un origen del Creador de Geospatial. Este objeto de juego es el punto de referencia para convertir los valores de latitud, longitud y altitud del mundo real en coordenadas de juego de Unity.

El proyecto de muestra contiene un origen de Geospatial Creator, que usa Cesium para renderizar mosaicos fotorrealistas en 3D en la vista Scene del editor y te permite visualizar exactamente en qué lugar del mundo aparecerá tu contenido de RA.

Cómo mover el origen

Mueve el origen de Geospatial Creator a la latitud y longitud de la sucursal principal de la biblioteca de San Francisco.

Para usar la integración integrada del Creador de Geospatial con la API de Places y reubicar automáticamente el origen en la ubicación correcta, sigue estos pasos:

  1. En el panel Hierarchy, selecciona el objeto de juego Geospatial Creator Origin.
  2. En el panel Inspector, haz clic en Search for Location.
  3. En el cuadro de diálogo de búsqueda, escribe San Francisco Public Library. El primer resultado debería ser en 100 Larkin Street.
  4. Haz clic en Aplicar a objetos para aplicar el resultado de la búsqueda al origen. Deberías ver que la latitud y la longitud del origen se actualizan a las nuevas coordenadas.

El edificio está a la vista.

Agrega un anclaje de Geospatial Creator a la escena

Ahora que existe un origen, agrega un anclaje de Geospatial Creator con GameObject > XR > AR Geospatial Creator Anchor. De forma predeterminada, el ancla se ubicará en el mismo lugar que el origen.

Usa este anclaje para posicionar nuestro contenido de RA en 3D. El proyecto de ejemplo incluye un modelo 3D de un libro.

Para colocar el libro en la escena, sigue estos pasos:

  1. En el panel Project, arrastra el modelo Book al panel de vista Editor.
  2. En el panel Hierarchy, asegúrate de que el Book sea un elemento secundario del ancla que creaste antes. Cualquier objeto de juego secundario del anclaje de Geospatial Creator se posicionará en relación con el anclaje.
  3. En el panel Hierarchy, selecciona Book. Establece los valores de posición en 0, 0, 0.

Se agrega el libro a la escena.

Cuando se observa este modelo en la vista del editor, es evidente que algo está mal: la altitud predeterminada del ancla está por debajo de la superficie del techo de la biblioteca, mientras que debería flotar muy por encima de ella.

Si bien podrías mover el objeto en el editor para encontrar la altitud aproximada de WGS84, en esta situación, se recomienda configurar los anclajes geoespaciales como anclajes en la azotea para que su altitud se fije automáticamente en relación con el techo de la estructura sobre la que se encuentran.

  • Para ello, abre el panel del inspector del ancla y configura la propiedad Altitude Type en Rooftop.

El panel del inspector

Después de hacerlo, ten en cuenta que la altitud de la ancla no cambia en la vista Editor. Esto se debe a que la altitud de la fijación se determina en el tiempo de ejecución cuando se resuelve la fijación para las fijaciones de azotea y terreno. Para visualizar el ancla en el techo en la vista Scene, puedes usar el botón Snap To Tile. Esto establece la altitud de la ancla para que coincida con la de la segmentación en la vista Scene, sin afectar la altitud de la ancla resuelta en el tiempo de ejecución.

  • Para que el modelo flote por encima del techo de la biblioteca en lugar de apoyarse en él, cambia el parámetro Altitude relative to rooftop para que esté a 15 metros por encima del techo.

Ahora el modelo flota sobre la biblioteca de forma correcta.

El libro está a la altura correcta.

Tu proyecto ahora tiene una escena de RA geoespacial completa, incluidos todos los componentes del sistema de RA necesarios, un origen de Geospatial Creator y un anclaje con un modelo adjunto.

A continuación, crea anclajes duplicados en ubicaciones adicionales de la biblioteca.

4. Encuentra nuevas ubicaciones de anclaje con la API de Places

La API de Places de Google Maps Platform te permite obtener datos de ubicación de más de 200 millones de lugares. En este codelab, usarás esta API para encontrar otras sucursales de bibliotecas públicas en San Francisco y usarás esos resultados para generar un anclaje de Geospatial Creator para los próximos diez resultados de la búsqueda.

  • Para comenzar, haz clic en Assets > Scripts > Editor y, luego, abre el archivo “AnchorDuplicator.cs”. Este archivo proporciona código estándar que te ayuda a comenzar a usar la API de Places y analizar sus resultados.

Autenticación con la API de Places

  1. Ubica la siguiente línea en la clase AnchorDuplicator:
    private const string API_KEY = "<YOUR_API_KEY_HERE>";
  2. Reemplaza <YOUR_API_KEY_HERE> por la clave que obtuviste en los pasos de configuración.

Consulta la API de Places para obtener un término de búsqueda

Una vez que se complete la configuración de autorización de la API de Places, podrás escribir código que inicie una solicitud POST.

  • Para ello, busca el método CreatePlacesRequest y usa la siguiente definición del método:
    string postBody = "{ \"textQuery\": \"" + searchTerm + "\", " + 
                    "   \"locationBias\": { \"circle\": { " +
                    "      \"center\": { \"latitude\": " + lat + ", \"longitude\": " + lon + " }, " +
                    "      \"radius\": 10000 }" +
                    "   }" +
                    "}";

string url = "https://places.googleapis.com/v1/places:searchText";

UnityWebRequest request = UnityWebRequest.Post(url, postBody, "application/json");
request.SetRequestHeader("X-Goog-Api-Key", apiKey);
request.SetRequestHeader("X-Goog-FieldMask", "places.displayName,places.location");

return request;
    Ahora, cuando se llama al método CreatePlacesRequest, se realiza una solicitud que busca searchTerm en un círculo centrado alrededor de lat y lon.

Prueba tu trabajo

Antes de continuar, debes verificar que las llamadas a la API de Places se realicen correctamente.

  1. Ejecuta las funciones en el editor de Unity:
    1. En Google AR Codelab, haz clic en Run Places Request.
    2. Abre la consola de Unity. Deberías ver los resultados.Las ubicaciones aparecen en la consola

5. Agregar anclajes a lugares de forma programática

Ahora que verificaste que la API de Places encuentra resultados, crea nuevos anclajes de Geospatial Creator en cada ubicación especificada por los resultados.

Crea un elemento de menú

  1. En la clase AnchorDuplicator, busca el método CreateNewAnchorsFromPlaces y usa la siguiente definición del método:
    if (_places == null)
{
    Debug.LogError("Cannot create anchors: Places has not been initialized.");
    return;
}

// You start with only one anchor in the scene, which you want to copy:
var prototypeAnchorObject = GameObject
    .FindObjectOfType<ARGeospatialCreatorAnchor>()
    .gameObject;

foreach (var place in _places)
{
    var newAnchorObject = GameObject.Instantiate(prototypeAnchorObject);
    var anchor = newAnchorObject.GetComponent<ARGeospatialCreatorAnchor>();
    anchor.Latitude = place.location.latitude;
    anchor.Longitude = place.location.longitude;

    newAnchorObject.name = place.displayName.text;
}
    Este elemento de menú verifica una solicitud iniciada previamente y usa el primer ARGeospatialCreatorAnchor de tu escena como prototipo para crear anclajes, uno por lugar en el resultado de la API de Places.
  2. Usa el nuevo elemento de menú Create New Anchors from Places Response en Google AR Codelab para crear los anclajes.
  3. Deberías ver varios anclajes en el panel Hierarchy.

Verifica las posiciones de los anclajes

Para verificar que todos los recursos estén anclados en las ubicaciones correctas antes de ejecutar la app, sigue estos pasos:

  1. Haz clic en un anclaje agregado en el panel Hierarchy.
  2. Presiona F.
  3. Inspecciona el ancla en la vista Scene.
  4. Si una ancla no está en la ubicación correcta, haz clic en Ajustar a la loseta o cambia manualmente los valores de Latitude, Longitude o Editor Override Altitude.

6. Visualiza el recurso en RA

Para ver el recurso en RA en tu dispositivo Android o iOS compatible con ARCore, sigue estos pasos:

  1. Haz clic en File > Build Settings y, luego, selecciona las plataformas de compilación Android o iOS.
  2. Haz clic en Switch platform.
  3. Asegúrate de que tu dispositivo de desarrollo esté conectado y configurado para el desarrollo.
  4. Haz clic en Build and run.
  5. Confirma que la app se ejecute en tu dispositivo.
  6. Visita las ubicaciones en las que anclaste el contenido. Si no cambiaste los ejemplos, las ubicaciones son bibliotecas públicas de San Francisco.

Cómo ver la experiencia de RA

7. Conclusión

¡Felicitaciones! Escribiste una app de Unity que usa el Creador de Geospatial y la API de Places de Google Maps Platform para crear varias experiencias geoespaciales con una plantilla inicial. Esperamos que puedas usar este conocimiento para ampliar el alcance de tu contenido de Creador de Geospatial.

Más información