¿Cómo comenzar a usar Shader Graph?

Hay muchos efectos interesantes que puedes crear con los sombreadores y materiales, y no tienes que limitarte a los sombreadores que proporciona Unity. Los sombreadores son scripts que puedes manipular si conoces el lenguaje de programación. Aunque aprender ese lenguaje está fuera del alcance de estos tutoriales, hay una herramienta que facilita la programación de sombreadores: el Shader Graph.

El Shader Graph te permite crear sombreadores especializados sin necesidad de escribir código. En particular, puedes combinar texturas y hacer que se muevan en un sombreador de fragmentos o incluso cambiar las posiciones de los vértices en un sombreador de vértices. Los artistas técnicos profesionales crean sombreadores personalizados para implementar estilos artísticos especializados y crear sustancias complejas, como lava que fluye, nubes de tormenta y vegetación. Las posibilidades son casi infinitas.

En este tutorial, crearás un nuevo sombreador con efectos visuales que nunca podrías lograr con el sombreador iluminado o de URP que has estado usando. Como un artista técnico profesional, desarrollarás este sombreador personalizado para que otros artistas (incluido tú) puedan crear materiales con él.

Para cuando termines, tendrás nuevos materiales interesantes para tu composición artística y nuevas ideas para más sombreadores personalizados.

El Shader Graph, como su nombre lo indica, te ayuda a crear sombreadores mediante gráficos similares a los de los diagramas de flujo. Al crear tu gráfico, puedes ver el material predeterminado del sombreador en tiempo real, lo que te permite experimentar con facilidad.

Observa un prototipo del sombreador que estás creando. Hay dos en exhibición en la galería, en los pedestales frente a Ellen. Para examinar el Shader Graph de este sombreador, haz lo siguiente:

1. En la ventana Project, dirígete a la carpeta Assets > CreativeCore_Shaders > ShaderGraphs. Dentro de esta carpeta, verás cuatro recursos: dos materiales y dos sombreadores creados con el Shader Graph.

2. Haz doble clic en el recurso de sombreado Example_Shimmer para abrirlo. Se abrirá la ventana Shader Graph y verás el gráfico.

La ventana Shader Graph

Si lo deseas, puedes abrir el sombreador del Shader Graph completado que se muestra arriba y consultarlo sobre la marcha. Comenzarás tu propio sombreador desde una nueva ventana Shader Graph en blanco:

1. En la carpeta Assets > CreativeCore_Shaders > ShaderGraphs en la ventana Project (Proyecto), haz clic derecho y selecciona Create > Shader Graph > URP > Lit Shader Graph. Esto creará un nuevo sombreador URP en la carpeta.

2. Nombra el nuevo sombreador "Shimmer_ShaderGraph" o como gustes.

3. Haz doble clic en tu sombreador para abrirlo en una nueva ventana Shader Graph.

Al examinar la ventana Shader Graph, verás estas funciones que utilizarás al crear tu sombreador:

• La barra de herramientas del Shader Graph (1) es donde guardarás tu recurso sombreador.
• La Blackboard o Pizarra (2) contiene las propiedades que estarán disponibles para los artistas que utilicen este sombreador para crear materiales. Aquí puedes definir los tipos de propiedades, así como sus nombres, atributos y valores predeterminados.
• El espacio de trabajo (3) es donde crearás el gráfico de nodos de tu sombreador.
• La ventana Main Preview o Vista previa principal (4) te dará una actualización en tiempo real de cómo se ve y se comporta tu sombreador.
• La ventana Graph Inspector o Inspector del gráfico (5) te mostrará la configuración, las propiedades y los valores actuales de cualquier nodo que hayas seleccionado.
• El conjunto maestro (6) es el punto final de un Shader Graph que define la apariencia final de la superficie de un sombreador. También enumera las principales propiedades de los sombreadores de vértices y fragmentos, y te proporciona los nodos finales donde insertarás los valores necesarios.

Practica moverte en el gráfico:

• Vista panorámica: Haz clic en el medio y arrastra, o mantén presionada la tecla Alt (Windows) u Opción (macOS) y haz clic y arrastra.
• Acercamiento o alejamiento: Gira la rueda o usa el acercamiento del panel táctil.
• Enfoque y acercamiento: Selecciona un elemento y presiona la tecla F.
• Ajuste al tamaño de la ventana: Presiona la tecla A.

Para obtener la documentación completa sobre la interfaz de usuario de Shader Graph, consulta la documentación de la ventana Shader Graph en el Manual de Unity.

