Arte que conmueve: Creación de materiales animados con Shader Graph
En Unity 2018.2 agregamos la entrada “Posición de vértice” a Shader Graph, lo que le permite ajustar y animar sus mallas. En esta publicación de blog, demostraré cómo puedes crear tus propios sombreadores de animación de vértices y proporcionaré algunos ejemplos comunes, como un sombreador de viento y de agua.
Si eres nuevo en Shader Graph, puedes leer la publicación del blog de Tim Cooper para conocer las características principales o ver la charla “Introducción a Shader Graph” de Andy Touch en el canal de YouTube de Unity.
Esta escena no utiliza texturas ni recursos de animación; todo lo que ves está coloreado y animado usando Shader Graph.
Los sombreadores son un aspecto increíblemente poderoso del proceso de renderizado, ya que permiten un gran grado de control sobre cómo se muestran los recursos de nuestra escena. Usando una serie de entradas y operaciones, podemos crear sombreadores que cambien las distintas propiedades de renderizado de nuestros activos, como el color y la textura de su superficie, e incluso las posiciones de los vértices de la malla. También puedes combinar todo esto en animaciones complejas y enriquecidas. Esta publicación del blog demostrará cómo comenzar a trabajar con animaciones de vértices, presentará el concepto de uso de máscaras y propiedades, y finalizará explicando cómo creamos los sombreadores para la escena de la isla desierta.
Clonar repositorio desde GitHub o descargar .Zip desde GitHub
¡Descarga el proyecto de muestra Escena de Isla Desierta para comenzar a experimentar e interactuar con los sombreadores tú mismo! Este proyecto contiene todo lo que necesitas para empezar a utilizar Shader Graph. Asegúrese de iniciar el proyecto utilizando la versión 2018.2 o superior de Unity.
¡Cada sombreador en la Escena de la Isla Desierta fue creado teniendo en mente la personalización, así que siéntete libre de comenzar a jugar con los valores del sombreador en el Inspector! Cada objeto también tiene un archivo preestablecido que devolverá los valores predeterminados.
Esta obra está bajo la Licencia Creative Commons Atribución 4.0 Internacional.
Para utilizar Shader Graph, su proyecto debe cumplir los siguientes requisitos:
- Ejecutándose en Unity versión 2018.2 o superior.
- Utilizando los nuevos canales de renderizado ligeros o de alta definición (se sugiere LWRP para experimentación debido a tiempos de compilación más rápidos).
- Tenga el paquete Shader Graph instalado en el Administrador de paquetes.
Para instalar Shader Graph, cree o actualice un Proyecto a la versión 2018.2 o superior, navegue a Ventana > Administrador de paquetes > Todos, busque Shader Graph en la lista y haga clic en instalar.
Si sus materiales no se animan en la vista de Escena, asegúrese de tener marcada la opción Materiales animados :
¿Estás haciendo algo sofisticado con Shader Graph?
Puede obtener una vista previa de los materiales animados haciendo clic en el pequeño menú desplegable de imágenes en la parte superior izquierda de la vista de escena.
#UnityTips #Unity3D
Antes de que podamos comenzar a usar matemáticas sofisticadas para mover cosas, necesitamos entender qué es lo que estamos moviendo.
Una malla en la escena tiene cuatro tipos de espacios:
- Objeto: Posición del vértice con respecto al pivote de la malla.
- Vista: Posición del vértice con respecto a la cámara.
- Mundo: Posición del vértice con respecto al origen del mundo.
- Tangente: Aborda algunos casos de uso especiales, como la iluminación por píxel.
Puede seleccionar qué espacio desea afectar en el menú desplegable del nodo Posición .
Utilizando el nodo Dividir podemos seleccionar qué eje queremos afectar.
El nodo Split genera salida a cuatro canales, los primeros tres corresponden a nuestro eje de Transformación (R=X, G=Y, B=Z). En el ejemplo anterior, dividí el eje y del objeto y agregué 1, moviendo nuestro objeto hacia arriba 1 en su propio eje.
A veces es posible que desees mover el objeto en el espacio mundial. Para hacer esto, seleccione Mundo en el nodo Posición y luego convierta la salida nuevamente al espacio de objeto utilizando el nodo Transformar .
Ahora que hemos establecido cómo mover una malla, a menudo es útil saber cómo podemos restringir el efecto.
Al utilizar nodos como Lerp, podemos realizar mezclas entre dos valores. La entrada T es el valor de control para Lerp. Cuando nuestra entrada T es 0 (visualizada como negro), se utiliza el canal A. Cuando nuestra entrada es 1 (visualizada como blanco), se utiliza el canal B. En el siguiente ejemplo, el control deslizante se utiliza para combinar las dos entradas. Cualquiera de los siguientes ejemplos se puede utilizar en lugar del control deslizante.
Con una textura en blanco y negro, podemos usar formas detalladas para impulsar nuestra malla. En el ejemplo anterior, puedes ver cómo el blanco representa la altura máxima de nuestro rango, mientras que el negro no representa ningún efecto en la posición de la malla. Esto se debe a que el negro tiene el valor numérico de 0, por lo que agregar 0 a la posición de la malla no la mueve.
Para utilizar una textura con posición de vértice, debe utilizar el nodo LOD de textura de muestra 2D en lugar del nodo de textura de muestra 2D típico. Las texturas son especialmente útiles si necesitas una máscara con una forma única o un cierto grado de atenuación.
Si bien es similar a una máscara de textura, con una máscara UV puedes elegir qué parte de la malla deseas afectar en función del desenrollado UV. En la captura de pantalla anterior, estoy usando el eje u del UV para crear un degradado de izquierda a derecha. Para compensar el gradiente, utilice un nodo Agregar ; para aumentar la intensidad, utilice un nodo Multiplicar ; y para aumentar la caída, utilice un nodo Potencia .
Cada vértice almacena una unidad de información Vector3 a la que llamamos Color de Vértice. Usando el paquete Poly Brush , podemos pintar directamente los colores de los vértices dentro del editor. Alternativamente, puede utilizar software de modelado 3D (como 3ds Max, Maya, Blender, 3D Coat o Modo) para asignar colores a los vértices. Vale la pena señalar que, de forma predeterminada, la mayoría del software de modelado 3D exportará modelos con el valor máximo de RGB asignado a cada vértice.
En la captura de pantalla anterior, el nodo Vertex Color se divide en el canal rojo (R) y luego se conecta al canal T del nodo Lerp , que actúa como una máscara. El canal A del nodo Lerp se utiliza cuando la entrada es 0, y el canal B se utiliza cuando la entrada es 1. En la práctica, la configuración anterior solo agregará 1 al eje y si los vértices tienen asignado el color de vértice rojo.
Al utilizar el nodo Vector normal , podemos enmascarar una entrada mediante la orientación de las caras de la malla. Nuevamente, el nodo Dividir nos permite seleccionar qué eje deseamos afectar (R=X, G=Y, B=Z). En la captura de pantalla anterior, enmascaro utilizando el eje y, de modo que solo las caras que miran hacia arriba sean positivas. Es importante utilizar un nodo Clamp para descartar cualquier valor que no esté entre 0 y 1.
Esta serie de nodos enmascara una entrada si la posición del objeto está por encima de la posición mundial 0 en el eje y.
Al crear sombreadores, puede resultar difícil obtener los valores de entrada correctos para el efecto deseado. Por este motivo, y para una posterior personalización con Prefabs y presets, es importante utilizar propiedades.
Las propiedades nos permiten modificar los valores del Shader después de que éste se haya compilado. Para crear una propiedad, haga clic en el símbolo + en la pizarra (en la imagen de la derecha). Hay seis tipos de propiedades:
- Vectores (1 a 4): Una cadena de valores, con la opción de un control deslizante para Vector1.
- Color: Valores RGB con un selector de color y una versión HDR opcional.
- Texture2D (y matriz Texture2D): Una muestra de textura 2D
- Textura 3D: Una muestra de textura 3D
- Mapa cúbico: Una muestra de mapa cúbico generado
- Booleano: Una opción de encendido o apagado. Equivalente a 0 o 1.
El sombreador de bandera desplaza una onda sinusoidal del espacio del objeto a lo largo de la bandera, utilizando una máscara UV para mantener el lado izquierdo quieto.
Una máscara UV invertida y luego multiplicada contra sí misma para crear un gradiente suave a lo largo del eje y. Esto se utiliza para doblar el centro de la bandera lejos del remo.
Se genera una onda sinusoidal en el espacio de un objeto, con propiedades para controlar la amplitud, la frecuencia y la velocidad de la onda. La ola está enmascarada por una máscara UV en el eje x para mantener quieto el lado izquierdo de la bandera.
Al generar un ruido de gradiente en una función de paso y luego en el umbral de recorte alfa, podemos descartar algunos píxeles para romper la bandera.
El sombreador de viento utiliza el ruido de gradiente del espacio mundial que se desplaza a lo largo de un solo eje para empujar y tirar suavemente las hojas y el césped.
Utilizando la posición mundial, colocamos un ruido de gradiente en el eje y y el eje x. Usando un Vector2, podemos controlar la velocidad y dirección en la que se desplaza.
Las propiedades se utilizan para controlar la densidad y la resistencia del desplazamiento. Restar 0,5 del ruido de gradiente garantiza que la malla se empuje y tire de manera uniforme.
Se utiliza una máscara UV para mantener estacionaria la base de las hojas y el césped. Finalmente, se utiliza un nodo Transformar para convertir la posición mundial en la posición del objeto.
Con este Shader, calculamos la distancia entre la cámara y la almeja, luego la usamos como máscara para rotar la mitad superior.
Al ingresar la posición del GameObject y la posición de la cámara en el nodo Distancia , podemos crear una máscara. El nodo Uno Menos invierte la distancia para que tengamos un valor positivo cuando estemos cerca de la almeja. El nodo Abrazadera descarta cualquier valor por encima de 1 y por debajo de 0.
Esta máscara UV gira solo la parte superior de la almeja, pero en la mayoría de los casos, una máscara de color de vértice sería más fácil y más flexible.
Se utiliza un nodo Lerp para realizar la mezcla entre la almeja cerrada y la abierta. La rotación se aplica al eje y y al eje z del GameObject. Girándolo alrededor del eje x.
En este sombreador, utilizamos una onda sinusoidal que se genera a lo largo del eje del objeto para hacer que el pez se tambalee. Luego enmascaramos la cabeza del pez para que permanezca quieta.
Genere una onda sinusoidal en el espacio del objeto a lo largo del eje y y el eje z, con propiedades que controlan la frecuencia y la velocidad de la onda.
Como utilizamos tanto el eje x como el eje y, el pez se tambalea a lo ancho y a lo alto.
Multiplica la salida de la onda sinusoidal para controlar la amplitud/distancia/fuerza del bamboleo y agrégala al eje x del objeto.
Utilice un nodo Lerp para enmascarar el frente del pez utilizando el eje x del canal UV. Al utilizar un nodo de potencia con una propiedad, podemos empujar el efecto de tambaleo hacia la parte posterior del pez.
¡Por fin tenemos el Shader del océano! Este sombreador compensa la parte superior de la malla utilizando tres ondas sinusoidales de diferentes escalas y ángulos. Estas ondas sinusoidales también se utilizan para generar los colores de los valles y puntas de las ondas.
Se generan tres ondas sinusoidales independientes en el espacio mundial, cada una de las cuales utiliza propiedades para controlar la amplitud, la frecuencia, la velocidad, la convergencia y la rotación de las ondas.
Luego, las tres ondas sinusoidales se combinan con dos nodos Add y se multiplican por un gradiente de escala mundial para dividir la altura de las puntas de las ondas. Después de esto, las ondas combinadas se agregan a la posición del objeto.
Se utilizan dos máscaras de vértice para restringir primero las ondas a la parte superior de la cúpula y luego empujarlas hacia abajo cuando se pinta la espuma.
Al dividir el eje x y el eje z, generamos ondas en dos direcciones. Los dos multiplicadores se utilizan para establecer la influencia de cada onda. Por ejemplo, al multiplicar el canal Z por 0, se obtendría una onda sinusoidal exclusivamente en el eje x.
Al dividir un nodo de Posición mundial en el eje x y el eje z, y luego combinarlos en un Vector2, obtenemos un espacio UV en el espacio mundial. Esto orienta el ruido de gradiente de forma plana en todo el mundo. Al agregar esta salida al tiempo, compensamos las ondas sinusoidales, lo que ayuda a romper las líneas que de otro modo serían rectas.
El nodo sinusoidal utiliza el espacio y el tiempo del mundo para generar una onda sinusoidal simple; para crear las puntas de la onda, utilizamos un nodo absoluto para invertir los valores negativos. Luego, el nodo Uno Menos invierte estos valores para que las puntas de las ondas queden en la parte superior.
Si quieres saber cómo empezar a utilizar Shader Graph, la charla de Andy Touch en GDC es un excelente lugar para comenzar. Si estás buscando otros ejemplos de Shader Graph, Andy también tiene una biblioteca de ejemplos disponible en GitHub.
Para obtener documentación detallada sobre Shader Graph, incluidas descripciones de cada nodo, visita la Wiki para desarrolladores de Shader Graph en GitHub. ¡Únase a la conversación en nuestro foro de vistas previas experimentales de gráficos ! Y por último, si estás haciendo algo genial con Shader Graph, ¡me encantaría verlo! No dudes en comunicarte conmigo en Twitter @John_O_Really.