Usar VisualShaders

VisualShaders are the visual alternative for creating 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ás familiarizado con los shaders, comienza leyendo Introducción a los shaders.

Crear 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.

Then assign a Shader resource to the Shader property.

Click on the new Shader resource and the Create Shader dialog will open automatically. Change the Type option to VisualShader in the dropdown, then give it a name.

Click on the visual shader you just created to open the Shader Editor. The layout of the Shader Editor comprises four parts, a file list on the left, the upper toolbar, the graph itself, and a material preview on the right that can be toggled off

De izquierda a derecha en la barra de herramientas:

• The arrow can be used to toggle the files panel's visibility.

• The File button opens a dropdown menu for saving, loading, and creating files.

• 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).

• The toggle controls if the graph minimap in the bottom right of the editor is visible or not.

• The automatically arrange selected nodes button will try to organize any nodes you have selected as efficiently and cleanly as possible.

• The Manage Varyings button opens a dropdown that lets you add or remove a varying.

• The show generated code button shows shader code corresponding to your graph.

• The toggle turns the material preview on or off.

• The Online Docs button opens this documentation page in your web browser.

• The last button allows you to put the shader editor in its own window, separate from the rest of the editor.

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.

Usar 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ú.

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.

• Puedes 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.

Visual Shader node interface

Visual shader nodes have input and output ports. The input ports are located on the left side of the node, and output ports are located on the right side of the node.

These ports are colored to differentiate type of port:

Port types

Tipo	Color	Descripción	Ejemplo
Scalar	Gris	Scalar is a single value.
Vector	Púrpura	Vector es un conjunto de valores.
Boolean	Verde	On or off, true or false.
Transformar	Rosa	A matrix, usually used to transform vertices.
Sampler	Naranja	A texture sampler. It can be used to sample textures.

All of the types are used in the calculations of vertices, fragments, and lights in the shader. For example: matrix multiplication, vector addition, or scalar division.

There are other types but these are the main ones.

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.

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:

Reroute node

The Reroute node is used purely for organizational purposes. In a complicated shader with many nodes you may find that the paths between nodes can make things hard to read. Reroute, as its name suggests, allows you to adjust the path between nodes to make things easier to read. You can even have multiple reroute nodes for a single path, which can be used to make right angles.

To move a reroute node move your mouse cursor above it, and grab the handle that appears.

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, puedes 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.

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.

Si el nodo

El nodo If te 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.

Nodo Switch

The Switch node returns a vector if the boolean condition is true or false. Boolean was introduced above. If you want to convert a vector to a true boolean, all components of the vector should be non-zero.

Emisor de Mesh

The Mesh Emitter node is used for emitting particles from mesh vertices. This is only available for shaders that are in Particles mode.

Keep in mind that not all 3D objects are mesh files. a glTF file can't be dragged and dropped into the graph. However, you can create an inherited scene from it, save the mesh in that scene as its own file, and use that.

You can also drag and drop obj files into the graph editor to add the node for that specific mesh, other mesh files will not work for this.