Realidad aumentada con 8TH WALL

Que es 8th Wall?

Niantic Studio 8thwall es una plataforma que permite desarrollar experiencias de realidad aumentada (AR) y realidad mixta (XR) directamente en navegadores web, sin necesidad de usar aplicaciones o o hardware especializado. Su objetivo principal es hacer que la creación de AR sea más accesible, permitiendo a los desarrolladores crear aplicaciones interactivas y experiencias inmersivas que puedan ser accesibles desde dispositivos móviles o de escritorio a través de un simple enlace web.

• Incluye funciones avanzadas como:
•  Seguimiento de superficies (SLAM): esta plataforma usa algoritmos de Simultaneous Localization and Mapping para detectar y mapear planos y superficies de su entorno en tiempo real. Y con esto lo que se logra es anclar el contenido 3D con más precisión, inclusive cuando el dispositivo o el usuario se mueven.
• Reconocimiento de imágenes: Emplea bases de datos de marcadores digitales o impresos para lograr identificar rápidamente patrones o logotipos. Al detectar una imagen de referencia, la plataforma carga dinámicamente modelos y animaciones vinculados sin afectar el rendimiento.
• Rastreo de objetos en 3D: Gracias al rastreo basado en visión por computadora, 8th Wall puede mantener el seguimiento continuo de objetos físicos, aplicando texturas, sombras y efectos de iluminación para integrarlos perfectamente en la escena.
• Funciona en dispositivos iOS y Android.
• Desarrollo con JavaScript.

Paso a paso de la experiencia de realidad aumentada

1. Acceso a la plataforma y panel principal

1.1 Inicio de sesión:

• Nos debemos dirigir a la página oficial de 8th Wall.
• hacemos click en “Log In” y elegimos la opción de autenticación con correo electrónico o   cuenta de Google.
• Una vez autenticado, nos dirigirá al panel principal
• Nos registramos utilizando una cuenta puede ser de Google.

• Indicamos el propósito para el cual utilizaremos 8th Wall (por ejemplo, para desarrollo personal, educativo o profesional).

• Asignamos un nombre personalizado al proyecto o cuenta para completar el proceso de registro.

1.2 Después de habernos registrado, se abre el panel principal con todas las herramientas disponibles para crear proyectos de realidad aumentada.

Barra lateral izquierda

• My Projects: aquí se muestra todos tus proyectos personales.
• Workspace: justo debajo se el nombre de la organización o espacio de trabajo
• Accesos rápidos:
  • Workspace: lista de proyectos de todo el espacio.
  • Team: proyectos compartidos con el equipo.
  • Public Profile: gestiona cómo se ve el perfil público.
  • Account: ajustes del usuario (plan, facturación, API keys).

Barra de navegación superior

• Documentation: enlace directo al sitio de documentación oficial de 8th Wall.
• Project Library: catálogo de ejemplos y plantillas que se pueden clonar.
• Product y Resources: menús desplegables con noticias de producto, SDKs, integraciones y enlaces a la comunidad.
• Perfil de usuario: ajustes personales, cierre de sesión y acceso a los planes.

Zona central: “Recent Projects”

• Banner principal: suele incluir enlaces a starter kits o novedades destacadas.
• Pestañas:
  • Sample Projects: muestras de proyectos ya montados que se pueden explorar o clonar.
  • Tutorials: guías paso a paso para crear experiencias concretas.
  • News: actualizaciones y notas de versión de la plataforma.
• Tarjetas de proyecto: cada proyecto muestra:
  • Miniatura para identificar visualmente la experiencia.
  • Icono de ojo: abrir una vista previa web instántanea.
  • Icono de corchetes o “</>”: clonar el proyecto a el workspace para editarlo.
  • Título clicable: abre el editor en modo proyecto.

 Botón “New Project”

• Situado arriba a la derecha, en morado.
• Al pulsarlo, se abre el asistente para crear un proyecto desde cero: ahí se define nombre, tipo de experiencia y configuraciones iniciales.

2. Selección de “Image Targets”

• Ubicar el mosaico “Studio: Image Targets” Es el primero en la lista de Quick Start.
• Identificar los controles del mosaico: Se debe dar clic sobre el rectángulo de la tarjeta para iniciar el asistente de creación.
• Completar los campos del asistente lateral:
  • Upload Target Image
    • Se debe arrastrar la imagen (JPEG/PNG) o hacer clic para buscarla en los archivos internos del disco.
    • El sistema nos mostrará una miniatura y validará automáticamente si tiene buena calidad para tracking.
  • Target Name
    • Asignar un nombre descriptivo (por ejemplo “WhacAMoleMarker”).
• Añadir el marcador
  • Pulsar “Add Target” (o “Save Target”).
  • 8th Wall procesa la imagen, generará internamente el archivo de tracking y lo listará en la sección Image Targets del proyecto.
• Crear el proyecto
  • Tras añadir el marcador, el botón “Create Project” se habilita.
  • Al hacer clic, 8th Wall crea el esqueleto de tu proyecto en tu workspace.
• Nota sobre la última actualización sobre los archivos index.html y main.js tras la actualización deben crearse manualmente:

• En el editor, abrir el panel de archivos (sidebar izquierda).
• hacer clic en “Add File” → “New File”, nombrar el archivo index.html y confirmar.
• Repetir también para crear el archivo   main.js

Una vez cargado el proyecto, se mostrarán todas las herramientas disponibles para su edición.

3. Herramientas disponibles de edición en proyecto

3.1. Barra superior de acciones

• Build / Land / Publish: botones para compilar tu proyecto
• Play / Connect Device: vista previa instantánea en navegador o envío directo al móvil conectado para probar en tiempo real.

3.2. Vista 3D (Viewport)

• El lienzo central donde se renderiza la escena AR sobre una cuadrícula de referencia. Aquí se coloca, mueve y orienta los modelos y marcadores.

3.3. Panel “Scene Graph” (izquierda, sección Default)

• Árbol de nodos: lista jerárquica de todos los objetos de la escena (luces, cámara, modelos, marcadores).
• Buscador (+): filtra nodos por nombre o añade nuevos elementos (luz, cámara, objetos 3D).

3.4. Panel de archivos y assets

• Files / Modules / Image Targets: organización de los ficheros index.html, scripts, módulos y objetivos de imagen.
• Botón “+”: para crear o subir nuevos assets (texturas, modelos, targets).

3.5. Gizmo y controles de navegación (abajo a la izquierda)

• Gizmo XYZ: eje de colores para mover, rotar o escalar objetos seleccionados.
• Iconos de cámara y mano: cambiar entre modo orbitar, paneo o zoom para inspeccionar la escena.

3.6. Inspector de propiedades (derecha)

• Default Settings: ajustes globales (cámara activa, skybox y gradiente, colores de fondo).
• Project Settings: configuración de espacios de entrada, gestor de inputs y opciones de control de versión.
• Play Mode: activar “Live Sync” para actualización automática en dispositivos.

3.7. Consola y estado de compilación (zona inferior)

• Barra morada con hash y sello de tiempo de la última build.
• Show Console: desplegable para ver logs, errores y avisos en tiempo real al compilar o ejecutar la experiencia.

4. Introducción de modelos 3D

En este punto, procedemos a cargar los dos modelos 3D previamente descargados desde Sketchfab, los cuales utilizaremos como parte del desarrollo del proyecto.

• Creamos una imagen adecuada para usar como Target, asegurándonos de que tenga buen contraste y detalles visuales para facilitar su reconocimiento.
• Luego, organizamos el entorno 3D sobre ese Target, posicionando correctamente los modelos que se proyectarán al ser detectada la imagen.

Después, definimos un punto de cámara y añadimos luces para mejorar la visualización y lograr una experiencia de realidad aumentada más realista y estable.

5. Código del juego

• Una vez establecido cómo se verá la experiencia de realidad
• aumentada adjuntaremos a los archivos un json que contenga el comportamiento o la lógica de las entidades.

6. Conclusiones

Después de hacer un recorrido detallado paso a paso del trabajo en la plataforma 8th Wall, empezando por el registro y exploración del panel de trabajo, pasando por la selección de la plantilla “Image Targets”, la carga y la configuración del marcador, hasta el uso del editor con los paneles de escena, assets y consola, se pudo obtener varias conclusiones:

1. Accesibilidad sin barreras técnicas: La interfaz gráfica de plataforma está pensada y diseñada para guiar a usuarios incluso sin algún tipo de experiencia previa en AR o programación. Los paneles fueron organizados de una forma sencilla que permiten visualizar rápidamente cada cambio sin necesidad de salirse del editor. Esto facilita a diseñadores como a desarrolladores para adentrarse en el mundo de la realidad aumentada sin mucha dificultad
2. Flexibilidad y control sobre los archivos: Con la última actualización de la plataforma en la cual ya no se incluyen automáticamente los archivos index.html y el main.js hace que podamos tener una participación más activa en el proyecto flexibilizándolo y permitiendo modificar y personalizar aún más nuestros proyectos, aunque claramente también representa pasos adicionales.
3. Potencia de las “Image Targets” para experiencias inmersivas: Pudimos apreciar la importancia de trabajar con marcadores, el seguimiento 3D y reconocimiento de imágenes, asegura que las experiencias se anclen de una forma muy estable y realista a nuestro entorno real.
4. Una plataforma en constante evolución: 8th Wall nos ofrece una gran biblioteca de plantillas y ejemplos, lo que nos ayuda a mantenernos al día con las nuevas características y tendencias

8th Wall nos facilita la creación, edición y publicación de experiencias AR de gran impacto, combinando un área de trabajo intuitiva con el poder de lenguajes de programación como JavaScript y WebXR. Y con los conceptos y pasos detallados en esta guía, cualquier persona puede tener bases para empezar a crear su propio proyecto de realidad aumentada y llevarlo desde su imaginación a un lienzo y finalmente a un público deseado. 

Presentación de Paso a paso

Video tutorial Paso a paso

Créditos:

Autor:

Brandon Smith Vallejo Maldonado

Diego Alejandro Daza Ripoll

Julian Esteban Pérez Salcedo

Editor: Carlos Iván Pinzón Romero

Codigo: UCRVG1-10

Universidad: Universidad Central