Introducción a Shader Graph IV : Water Toon

Este será la última parte del tutorial introductorio. Así que para acabar os traigo un shader de agua estilizada. 

5AW28-SgQjLP7iYqQblY7NY19TY2Ov9ANL66eNgu

Para empezar, como en los anteriores, creamos un nuevo shader PBR Graph con su material correspondiente y se lo asignamos a un plano creado en la escena. Antes de entrar en profundidad con el shader, necesitamos poder acceder desde dentro a una textura de profundidad de la cámara. Esto veremos posteriormente que lo usamos para el efecto que producen los objetos que están dentro del agua. Si revisamos el gif, vemos que los pies y parte de la caja están dentro del agua. Para poder activar el acceso, simplemente tendremos que ir al asset que controla el LWRP. Puedes localizarlo rápidamente en Project Settings/Graphics.

be-J6eXLb9WVNIR1VQaSM-N6ksAFDwjpKKatu4JI

Si pinchas en el asset, te llevará a él en la ventana Project. Selecciónalo y en el inspector activa el toggle Depth Texture.

N_QWzACFaV5UYQUEGYQBoYBupkoHTStDD60YKe3e

Una vez activado, podemos abrir el editor de nuestro nuevo shader y ponernos a trabajar con él. Vamos a establecer en el PBR Master (en el engranaje) el tipo de surface Transparente, ya que el agua a diferencia de los anteriores sí que debe serlo. Aunque puedes probar posteriormente con diferentes valores para ver el resultado.

RrkRnaVRMoLTHMEwy6PlUMPxKn82jEiN8gFwQ-7l


Para el desplazamiento de vértices vamos a basarnos en el anterior ejemplo. Podemos copiarlo o volver a crearlo si recuerdas el mecanismo. Simplemente añadimos a la posición del vértice la normal multiplicada por el ruido. En esta ocasión, vamos a usar otro tipo de ruido con el nodo Gradient Noise. Para nuestro efecto de agua es más útil ya que ofrece más fuerza en las frecuencias altas, que usaremos para las olas. 

oyTw7R1TkI1BpSFFAHU6nhttDMy0ZXbhF4WbeYjT

Como ves he creado las variables necesarias para poder editarlas desde el propio material. Ahora simplemente necesitamos añadir algo de movimiento a las olas. Para eso, ya conocemos el nodo de tiempo. Vamos a multiplicarlo por el nodo de ruido. Para ello necesitamos un nodo auxiliar de UV que nos permita mover las coordenadas. Ese nodo es el de Tiling and Offset. Lo añadimos y conectamos el nodo de tiempo. Luego conectamos la salida a la entrada de UV del ruido. 

egBA6RxHNb8UC1lNKN_HpssuhoNB648jBM4HZk4n

He añadido un Multiply para controlar la variable tiempo por editor también. Con esto tendríamos el efecto de olas simulado. Puedes cambiar los ajustes desde el editor a tu gusto. 

Ahora pasaremos a la parte del color. Para el efecto de la espuma de las olas vamos a volver a usar un ruido, esta vez el Simple Noise nos valdría, aunque se libre de elegir, incluso puedes probar con Voronoi u otros si quieres. Al igual que con el efecto de oleaje, necesitaremos mover las Uvs con el Tilling and Offset y el Time. 

QbGNkHSLlIUXH0BQSbj9hzs6jzDWvkwX59313i2_

Para poder simular el efecto de espuma estilizada, usaremos el ya conocido Step. Con el limpiaremos la textura de ruido con el valor de entrada del Step. Además podemos multiplicar la salida del Step para cambiar el color de la espuma. Todo esto siempre haciendo uso de variables para poder editarlas posteriormente. Repito mucho esto, pero es muy importante poder cambiar tú o la persona encargada de eso los ajustes sin necesidad de abrir el shader. 

b4adkgj4VhdmWiLFR6GJ8O2FZtjICPvWqqI3m_-Q

Solo faltó crear una variable para la entrada del Step, siéntete libre de hacerlo tú si lo crees necesario.  En mi caso las espumas son blancas, así que no se aprecia el cambio con la multiplicación pero no tiene porqué ser así. 

Solo faltaría añadir el efecto de profundidad y darle color. Por otro lado buscamos el nodo Scene Depth qué es el que guarda la textura de profundidad de la cámara (lo que activamos anteriormente vamos). Una vez añadido, vamos a cambiar el Sampling Mode a Eye. Esto nos dará la profundidad convertida en unidades de espacio ocular. Esta textura la vamos a dividir por un valor para poder controlar su profundidad. Con esto a mayor denominador, más profundidad se consigue y viceversa. Podremos verlo posteriormente modificando el valor. Por último vamos a crear un Lerp para mezclar el color según la profundidad obtenida(con dos colores). 

6eKWAwyEz4497EL3giG1G-tfW6bTN3gjBhw4KhTX

Solo faltaría conectar las dos partes con un nodo Add y conectarlo a la entrada de Albedo. 

OFz68LphHE3qdt7wF1TBbyz-Y32omeilV8pKNnII

Con esto tendríamos nuestro efecto terminado. 

Espero que os sea útil y cualquier cosa no dudéis en preguntar.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *