Creación de un efecto de vértice interactivo mediante Shader Graph

Creamos un ejemplo de efecto de desplazamiento de vértices interactivo con Shader Graph y Lightweight Render Pipeline para ayudarlo a utilizar estas funciones para diseñar efectos. Esta publicación le guiará a través de nuestro proceso. ¡Obtén el proyecto de demostración con el sombreador Shader Graph, una escena de ejemplo y algunos recursos de juego de ejemplo del 3D Game Kit y síguenos!

La esfera en el ejemplo de video a continuación tiene un efecto de desplazamiento basado en sombreado que se activa cuando presionamos la barra espaciadora. En tu juego, asignarías esto a algún evento de juego relevante. En este artículo, veremos cómo crear este sombreador utilizando el paquete Shader Graph e integrar el disparador de pulsación de la tecla de la barra espaciadora. El objetivo es ayudarle a comprender cómo diseñar efectos en Shader Graph e interactuar con ellos desde otros scripts de C#. El proyecto de demostración contiene el sombreador, el script que controla el sombreador, un recurso LWRP (Lightweight Scriptable Render Pipeline) preconfigurado y una escena de ejemplo para comenzar. Si prefieres ver este tutorial como vídeo en lugar de texto, puedes encontrarlo en el canal de Unity en YouTube.

Primero, veamos cómo configurar Shader Graph y Lightweight Render Pipeline. Abra el Administrador de paquetes y seleccione instalar en el paquete Lightweight RP. Esto instalará automáticamente la versión correcta de Shader Graph.

Una vez que hayamos instalado Lightweight RP, necesitamos crear un nuevo activo Pipeline en el Proyecto. Seleccione Crear->Renderizado->Recurso de canalización de renderizado ligero.

Luego podemos activar este activo de canalización yendo a Editar->Configuración del proyecto->Gráficos y arrastrando LightweightRenderPipelineAsset al campo Configuración de canalización de renderizado programable. Si está siguiendo los recursos descargados, este paso ya se ha completado para usted.

Ahora que está instalado el Lightweight Render Pipeline, podemos considerar la creación de un nuevo Shader Graph. Creemos un nuevo gráfico en nuestro proyecto seleccionando Crear->Sombreador->Gráfico PBR. El gráfico PBR nos permite crear un nuevo sombreador que toma entradas del sistema de renderizado basado en física de Unity, de modo que nuestro sombreador pueda usar características como sombras y reflejos. Una vez que hemos creado este sombreador, lo agregamos a un nuevo Material y adjuntamos el Material a una Esfera en nuestra escena de ejemplo arrastrando y soltando el material en la esfera.

Para lograr este efecto, desplazaremos los vértices de nuestra malla a lo largo de sus normales cambiando la Posición de salida en el nodo de salida PBR Master. Desplazaremos utilizando un nodo Agregar en la Posición del Objeto base de cada vértice. Al agregar el vector normal a la posición del objeto base, podemos ver que todos los vértices se extruyen, lo que hace que la esfera parezca más grande. Para variar este desplazamiento, multiplicaremos este desplazamiento vectorial normal de forma semialeatoria utilizando un nodo Ruido Simple.

Cuando hacemos clic en Guardar activo, podemos ver en la Vista de escena que la esfera ahora está desplazada según el ruido simple.

Desafortunadamente, hay costuras en el desplazamiento porque el ruido simple se muestrea en función del espacio UV. Para arreglar las costuras usando el Espacio de Objeto para el Ruido Simple en lugar del Espacio UV, podemos simplemente agregar un nodo de Posición establecido en Objeto.

Para crear el efecto de pulsación, desplazaremos esta salida de Posición agregándola a un nodo de Tiempo, antes de enviarla al nodo Ruido simple. También podemos utilizar un nodo Multiplicar con el Tiempo para variar la velocidad del desplazamiento.

Para controlar nuestro desplazamiento, exponemos una nueva propiedad Shader en nuestro gráfico Shader. Las propiedades del sombreador nos permiten proporcionar entradas a nuestro sombreador a través de valores ingresados en el Inspector o mediante nuestros propios scripts de C# como en este caso. Crearemos una nueva propiedad Vector1 llamada Cantidad y cambiaremos la Referencia a _Monto. El campo de referencia es el nombre de la cadena mediante la cual accederemos y cambiaremos el desplazamiento mediante script. Si no cambiamos esto, se utilizará un valor generado automáticamente. Si la cadena no coincide exactamente, no podremos acceder a nuestra propiedad a través del script, así que verifique que ambas coincidan, incluidas las mayúsculas.

Usamos esta propiedad de sombreador Cantidad en un nodo Multiplicar con el Ruido simple antes de que se multiplique con el vector normal. Esto nos permite escalar el ruido antes de aplicarlo a las posiciones de los vértices. Ahora, la variable Cantidad controla cuánto desplazamos cada vértice en la malla.

Para controlar esta variable Cantidad, hemos creado un script en C# llamado DisplacementControl y lo hemos adjuntado al GameObject DisplacementSphere. Este script controla la variable _Amount interactuando con la propiedad que creamos en nuestro material que está asignada al componente MeshRenderer. Almacenamos una referencia al componente MeshRenderer en la variable meshRender y declaramos una nueva variable flotante deviationAmount.

Usamos un lerp simple en la función Actualizar para interpolar la variable desplazamientoAmount al valor de 0. Luego, establecemos la variable de sombreado _Amount en el valor almacenado en la variable shiftAmount. Esto actualizará la variable _Amount del Shader Graph, suavizándola a lo largo del tiempo hasta 0.

Estamos usando el eje de entrada “Saltar” predeterminado de Unity (que está asignado a la barra espaciadora de manera predeterminada) para establecer el valor de desplazamientoAmount en 1 cuando se presiona.

Ahora, cuando ingresamos al modo de reproducción en la escena, podemos ver que al presionar la barra espaciadora, deviationAmount se establece en el valor de 1 y luego se interpola lentamente nuevamente a 0.

Para crear el efecto de brillo ajustable, enviaremos la salida a la Emisión en el nodo PBR Master. Utilizamos un nodo de ruido de Voronoi y lo multiplicamos por un nodo de color. Esto creará una pequeña modulación en el efecto de brillo con algunos puntos oscuros. Luego, usamos un nodo Lerp con otro nodo Color como color base y usamos la variable Cantidad en la entrada T. Esto nos permitirá realizar una combinación entre un nodo de color base y el nodo de color de ruido de Voronoi usando la variable Cantidad.

Luego, desplazaremos el brillo utilizando una configuración similar a la anterior. Usamos un nodo de Posición establecido en Objeto y lo agregamos a un nodo de Tiempo, y conectamos la salida a la ranura UV de nuestro nodo de Ruido de Voronoi.