Spark AR Custom Shader: ShaderSL

Todos nos alegramos con las nuevas actualizaciones que Spark AR trae para la realidad aumentada. Particularmente, me gusta mucho el Spark AR Custom Shader, esta es la nueva capacidad para crear y manipular dichos shaders a través de códigos. Hoy te traigo un video donde trataré de explicar las bases para trabajar con ShaderSL. Hablaremos sobre temas conceptuales, sobre la lógica y haremos un ejemplo simple.

Conceptos básicos del Spark AR Custom Shader: ShaderSL

Quizá al escuchar ‘shader’ se te venga a la mente juegos, texturas, pixeles. Eso es lo primero que entendí cuando escuché esa palabra; con esto quiero decir que no me considero un experto en el tema y como muchos de ustedes también se me hizo dificil de entender al inicio.

A medida que vas entrando al mundo de la creación de experiencias digitales, vas comprendiendo que shader (se podría decir) es un conjunto de instrucciones que generan una representación de una imagen a través de la composición de pixeles en simultáneo. Estas son ejecutadas por lo general via GPU, es interesante cómo unas lineas de código pueden transformarse en un estructura visual.

Uno de los elementos mas trascendentales es que estas instrucciones se ejecutan en simultáneo para generar el resultado. Un trabajo tradicional suele ser “serializado” y eso genera más tiempo de renderizado y de generación visual.

En los juegos se puede entender cómo el shader impacta en la experiencia, puede afectar en la iluminación del escenario, en las sombras de los objetos, entre otros efectos. La clave en este caso es el realismo.

Datos a tomar en cuenta:

• Los shaders,como hoy lo conocemos, se gestaron a través de un lenguaje llamado OpenGL Shading Language o conocido como GLSL.

• Se requiere tener algunos conceptos de álgebra y/o trigonometría.

La primera vez que escuché el concepto de ‘shader’ fue con Processing allá por el 2010. Me quedé sorprendido de las cosas que se podía hacer gracias a los cientos de ejemplos que encontraba en openprocessing y en su vasta documentación al respecto. Ahora muchas plataformas permiten la generación de shaders y Spark AR no podía ser la excepción.

Te recomiendo la página de Processing para que entiendas más del tema.

Spark AR lanzó en su actualización 102, el custom shader o también conocido como shader code. Podemos ver en su documentación una serie de ejemplos para implementar. Además, podemos encontrar su propio shading language que se le conoce como SparkSL, que a su vez hace referencia a GLSL 1.0.

Aquí hay muy buena referencia y podrás comprender cada paso si es que ya tienes cierto dominio del tema. Por eso, vamos a ir hacia las bases para comprender mucho mejor el mundo Shader. 

Te recomiendo una gran referencia llamada “The book of shaders”, escrito por Patricio Gonzalez Vivo & Jen Lowe. Aquí podrás encontrar desde el concepto básico, la explicación del funcionamiento interno y claro ejemplos iniciales, intermedios y avanzados. Lo mejor de todo es que está traducido a muchos idiomas.

Tutorial paso a paso

• Vamos a crear nuestra primera experiencia. Miremos el archivo ‘Hello World!’ que está representado de esta manera:

1. Para lanzar este shader básico, primero llamamos a los macros del proceso precompilado. es como setear las bases.
2. Luego veremos el «uniform float u_time» que hace referencia al tiempo en segundos desde que el shader aparece.
3. En el medio, se encuentra el void main, dentro del main principalmente se trabaja para generar la «magia» y claro también nos devolverá el «color resultado» al final.
4. Luego aparece el gl_FragColor, la variable dedicada a mostrar el color final del pixel.

• Un dato que debemos tener en cuenta es el vec4, el cual es una variable de 4 dimensiones Relacionado al RGBA (red, green, blue, alpha). No te preocupes que toda esta documentación se encuentra en Book of shaders.

• Ahora pasemos al código de SparkSL. Para ello necesitamos crear un proyecto desde cero, podemos usar la plantilla de face tracking. Crearemos un face mesh, luego le crearemos su material, ahora en add assets llamaremos al «shader code». Ya estamos casi listos, vamos nuevamente al material y en shader type elegimos nuestro archivo «shader code». Por defaulft, nos aparece este efecto, podemos editar dicho shader code y encontrarnos estas lineas de código.

• Podemos entender la lógica, al parecer se hace un llamado a los «macros», aparece el famoso vec4. También se hace un llamado a un gradiante horizontal y un elemento en forma de estrella generado a través del SDF. Ahora vamos a emular nuestro «HELLO WORLD».

• Pondré los dos códigos en la pantalla, si te das cuenta, en el código de Spark no existe ‘uniform’, ni el gl_Fragcolor, solo hay un return, el void es cambiado por el vec4 directamente. Vamos a realizar las modificaciones, ahora se podría decir que hemos «convertido» el código hacia SparkSL. Vamos a guardar el archivo y listo. ¡Lo tenemos! Este es nuestro primer ‘Hello World’.

• Ahora vamos a elevar un poco la complejidad, iremos hacia el apartado de colores. Mezclaremos dos colores a través de una onda sinusoidal. Aquí entra a tallar el factor tiempo para que cambie la presentación del color. Adaptamos nuestro código SparkSL ‘hello world’ a este nuevo.

• El vec4 main se mantiene, agregaremos los dos vec3 relacionados a los dos tipos de color. El tiempo será expresado con «float u_time» seguiremos haciendo ajustes y así quedaría.

• Recuerda que este shader code va conectado a un material, así que se puede usar con otro tracker y otro objeto 3D. A medida que vamos entendiendo y comprendiendo el funcionamiento podemos generar shaders mucho mas complejos. Claro está, también es importante encontrar páginas referenciales como esta de shadertoy que te permitirá entender mucho mejor cómo funciona el código y adaptarlo hacia tus proyectos de Spark AR.
  
  Por mi parte, seguiré aprendiendo y experimentando para traerles más contenido relacionado. Espero que te haya servido para comprender mucho mejor el mundo shader dentro de Spark AR. ¡Nos vemos en el metaverso!

Si desear apoyarme para mantener mi sitio web, puedes hacerlo y también recibirás los archivos de mis tutoriales de Spark AR accediendo a mi patreon.