Jump to content
UnitySpain

Aceptamos donaciones vía Paypal.

UnitySpain.com es un servicio gratuito, pero mantener la Comunidad conlleva una serie de gastos.

Fondo Anual Unityspain: Donados 58,34€ de 150,00€

  • Servidor: Dominio.com y Hosting Web
  • Mantenimiento de los Foros
  • Contenido y Servicios Extras
  • Mantenimiento para Redes Sociales
_davidlopez29

[TUTORIAL] Introducción a Shader Graph

Recommended Posts

Hola a todos, mi nombre es David y este es el primero de una serie de tutoriales sobre Unity3D. Esta iniciativa surge del programa Unity Student Ambassador y están creados por mi inicialmente para workshops presenciales. Los he adaptado a este formato pero si tienes cualquier duda no dudes en preguntarme. Espero que os guste.

Introducción

¿Que es Shader Graph?

La creación de shaders en Unity ha sido tradicionalmente el terreno de juego de personas con habilidades para programar. Shader Graph abre el campo para artistas y otros miembros del equipo para que la creación de shaders sea mucho más sencilla. Solo conecta nodos en una red gráfica y podrás ver los cambios al instante.

 

Requisitos

El Shader Graph está disponible desde Unity 2018.1. Está diseñado para funcionar con otra característica de Unity 2018.1: Scriptable Render Pipeline (SRP). Por lo tanto, no puede usarlo con el Built-In Unity Renderer. Tiene por tanto soporte tanto para LWRP como para HDRP (o para su propio SRP). 

Para este tutorial usaré la versión 2019.2.9f1. 

 

¡Comencemos!

Lo primero que necesitamos es abrir Unity y crear un nuevo proyecto. Asegúrese de que elige usar el nuevo SRP. En nuestro caso elegiremos el LWRP.
w6tJtkRhivhBvrAGh0mRYik2gzVLnxpdyLa-SKW3

Confirmamos y esperamos que Unity lo prepare todo. Una vez dentro de Unity ya podemos ponernos a trabajar. Por defecto debería tener incluido el paquete Shader Graph. Puedes comprobar ese y otros paquetes instalados en Windows/Package Manager. 

 

Nuestro primer Shader

En la ventana Project, pulsamos el botón y elegimos Create/Shader/PBR Graph. Si queréis conocer más acerca del PBR está es una buena guía: 

Regístrate para acceder a este contenido.

6zipcvcp9TbpYfHE99KTD6YZ_kzTe9mt25T5bKWS

 

Nombramos el archivo con el nombre que queráis. En este caso le llamaremos Standard_Color. Ya tendríamos nuestro primer Shader creado, vamos abrirlo. Lo seleccionamos y en la ventana Inspector pulsamos Open Shader Editor.

oCufYyKYv9EAD9bC6wmb3Gj3lKAX24wheouKo2y2 

 

Si todo ha ido bien, deberíamos ver esto:

LSvbSAtDIGwl8qq3TIM5t9wJsMqp8LKTFPeBI5Tn


Dentro del Shader Editor podemos ver tres sectores claramente diferenciados:

  • PBR Master Node: Es el nodo principal, al que acaban llegando todos los demás. Es el encargado de mostrar las características en el material. 

  • BlackBoard: Puedes activarlo y desactivarlo arriba a la derecha. Es donde creas y guardas las propiedades que necesitas usar. Encontrarás Colores, Vectores, Texturas etc… Estas pueden aparecer en el inspector del material para ser usadas más adelante. 

  • Preview: Es la previsualización actual de la entrada del PBR Master Node. Puedes cambiar el tipo de renderización pulsando el botón derecho. (Cubo, quad,sphere…) 


Una vez conocemos las partes vamos a añadirle funcionalidad a nuestro nuevo Shader. Comencemos añadiendo color. Vamos a abrir el Blackboard y vamos a pulsar en el +. Con esto podremos crear una variable de entre las que Shader Graph nos ofrece. En este caso elegiremos Color. Ahora podremos cambiarle el nombre, pero en nuestro caso lo dejaremos tal y como está, con el nombre Color, que al fin y al cabo es lo que será para nosotros. 

Zc4ARGnCKRs6RflHobuFFRZsabsuTZ2-bIM25O3_

 