El objetivo de este tutorial es crear un sombreador personalizado con un efecto brillante, transparente y resplandeciente. Puedes seguir estos pasos para recrear el sombreador en la galería o experimentar sobre la marcha.

El brillo básico se realiza con un mapa de ruido procedimental. Procedimental significa que la textura se crea mediante alguna fórmula o algoritmo, no a partir de una imagen u otra fuente física. El Shader Graph proporciona algunos mapas de ruido procedimentales para elegir. Cada uno genera un mapa similar a una nube con áreas más claras y más oscuras en un patrón aparentemente aleatorio.

Para agregar tu primer nodo, haz lo siguiente:

1. Selecciona el espacio de trabajo Shader Graph y presiona la barra espaciadora para abrir el menú Create Node (Crear nodo). (También puedes hacer clic derecho y seleccionar Create Node).

2. Usa la entrada de búsqueda en la parte superior para ingresar "Gradient Noise".

3. El nodo Gradient Noise aparecerá en los resultados. Haz doble clic para seleccionarlo.

La textura procedimental del mapa Gradient Noise proporciona la variación que queremos en un efecto de brillo. Pero, ¿cómo haremos para que se mueva? Como recordarás, la propiedad Offset (Desplazar) de una textura que se puede convertir en mosaicos cambia su posición en una superficie determinada. En este sombreador, harás que el valor de Offset cambie continuamente para que el mapa Gradient Noise se mueva.

Del mismo modo en que Tiling (Colocación de mosaicos) y Offset aparecieron juntos en el sombreador iluminado o de URP, se combinan en un solo nodo en Shader Graph.

1. En el espacio de trabajo, presiona la barra espaciadora o usa el menú contextual (clic derecho en el espacio de trabajo en la mayoría de los dispositivos) para crear un nuevo nodo de Tiling y Offset. Este nodo te permitirá ajustar el tamaño y la posición del mapa de ruido.

2. Arrastra el resultado del nodo Tiling y Offset a la entrada UV del nodo Gradient Noise. Ahora, los valores que ingreses en Tiling y Offset afectarán a Gradient Noise.

3. Cambia los valores de Offset en los nodos Tiling y Offset para ver cómo Offset reubica el patrón. Nuestro próximo objetivo es hacer que el patrón se mueva continuamente para crear ese efecto brillante.

4. Crea un nodo Time (Tiempo). Este nodo te permite cambiar un valor con el tiempo.

5. En este caso, estás cambiando el valor de Offset para simular un efecto de desplazamiento en el sombreador. Arrastra el resultado Time del nodo Time a la entrada Offset en el nodo Tiling y Offset.

La textura de ruido ahora está animada.

6. Para ver cómo se verá el material predeterminado, conecta el resultado del nodo Gradient Noise al Base Color (Color base) en el conjunto maestro. Aún no es exactamente un brillo, pero estás cerca de lograrlo.

Importante: Guarda tu sombreador al seleccionar Save Asset (Guardar recurso) en la parte superior de la barra de herramientas. Guarda tu trabajo con frecuencia.

Este sombreador será más útil para los artistas que lo usan (incluyéndote a ti) si les permite controlar la velocidad del movimiento del brillo. Puedes lograr esto con los nodos de entrada que establecen las propiedades del material, lo que permite al artista modificar el aspecto del sombreador con materiales.

Los nodos de entrada se crean en la Blackboard, que tiene el mismo título que tu sombreador.

1. Selecciona el botón más (+) en la pantalla y selecciona Float para crear un nuevo nodo de entrada float (valor de punto flotante). Asígnale el nombre "ScrollSpeed". Con este nodo de entrada, un artista puede ajustar la velocidad si ingresa un número de punto flotante en un material.

2. Arrastra el nodo de entrada desde Blackboard al espacio de trabajo.

3. No existe un espacio de entrada en el nodo Time, por lo que necesitas una forma diferente de combinar los valores Time y ScrollSpeed. Para esto, crea un nodo Multiply (Multiplicar). Este nodo es una manera sencilla de combinar dos valores. Toma dos valores, los multiplica y genera el resultado.

Consejo: Esta es otra forma de abrir el menú Create Node: arrastra desde el resultado del nodo ScrollSpeed (o cualquier otro) y suéltalo en un lugar vacío del espacio de trabajo. Aparece el menú Create Node y, cuando seleccionas un nodo, se conecta automáticamente al resultado con el que empezaste.

4. Desconecta los nodos Time y Tiling y Offset al seleccionar el conector y eliminarlo.

