[TUTORIAL] [Parte II] Introducción a Shader Graph

Portal Effect

El siguiente efecto es un portal muy simple inspirado un poco en la serie Rick and Morty:

📷

Para este efecto, a diferencia del anterior, vamos a crear un Shader Unlit Graph. La diferencia es que el PBR Graph incluye cálculos de iluminación avanzados entre otras cosas, cosa que el Unlit no.

📷

Este nodo Master como vemos, sólo tiene entradas para color y alpha. Una vez creado el shader, vamos a añadir un Quad a la escena con un nuevo material con nuestro shader. Colocamos la cámara para poder verlo y hacemos el Quad del tamaño que desees hacer el portal. Podrás cambiarlo posteriormente.

📷

Una vez creado abrimos el shader. Lo primero que queremos es crear una máscara circular para darle el efecto ovalado y no tener el rectángulo actual. Esto es simple, simplemente creamos un nodo de forma tipo elipse(Procedural/Shape/Elipse). Cambiamos el tamaño a 1 en ambas dimensiones y colocamos la salida del nodo en el Alpha del Master. Como en el anterior shader, sacamos un integer del AlphaClip y lo colocamos a 1.

📷

Si guardamos y probamos podemos ver que ahora es una elipse en vez de un rectángulo (cambia el color en el Unlit Master directamente si no lo consigues ver).

Para seguir vamos a hacer uso de dos nodos, que combinados, dan justo el efecto que buscamos. El primero de ellos es un nodo de ruido,Voronoi. La explicación de Voronoi se saldría del objetivo de este tutorial asique si te interesa te dejo un enlace de un artículo que lo explica muy bien:

https://www.abc.es/ciencia/abci-diagrama-voronoi-forma-matematica-dividir-mundo-201704241101_noticia.html

Junto al nodo de Voronoi vamos a usar un nodo de movimiento de UV, en este caso por Twirl que hace que las UV giren.

📷

Uniendo el nodo de Twirl al nodo de obtendremos lo siguiente:

📷

Puedes cambiar las variables de entrada de ambos nodos para que configurar el efecto a tu gusto. También sería una buena práctica crear propiedades para poder configuraras luego desde editor.

Ahora solo falta que gire, para conseguir este efecto necesitamos acudir a otro modificador de UV, en este caso el nodo Rotate. Este nodo se coloca en la entrada de UV del Twirl y nos permitirá controlar el giro de este.

📷

Podremos controlar el giro con la entrada Rotation del nodo Rotate. Llegados a este punto vamos a hacer uso de un nodo muy importante, que quizás se me olvidó comentar en la lección pasada. Es el nodo Time, el cual nos permite usar diferentes tipos de tiempo según lo necesitemos. Creamos entonces un nodo Time y conectamos la salida Time (el tiempo por defecto) a la entrada de Rotation.

📷

Como ves, si queremos controlar el tiempo simplemente podemos guardar una variable que multiplique el tiempo y esa salida la conectamos al Rotate. Puedes experimentar con los demás tipos de tiempo para ver lo que ocurre con cada uno.

Ahora ya solo necesitamos añadirle color. Puedes notar que el Voronoi tiene dos salidas, te animo a que pruebes el efecto con ambas, ya que son el mismo concepto pero de diferentes estilos. Yo me voy a quedar para este con la salida Cells, que le da un toque más estilizado. Al igual que con el anterior, vamos a hacer uso del nodo Lerp que nos ayudará a convertir los colores negros y blancos en los colores que nosotros queramos. Creamos dos colores, para poder editarlos más adelante y los colocamos en las entradas A y B del nodo de Lerp.

📷

Con esto el efecto estaría terminado. Vamos a añadirle unos detalles extra para mejorar el efecto. Podemos sacar un nodo Step del Voronoi. En este caso he usado la salida por defecto para poder apurar más el Step. Ponemos un valor pequeño en la entrada del Step para darle un toque sutil simplemente. Lo multiplicamos por el color que quieras, en mi caso blanco y posteriormente lo añadimos a lo que teníamos hasta ahora. Siéntete libre de modificar los valores a tu gusto para darle el tu propio toque.

📷

Espero que os sea útil. Cualquier duda que tengas no dudes en dejarla. Hasta la próxima.