El toggle de Exposed indica si quieres que esa variable aparezca posteriormente en el material para ser editada de forma rápida. En nuestro caso así lo queremos así que la dejamos marcada. En Default puedes elegir el color que desees por defecto, como he dicho podrás cambiarlo después en el material pero si quieres ver como queda en el Shader Editor tendrás que cambiarlo aquí. Por último el Mode te permite establecer el color como HDR. Puedes hacer efectos realmente atractivos con esto pero de momento lo dejaremos como está. 

Una vez creado nuestro Color vamos a arrastrarlo hacia el Grid donde esta el PBR Master y lo soltamos. 

9V5-mopc1-Cky0ysGQIv3jwmbCANYmhqlKriwsEG

 

Como vemos este nodo Color solo tiene una salida, conectamos la salida con la entrada de Albedo. Si habías cambiado el color default verás que la Preview ahora aparece de otro color. Sino puedes ir ahora y cambiarlo. Una vez hecho esto pulsamos arriba a la izquierda en Save Asset y podemos cerrar el editor. 

Ahora solo nos falta ver nuestro shader en pantalla. Para esto añadimos una esfera a la escena y creamos un nuevo material. Le pondremos de nombre Standard_Color_MAT, por ejemplo. Una vez creado el material, lo seleccionamos y en el desplegable del Shader elegimos ShaderGraph/Standard_Color o como llamases a tu Shader. Arrastramos nuestro nuevo material y lo soltamos encima de la esfera y … 

Gt5MakfAHlvd59SfJa1-gFOTF3T5e0pXV9k8RDDg

 

Ahora podemos cambiar cambiar desde el Material el Color, ya que anteriormente lo activamos. 

 

Nodos importantes

Antes de continuar el tutorial voy a explicar algunos de los nodos más usados ya que los vamos a usar más adelante. Me dejo muchos pero para esta introducción son suficientes:

  • Math Basic: Son las operaciones matemáticas más comunes. Suma, División, Multiplicación, Resta …

  • UV: Son nodos que actúan sobre las coordenadas de uv. Podemos rotarlas, moverlas y darle algunos efectos como el Twirl o Spherize. Veremos un ejemplo más adelante. 

  • Shapes: Son texturas generadas proceduralmente dentro del editor. Podemos crear círculos, rectángulos, polígonos etc… 

  • One Minus: es simplemente la operación 1 - x. Es muy útil como veremos más tarde, tanto que tiene su propio nodo. 

  • Noise: es un nodo generador de ruido. Veremos también su uso más adelante. 

  • Step: es un nodo que dado un valor entre 0 y 1, compara la entrada con ese valor y devuelve 0 si es menor y 1 si es mayor. Por ejemplo: si nuestro valor es 0.4, todos los valores por encima que entren en el nodo, serán convertidos a 1 y todos los inferiores serán 0. 

  • Dot: es un nodo que calcula el Producto Escalar entre vectores. Devuelve 1 si apuntan exactamente en la misma dirección, -1 si apuntan en direcciones completamente opuestas y 0 si los vectores son perpendiculares.

  • Lerp: es un nodo que devuelve el resultado de la interpolación lineal entre las dos entradas en función de la entrada T. El valor de la entrada T está sujeto al rango de 0 a 1. Por ejemplo, cuando el valor de la entrada T es 0, el valor de retorno es igual al valor de la entrada A , cuando es 1, el valor de retorno es igual al valor de la entrada B y cuando es 0.5, el valor de retorno es el punto medio de la dos entradas A y B .

 

dvfKuIFk0uHo9usXA_W0Nh8a-OKOjAehvVNvjAoP _iYZAzCTRd_ZsZO4OxYaWPGqy82wBP_QXRxP0_PX  TqqHSav3PthMKFK2_S6IEdCJJMW_T-3-uhMYksxc


 

Dissolve Shader

Una vez conocemos los nodos más importantes, vamos a hacer un Shader algo más complejo que el anterior. Vamos a crear un efecto que disuelva el objeto haciendo que desaparezca y aparezca a nuestro gusto:

b0cuMImmXaSoyFYLaeIUBK29fZ_Ci3bg0F4q0IBE

 

