Cómo crear sombreadores de naturaleza con Shader Graph en 2022 LTS
En este blog, exploramos cómo crear dos sombreadores de naturaleza distintos utilizando Universal Render Pipeline (URP) en 2022 LTS. También analizamos más de cerca un sombreador de agua estilizado y un sombreador de arena semirrealista. Los activos se lanzan con las nuevas escenas de muestra URP 3D.
Los efectos visuales parecen complejos a primera vista, pero profundizaremos en el proceso de pensamiento basado en el diseño detrás de estas características y cubriremos desgloses paso a paso de las técnicas que les dan vida. Exploremos las complejidades del desarrollo de sombreadores y creemos sombreadores de naturaleza impresionantes.
El objetivo, como se muestra en el vídeo de arriba, es crear un arroyo estilizado que corra en medio de una escena de jardín de estilo japonés. En comparación con el resto del entorno, la atmósfera es tranquila y zen, y el estilo artístico es más animado que fotorrealista.
Desde el terreno incrustado en la escena, el agua es una combinación de dos partes: una cascada y un arroyo que corre bajo el puente. Las escenas de agua del Studio Ghibli son muy inspiradoras y con frecuencia tienen tres elementos distintos:
1. Líneas de flujo que ayudan a establecer el flujo del agua.
2. Los bordes se destacan para mostrar la interacción del agua con el terreno circundante.
3. Efectos de espuma para ayudar a vender cascadas o cataratas.
El sombreador de agua final utilizará todos estos elementos. Ahora, exploremos los detalles de cómo lograr este look.
La cascada tiene dos mallas distintas: la malla de cascada principal y un plano en forma de disco que genera ondulaciones. Al utilizar un sombreador apagado independiente para las ondulaciones, puedes mosaico un nodo de ruido y usarlo como valor alfa del sombreador. Esto enmascara las áreas restantes, garantizando que las ondulaciones aparezcan donde se desea.
La parte más importante es garantizar que cada área de la malla pueda realizar diferentes comportamientos. Puedes lograr esto pintando previamente las mallas con colores de vértice en los canales rojo (R), verde (G) y azul (B). Los colores de los vértices se utilizan luego como máscaras para separar operaciones en determinadas áreas.
En Shader Graph, utilice el nodo Color de vértice para acceder a los datos de color de vértice prepintados. Como se ve en el lado derecho de la imagen a continuación, puede usar el canal rojo en el color del vértice como su valor T para interpolar (lerp) entre la parte vertical y horizontal de la cascada, logrando una transición suave. Para crear un efecto de cascada de agua, combine dos nodos Voronoi, cada uno con diferentes mosaicos y desplazamientos. Esto da como resultado una imagen dinámica del agua cayendo.
En las cascadas de la vida real, las áreas donde el agua cae en cascada desde el nivel horizontal superior y donde golpea el nivel horizontal inferior a menudo tienen capas más gruesas de espuma y salpicaduras. En la escena, puedes pintar previamente el color del vértice en el canal azul para asegurarte de que los efectos solo aparezcan en áreas específicas. El uso de máscaras de color de vértice le permite combinar hasta cuatro efectos diferentes en una sola pieza de datos. Este enfoque es más eficiente en comparación con la creación de texturas de máscara de escala de grises independientes para cada efecto.
Para crear la ilusión de múltiples capas de agua cayendo desde el borde, utilice nodos de ruido con diferentes escalas y velocidades. Al desplazar un nodo de ruido con una escala mayor a una velocidad más lenta, junto con un nodo de ruido de escala menor a un ritmo más rápido, se logra el efecto deseado. Para mantener la coherencia con la parte horizontal de la cascada, reutilice los datos del agua del arroyo. En breve profundizaremos en más detalles sobre el agua del arroyo.
Ahora que has creado una cascada relajante, pasemos al arroyo. Hay varias características claves que suele tener el agua en estilo animación. A diferencia de la turbulenta espuma de la costa que se encuentra en el mundo real, un arroyo estilo Ghibli generalmente tiene una espuma muy fina cerca de la orilla. Además, la presencia de colas de agua puede aportar una impresión dinámica y vivaz al agua. Dado que la escena está ambientada de noche, también es necesario un efecto de reflejo convincente. Veamos con más detalle cómo puedes lograr estos efectos en Shader Graph.
Hay múltiples formas de capturar un reflejo en la superficie del agua. La opción más eficiente es un nodo de función personalizado que llama a la función GlossyEnvironmentReflectionintegrada en URP. Esta función devuelve el color de reflexión, que se muestrea desde una sonda de reflexión de proyección de caja en la escena. Solo necesita pasar la posición del espacio mundial, la dirección de la vista, la normal y la posición de la pantalla requerida por la función.
Si necesita una mayor calidad visual y reflejos más sólidos, los reflejos planares de URP pueden ser una excelente opción. La reflexión plana crea un reflejo similar a un espejo de una superficie plana, lo que es ideal para la malla de agua, dada su estructura plana.
Para lograr una reflexión plana, es necesario configurar una cámara separada y renderizar la textura para almacenar los datos de reflexión. El concepto básico es colocar una cámara de reflexión debajo del plano de reflexión (en este caso, la transmisión en la escena) y actualizarla según la posición y la orientación de la cámara del jugador. La textura renderizada también se actualizará en tiempo real.
Una ventaja es que puedes configurar el plano cercano de la cámara de reflexión como el propio plano de reflexión. Esto elimina la necesidad de recortar objetos que se encuentran debajo del plano de reflexión, lo que simplifica el proceso de implementación. En Shader Graph, creas una propiedad de textura y, en el script, le asignas la textura de renderizado que creaste previamente.
Para vincular la textura de renderizado con éxito, asegúrese de que al configurar la propiedad del sombreador, el conjunto de propiedades coincida con el ID de referencia de la propiedad de textura que creó en el gráfico de sombreadores. Asegúrese de que el script llame al ID de propiedad exacto al actualizar la textura de renderizado. Luego, utiliza la posición de la pantalla como UV para muestrear la textura. Ahora has logrado con éxito la reflexión plana en nuestro sombreador.
La implementación de la reflexión planar implica varias consideraciones y detalles técnicos. Para una comprensión más profunda y un ejemplo de su implementación, no dude en echar un vistazo a este ejemplo de URP. Una cosa que vale la pena señalar es que la reflexión planar es computacionalmente más costosa en comparación con el uso de sondas de reflexión porque renderiza los objetos dos veces.
Para lograr el efecto de espuma en el borde, es necesario calcular las diferencias de profundidad. La opción Linear01 en el nodo Profundidad de escena devuelve un valor de profundidad lineal escalado de 0 a 1 para objetos opacos. Al multiplicar este valor por la distancia del plano lejano de la cámara, podrá determinar la distancia entre la cámara y el objeto opaco (la roca, en este caso). El componente z de la opción Raw en el nodo Posición de pantalla proporciona la profundidad del espacio ocular. Luego puede calcular fácilmente la diferencia de profundidad entre la superficie del agua transparente y la roca opaca, y pasar el valor de profundidad a la salida de Emisión para crear un efecto similar a la espuma.
Para recuperar valores de profundidad de la escena, asegúrese de habilitar Textura de profundidad en la configuración del proyecto. Puede encontrar la opción Textura de profundidad en la sección General del recurso de canalización de renderizado. Se puede acceder al activo de canal de renderizado actual a través de Editar > Configuración del proyecto > Gráficos > Activo de canal de renderizado.
La creación de los senderos, que muestran el movimiento del agua a lo largo del arroyo, es sencilla. Al colocar en mosaico y desplazar dos nodos Voronoi y enmascarar las áreas deseadas usando colores de vértice, puede crear senderos de agua estilizados que fluyan a lo largo de la superficie del agua. Luego, ajuste la velocidad del nodo de ruido para que coincida con la caída del agua anterior. Ahora tienes senderos de agua estilizados que fluyen a través de la superficie del agua. Esta es muy similar a la técnica utilizada para crear las líneas de corriente de la cascada.
Ahora, cambiemos de tema y veamos un sombreador menos estilizado y más realista. El sombreador de arena se encuentra en una escena desértica realista, lo que requiere que el terreno se parezca mucho visualmente a la arena del mundo real.
La reproducción de arena es un desafío interesante. Un sombreador PBR simple no captura el aspecto de la arena del desierto bajo un sol fuerte. Hay dos características principales a cubrir en el sombreador de arena: el brillo de la arena, que es un aspecto sutil pero digno de mención, y el polvo que sopla, una característica dinámica que agrega vivacidad.
Como la arena está compuesta de innumerables granos diminutos, brilla cuando se expone a la luz solar. ¿Cómo lograr ese efecto de brillo? De manera similar a cómo se realiza la reflexión especular, primero calcule el vector de reflexión utilizando la normal de la superficie. Inspirándose en Journey, en lugar de calcular el producto escalar entre el vector normal y el vector intermedio, calcule el producto escalar entre la normal y la dirección de la vista. Este ajuste garantiza que el patrón de brillo varíe según los ángulos de visión, mejorando el atractivo visual del sombreador.
Tienes dos mapas de ruido en el sombreador. Uno se utiliza para muestrear los destellos y el otro se utiliza para enmascarar la textura del ruido principal para obtener un resultado más dinámico y cautivador. Utilice el vector de reflexión calculado previamente para distorsionar el UV utilizado para muestrear la máscara de ruido.
El efecto de arena y polvo en movimiento es una combinación de dos elementos: rastros de arena en movimiento y ondas de arena. El concepto es bastante sencillo. Estás colocando diferentes mapas normales para lograr el resultado deseado. Un punto clave para los rastros de arena es que necesitas una máscara para ocultar el mapa normal y hacer que el efecto se vea más dinámico. En lugar de utilizar el UV predeterminado, muestree dos mapas de ruido con posición mundial absoluta.
Una cosa que vale la pena señalar es que la opción Mundo en el nodo de posición cambia según la configuración de diferentes canales de renderizado, así que seleccione la opción Mundo absolutopara evitar cambios de comportamiento al cambiar de canalización. A continuación, coloca los dos mapas en dirección diagonal, lo que creará un efecto similar a una onda. Luego, desplácese por otro mapa de ruido a lo largo de la dirección de las olas de arena para agregar más sensación de arena alejándose.
Un aspecto importante es cómo lograr una mezcla normal en el sombreador. En un terreno de arena, donde el mapa de albedo puede no ser tan complejo en comparación con otros terrenos, las normales juegan un papel importante en la apariencia visual. Mezcla múltiples mapas normales en el sombreador. A diferencia de la combinación de mapas de albedo, los mapas normales almacenan direcciones, y diferentes métodos de combinación pueden producir resultados muy diferentes.
Tomemos como ejemplo el nodo de mezcla normal en Shader Graph. Al combinar los mapas normales A y B, la opción predeterminada en el nodo Combinación normal agrega los canales x e y de los dos mapas juntos, mientras multiplica los canales z para obtener el tercer elemento de la normal combinada. La opción reorientada, como sugiere su nombre, implica un proceso más complejo. Gira las normales en el mapa B para alinearlas con la dirección del mapa A. Este enfoque conserva la mayor cantidad de datos de ambos mapas, pero también es la opción computacionalmente más costosa.
En nuestro sombreador, hemos optado por un método de fusión simple para las normales. La razón principal para mezclar las normales es crear una sensación vívida de arena soplando o moviéndose a través de la superficie del desierto. La precisión no es la máxima prioridad. Además, el sombreador se aplica a una malla de terreno relativamente grande, por lo que es importante minimizar los costos computacionales.
Teniendo en cuenta estos factores, he aquí un enfoque sencillo: Sume los canales rojo y verde de los mapas normales y, para el canal azul, pase un valor de 1. Luego, aumenta un poco la fuerza normal y el resultado se ve genial.
Además de las características comentadas, hay otros controles implementados en el sombreador. Uno de ellos es un control de desvanecimiento general, que determina dónde aparecen los efectos en el terreno en función de la distancia de la cámara. Esto permite una transición gradual y un desvanecimiento de los efectos a medida que la cámara se aleja.
También puedes ajustar el valor de suavidad en la distancia, lo que permite una mejor combinación de las dunas de arena y el terreno de fondo. A medida que el espectador se acerca, un mapa normal de granulosidad detallado reemplaza las normales del terreno. Esta sustitución proporciona una experiencia desértica más realista, añadiendo detalles y texturas más finos a la superficie de la arena.
Ahora que has repasado todas las características de cada uno de estos dos sombreadores, no dudes en crear tus propias versiones. Si te apasiona crear sombreadores con Shader Graph, únete a nuestro foroo encuéntranos en Discord. Asegúrese de estar atento a futuras fallas técnicas de los desarrolladores de Unity como parte del proceso continuo. SerieTecnología de las Trincheras.