Aprende Realidad Aumentada Desde Cero: Guia para empezar

Realidad Aumentada WebAR para la web y dispositivos Android y iOS para Principiantes: Tu Guía Completa para Empezar

Guia para aprender realidad aumentada AR
Guia para aprender realidad aumentada AR

Si eres un desarrollador o un entusiasta con conocimientos básicos de JavaScript y HTML, y quieres adentrarte en este emocionante campo desde cero, ¡estás en el lugar correcto! Esta guía te proporcionará los fundamentos y los pasos iniciales para empezar a construir tus propias experiencias de Realidad Aumentada Web utilizando herramientas y librerías populares como MindAR, AR.js, A-Frame, Three.js entre muchas otras.

  • Mi trabajo en el mundo de la realidad aumentada está enfocado en enseñar a las personas para que aprendan sobre esta tecnología con librerias abiertas, libres y sin costo para el usuario y programador.
  • No me gustan las librerías, herramientas o software que cobran por proyecto o por utilizar su software, así que en este blog poco o nada encontraras sobre las mismas.

¡Comencemos!

  • Preparando tu entorno de desarrollo

Antes de sumergirnos en el código, necesitamos configurar las herramientas básicas. Utilizaremos Visual Studio Code (VS Code) como nuestro editor de código preferido, y su extensión Live Server para previsualizar nuestros proyectos fácilmente.

  • Instalación de Visual Studio Code (VS Code)

Si aún no lo tienes, VS Code es un editor de código ligero pero potente, ideal para el desarrollo web.

Descarga VS Code: Ve a la página oficial de Visual Studio Code y descarga la versión correspondiente a tu sistema operativo (Windows, macOS, Linux). LINK A VISUAL STUDIO CODE

Instala VS Code: Sigue las instrucciones del instalador. Es un proceso sencillo.

  • Instalación de la Extensión Live Server en VS Code

Live Server es una extensión increíble que te permite lanzar un servidor de desarrollo local con recarga automática para tus archivos HTML/CSS/JS. Es perfecto para probar tus proyectos WebAR sin complicaciones.

Abre VS Code.

Ve a la sección de Extensiones en la barra lateral izquierda (el icono de los cuatro cuadrados).

En la barra de búsqueda, escribe Live Server.

Busca la extensión de Ritwick Dey (es la más popular) y haz clic en Instalar.

¡Listo! Ya tienes tu entorno configurado para empezar.

Entendiendo las Librerías JavaScript para WebAR

Nos enfocaremos en librerías que te permitirán crear experiencias de AR basadas en marcadores y sin marcadores (basadas en el entorno).

  • MindAR: Una librería poderosa y eficiente para WebAR, especialmente buena para AR basada en marcadores y para estimación de planos. Es rápida y fácil de usar.
  • AR.js: Una de las librerías pioneras en WebAR. Permite una Realidad Aumentada robusta y rápida directamente en el navegador, con un fuerte soporte para marcadores.
  • A-Frame: No es solo para AR, es un framework web para construir experiencias de Realidad Virtual (VR) y Realidad Aumentada (AR) 3D con HTML. Abstrae la complejidad de Three.js, permitiéndote crear escenas 3D declarativamente.
  • Three.js: La base de muchas de estas librerías. Es una librería JavaScript de bajo nivel para crear y mostrar gráficos animados en 3D en un navegador web utilizando WebGL. Si quieres un control más granular, Three.js es el camino, aunque tiene una curva de aprendizaje más pronunciada.

Para empezar, a menudo usaremos MindAR o AR.js junto con A-Frame, ya que A-Frame simplifica enormemente la gestión de escenas 3D.

Creando tu Primera Escena WebAR con MindAR y A-Frame