Para esto volvemos a crear un nuevo Shader y le ponemos de nombre Dissolve. Lo abrimos y seleccionando el PBR Master pulsamos en el icono del engranaje. 

mTfH5f59J9-D1SuPhlEQMOhJQ5EIIg7nUyppt5qa

 

Aquí vamos a encontrar algunos ajustes interesantes como si el objeto es Opaco o Transparente. En este caso lo dejaremos como está (Opaque) y lo único que marcaremos será el Two Sided. Esto hará que el objeto pinte también sus caras internas, lo que conlleva eso sí, un coste extra. Tenlo en cuenta en el futuro, en este caso para el Cubo en cuestión, nos interesa que las caras internas también se vean cuando está disolviendo. 

Una vez marcado, vamos a crear algunas variables que usaremos. En primer lugar necesitaremos un valor comprendido entre 0 y 1 que se encargue de llevar el progreso disuelto. Será 0 cuando el objeto se vea por completo y 1 cuando esté completamente disuelto. Para eso en el BlackBoard crearemos un Vector1(que no es más que un simple número) y lo nombraremos como Dissolve Value por ejemplo. Para facilitarnos el trabajo, podemos cambiar el tipo de número con Mode. En nuestro caso está comprendido entre 0 y 1 por lo que elegiremos Slider y rellenaremos el min y el max con esos valores. 

GVjdrXdUd5wgo68VAZXzgnXoAZ4zKJUYFfsHsL6F

 

A su vez, necesitaremos también un Color para el objeto, como en nuestro anterior Shader y un Color diferente para la parte que se esté disolviendo. Creamos ambas variables, estableciendo el Color para disolver cómo HDR si quieres que brille como el del gif (necesitarás también tener el paquete de post procesos y activar el Bloom). Por último necesitaremos un valor que indique el grosor que tendrá el dissolve. Podemos revisar el Gif para ver el grosor que tiene la parte que se está disolviendo. Creadas todas las variables en mi caso quedó así:

BHTqwjabXIcNQITSp4giE7vYqYap_jo8py9gmODQ

 

Para el efecto de disolver necesitamos en primer lugar una textura que genere ruido donde las zonas negras indiquen lo que llevamos disuelto y las zonas blancas lo que nos queda por disolver. Por suerte, como vimos antes, tenemos un nodo de ruido perfecto para este uso: Simple Noise, asique lo añadimos. Podemos cambiar el valor de Scale del nodo a nuestro gusto. Cuanto menor sea el valor más “zoom” hará el ruido. También vamos a necesitar el nodo Step que si tenías dudas de su uso, en este caso lo vas a entender perfectamente. Ahora unimos la salida de Simple Noise a la entrada Edge del Step.

 

OBDAu8ofqH97NmiDyLd-C8DjUM5inHHd6RWooXQP

 

Ahora podemos cambiar el valor del Step entre 0 y 1 para ver su utilidad real. Los valores de ruido que estén por debajo de ese valor devolverán 0 y los que estén por encima devolverán 1. Es decir cuando el Step sea 0 el objeto no se verá y cuando sea 1 se verá completamente. Justo lo que queremos que ocurra. Simplemente conectamos nuestra variable DissolveValue a la entrada In del Step. Para hacer pruebas vamos a colocar la salida del Step en el Albedo del PBR Master. 

 

47IBegY1oY-JqJAdgG9YmpPuJkA-FWixi2w4_XkZ


Vamos a guardar y vamos a Añadir un cubo a nuestra escena. Crearemos un material con nuestro shader y se lo colocaremos al cubo. En nuestro material podremos cambiar el valor del DissolveValue. Como vemos el efecto se acerca a lo que buscamos, aunque tenemos dos problemas. Primero no se está disolviendo realmente ya que está pasando de negro a blanco simplemente. Y segundo que el efecto está al contrario, cuando el DissolveValue vale 0 debería verse el objeto completo y cuando está a 1 indica que el objeto está completamente disuelto. Vamos a volver a abrir el Shader Editor para solucionar ambas cosas. Primero vamos a hacer que la parte negra se convierta en transparente. Para ello simplemente tienes que conectar la salida del Step con el Alpha del PBR Master. También tendrás que activar el AlphaClip. Aunque el valor que entra por defecto es 1 tendrás que ponerle tu el valor a través de un nodo. Simplemente crea un nodo Integer (que es un número sin decimal) y conectalo a AlphaClip.

