Hoy les presentaré otro tutorial sobre el sensor LiDAR. Esta vez para virtualizar un escenario e incorporarlo dentro un portal. Trabajaremos con Blender, una app de 3D scan y, por supuesto, nuestro inseparable Spark AR. Asimismo, recuerda que todos los archivos de este tutorial, los podrás encontrar en mi Patreon. Empecemos con el tutorial LiDar 3D Scan.
Tutorial paso a paso: aprende a hacer un portal con LiDAR 3D Scan en Spark AR
- En un vídeo anterior les expliqué el proceso de trabajo para incorporar un escenario virtualizado dentro de Spark AR. Te recomiendo revisar ese vídeo para que sepas cómo trabajar ese proceso paso a paso. En esta ocasión también usaré la aplicación 3D Scanner App y el escenario en cuestión será mi estudio de trabajo.
- Escaneamos en “high res” sin perder detalles de la zona. Pasamos por cada parte de mi estudio: el escritorio, la laptop, las paredes y el suelo. ¡Paramos el escaneo y listo! Ya tendremos el escenario virtualizado.
- Las razones por la que utilizo esta aplicación es porque también podemos editar el resultado para disminuir su tamaño y peso. Entramos a “simplify mesh” y verás como los vértices se reducen, repetimos esta acción 3 a 4 veces.
- Por último, también usaremos smooth, para suavizar las superficies. Ahora sí, volvemos a agregar texturas para tener el resultado final, como verás, es un buen acabado. No hemos perdido los detalles importantes de manera drástica. Eso es lo bueno.
- En estos momentos pasamos a editar el objeto para cortar y trazar límites. Cuando realices este proceso por primera vez, te resultará algo complicado, pero luego se te hará super fácil de manejar. ¡Listo! Vamos a exportarlo en formato GLB, pesa menos de 3 megas. ¡Ahora vamos a Spark AR!
- En Spark AR creamos un proyecto nuevo con plane tracking, luego importamos el archivo. Vamos a ajustarlo para que se visualice mejor en el programa, el objeto tiene su material incorporado. Podemos hacer un ajuste para que se visualice mejor, debemos hacer un pequeño truco en el shader type: cambiar y regresar a la opción. Esto es cuestión de gustos, muchos utilizan el shader type en flat. Ahora vamos a crear el vortex del portal.
- Primero creamos un plano, este debe estar dentro del placer, modificamos su escala y también le crearemos un material. Dicho material tendrá como shader type: el flat. Ahora crearemos un pequeño efecto visual utilizando SDF y animaciones. Para eso, creamos un loop animation que estará conectado a un delay. Llamaremos al SDF Star y también llamaremos a un transition, hacemos un cambio de “vector 3” a “number” y lo conectamos también.
- Utilizaremos otro SDF de nombre “twist”, lo conectamos. Por último, agregamos el patch “step” y conectamos todo con la textura del material. Aún no se ve como vortex, tenemos que ajustar los valores del “transition”.
- Cambiando los valores de inicio y de fin se puede generar efectos totalmente distintos. Experimenta con las opciones, se ve bueno. Ahora vamos a Blender.
- En Blender, crearemos la oclusión, si me sigues desde hace un tiempo, sabrás que lo podemos crear a partir de un cubo. Presionamos TAB para ir al modo edición, utilizamos la herramienta “loop cut” y dividimos el cubo en varias partes.
- Utilizamos la selección de “face” y elegimos este espacio específico. Vamos a eliminarlo. Al final borramos cuatro espacios que quedaría, ahora el cubo tiene un hueco, en estos momentos exportamos en formato DAE. Regresemos a Spark AR.
- Incorporamos el cubo occlusion y lo agregamos dentro la jerarquía del placer. Tenemos que cuadrar el espacio del cubo con el efecto de portal, tomará un poco de tiempo. Recuerda siempre trabajar todo esto en Blender, es la mejor manera.
- Este cubo tiene un material y es aquí donde haremos el efecto oclusión. En render options, usaremos “alpha” y reducimos la opacidad, ¡genial! Me encanta la oclusión, de verdad es uno de los procesos más interesantes. Seguiremos haciendo ajustes, tómate el tiempo que gustes.
- Una modificación que podemos hacer es cambiar el color de ese vortex del portal, vamos al material del plano y le reducimos la opacidad. Ahí le cambiamos de color, yo elegí el color rojo.
Atención: Recuerda que todos estos archivos los encuentras en mi Patreon, hay diferentes montos: el de $5 te permite tener los archivos de Spark AR, en cambio el nivel de $15 podrás obtener todos los archivos 😉
- Continuemos, vamos a hacer un ajuste final, ya que si entramos a este portal tal y como está, la experiencia no será tan buena porque no nos llevará a una escenario completamente distinto al actual. Nos falta duplicar el cubo oclusión, le bajaremos la escala solo un poco y le creamos un nuevo material. Este será de color negro, seguimos ajustando hasta que quede bien. ¡Ya lo tenemos! ¡Vamos a probarlo!
- El prototipo nos ha quedado muy bien! el segundo cubo occlusion genera la impresión de estar dentro de un agujero negro, en una dimensión totalmente distinta. ¡Podemos ver la verdadera realidad a través del hueco!
- Podemos hacer este portal con otros escenarios. En Spark AR manejaremos la misma lógica, solo tendrías que hacer ajustes en el cubo occlusion para mantener las proporciones dependiendo del escenario virtualizado. Este sería el resultado.
Me gusta jugar e interactuar con los portales, entrar y ver un ambiente totalmente distinto me hace sentir que me transporto. Espero que te haya gustado el proyecto, LiDAR 3D Scan recuerda que el resultado final depende de qué tanto lo mejores.
Si desear apoyarme para mantener mi sitio web y también recibir los archivos de mis tutoriales, puedes hacerlo accediendo a mi patreon.