5. Conecta las salidas de los nodos Time y ScrollSpeed a las entradas del nodo Multiply.

6. Conecta el resultado Multiply a la entrada Offset.

El desplazamiento del mapa de ruido se ha detenido. Eso es porque el valor predeterminado de ScrollSpeed es 0. Para los artistas que usan este sombreador, este valor predeterminado debe ser mayor que 0 para que no les suceda. De todos modos, también podría ser mejor cambiar esto a una velocidad más lenta.

7. Para cambiar el valor predeterminado, selecciona el nodo ScrollSpeed y en el Graph Inspector, ingresa un nuevo valor predeterminado. Experimenta para encontrar un valor que dé un buen brillo.

Ahora, el sombreador tiene sonido en movimiento, pero podría tener más brillo. Puedes crear un efecto más interesante si combinas este mapa con un mapa de ruido distinto que se mueva a diferente velocidad. Para hacer eso, duplicarás lo que has hecho hasta ahora, cambiarás un poco el duplicado y combinarás los dos mapas en uno.

Al igual que agregar movimiento a una textura, la combinación de mapas es otro efecto que solo puedes crear en un sombreador personalizado.

1. Selecciona los nodos Gradient Noise, Multiply, y Tiling y Offset que creaste antes (no selecciones Time o ScrollSpeed). Puedes dibujar un cuadro que los toque o usar Ctrl (Windows) o Cmd (Mac) al seleccionarlos.

2. Haz clic derecho y selecciona Duplicate (Duplicar) para hacer una copia de los nodos seleccionados. El nodo Multiply duplicado seguirá conectado a los mismos nodos de entrada, lo cual es útil.

En lugar de acelerar el movimiento de este nuevo mapa, puedes reducirlo al disminuir la entrada ScrollSpeed. Por ejemplo, si la velocidad del segundo mapa es siempre la mitad que la del primero, los dos mapas crearán un patrón que cambia constantemente.

3. Para lograr esto, inserta un nuevo nodo Divide (Dividir) entre los nodos Time y Multiply duplicado.

4. Conecta el resultado del nodo Time a la entrada A del nodo Divide y conecta el resultado del nodo Divide a la entrada B del nodo Multiply.

5. Establece el valor del nodo Divide en 2 mediante el uso de la entrada B para dividir el ScrollSpeed entre dos.

6. Ahora tienes dos nodos Gradient Noise diferentes que se mueven a diferentes velocidades. Cada uno de estos es un mapa en escala de grises con valores de 0 a 1. Para combinarlos, puedes utilizar un nodo Multiply para obtener un nuevo mapa con valores entre 0 y 1. Agrega y conecta un nuevo nodo Multiply a la derecha de los nodos Gradient Noise, y envía el resultado al Base Color del conjunto maestro.

Se está volviendo interesante.

Ahora tienes bastantes nodos en tu gráfico. Lo que has hecho hasta ahora es solo una parte. Antes de continuar, puedes agrupar los nodos para mantenerlos organizados de modo que sea más fácil agregar aún más.

Los nodos que has reunido hasta ahora crean movimiento en las texturas al cambiar el desplazamiento con el tiempo. Puedes agruparlos y etiquetarlos para ayudarte a realizar un seguimiento de lo que están haciendo tus nodos de la siguiente manera:

1. Selecciona todos los nodos que generan la configuración Offset. Esto debe ser todo lo que esté a la izquierda de los nodos Gradient Noise, pero sin incluirlos, como se muestra en la imagen a continuación.

2. Con todos estos nodos seleccionados, haz clic derecho en cualquier nodo (no en el fondo del espacio de trabajo) y selecciona Group Selection (Selección de grupo). También puedes presionar Ctrl / Cmd + G. Asigna al grupo el nombre "Changing Offset over Time".

3. También puedes contraer las imágenes en miniatura de los diferentes nodos y moverlas hasta que estés satisfecho.

Para los artistas que crean materiales a partir de este sombreador, sería útil permitirles ajustar el tamaño de las texturas. Por ejemplo, en los objetos grandes, el resultado del sombreador Shimmer (Brillo), como está ahora, puede parecer demasiado pequeña y granulosa. Puedes agregar un nodo de entrada, como el que agregaste para ScrollSpeed, para hacer que se pueda ajustar el tamaño de las texturas.

Al ajustar el tamaño, puede ser interesante hacer que el tamaño de las dos texturas combinadas sea diferente; de hecho, mejoraría el efecto de brillo. De la misma manera que dividiste ScrollSpeed de uno de los mapas entre dos, también puedes dividir el tamaño de uno de los mapas entre dos.

