Arte 3D - PG - Unity - Shader graph
Descripción General
En esta guía podrás revisar una explicación general de como crear un shader haciendo uso del shadergraph de Unity mediante algunos ejemplos prácticos
Alcances
Principalmente, se cubren conceptos básicos y shaders simples pero útiles con el objetivo de poder crear o modificar efectos no tan complejos
Iniciando con Shadergraph(estrella azul)
A continuación una explicación muy rápida de como crear tu shader
Para empezar a desarrollar tu shader crea un nuevo elemento de shadergraph haciendo clic derecho en tu carpeta y después en: Create - Shader Graph - URP - Lit Shader Graph
Al hacer eso se generará un shader base URP en la carpeta que podrás modificar. Así mismo, si abres la flechita encontrarás el material base de tu shader ya configurado con todos los elementos que contenga el efecto que creaste. Renombra el shader y su material de una manera que refleje el resultado final que estás buscando.
Nomenclatura Shaders: SH_NombredeShader Guardalo en la siguiente ubicación Assets > _Project > Shaders
!Listo! Haz doble clic sobre el shader y te deberá abrir en automático una ventana de Shader graph que se ve así:
Elementos principales de la ventana Shader graph
En esta sección una mini explicación de para qué funcionan las partes principales de la interfaz
| Nombre del Elemento | ¿Para qué sirve? | Imagen de Referencia |
|---|---|---|
| Blackboard | Los elementos que crees aquí se podrán ver desde el inspector de Unity | image-20250722-150354.png |
| Master Stack | Es el nodo final de tu shader. Lo que se conecte a esta parte es lo que se verá reflejado en tus materiales visualmente. | image-20250718-143506.png |
| Internal Inspector | Es un mini inspector con las propiedades de los nodos o settings del shader. Mismo concepto que el inspector normal pero para shaders | image-20250718-143710.png |
Ejemplos aplicados en proyecto
A continuación algunos shaders que se usaron en proyectos anteriores, se mencionarán algunos nodos que fueron de utilidad para los objetivos de las simulaciones
Shader Vista de Microscopio (TransfrVR: Clinical Laboratory Technician)
Shader para hacer transiciones entre dos texturas y lograr un efecto de desenfoque en microscopio
Planeación:
- Transición entre dos Texturas
- Atributos que puedan ser animados
- Atributos de fácil acceso para el artista 3D y programador sin la necesidad de modificar el shader
- Viñeta en la textura para dar el efecto del obturador
- No debe tener reflejos
- No debe tener Ambient Occlusion
Construcción del Shader
Atributos del Material
Estos son los atributos que necesito controlar delsde el material. A continuación una tabla con el nombre del atributo y el input que se necesita
| Objetivo | Nombre del Atributo | Input | Imagen de referencia en Unity |
|---|---|---|---|
| Tener una textura A con la que inicia el material | BaseColor_1 | Sample Texture 2D | image-20250718-162202.png |
| Tener textura B que reemplazará poco a poco la textura A | BaseColor_2 | Sample Texture 2D | image-20250718-162250.png |
| Animación de Transición de Textura A a B con un slider de 0 a 1 | Transition_Slider | Float (Slider) | image-20250718-162637.png |
| Animación del Obturador. Cambia el tamaño de la viñeta circular | Shutter | Float (Slider) | image-20250718-162913.png |
Nodos del shader
Estos son los nodos que se aplicarán para hacer este shader
| Nombre del Nodo | ¿Qué hace el nodo? | Imagen de nuestro Shader |
|---|---|---|
| Sample Texture 2D | Crea un espacio “vacío” de textura en el cual puedes ingresar información de una imagen 2D | image-20250718-165858.png |
| Lerp | Hace una transición entre dos entradas (En este caso 2 texturas) que se puede manipular mediante valores específicos que van de 0 a 1 Siendo 0 una influencia completa de la primera textura (En la entrada A del nodo) Siendo 1 una influencia completa de la segunda textura (En la entrada B del nodo) | image-20250718-170003.png |
| Elipse | Crea una forma básica de círculo o elipse Usa valores de 1 o 0 (Blanco y Negro) Puede modificar el tamaño de la elipse Puede funcionar como una máscara | image-20250718-170104.png |
| Multiply | Como su nombre lo dice, hace una operación de multiplicación. Puede funcionar tanto con números, como con texturas o vectores (En este caso lo usaremos para una textura) | image-20250718-170303.png |
| Float | Crea un espacio que toma un valor en específico y admite un número con puntos decimales | image-20250718-170336.png |
Cuerpo del Shader
Una explicación paso a paso del desarrollo de este shader
Nota:
Haz clic en las imágenes si no se alcanza a ver en la miniatura
| Paso | Imagen de nodos | |
|---|---|---|
| 1 | Crea los atributos que quieres que el usuario modifique y pueda ver desde el inspector en el material de Unity: - En el blackboard selecciona “+” - Aparecerá una lista con los tipos de entrada que recibirá tu material - En este caso utilizaremos: Texture 2D (2 Para Texturas) y Float (2 Para Sliders) - Nombra los atributos de manera intuitiva - En la imagen puedes ver un ejemplo | image-20250718-174820.png |
| 2 | Crea los espacios 2D para nuestras texturas: - Haz clic derecho en tu espacio de trabajo y selecciona “Create Node” - Te debe aparecer un menú con los nodos que puedes generar - Escribe “Sample Texture 2D” en la barra de búsqueda - Esto te creará un nodo de Textura vacío como el de la imagen - Como necesitamos dos texturas repite el proceso para la segunda textura | image-20250721-204914.png |
| 3 | Conexión de las texturas al nodo vacío: - Arrastra el nodo de BaseColor_1 al espacio de trabajo - Acomoda BaseColor_1 cerca de los nodos de “Sample Texture 2d” - A la izquierda del nodo identifica el cuadrito que dice “None(Texture)” - Conéctalos haciendo clic en el circulito de colores del nodo BaseColor_1 y arrastrando al circulito de colores que ahora dice “None(Texture)” - Repite el proceso para el nodo de BaseColor_2 | image-20250718-174648.png |
| 4 | Añade la interacción para el cambio entre las Texturas BaseColor_1 y BaseColor_2 con el nodo Lerp - Haz clic derecho sobre el espacio y elige Create Node - Escribe Lerp y selecciona para generarlo cerca de tus Nodos de Textura. - Podrás ver que el nodo de Lerp tiene 3 letras para conectar nodos (A, B y T). Para este paso usaremos A y B - A es la textura de la que partirá tu material para la transición (Textura Base) - B es la textura con la que terminará la transición - Conecta la textura de BaseColor_1 con A - Conecta la textura de BaseColor_2 con B | image-20250722-150737.png |
| 5 | En este paso configurarás el shader para que el usuario pueda animar los valores para el cambio entre la textura A y la B - Arrastra el nodo de Transition_Slider cerca de tu nodo Lerp - Conecta el nodo de Transition_Slider al circulito con la T - T es el valor que determina la intensidad de cada Textura Siendo 0 completamente Textura A Siendo 1 completamente Textura B - Ahora selecciona el nodo de Transition_Slider - Si observas el Graph Inspector notarás que muestra la configuración de tu nodo - Scrollea hasta poder ver el atributo de Mode - Da clic en la pestaña adyacente (Actualmente llamada Default) y cambia la opción a Slider - Listo tu nodo ahora es un slider - Hasta este punto ya tienes un mini shader que cambia entre dos texturas de BaseColor | image-20250718-175426.png |
| 6 | Ahora vamos a generar la viñeta con forma de círculo para representar que el usuario está viendo a través de un microscopio - Haz clic derecho en tu espacio de trabajo y selecciona Create Node - Escribe y selecciona “Ellipse” lo que te creará un nodo base de elipse - Para esta situación en específico solo usaremos las conecciones de Width y Height. Que justo controlan que tan ancho y alto es la elipse que se generará | image-20250722-150856.png |
| 7 | En este paso configuraremos el shader para que el usuario pueda animar el tamaño de la elipse y dar el efecto de obturación - Arrastra el nodo de Shutter cerca del nodo Elipse - Conecta el nodo Shutter a los espacio de Width y Height al mismo tiempo. Esto debido a que queremos que nuestra viñeta sea siempre un círculo - Haz clic sobre el nodo Shutter y observa el Graph Inspector - Cambia el modo de Default a Slider (Scrolleando hasta abajo y localizando la pestaña de Mode) | image-20250718-175620.png |
| 8 | Merge final de nuestras dos partes del shader (Transición de Textura y Viñeta) para que ambas se visualicen en nuestro material - Haz clic derecho en el espacio de trabajo y selecciona Create Node - Escribe Multiply y Selecciona para crear un nodo de Multiplicar - Coloca el nodo de Multiply cerca de los nodos Lerp y Ellipse - Con este nodo determinaremos que queremos que se vea y que no de nuestra textura base - Podrás ver que tanto el nodo de Lerp como el nodo de Ellipse tienen un circulito llamado “Out”, como su nombre lo dice este contiene la salida de nuestros nodos - Conecta la salida del nodo Lerp al circulito llamado A del nodo Multiply - Conecta la salida del nodo Elipse al circulito llamado A del nodo Multiply - En este caso no importa cual de los dos nodos se conecte a la sección A y cual a la B, pero por cuestiones de limpieza lo conectaremos de esta manera - Listo ya con esto los nodos que creaste generan el efecto que queremos de Vista de microscopio, solo falta conectarlo al Master Stack | image-20250718-180253.png |
| 9 | Conecta el nodo de Multiply al Master Stack. - Arrastra el circulito de Out del nodo Multiply al circulito de Base Color del Master Stack - Revisa la siguiente sección para más información del Master Stack | image-20250722-000124.png |
Resultado final del shader (Master Stack)
Esta sección muestra las conexiones finales de nuestro shader en el Master Stack
Ahora se conectará la información final para que se pueda visualizar en nuestro material
Al ser un shader simple en el cual el objetivo era modificar solamente el espacio de color. Solo se debe conectar la salida de nuestros distintos nodos a la parte de Fragment - Base Color
Nota
A pesar de no haber modificado mediante nodos los demás atributos de nuestro material, es necesario escribir el valor base que Unity estará tomando para visualizar de manera general.
En este caso: No se necesitan propiedades metálicas, de smoothness, emission y tampoco de AO, por lo tanto, no se verán como atributos en el material pero debemos configurarlos en el shader. Por lo tanto los valores respectivos se ponen en.
- 0 para Metallic
- 0 Smoothness
- Color HDR en negro para Emissive
- 1 para Ambient Occlusion
Listo, has creado un shader de principio a fin
Enlaces de descarga
Se encuentra en la librería de shaders de Unity Cloud de área
Archivos Adjuntos
Unity - Manual: Shaders in URP (Infromación general de shaders URP en Unity 6)
Node Library | Shader Graph | 6.9.2 (Libreria con información más específica de cada nodo)
Comentarios
Recuerda seguir las buenas prácticas y nomenclaturas Inmersys en la creación de tus shaders. Los nodos pueden llegar a complicarse algo rápido y pueden volverse confusos o pesados. El seguir buenas prácticas agiliza el ritmo de trabajo y mantener shaders optimizados evita que termines con materiales pesados.
Cada material que crees con tu shader tendrá las mismas propiedades base, por lo que puedes seguir estos puntos básicos para optimización de shaders:
- Disminuye la cantidad de operaciones necesarias (Si algo es redundante, elimínalo)
- Evita el uso de Transparencias
- Evita el uso de operaciones booleanas
- Si es posible no uses tantas texturas dentro del shader
Ventajas
- La creación de Shaders mediante Shadergraph es mayormente visual y no necesita conocimientos de programación
- Shadergraph proporciona gran compatibilidad con los dispositivos que Unity soporta
- Es un flujo de trabajo no destructivo
- Los shaders son muy versátiles y pueden dar efectos interesantes
- Se pueden crear efectos que enriquezcan la interactividad de un prop.
Desventajas
- Puede que shadergraph o el flujo de trabajo con nodos no sea la herramienta de trabajo preferida del Artista 3D o Programador. Dependiendo de la situación puede haber opciones más óptimas o cómodas para cada persona.
- La complejidad va aumentando exponencialmente. Revisar tiempos con líder de proyecto
Ubicación Proyecto
La ubicación del proyecto en el servidor.
Elaboró
Leo Espinoza