8th Wall es una librería sorprendente. Hace unos meses escribí al respecto y hoy les traigo un tutorial de iniciación. Los primeros pasos de esta librería. En los próximos minutos te explicaré como hacer un Hello World de Realidad Aumentada para web.

Cuando me refiero a “web” estoy hablando de utilizar javascript, ya no flash (como antiguamente se realizaba). Este es un enfoque parecido al trabajo con ARJS, pero con la diferencia que existe un desarrollo más evolucionado respecto a 8Th Wall porque es capaz de utilizar 6D0F, interacción con la luz y reconocimiento de superficies.

8Th Wall tiene dos formas de trabajo: Web y APP. Ambas plataformas tiene los mismo beneficios generales.

Lo genial de trabajar para Web es que permite utilizar otras plataformas como:

  • Three.js: Por el momento solo tiene un ejemplo “Tap to Place”.
  • Sumerian: Esta plataforma de AR/VR se integra con 8thwall y permite sacar interesantes proyectos como Spiderman.
  • A-Frame: La librería que utilizará para crear la experiencia de WEB-AR. A-frame es una gran librería que deberías prestarle atención. Será el futuro de la realidad extendida.

Mira el tutorial de iniciación

Paso a Paso

Este pequeño tutorial está orientado a proyectos Websm por ello vamos hablar de javascript y Html.

  • Lo primero que debemos hacer es crear una cuenta de 8th Wall.
  • Luego debes crear tu workspace orientado a Web. Llamado “Web Developer.
  • Al crear te encontrarás un dashboard. En ese espacio también visualizarás un “Appkey” que será vital para la creación del proyecto.
  • Otro paso importante es crear el token. El token servirá para que pueda funcionar la prueba desde tu smartphone. Hazlo correctamente.
  • Descarga el código fuente desde GitHub para iniciar las pruebas de A-frame.
  • Usaremos el archivo fuente llamado “Placeground”.

Usaremos archivo GLTF para implementar la magia. Recuerdas que era este formato? Es la tendencia respecto a objetos 3D.

  • Respecto a la escala correcta del lobo. Yo utilicé esta configuración:
newElement.setAttribute('visible', 'true')
              newElement.setAttribute('animation', {
                property: 'scale',
                to: '0.991 0.991 0.991',
                easing: 'easeOutElastic',
                dur: 800,

Espero que te haya gustado este tutorial de iniciación. Se vienen interesantes cosas para el 2019 😉



Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.