Ya has realizado estas tareas básicas. Intenta agregar los nodos que necesitas por tu cuenta con estas pautas:

• Asígnale el nombre «GradientScales» a un nuevo nodo de entrada Float.
• Observa los valores de entrada de Scale (Ajuste de tamaño) actuales de los mapas Gradient Noise. El valor predeterminado es 10. Puedes usar este valor predeterminado en tu nodo de entrada o experimentar con el que prefieras. Compara esto con el sombreador Example_Shimmer.
• En el gráfico Example_Shimmer, el mapa con el movimiento más rápido tiene la textura más grande debido a su valor Scale más pequeño (esta escala funciona como la propiedad Tiling, es una cantidad de mosaicos por unidad). No dudes en experimentar con esto también.
• Cuando estés listo, agrupa estos nodos, incluidos los nodos Gradient Noise, y asígnales el nombre «Offset and Scaling».

El resultado final debe tener un aspecto similar al de la imagen siguiente.

Hasta ahora, el sombreador se está volviendo más brillante, pero todo es en escala de grises con mucho negro, mucho blanco y no mucho gris en el medio. Los siguientes dos nodos permitirán a los artistas ajustar el contraste y el color de la textura.

Para ajustar el contraste, agregarás un nodo Remap que ajustará el tamaño de los valores desde un rango de 0-1 a un rango más estrecho. Al reducir el rango, habrá menos diferencia entre las áreas más claras y las más oscuras.

1. Comienza por agregar un nodo de entrada Vector2 a Blackboard. Un Vector2 es simplemente un conjunto de dos valores. Asígnale el nombre "RemapValues" a este nodo de entrada, arrástralo al espacio de trabajo y establece Y en 1.

2. Agrega un nuevo nodo Remap al espacio de trabajo.

3. Conecta el resultado del mapa en escala de grises en el grupo Offset y Scaling a la entrada In del nodo Remap. Estos son los valores de entrada que se van a asignar.

4. Conecta el nodo de entrada RemapValues a la entrada Out Min Max (Mínimo y máximo de salida) del nodo Remap. Esto especifica los valores de resultado mínimos y máximos que los artistas podrán ajustar.

5. Asegúrate de que los valores de In Min Max estén configurados en 0 y 1, respectivamente, para que coincidan con el rango real de los valores de entrada. El nodo RemapValues condensará el rango de valores de 0 a 1 al rango especificado en el material o los valores predeterminados en RemapValues.

6. Experimenta con un rango predeterminado de valores para RemapValues Vector2 mediante el Graph Inspector.

7. Conecta el resultado del nodo Remap a la entrada Base Color en el conjunto maestro para ver el resultado en Main Preview.

Compara tu resultado con el sombreador Example_Shimmer y juega con los valores predeterminados e incluso con las conexiones de los nodos, para obtener un resultado brillante que te guste. Hay una propiedad más importante: el color.

Por tu cuenta, agrega un nodo de entrada con el tipo Color, llamado TintColor (Color de tinte). Agrega un nodo Multiply para multiplicar este color por el resultado actual. Configura los valores predeterminados de TintColor con el color que más te guste y observa el sombreador Example_Shimmer en busca de inspiración.

Agrupa estos nodos en un grupo llamado «Intensity and Color», y el resultado se verá similar a la imagen a continuación.

Para que este color resalte realmente, conviértelo en un color de alto rango dinámico (HDR):

1. Selecciona el nodo de entrada TintColor y visualiza sus propiedades predeterminadas en el Graph Inspector.

2. Cambia el Mode (Modo) de Default (Predeterminado) a HDR.

3. Abre el selector de color para el color predeterminado. Ahora tiene las mismas opciones de intensidad que el selector de color HDR que viste al configurar un mapa de emisión.

4. Conecta el resultado del nuevo nodo Multiply a la entrada de Base Color en el conjunto maestro para que puedas ver el resultado hasta el momento.

El color sigue sin resaltar, ¿verdad? Puedes hacer que las áreas brillantes lo sean aún más con el mapa de emisiones, que hará que las áreas claras brillen, lo que aumentará el efecto de brillo.

5. Haz otra conexión desde el nodo Multiply a la entrada Emission (Emisión) en el conjunto maestro. Este es un sombreador emisor.

Hay un truco más: puedes hacer que el sombreador sea transparente donde el color es más claro para crear un efecto de brillo más llamativo que si tuvieras la misma transparencia en todo el objeto.