Vamos a crear un ejemplo simple donde un modelo 3D aparecerá sobre un marcador de imagen.

  • Configuración del Proyecto Básico
    Crea una nueva carpeta en tu computadora para tu proyecto (ejemplo *mi-primer-webar*).
  • Vamos a la opción del menú superior y buscamos Archivo o File es el primer elemento en el menu.
  • Seleccionamos la opción Agregar carpeta al espacio de trabajo en el inglés Add Folder To Workspace.
  • Le damos clic al botón de Agregar o Add.
  • Dentro de esta carpeta, crea un archivo llamado index.html (Vamos a Archivo, crear nuevo archivo de texto, luego presionamos Ctrl y la tecla S al tiempo también podemos buscar la opción Guardar como dentro del menú.
  • veremos una nueva ventana que nos permite guardar nuestro archivo, pero este será el formato .txt. A continuación buscamos la ubicación de nuestra carpeta *mi-primer-webar* y dentro de ella cambiamos el nombre de nuestro archivo y lo llamaremos index.html

Contenido de index.html
Pega el siguiente código en tu index.html. Este esqueleto incluye MindAR y A-Frame.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mi Primer WebAR con MindAR</title>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script></pre>
</head>
<body>
<a-scene mindar-image="imageTargetSrc: ./targets.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<a-asset-item id="CarModel" src="./Car.glb"></a-asset-item>
</a-assets>

<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

<a-entity mindar-image-target="targetIndex: 0">
<a-gltf-model rotation="270 180 0" position="0 -0.5 0" scale="0.009 0.009 0.009" src="#CarModel"></a-gltf-model>
</a-entity>
</a-scene>
</body>
</html>

Explicación del código:

Si quieres aprender Html y CSS te recomiendo esta web: Aprende HTML y CSS – Curso Desde Cero

Te explico, HTML maneja etiquetas que inician con < y terminan en > por ejemplo <Head> adicional a esto las etiquetas siempre se deben de cerrar después de que tengan unas instrucciones dentro de ellas y se cierran utilizando / por ejemplo </head>.

  • <html>: Este es el elemento raíz de cualquier página web HTML. Todo el contenido de la página va dentro de esta etiqueta.
  • <head>: Esta sección contiene metadatos sobre el documento HTML. Los metadatos no se muestran directamente en la página web, pero proporcionan información importante para el navegador y los motores de búsqueda.
  • <meta name=»viewport» content=»width=device-width, initial-scale=1″ />: Esta etiqueta meta es crucial para el diseño responsivo y, especialmente, para las aplicaciones WebAR que se ejecutan en dispositivos móviles.

name=»viewport»: Indica que esta meta-información es sobre el viewport (el área visible del usuario en una página web).

content=»width=device-width, initial-scale=1″:

width=device-width: Le dice al navegador que el ancho del viewport debe ser igual al ancho del dispositivo en píxeles independientes del dispositivo (es decir, el ancho real del dispositivo). Esto evita que los navegadores móviles escalen la página por defecto y la muestren como si fuera un escritorio.

initial-scale=1: Establece el nivel de zoom inicial cuando la página se carga por primera vez. Un valor de 1 significa que no hay zoom, mostrando el contenido en su tamaño real.

Importancia para WebAR: Asegura que la experiencia AR se vea y funcione correctamente en diferentes tamaños de pantalla de dispositivos móviles, aprovechando el espacio disponible de manera óptima y evitando problemas de escalado de la cámara o los elementos 3D.

  • <title>Mi Primer WebAR con MindAR</title>: Esta etiqueta define el título de la página web. Este título se muestra en la pestaña del navegador o en la barra de título de la ventana del navegador. Es útil para identificar rápidamente la página entre varias pestañas y es importante para el SEO (Optimización para Motores de Búsqueda).
  • <script src=»https://aframe.io/releases/1.5.0/aframe.min.js»></script>: Esta etiqueta <script> es fundamental para incluir la librería A-Frame en tu proyecto.

src=»https://aframe.io/releases/1.5.0/aframe.min.js»: Indica la fuente (source) del script. En este caso, está cargando la versión minificada (.min.js) de A-Frame 1.5.0 directamente desde su CDN (Content Delivery Network).

A-Frame: Como te expliqué, es un framework web para construir experiencias de Realidad Virtual y Realidad Aumentada 3D utilizando HTML. Simplifica la creación de escenas 3D al permitirte usar etiquetas HTML personalizadas (<a-scene>, <a-box>, <a-entity>, etc.) en lugar de escribir código WebGL complejo directamente con Three.js.

  • <script src=»https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js»></script>: Esta es otra etiqueta <script> que incluye la librería MindAR.

src=»https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js»: Carga la versión de producción (.prod.js) de MindAR 1.2.5, que está diseñada específicamente para integrarse con A-Frame (mindar-image-aframe). Se carga desde un CDN.

MindAR: Esta librería es la que proporciona la funcionalidad de realidad aumentada en sí misma, especialmente el seguimiento de imágenes (detección de marcadores) o la estimación de planos, y la integración con la cámara del dispositivo.

  • </head>: Cierra la sección de metadatos del documento.
  • <body>: Esta sección contiene todo el contenido visible de la página web: texto, imágenes, videos, y en este caso, la propia escena de Realidad Aumentada de A-Frame.
  • a-scene: El contenedor principal para nuestra experiencia AR/VR en A-Frame.
  • mindar-image: El componente de MindAR que le dice a A-Frame que es una escena de realidad aumentada basada en imágenes.
  • imageTargetSrc: ./targets.mind: Aquí le indicamos dónde está nuestro archivo de marcadores. Este archivo lo crearemos en el siguiente paso.
  • Los otros parámetros (maxTrack, filterMinCF, etc.) son ajustes de rendimiento y estabilidad del seguimiento de MindAR.
  • a-assets: Aquí pre-cargamos recursos como modelos 3D (a-asset-item). En este ejemplo, estamos usando un modelo de la comunidad de Sketchfab, puedes descargar el modelo del siguiente link: Oldsmobile Cutlass Supreme Sedan ’71 – Download Free 3D model by Barbo (@barbo-autos) [78f76d3].
  • a-camera: La cámara de A-Frame. Para AR, generalmente se configura para no tener controles de vista ya que la cámara real del dispositivo es la que se mueve.
  • a-entity mindar-image-target=»targetIndex: 0″: Este es el corazón de la interacción. Indica que lo que esté dentro de este a-entity aparecerá cuando se detecte el marcador con targetIndex: 0 (el primer marcador definido en targets.mind).
  • <a-gltf-model rotation=»270 180 0″ position=»0 -0.5 0″ scale=»0.009 0.009 0.009″ src=»#CarModel»>: Aquí vinculamos el modelo 3D que cargamos en a-assets para que aparezca sobre el marcador, su posicion, escala del modelo 3D.

Creación de Marcadores de Imagen con MindAR

Para que MindAR detecte algo, necesitas crear un archivo de marcadores (.mind).

  • Elige tu Imagen Marcador

Selecciona una imagen con buen contraste y detalles únicos. Evita imágenes con patrones repetitivos o muy simples. Un código QR o una ilustración compleja suelen funcionar bien. Guárdala en tu carpeta del proyecto (ej., marker.jpg).

  • Genera el archivo .mind

MindAR proporciona una herramienta online para generar este archivo: Image Targets Compiler | mind-ar-js puedes ver más aquí: Crea tus marcadores para realidad aumentada

Abre tu navegador y ve al Generador de Marcadores de MindAR.

Haz clic en «Add Target» y sube tu imagen marcador (ej., marker.jpg).

Una vez subida, haz clic en «Compile».

Se descargará un archivo llamado targets.mind. Copia este archivo directamente en la misma carpeta de tu proyecto (mi-primer-webar) donde tienes index.html.

¡El nombre del archivo targets.mind debe coincidir con el que indicaste en imageTargetSrc en tu index.html!

Para este ejemplo utilice este marcador:

NY Public Library AR target
NY Public Library AR target

Probando tu Escena WebAR

¡Es hora de ver la magia!

  • Estando en la ventana de Visual Studio Code. Haz clic derecho en cualquier parte del código y selecciona «Open with Live Server» o en español Abrir con Live Server.
  • Esto abrirá tu navegador con una URL como http://127.0.0.1:5500/index.html.
  • Importante: Para que la cámara funcione, necesitas acceder a esta página usando HTTPS. Live Server por sí solo sirve por HTTP. Este ejemplo generalmente sirve en computadoras de mesa y portátiles. Si quieres utilizar dispositivos Android y iOS para pruebas de tus aplicaciones de realidad aumentada te recomiendo instales, XAMPP Download XAMPP asi puedes utilizar Https://
  • Si instalas Xampp para utilizar el Https tendras que hacer los siguientes pasos:

Después de instalar Xampp debes de ir a la carpeta de instalación normalmente se encuentra en tu disco local C.

ingresa a la carpeta xampp y busca la carpeta htdocs.

Crea una carpeta con cualquier nombre, hagamos el ejemplo con (MiWebAR) y dentro de ella copia y pega los archivos index.html, targets.mind y Car.glb.

Ahora abre el panel de xampp desde tu escritorio o busca el archivo desde la barra de tareas o icono de Windows.

Panel de Xampp
Panel de Xampp

Da clic en el botón de Start de Apache.

Aquí viene una parte importante para poder ingresar desde tu teléfono Android o iOS.

  • Para poder ver la aplicación de realidad aumentada en tu teléfono necesitas una dirección web https y para poder ingresar deberás de tener conectado tu teléfono a la misma red o red wifi que tu computador Windows, Mac o linux y saber la direccion IP donde estas corriendo el Xampp.
  • Para ello utiliza CMD, Command o ejecutar, si no sabes cómo hacerlo re recomiendo este articulo: Guía paso a paso: Cómo abrir el CMD en diferentes sistemas operativos
  • luego de abrir la terminal en Windows y escribe el comando ipconfig y en Mac y Linux ifconfig. Presiona la tecla ENTER y veras la dirección ip de tu equipo.
  • ¿Como identificar fácilmente la IP en la terminal? Busca la línea que dice Dirección IPv4 y esa es la Dirección IP de tu equipo.
  • Teniendo esta información lo que vas a hacer ahora es ingresar al navegador de tu teléfono.

iOS (Apple) ingresa a Safari.

Android ingresa a Google Chrome.

  • En la barra de direcciones escribe lo siguiente: https://TU IP/MiWebAR/index.html
  • Tu aplicación abrirá y te pedirá acceder a la cámara de tu dispositivo, da clic en permitir.
  • Enfoca la imagen que utilizaste como marcador y disfruta de tu primera aplicación de realidad aumentada WebAR.

Debes ver esto:

Mi primer WebAR
Mi primer WebAR

¿Te gusto este tutorial? ¿Te gustaría verlo en video? ¿Tienes problemas para hacer tu primera aplicación de WebAR?

No dudes en dejar un comentario para poder ayudarte o escríbeme en redes sociales, con gusto te ayudare.

¿Quieres aprender más sobre el mundo de la creación de aplicaciones de realidad aumentada? 

Te invito a que hagas parte de la comunidad de Realidad Aumentada Empezando Desde Cero en Facebook.

Haz parte de la comunidad en WhatsApp.

 

Scroll al inicio