Construyendo experiencias de realidad aumentada con Flutter + Unity: Solución para dispositivos incompatibles con ARCore

¿Deseas crear experiencias inmersivas para tus usuarios? ¿Te has encontrado con el problema de que algunos dispositivos no son compatibles con las bibliotecas AR tradicionales como ARCore? Si es así, ¡esta publicación es para ti!.

En este artículo, te contaré mi experiencia al crear una aplicación de realidad aumentada con Flutter y Unity. Me enfrenté al reto de que los dispositivos objetivo no cumplían con los requisitos mínimos de ARCore, lo que impedía la detección de superficies y la interacción con objetos virtuales.

Solución

Para superar este obstáculo, combiné el poder de Flutter con la flexibilidad de Unity y su biblioteca Vuforia. Implementé un “image target” y un script en C# para desbloquear la experiencia de realidad aumentada en dispositivos que de otra manera no la tendrían.

Beneficios:

• Compatibilidad con dispositivos de gama baja: Esta solución permite que tu aplicación funcione en una amplia gama de dispositivos, incluso aquellos con cámaras menos potentes.
• Experiencia de usuario fluida: La integración entre Flutter y Unity ofrece una experiencia de usuario fluida y sin interrupciones.
• Flexibilidad y personalización: Unity te da la libertad de crear experiencias AR complejas y personalizadas.

En esta publicación:

A lo largo de este artículo, te guiaré paso a paso por el proceso de creación de una aplicación de realidad aumentada con Flutter y Unity.

Si quieres omitir la configuración del proyecto de Flutter descarga el repositorio de GitHub y pasa al punto de configuración del proyecto Unity.

Configuración del proyecto Flutter

Comienza configurando el proyecto Flutter. Sigue estos pasos:

1. Crea una carpeta assets en la raíz del proyecto.
2. Dentro de assets, crea un archivo JSON llamado pokemon_list.json que contendrá la lista de Pokémon que deseas incluir en la aplicación.
3. En el archivo pubspec.yaml, agrega la dependencia del paquete flutter_unity_widget y el archivo pokemon_list.json a la sección assets.

En pokemon_list.json:

[
    {
        "id":0,
        "name": "Bulbasaur",
        "imageUrl":"https://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png"
    },
    {
        "id":1,
        "name": "Ivysaur",
        "imageUrl":"https://assets.pokemon.com/assets/cms2/img/pokedex/full/002.png"
    },
]

En elpuspec.yaml:

dependencies:
  flutter_unity_widget: ^2022.2.0

  assets:
    - assets/pokemon_list.json

En la carpeta lib creamos los siguientes archivos pokemon_model.dart pokemon_card.dart pokemon_list.dart pokemon_detail.dart y por ultimo unity_ar_screen.dart, el contenido de estos archivos esta en el siguiente repositorio de GitHub.

Configuración del proyecto Unity

En la raíz del proyecto Fluter creamos una carpeta llamada unity. Desde la aplicación de Unity creamos un nuevo proyecto 3D y lo guardamos en la carpeta recién creada.

Descarga de paquetes de Unity necesarios

El paquetefwu se utiliza para exportar los cambios de Unity al proyecto de flutter, el paquete vuforia se utiliza para implementar la realidad aumentada. Url de descarga unitypackages.

Instalación de paquetes

Primero arrastramos el paquete fwu y luego vuforia al apartado de Assets del proyecto de Unity y en ambos casos presionamos en importar, si aparece algún mensaje de actualización damos en actualizar.

Integración de los modelos 3D

Descargamos el contenido de la carpeta models, entramos y arrastramos los modelos al apartado de Assets del proyecto Unity.

Creación de un Image Target

En el panel izquierdo presionamos click derecho y damos en Vuforia Engine y luego en Image Target

El siguiente paso es asociar una imagen al Image Target para que cuando la cámara del teléfono la detecte, muestre el objeto 3D.

1. En el apartado de Assets agregamos la imagen que esta en la carpeta de recursos pokemon_image_target.jpg.
2. Damos click en el Image Target que creamos y en la parte derecha de la pantalla buscamos la opción seleccionar y elegimos la imagen recién agregada.

Inserción de los modelos 3D al Image Target

Solo tendremos que ingresar en cada una de las carpetas de los modelos, por ejemplo, en la de 001_Bulbasaur y arrastrar hasta el Image Target el archivo en este caso Bulbasaur. El archivo a seleccionar es el nombre del Pokemon.

Inserción del script ( PrefabController.cs ) en Assets

Arrastramos hasta Assets el archivo PrefabController.cs que se encuentra en la carpeta de recursos. Este script hace posible cambiar entre modelos 3D con un mismo Image Target.

Asignacion del script al GameObject para cambiar entre modelos 3D

Debajo del Image Target damos click derecho y en Create Empty, se va a crear un GameObject, damos click en este y en la parte derecha de la pantalla aparecerá la opción de agregar componente, damos click y luego en scripts, y seleccionamos Prefab Controller. Al seleccionar el controller aparecerá una lista vacía, presionamos en + para agregar los modelos 3D.

Integración de los cambios realizados al proyecto de Flutter

Nos dirigimos a File > Build Settings > Player Settings, buscamos el apartado de other settings, en Scripting Backend, cambiamos de Mono a IL2CPP, seguimos bajando y en Minimum API level elegimos 7.0 (API 24), en target architecture seleccionamos ARMv7 y ARM64.

En el apartado superior en la aplicación de Unity damos click en Flutter, luego en Export Android (Release). Luego de completado el export ya se puede ejecutar el proyecto de Flutter.

Añadir licencia gratuita de Vuforia

Iniciamos sesion en vuforia-licenses, y en el apartado de licencias generamos una gratuita. En el proyecto de Unity para añadir esta clave primero vamos al apartado izquierdo, damos click derecho > Vuforia Engine > AR Camera, damos click en AR Camera y en el apartado derecho en Open Vuforia Engine Configuration, copiamos la licencia generada y la pegamos en campo App License Key y volvemos a hacer el export para aplicar los cambios al proyecto de Flutter.

Recursos:

• Repositorio GitHub
• Carpeta en drive con los modelos y pluguins para Unity carpeta
• Imágenes de Pokémon: En la url pokedex, dando click derecho en la imagen y en copiar dirección de imagen.
• Documentación del paquete flutter_unity_widget: enlace a la documentación: https://pub.dev/packages/flutter_unity_widget