6. En el Graph Inspector, en la pestaña Graph Settings (Configuración del gráfico), cambia el tipo de Surface (Superficie) de este sombreador a Transparent o Transparente. Esta es la misma configuración que viste en los materiales para el sombreador iluminado o de URP.

7. Al cambiar el tipo de superficie, se habilita la entrada Alpha (Alfa)en el conjunto maestro. Conecta el resultado de ruido en escala de grises del nodo Remap (no el teñido del nodo Multiply) a la entrada Alpha.

Ahora tienes un Shader resplandeciente. Solo hay algunos ajustes más por hacer que darán a los artistas más control sobre el aspecto de sus materiales con este sombreador.

Echa una mirada a las entradas del sombreador Fragment del conjunto maestro. Hay algunas más que aún no has usado. Puedes dejarlas como están y mantenerlas con sus valores predeterminados para cada material creado con este sombreador, o puedes permitir que los artistas las ajusten.

Es tu elección, pero estas son algunas cosas que puedes intentar para que este sombreador sea más útil:

1. Agrega un nodo de entrada (Float) para Metallic (Metálico) y conéctalo a la entrada Metallic en el conjunto maestro.

2. Agrega un nodo de entrada (Float) para Smoothness (Suavidad) y conéctalo a la entrada Smoothness en el conjunto maestro.

Importante: Guarda tu sombreador seleccionando el icono Save.

Eso es todo, has creado un sombreador brillante. Lo único que queda por hacer es crear un material a partir de este sombreador que se pueda aplicar a un objeto.

Crea un material de prueba ahora y aplícalo a un objeto en tu mesa de trabajo en la galería de Sombreadores y Materiales:

1. En la carpeta Assets > CreativeCore_Shaders > Materials, haz clic derecho y selecciona Create > Material. Dale a este nuevo material un nombre como "Shimmer".

2. Con el nuevo material seleccionado, ve a la ventana Inspector para cambiar el sombreador. Aparecerá en el submenú Shader Graphs.

3. Aplica el material a un objeto en tu mesa de trabajo.

4. Cambia las propiedades que quieras del material.

El Shader Graph puede ofrecerte muchas oportunidades para crear Sombreadores y materiales. Puedes comenzar por crear un conjunto de materiales con tu primer sombreador, personalizar el sombreador aún más o incluso iniciar uno nuevo basado en lo que has aprendido.

Estas son algunas cosas que puedes probar fácilmente según lo que has aprendido:

• Crea un sombreador que permita al artista del material ingresar un archivo de textura en 2D. Pista: agrega un nodo de entrada «Texture2D» y un nodo «Sample Texture 2D» para administrar los canales del archivo de textura.
• Experimenta con nodos artísticos y procedimentales. Dither, Blend, Voronoi y Polygon pueden ser divertidos. Para ver la documentación sobre cualquier nodo en particular, agrégala a tu espacio de trabajo y usa el menú contextual (clic derecho) para seleccionar Open Documentation (Abrir documentación).
• Revisa el Shader Graph adicional proporcionado con el proyecto de la galería Sombreadores y Materiales: Dissolve_Shader. Observa cómo usa los nodos Sine (Seno), Add o Sumar, Substract o Sustraer y Branch (Bifurcación). Lee las notas rápidas en el espacio de trabajo de Shader Graph para ese sombreador.
• Analiza un sombreador en uno de los proyectos guiados de la misión Habilidades básicas para creadores artísticos, el proyecto del pueblo junto a la playa. Echa una mirada al sombreador de agua en ese proyecto y aprende a crear efectos de agua.

Hay varios recursos adicionales en Shader Graph para mejorar tu aprendizaje:

• Documentación de Shader Graph en el Manual de Unity.
• Haz que una bandera ondee con Shader Graph: Un proyecto de Unity Learn que te presentará los sombreadores de vértices y el proceso de desplazamiento de vértices.
• Sombreadores de Shader Graph disponibles en la Tienda de recursos de Unity (recursos gratuitos): Analiza los sombreadores de otros creadores y aprende de ellos.

Ahora tienes bastantes habilidades para crear sombreadores y materiales. No solo has dominado el sombreador iluminado o de URP, sino que también has creado tu propio sombreador al aplicar los conceptos que has aprendido sobre la luz y el renderizado en 3D.

Probablemente tengas bastantes ideas nuevas de sombreadores y materiales por crear para tus propios proyectos. Es hora de trabajar en esas ideas y completar tu composición artística para la Galería de Sombreadores y Materiales.