2vZGktCs5QVrK93PriAVRbr2Odh7C2cP1E_QRo8J

 

Para el segundo problema simplemente usaremos el nodo que comentamos anteriormente. OneMinus. Si a 1 le restamos el DissolveValue obtendremos la parte contraria, que es justo lo que necesitamos. 

L97AeLwmUsegX8XJg4b-ZgGuLI_ASeUYPZduertP


Si guardamos y probamos comprobamos nuestro material ahora podemos ver que funciona como queriamos. Se disuelve de blanco a negro con el ruido que creamos. Solo nos falta añadirle color. Para ello volvemos al editor. Necesitamos pintar el borde que se disuelve y a raíz de ahí lo que tengamos a un lado del borde lo borramos y lo demás lo pintamos del color normal. Una forma de encontrar el borde es sumar el DissolveValue y el borde y restar por un lado el Step de la suma y por otro el Step del DissolveValue solo. Es más fácil de entender con una imagen (para que sea más visual he cambiado el valor default del Dissolve Value a 0.5):

aAQZ0f8JRqF_oDtbc_dzo4jdR9mpYq47K6yNK0o3

 

Como vemos ahora tenemos el borde diferenciado, pero no lo estamos usando. Lo que vamos a hacer es pintar con los colores que creamos al principio. Una buena forma de hacerlo es usar Lerp. Podemos hacer que si la resta es 1(blanco) se coloree con el Color del Borde y si es 0(negro) el color sea el normal. Y esa salida del Lerp la conectamos a Albedo. 

77QSouSTijg3RBGCZaSpa-Q4iE-om4P60Jwrql9t

 

Ahora podemos guardar y probar el shader. Si todo ha ido bien debería funcionar como esperábamos. Puedes cambiar a tu gusto los valores del material, como los colores o el borde. 

Si eres perfeccionista te darás cuenta de que si el borde es muy grande, pueden quedar algunos restos al disolverse. Esto podemos arreglarlo con un simple cambio. Sumando el valor del borde al dissolve antes de hacer el OneMinus. 

 

xA1RtGy73NEMVyfmF3Ho5SUAMzdH3OF_mbjKFUCL


También podrías crear una variable para el Scale del Simple Noise. Así tendrías un valor más que podrías modificar desde fuera sin tener que cambiar el shader. Por último vamos a añadir una textura que se añada al color, así lo podremos usar en más objetos. Simplemente crea una variable de tipo Texture2D y arrastrala al grid con los demás nodos. Tendrás que sacar un nodo llamado Sample Texture 2D y arrastrar la textura a la entrada correspondiente. Luego solo queda multiplicar por el color normal y sustituirlo en la entrada A del Lerp anterior. 

wvermOeXjNGp4T217mMOsYIzY6F721hE4dZsHjBk

Guardamos y desde el inspector del material añadimos la textura que queramos y habríamos terminado. 

No es la única forma de hacer este efecto, hay muchas otras, esta es la forma que yo usé. Espero que os sea útil. Cualquier duda que tengáis hacérmela saber y estaré encantado de ayudaros.  Nos vemos en el siguiente.

Edited by _davidlopez29

Share this post


Link to post
Share on other sites

Portal Effect

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

q7PMWNFz6_iSbwhVBd1ucOAQcpQyRHpujrt4u6U3

 

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. 

L0Rob8tkuS6Dgllv36QgDA_rvC1De9ci3ahrwZXa

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.

RreAtTfaMLQvrFe8IBM7qT_SZsUgasv30kHXxN7w

 

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.

jrfftWlzWZ1R4FNvGdWWJYHhICok7gxpQvl7S2TV 

 

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:

Regístrate para acceder a este contenido.
 

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.

AhwssY8NmxkF1jgDy73_lvQiUE-eF9jaOVqSNgHj

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

Cmfk0dACEGt6t7NhgVXKieh6FAogcEPs76alpqRN

 

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. 

-iGegbTDgNkd9fIAbrrBHqBPn3OxrG1vQi4oPbHO

 

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. 

