Errores y soluciones para que nuestras apps WebAR funcionen 100%
How to create an AR Experience
Desde hace algunos años conozco la librería JavaScript de MindAR, recordemos que esta esta interrelacionada con A-Frame, Three.js y AR.js.
Siempre utilizo MindAR para apps de realidad aumentada, debido a que se puede crear aplicaciones WebAR en minutos.
La confianza que le tengo a MindAR es muy grande y con el tiempo he aprendido a conocerla y saber cuáles son sus puntos fuertes y sus puntos débiles.
En este post te voy a enseñar que hacer y que no hacer para que tu realidad aumentada funcione y se vea genial.
Empecemos a darle solución a los problemas más comunes:
- Pantalla de color blanca o azul agua marina: Verifica las direcciones url de tus scripts, así como también las direcciones de cada uno de tus elementos (marcador.mind, targets.mind, modelados 3D, texturas, etc).
- Ejemplo de Script: <script src=»https://aframe.io/releases/1.5.0/aframe.min.js»></script>
- Ejemplo de marcador: <a-scene mindar-image=»imageTargetSrc: ./targets.mind; maxTrack: 2;» color-space=»sRGB» renderer=»colorManagement: true, physicallyCorrectLights» vr-mode-ui=»enabled: false» device-orientation-permission-ui=»enabled: false»>
- Este es un ejemplo para tus Modelos 3D, videos y otras rutas: src=»./model1/scene.gltf» – – tambien podria ser src=»./scene.gltf»
- Cualquier tipo de error en el código. (Verifica en la consola de tu navegador para ver cual es el error. Presiona F12 en tu teclado para ver la consola).
- Ves una imagen como esta (Pantalla de Carga) en tu navegador web:
- Verifica los errores anteriores, también puede aparecer por conexión a internet o errores en tu código, especialmente en el JavaScript.
- Falla en inicializar:
- La solución más fácil para este problema es verificar que tu servidor local, o tu servidor web sea Https:// a veces puede suceder cuando estás haciendo Cross-Origin.
Pasemos a otro tipo de situaciones que nos podemos encontrar a la hora de trabajar con la libreria JavaScript de MindAR.
- Nunca antes había trabajado la opción de Multimarcadores de MindAR y aprendí algo que te puede ahorrar tiempo y dolores de cabeza
Resulta que cuando quise realizar una app multimarker me encontré que en la documentación de MindAR la sección de código comenzaba con esto:
<a-scene mindar-image="imageTargetSrc: https://../band-example/band.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">;
pero luego me daba cuenta de que llamaban a los marcadores de la siguiente manera:
<a-entity mindar-image-target="targetIndex: 0">; <a-entity mindar-image-target="targetIndex: 1">;
No lograba entender cómo era posible o como se diferenciaba un marcador de otro, entonces me di cuenta de que utilizando la herramienta Image Targets Compiler | mind-ar-js se pueden agregar y cargar varias imágenes al tiempo, luego al descargar el archivo .mind este compila y almacena todas las imágenes en el orden en que fueron cargadas y de esta manera podemos hacer el llamado desde el targetIndex:0, targetIndex:1, targetIndex:2, etc.
Te invito a leer este otro post acerca de cómo crear marcadores: La importancia de tu marcador en Realidad Aumentada Web
Al parecer había solucionado el problema de los multimarcadores! y si, mi aplicación funcionaba como multimarcador de realidad aumentada pero no como yo quería.
Resulta que la aplicación reconocía mis marcadores de realidad aumentada pero solo un marcador al tiempo en pantalla.
¿Como era esto posible? ¿Que estaba pasando?
MindAR por defecto solo rastrea un objetivo a la vez y para que pueda hacer seguimiento de varios elementos al tiempo se debe de ajustar una propiedad en la configuración de mindar-image.
La propiedad que se debe cambiar es maxTrack. Esta propiedad especifica el número máximo de marcadores que MindAR intentará rastrear al mismo tiempo. Por defecto, su valor es 1.
Puedes agregarla justo despues de imageTargetSrc: ./targets.mind; maxTrack: 3;
<a-scene mindar-image="imageTargetSrc: ./targets.mind; maxTrack: 3;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">;
y listo! Asi pude tener mi aplicacion multimarcador en tiempo real con varios marcadores en pantalla.
Problema de renderizado de Modelos 3D
En 15-16 Años que llevo trabajando con la realidad aumentada he visto este problema una y otra y otra vez, y generalmente el problema está en la forma en que se diseña nuestro modelo 3D (vértices), también puede ser la escala de nuestro modelo 3D, el formato del modelo (.obj, Gltf, Glb, etc) o incluso la versión de la librería que estamos utilizando para nuestra app.
Pero en MindAR este problema se encuentra en la opción de active=»false» que se encuentra en la siguiente linea de codigo:
<a-camera active="false" position="0 0 0" look-controls="enabled: false">;
Te explico un poco acerca de esto:
- Cuando active se establece en false, le estás diciendo a A-Frame que esta cámara en particular no debe ser la cámara principal utilizada para renderizar la escena.
- ¿Por qué usarla en MindAR? En el contexto de MindAR, es una práctica común. MindAR necesita tomar el control de la cámara para superponer el contenido virtual sobre el flujo de video en vivo de tu cámara física. Cuando MindAR se inicializa, él crea y activa su propia cámara interna que está sincronizada con el seguimiento de los marcadores. Al establecer active=»false» en tu <a-camera> explícita, te aseguras de que la cámara predeterminada de A-Frame no interfiera con la cámara que MindAR está gestionando. Es una forma de «desactivar» la cámara de A-Frame para que la cámara de MindAR pueda ser la dominante.
¿Cuál es la solucion al problema?
Elimina el active=»false» y deja la linea asi:
<a-camera position="0 0 0" look-controls="enabled: false">;
¿Conoces de más errores o problemas con los que te has encontrado a la hora de hacer Apps de realidad aumentada?
Te invito a que dejes un comentario aquí o en nuestra comunidad de WhatSapp y sigamos aprendiendo juntos: Comunidad Realidad Aumentada Empezando Desde Cero
Te recomiendo este tutorial: Tutorial gratis para crear Realidad Aumentada