Hoy te traigo un contenido especial que quería hacer hace algún tiempo. 8th wall es una plataforma para la creación de proyectos de realidad aumentada especializado últimamente en WebAR, realidad aumentada para web. Hoy haré un tutorial Portal 3D que estoy seguro que te interesará.
Ahora a inicio del 2020 su plataforma es más robusta, permitiendo crear proyectos de manera más sencilla 100% online, utilizando sus plantillas y varios recursos. Hace unas semanas me han habilitado 15 días de prueba con el modo “Agencia”, por ello, les traigo un video sobre los beneficios de tener esta versión y además también haré el susodicho tutorial 😉
Modo Agencia – 8th Wall
Para trabajar primero es necesario tener una cuenta. Entramos a “web developer” y creamos un nuevo proyecto.Le pondremos un título, y crearemos nuestro link de referencia. Describe tu proyecto. Al ingresar al dashboard veremos la opción de estadísticas, las opciones para agregar image target; y por supuesto el editor web.
Allí adentro veremos varias plantillas. Por ejemplo podemos entrar a este que se llama “manipulate 3d object”. Automáticamente se arma todos los archivos de trabajo. En “app” veremos los archivos claves… en “files” encontraremos elementos de interacción con el archivo 3d como hold, drag y pinch…. En “assets” estará el castillo en formato GLB.
Body tiene toda la estructura importante como la ruta del archivo del castillo, la posición de la luz y otros elementos.
Ahora lo que necesitamos hacer es autorizar el dispositivo para los siguientes trabajos con 8th wall. En el dashboard encontraremos dicha opción “device autorization”.
Ahora debemos entrar nuevamente al “open editor” y publiquemos el trabajo de esta manera. Ya puedes disfrutar tu proyecto, para visualizarlo bien puedes usar el código QR o el enlace que te proporcionan.
Estos son los pasos esenciales del plan “Agencia”, Una plataforma que contiene su propio editor, plantillas, capacidad de publicar el trabajo, hacer debugging, manejar la información en equipos, entre otros elementos. Ahora es necesario resaltar que el modo agencia brinda una serie de servicios y soluciones. Este cuesta 99$ mensuales y no está relacionado directamente con las licencias comerciales de publicación. Ese es otro punto.
8th Wall Tutorial Portal 3d
Ahora haremos el 8th Wall Tutorial Portal. Primero entraremos nuevamente a la plataforma de 8thwall y crear un nuevo proyecto. sigue los pasos anteriores. Lo que necesitamos ahora es el archivo del tutorial. Este se encuentra en el github de 8th wall.
En los ejemplos de A-frame veremos nuestro querido archivo: Portal. Dentro de este, veremos el código en html y el archivo 3d GLB. Entramos al código fuente… aquí está todo lo necesario. Copiaremos el código dentro de cualquier editor de texto como en mi caso: Sublime text.
Lo que haremos ahora es entrar a la página de tutoriales de 8th wall para tener nuevos archivos necesarios, En la descripción de su video de youtube encontraremos un link de Google Drive. Esta información lo usaremos más adelante.
Regresemos a la plataforma 8th wall. Entremos al “OPEN EDITOR”. En la sección A-Frame usaremos el proyecto en blanco. Luego de cargar, veremos 3 elementos -> head, app, body. También tendremos una carpeta llamada “assets”.
El apartado “head” contendrá obviamente los elementos correspondientes al HTML que están ubicados al inicio de su estructura. Así que copiaremos las líneas de código necesarias y lo pegamos dentro del proyecto 8thwall.
En estos momentos podemos ver que estamos llamando a los códigos necesarios de A-FRAME, además veremos el appkey de 8thwall que es vital para que funcione el proyecto. También veremos el script que permite crear el portal, como ocultar las paredes para generar la ilusión de la oclusión y otros funciones más.
Ahora en body copiaremos las líneas de código restantes que dejé en el Sublime text. Aquí veremos la verdadera arquitectura del portal, es decir, veremos el archivo 3d, el próximo video que agregaremos, además del código de la puerta.
Una vez teniendo los códigos implementado en la plataforma, nos falta conectar nuestro “app key” al proyecto. Ahora comenzaremos copiando los códigos del documento brindado por el tutorial Portal de 8thwall:
Copiaremos el primer script que nos permitirá manipular el video, es decir, darle play al video. Este script irá dentro del head, pero lo pondremos al final. Finalmente lo ordenaremos por diversión 😉
Iremos en el body, para agregar el video. Fíjate bien en el código “assets” Este está llamando al archivo 3d que aún no subo. Regresamos al documento del drive para copiar este código al proyecto. Este código llama al archivo video para que se reproduzca y por supuesto también introduce su ruta.
¿Se preguntarán que tipo de video se debe usar? pues un video 360 sería genial porque la textura que aplicaremos será esférica, por lo cual es ideal dicho formato.
Yo tengo un Insta 360 one X y grabo paisajes y recorridos en mis ratos libres. Lo que vamos hacer ahora es editar mi video de la iglesia de San Francisco de Lima. Puedes también probar con videos de prueba que existen en internet, tan solo recuerda que no debe pesar demasiado
Ahora arrastramos el archivo que llamé “video 360” hacia el plataforma 8th wall de esta manera hacia assets. Al cargarse aparecerá el archivo que puedes visualizar sin problemas.
Ya luego en el código pondremos la ruta del archivo de video. Abajo de este código veremos cómo se está armando la forma de la puerta 3d. Bajamos casi hasta la última parte para darnos cuenta del “sky color” y otros elementos de “box” que complementan el escenario.
Borraremos el color del sky y pegaremos este código del archivo drive. Este hace referencia del video esférico.
Como paso final necesitamos conectar el archivo 3d del unicornio. lo arrastramos como lo hicimos con el archivo del video. Luego modificamos la ruta del archivo… Ahora sí, vamos a guardar y probar…
Lo escaneamos y a probar!! 🙂
Archivos Patreon
¿Quieres tener las modificaciones de archivo de trabajo? Son las adaptaciones del 8th Wall Tutorial Portal inicial. Además si consideras que hago un buen trabajo y quieres apoyar mi proyecto, me puedes apoyar monetariamente en Patreon desde $1.
