Using VisualShaders

Así como VisualScript es una alternativa para los usuarios que prefieren un enfoque gráfico de la codificación, los VisualShaders son la alternativa visual para crear shaders.

Dado que los shaders están intrínsecamente ligados a lo visual, el enfoque basado en gráficos con vistas previas de texturas, materiales, etc. ofrece mucha más comodidad en comparación con los shaders basados puramente en scripts. Por otra parte, los VisualShaders no exponen todas las características del script de los shaders y el uso de ambos en paralelo podría ser necesario para efectos específicos.

Nota

Si no está familiarizado con los shaders, empiece leyendo ¿Qué son los shaders?.

Creando un VisualShader

Los VisualShaders pueden ser creados en cualquier ShaderMaterial. Para empezar a usar VisualShaders, crea un nuevo ShaderMaterial en un objeto de tu elección.

../../_images/shader_material_create_mesh.png

Entonces asigna un recurso class_VisualShader` a la propiedad Shader.

../../_images/visual_shader_create.png

Haz clic en el nuevo recurso VisualShader y el Editor de Shaders Visuales se abrirá automáticamente. El diseño del Editor de Shaders Visuales consta de dos partes: la barra de herramientas superior y el gráfico en sí.

../../_images/visual_shader_editor2.png

De izquierda a derecha en la barra de herramientas:

  • El botón Add Node muestra un menú emergente que te permite añadir nodos al gráfico shader.

  • El menú desplegable es del tipo shader: Vértice, Fragmento y Luz. Al igual que para los shaders de script, define qué nodos incorporados estarán disponibles.

  • Los siguientes botones y la entrada de números controlan el nivel de zoom, el ajuste de la cuadrícula y la distancia entre las líneas de la cuadrícula (en píxeles).

  • El último icono muestra el código de shader generado correspondiente a tu gráfico.

Nota

Aunque los VisualShaders no requieren codificación, comparten la misma lógica con los script shaders. Se aconseja aprender lo básico de ambos para tener una buena comprensión de la tubería de shading.

El gráfico shader visual se convierte en un script shader detrás de la escena, y puedes ver este código pulsando el último botón de la barra de herramientas. Esto puede ser conveniente para entender lo que hace un nodo dado y cómo reproducirlo en los scripts.

Usando el Editor Visual de Shaders

Por defecto, cada nuevo VisualShader tendrá un nodo de salida. Cada conexión de nodo termina en una de las tomas del nodo de salida. Un nodo es la unidad básica para crear tu shader. Para añadir un nuevo nodo, haz clic en el botón Add Node de la esquina superior izquierda o haz clic con el botón derecho del ratón en cualquier lugar vacío del gráfico, y aparecerá un menú.

../../_images/vs_popup.png

Esta ventana tiene las siguientes propiedades:

  • Si haces clic con el botón derecho del ratón en el gráfico, este menú se llamará en la posición del cursor y el nodo creado, en ese caso, también se colocará bajo esa posición; de lo contrario, se creará en el centro del gráfico.

  • Puede ser redimensionado horizontal y verticalmente permitiendo mostrar más contenido. La transformación de tamaño y la posición del contenido del árbol se guardan entre las llamadas, así que si cierra de repente el popup puede restaurar fácilmente su estado anterior.

  • Las opciones Expand All y Collapse All en el menú de opciones desplegables pueden ser usadas para listar fácilmente los nodos disponibles.

  • También puedes arrastrar y soltar nodos de la ventana emergente en el gráfico.

Aunque el popup tiene nodos clasificados en categorías, puede parecer abrumador al principio. Intenta añadir algunos de los nodos, conéctalos a la toma de salida y observa lo que sucede.

Al conectar cualquier salida scalar a una entrada vector, todos los componentes del vector tomarán el valor del escalar.

Cuando se conecta cualquier salida vector a una entrada scalar, el valor del escalar será el promedio de los componentes del vector.

Nodos de Visual Shaders

Abajo hay algunos nodos especiales que vale la pena conocer. La lista no es exhaustiva y podría ampliarse con más nodos y ejemplos.

Nodo Expression

El nodo Expression te permite escribir expresiones del Lenguaje de Shader Godot (similar al GLSL) dentro de tus shader visuales. El nodo tiene botones para añadir cualquier cantidad de puertos de entrada y salida necesarios y puede ser redimensionado. También puedes configurar el nombre y el tipo de cada puerto. La expresión que hayas introducido se aplicará inmediatamente al material (una vez que el foco abandone el cuadro de texto de la expresión). Cualquier error de análisis sintáctico o de compilación se imprimirá en la pestaña Salida. Las salidas se inicializan con su valor cero por defecto. El nodo se encuentra en la pestaña Especial y puede utilizarse en todos los modos de shader.

../../_images/vs_expression.gif

Las posibilidades de este nodo son casi ilimitadas - puedes escribir procedimientos complejos, y usar todo el poder de los shaders basados en texto, como los bucles, la palabra clave discard, los tipos extendidos, etc. Por ejemplo:

../../_images/vs_expression2.png

Nodo Fresnel

El nodo Fresnel está diseñado para aceptar vectores normales y de vista y produce un escalar que es el producto de punto saturado entre ellos. Además, puede configurar la inversión y el poder de la ecuación. El nodo Fresnel es genial para añadir un efecto de iluminación de borde a los objetos.

../../_images/vs_fresnel.png

Nodo Boolean

El nodo Boolean puede convertirse en Scalar o Vector para representar 0 o 1 y (0, 0, 0) o (1, 1, 1) respectivamente. Esta propiedad puede usarse para activar o desactivar algunas partes del efecto con un solo clic.

../../_images/vs_boolean.gif

Si el nodo

El nodo If le permite configurar un vector que será devuelto como resultado de la comparación entre a y b. Hay tres vectores que pueden ser devueltos: a == b (en ese caso el parámetro de tolerancia se proporciona como un umbral de comparación - por defecto es igual al valor mínimo, es decir, 0.00001), a > b y a < b.

../../_images/vs_if.png

Nodo Switch

El nodo Switch devuelve un vector si la condición booleana es true o false. Boolean fue introducido arriba. Si conviertes un vector en un verdadero booleano, todos los componentes del vector deben estar por encima de cero.

../../_images/vs_switch.png

Nota

El nodo Switch sólo está disponible en el respaldo de GLES3. Si usted está apuntando a los dispositivos GLES2, no puede usar las declaraciones switch.