Inicio Rápido - AR con 8thwall

Este tutorial cubre cómo usar wonderland-ar-tracking junto con 8thwall.

Puedes usar cualquiera de las capacidades de seguimiento soportadas por 8thwall:

  • Seguimiento SLAM
  • Seguimiento de imágenes (planas y cilíndricas)
  • Seguimiento facial
  • VPS (seguimiento mundial con malla pre-escaneada para oclusión)

Instalar Plantillas de Proyectos 

Descarga el repositorio wonderland-ar-tracking, ya sea como ZIP (<> Code > Descargar ZIP), o clónalo con git.

Extrae la carpeta y copia la carpeta “SLAM-camera” de examples dentro de tu carpeta templates. La carpeta templates estará localizada en la siguiente ubicación, dependiendo de tu sistema operativo:

  • Windows: %APPDATA%/WonderlandEngine (%APPDATA% se puede escribir en la barra de ruta del Explorador de Windows y resuelve a C:\Users\<Username>\AppData\Roaming)
  • MacOS: ~/Library/Application Support/WonderlandEngine (~ es tu carpeta de inicio)
  • Linux: ~/.WonderlandEngine/

Creando un Proyecto 

Si configuraste correctamente la plantilla, deberías ver lo siguiente al crear un nuevo proyecto en Wonderland Editor:

Inicio Rápido - AR con 8thwall

Con la nueva plantilla seleccionada, puedes crear un proyecto.

Pruebas 

Para probar el proyecto localmente, 8thwall requiere que configures certificados locales, ya que bloquean el servicio sin HTTPS.

Configurar Certificados SSL 

Para generar tus propios certificados SSL para localhost, abre Views > Preferences > Server y haz clic en Generate Certificates. Los valores de preferencias se configurarán automáticamente.

Finalmente, reinicia el servidor: Detén el servidor haciendo clic en “localhost:8080” en la parte superior de la ventana del editor, luego haz clic en “Stop Server”. Luego haz clic en “not running”, luego “Start Server” para iniciar el servidor nuevamente.

Ver en el Smartphone 

Para Android:

  1. Asegúrate de tener “Depuración USB” habilitada en tu dispositivo.
  2. Conecta tu dispositivo vía USB.
  3. Selecciona “Dispositivo Local” para activar el diálogo “Permitir depuración USB” en tu dispositivo.
  4. Una vez aprobado, puedes seleccionar el dispositivo en el menú desplegable.
  5. Marca la casilla “SSL”.
  6. Presiona la flecha verde para lanzar el navegador con la página en tu smartphone.

Para iOS:

  1. Conecta tu dispositivo iOS y tu Mac a la misma red Wi-Fi.
  2. En tu Mac, encuentra el nombre de tu Mac: ve a System Preferences > Sharing para encontrar el nombre de tu Mac.
  3. (opcional) Instala los certificados SSL que generamos antes en tu dispositivo iOS: puedes enviarte el certificado por correo electrónico e instalarlo mediante la aplicación Mail, o usando Apple Configurator.
  4. (opcional) Confía en el certificado instalado en tu dispositivo iOS navegando a Settings > General > About > Certificate Trust Settings.
  5. Abre Safari en tu dispositivo iOS: Escribe la URL http://YourMacName.local:8080 o https://YourMacName.local:8081 si usas SSL.

Publicar 

Para publicar tu experiencia basada en 8thwall, necesitarás reemplazar el Token de API de 8thwall en src/index.js.

Crear un Proyecto de 8thwall 

  1. Crea una cuenta en 8thwall.com. En tu Dashboard de 8th Wall, haz clic en “Start a new project”.
  2. Selecciona “Self-Hosted”.
  3. Establece un nombre para el proyecto y un “Tipo de Licencia” que se ajuste a tus necesidades.
  4. Haz clic en “Create”.
  5. Agrega los dominios en los que alojas en “Setup Domains”.
  6. Ve a “Settings” (símbolo de engranaje a la izquierda).
  7. Copia la clave de la aplicación desde la sección “My App Key”.

Pega la clave de la aplicación en el archivo src/index.js: Reemplaza el valor de window.API_TOKEN_XR8 = '<aquí>';.