top of page
Foto del escritorDavid Lopez

[TUTORIAL] [PARTE IV] Introducción a Shader Graph

Water Toon


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

📷


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.

📷

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

📷


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.

📷


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.

📷


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.

📷


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.

📷


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.

📷


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).

📷


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


📷

Con esto tendríamos nuestro efecto terminado.

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

20 visualizaciones0 comentarios

Entradas Recientes

Ver todo

Comments


bottom of page