Saltar al contenido principal

📄 Guía: Image Tracker en 8th Wall Desktop

🎯 Objetivo​

Crear una experiencia básica de Image Tracking en 8th Wall Desktop que permita:

  • Detectar una imagen (marker)
  • Mostrar contenido sobre ella
  • Probar la experiencia en un dispositivo móvil

🧰 Requisitos​

Herramientas necesarias​

¿Para qué sirve cada uno?​

  • Node.js → Permite ejecutar el servidor local del proyecto
  • ngrok → Expone tu proyecto local a internet para abrirlo en el celular
  • 8th Wall Desktop → Editor donde creas la experiencia AR

📁 1. Crear el proyecto​

  1. Abre 8th Wall Desktop
  2. Da clic en Nuevo Proyecto
  3. Se generará automáticamente una estructura de carpetas

🧩 2. Crear un Image Target​

Paso 1: Agregar el componente​

  1. Ve a Default Space
  2. Clic derecho → Image Target

👉 Este será el objeto que detectará la imagen real

🖼️ 3. Generar el marcador (Image Target)​

Para que el sistema detecte una imagen, debes convertirla en un formato especial.

Image Target Generator​

  1. Abre el generador 8th Wall Image Target Generator

  2. Arrastra tu imagen

  3. Selecciona tipo:

    • Flat → imagen plana (recomendado)
    • Cylindrical → superficies curvas

  4. Asigna un nombre

  5. Da clic en Generate

  6. Descarga el archivo

📂 4. Agregar el marcador al proyecto​

Paso 1: Crear carpeta​

Dentro de tu proyecto, desde el administrador de archivos crea una carpeta llamada:

/image-targets

Paso 2: Copiar archivos​

  • Extrae el archivo descargado
  • Copia su contenido dentro de /image-targets

Paso 3: Asignar el target​

  1. Selecciona el Image Target en la escena
  2. En propiedades, asigna el archivo correspondiente

Desde 8th Wall elige el marcador

🧱 5. Agregar contenido al Image Target​

⚠️ IMPORTANTE:

El Image Target por sí solo no muestra nada.

Debes agregar un objeto hijo dentro de él.

Ejemplo de jerarquía:​

Image Target
   └── Objeto (imagen / video / 3D)

📷 6. Configurar la cámara​

  1. Selecciona la cámara
  2. Cambia el tipo a:
World AR

👉 Esto activa el modo de realidad aumentada

▶️ 7. Ejecutar el proyecto​

Paso 1: Instalar dependencias​

Abre la terminal en la carpeta del proyecto:

npm install

Paso 2: Iniciar servidor​

npm run serve

👉 Esto levanta el proyecto en localhost

🌐 8. Usar ngrok para probar en celular​

Paso 1: Ejecutar ngrok​

ngrok http 58241

usa el puerto que indique tu proyecto

Paso 2: Obtener URL​

  • ngrok generará una URL pública
  • Copia esa URL
  • Ábrela en tu celular

⚠️ 9. Solución de errores​

Error: "Invalid Host Header"​

Solución:​

Verificar la configuración del proyecto.

  1. Ir a:
/config/webpack.config.js
  1. Buscar:
devServer
  1. Agregar:
devServer: {
  // ... configuración existente
  allowedHosts: ['.ngrok-free.dev']
}

Paso final​

  • Reiniciar servidor
  • Volver a ejecutar ngrok
  • Probar otra vez

📱 10. Prueba en dispositivo​

  1. Abre la URL en tu celular
  2. Permite acceso a cámara
  3. Apunta a la imagen

✅ Resultado esperado​

  • La imagen es detectada
  • El contenido aparece encima
  • El contenido sigue el movimiento del marcador

⚙️ 11. Factores importantes​

Calidad del marcador​

  • Alto contraste
  • Muchos detalles
  • Sin áreas vacías

Iluminación​

  • Buena luz = mejor tracking

Rendimiento​

  • Evita modelos pesados
  • Optimiza texturas

🚀 12. Mejores prácticas​

  • Usa imágenes con textura rica
  • Mantén bajo el peso de assets
  • Ajusta bien escala y posición
  • Prueba siempre en móvil real
  • Básicamente las mismas recomendaciones para Lens Studio y Effect House