FlyL6QKwhxzXwSGJ6ouG3esFnpVQhMx22rOoITrB

 

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. 

2TqjPuqCf2JRCMNtgLd6OCQhdVqAO6dwskSWbKRH 

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. 

WGEB_l_3_Fvpd0JtcfhVQ_Vcmq-IjE5R7C7vjhcg

 

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

Edited by _davidlopez29

Share this post


Link to post
Share on other sites

Vertex Displacement

Este ejemplo servirá de introducción para el desplazamiento de vértices.

vv1ack01CvVEkb3QJ4ZvXwe-DkXUJparqcyAj62k

 

Vamos a crear un nuevo shader, con su material correspondiente y lo vamos a aplicar en una esfera añadida a la escena. Colocamos la esfera visible para la cámara y comenzamos. Para el desplazamiento de vértices vamos a usar la primera de las entradas del Master Node, ya sea el PBR Graph o el Unlit Graph. Para este ejemplo usaremos el PBR Graph pero es indiferente. 

Para poder mover los vértices, simplemente tenemos que usar el nodo Position para saber la posición y sumarle el desplazamiento. En este caso usaremos un desplazamiento en dirección a su Normal. 

SnVY65oO_FjM0qkdb096I9ldOPtbTKf-5ImFcit-

Tendremos que asegurarnos de que el espacio en el que estamos trabajando está en relación al objeto y no al mundo. Esto podemos configurarlo en la variable Space del nodo. Con esto tendríamos un desplazamiento simple de los vértices. Pero es un desplazamiento constante, vamos a añadirle ruido y movimiento con los nodos Noise y Time que vimos anteriormente. 

BsJMJyelEYhNnLVj8g4P_LyduyT-MQWB4ER4RLA7

 

Ahora tenemos un efecto mucho mejor. Pero el movimiento está basado totalmente en el ruido que obtenemos, sin tener en cuenta cual es la posición actual del vértice. Para que tenga en cuenta la posición del vértice y se modifique en función de esta, simplemente sumamos a la Posición el Tiempo y lo conectamos con el Ruido. 

TXM_aa_n_ndEamYUhUCafCo91rZu51xU_ynIWq9z

 

Ahora hemos conseguido el efecto que queríamos. Cada vértice se mueve en función de su posición y del ruido que generamos. Si queremos cambiar la intensidad podemos usar el nodo Remap. Este nodo dado un valor mínimo y máximo de entrada, interpola el valor entre dos valores de salida mínimo y máximos. Por ejemplo en este caso, la salida del Simple Noise está entre 0(negro) y 1 (blanco). Estos dos valores serían la entrada al Remap. Si los valores de salida fueran 0 y 10, en los valores en los que el ruido entrase con valor 0.7,saldría interpolado entre 0 y 10, es decir saldría como 7. 

kRuPI-lzHXfWczCZ_bxTp-xeMuqOT2_YvVFZXYJ1

 

Como vemos, ahora el efecto se intensifica en función de la salida que establezcas en el Remap. Recuerda guardar las variables en la Blackboard para poder cambiar los valores desde el propio material posteriormente. 

Para acabar podemos hacer lo que queramos con el color. Podríamos simplemente asignarle una textura o crear un portal como en los anteriores casos. En este caso para no alargarlo, vamos a usar un simple Voronoi junto a un Color para dar el efecto que vimos en el gif. 

NJu_WcW9tNWjSRtcpMfA2iwFVWCgqMcrnii7TBmk

 

Es prácticamente lo mismo que hicimos en el anterior shader, colocamos el Lerp y le seteamos los dos colores.

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

Edited by _davidlopez29

Share this post


Link to post
Share on other sites

 

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.

Edited by _davidlopez29

Share this post


Link to post
Share on other sites

Buenas!

Para el tema del vertex displacement estoy intentando aplicarlo a un elemento UI para similar como si fuese agua que va subiendo hasta llegar a un tope, por tanto me interesaria que el displacement solo se aplicara a la parte superior del sprite, llevo ya un rato probando pero no hay forma, es eso posible con shadergraph? O hay otras formas mas eficazes de hacerlo?

Share this post


Link to post
Share on other sites

×
×
  • Create New...