Hoy te traigo un tutorial que me pidieron mucho por patreon y por instagram. ¿Cómo hacer un Spark AR Color Picker? Es decir, como reconocer qué color se está mostrando en la pantalla. Haremos eso y más pues, trasladaremos esa información hacia un objeto 3d y también usaremos screen tap para iniciar la actividad. Vamos al tutorial!
Tutorial Spark AR Color Picker
Para hacer este proyecto de realidad aumentada necesitamos crear elementos visuales y trabajar también con elementos relacionados al Patch Editor. Primero agregaremos un plano. El plano será nuestra guía para indicar a qué elemento se le extraerá el color según el movimiento de nuestra cámara. Al plano se le creará también un material.
Luego crearemos un plane tracker. El plane tracker no está conectado con el plano que cree inicialmente, es decir, no está en su jerarquía.
Ahora agregaré un archivo 3d. Puede ser un archivo trabajado en blender u otra plataforma. En este caso será un corazón que nos proporciona la librería de Spark AR. Este archivo lo arrastro a la jerarquía del plane tracker. Modificaremos la escala. También le agregaré una animación simple predeterminada llamada “Float”. Se podría decir que hemos completado el trabajo visual básico. Ahora iremos a trabajar con el patch editor.
Proceso con el patch editor
En cámara habilitamos el camara texture. Lo arrastramos al patch. También arrastraremos device hacia dicho patch. Ahora agregaremos un screen tap para activar el filtro. Ya tenemos los 3 elementos iniciales que nos servirán para crear la experiencia.
- Agregaré “divide”. Conectaré el 2d position del screen tap y el screen size de device hacia “divide”.
- Ahora crearé “texture sampler”. Este patch permitirá conectar una textura y también mencionar las coordenadas. Por ello, es tan importante conectar “device” a través del “divide” hacia el UV. Luego conectaremos el RGBA de “camera texture” hacia el texture sampler.
- Actualmente ya hemos conectado screen tap, device y camera texture para la lectura correcta del filtro, pero aún no se activa la funcionalidad del Tap. Para ello, usaremos el “if then else” y “switch”. Conectaremos el screen tap con el turn on del switch; y luego este elemento se conectará a la condición. Agregamos el valor 1 en el “then”.
- Ahora necesitamos conectar ambas experiencias con un “mix”. En alpha le agregamos el número 1. Necesito, en estos momentos, conectar toda la experiencia hacia la textura del material heart_mat.
- Por último, conectaré también el material del plano creado. vamos a probarlo!
Vamos hacer un detalle. Ya sabemos que el plano inicial sirve de guía y qué mejor guía que unos de los íconos más usado por windows: el cursor de la mano. El material del plano será cambiado por esta nueva imagen. Como siempre, deshabilito la compresión automática.
Patreon
Si desear apoyarme para mantener mi sitio web y descargar los archivo de mi tutorial de Spark AR Color Picker, puedes hacerlo accediendo a mi patreon.
