Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Utilizzare i VisualShader

I VisualShader sono l'alternativa visiva per creare gli shader.

As shaders are inherently linked to visuals, the graph-based approach with previews of textures, materials, etc. offers a lot of additional convenience compared to purely script-based shaders. On the other hand, VisualShaders do not expose all features of the shader script and using both in parallel might be necessary for specific effects.

Nota

Se non hai familiarità con gli shader, comincia leggendo Introduzione agli shader.

Creare un VisualShader

È possibile creare i VisualShader in qualsiasi ShaderMaterial. Per iniziare a utilizzare i VisualShader, crea un nuovo ShaderMaterial in un oggetto a tua scelta.

../../_images/shader_material_create_mesh.webp

Quindi assegna una risorsa Shader alla proprietà Shader.

../../_images/visual_shader_create.webp

Clicca sulla nuova risorsa Shader e la finestra Crea uno shader si aprirà automaticamente. Cambia l'opzione Tipo in VisualShader nel menu a discesa, quindi assegnagli un nome.

../../_images/visual_shader_create2.webp

Clicca sul visual shader appena creato per aprire l'editor di shader. Il layout dell'editor di shader è composto da quattro parti: un elenco di file a sinistra, la barra degli strumenti superiore, il grafico stesso e un'anteprima del materiale a destra, che si può disattivare

../../_images/visual_shader_editor2.webp

Da sinistra e destra nella barra degli strumenti:

  • La freccia serve per cambiare la visibilità del pannello dei file.

  • Il pulsante File apre un menu a discesa per salvare, caricare e creare file.

  • Il pulsante Aggiungi nodo visualizza un menu a comparsa che consente di aggiungere nodi al grafico di shader.

  • Il menu a tendina rappresenta il tipo di shader: Vertex, Fragment e Light. Come per gli shader script, definisce quali nodi predefiniti saranno disponibili.

  • I seguenti pulsanti e il campo numerico controllano il livello di zoom, l'aggancio alla griglia e la distanza tra le linee della griglia (in pixel).

  • L'interruttore controlla se la minimappa del grafico in basso a destra dell'editor è visibile o meno.

  • Il pulsante "Disponi automaticamente i nodi selezionati" tenterà di organizzare i nodi selezionati nel modo più efficiente e ordinato possibile.

  • Il pulsante Gestisci varying apre un menu a tendina che consente di aggiungere o rimuovere un varying.

  • Il pulsante "Mostra codice generato" mostra il codice shader corrispondente al grafico.

  • L'interruttore attiva o disattiva l'anteprima del materiale.

  • Il pulsante Documentazione online apre questa pagina di documentazione nel browser web.

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

Nota

Sebbene i VisualShader non richiedano programmazione, condividono la stessa logica degli shader script. Si consiglia di apprendere le basi di entrambi per comprendere appieno la pipeline di shading.

The visual shader graph is converted to a script shader behind the scene, and you can see this code by pressing the last button in the toolbar. This can be convenient to understand what a given node does and how to reproduce it in scripts.

Using the Visual Shader Editor

By default, every new VisualShader will have an output node. Every node connection ends at one of the output node's sockets. A node is the basic unit to create your shader. To add a new node, click on the Add Node button on the upper left corner or right click on any empty location in the graph, and a menu will pop up.

../../_images/vs_popup.webp

Questo popup contiene le seguenti proprietà:

  • Se fai clic destro sul grafico, questo menu apparirà nella posizione del cursore e il nodo creato, in tal caso, verrà posizionato anch'esso in quella posizione; altrimenti, verrà creato al centro del grafico.

  • It can be resized horizontally and vertically allowing more content to be shown. Size transform and tree content position are saved between the calls, so if you suddenly closed the popup you can easily restore its previous state.

  • Le opzioni Espandi tutto e Comprimi tutto nel menu a tendina consentono di elencare facilmente tutti i nodi disponibili.

  • You can also drag and drop nodes from the popup onto the graph.

While the popup has nodes sorted in categories, it can seem overwhelming at first. Try to add some of the nodes, plug them in the output socket and observe what happens.

Quando si collega un'uscita scalar a un ingresso vector, tutti i componenti del vettore assumeranno il valore dello scalare.

Quando si collega un'uscita vector a un ingresso scalar, il valore dello scalare sarà la media delle componenti del vettore.

Interfaccia di un nodo in Visual Shader

I nodi di visual shader hanno porte di ingresso e di uscita. Le porte di ingresso sono poste sul lato sinistro del nodo, mentre le porte di uscita sono poste sul lato destro.

../../_images/vs_node.webp

Queste porte sono colorate per differenziare il tipo di porta:

Tipi di porta

Tipo

Colore

Descrizione

Esempio

Scalare

Grigio

Uno scalare è un valore singolo.

scalar

Vettore

Viola

Un vettore è una serie di valori.

vector

Booleano

Verde

On o off, true o false.

boolean

Trasformazione

Rosa

Una matrice, solitamente usata per trasformare vertici.

transform

Campionatore

Arancione

Un campionatore di texture. Serve per campionare le texture.

sampler

Tutti i tipi sono utilizzati nei calcoli di vertici, frammenti e luci nello shader. Ad esempio: moltiplicazione di matrici, addizione di vettori o divisione scalare.

Sono disponibili altri tipi ma questi sono quelli principali.

Nodi di Visual Shader

Di seguito sono riportati alcuni nodi speciali che vale la pena conoscere. L'elenco non è esaustivo e potrebbe essere ampliato con altri nodi ed esempi.

Nodo Espressione

Il nodo Expression consente di scrivere espressioni in Godot Shading Language (simile a GLSL) all'interno dei visual shader. Il nodo dispone di pulsanti per aggiungere un numero qualsiasi di porte di input e output e può essere ridimensionato. È inoltre possibile impostare il nome e il tipo di ciascuna porta. L'espressione inserita verrà applicata immediatamente al materiale (non appena il focus esce dalla casella di testo dell'espressione). Eventuali errori di analisi o compilazione saranno stampati nella scheda Output. Le uscite sono inizializzate al loro valore zero predefinito. Il nodo si trova nella scheda Special e si può utilizzare in tutte le modalità di shader.

Le possibilità di questo nodo sono pressoché illimitate: è possibile scrivere procedure complesse e sfruttare tutta la potenza degli shader basati su testo, come cicli, la parola chiave discard, tipi estesi, ecc. Ad esempio:

../../_images/vs_expression2.png

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.

../../_images/vs_reroute.webp

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

../../_images/vs_reroute_handle.webp

Nodo Fresnel

The Fresnel node is designed to accept normal and view vectors and produces a scalar which is the saturated dot product between them. Additionally, you can setup the inversion and the power of equation. The Fresnel node is great for adding a rim-like lighting effect to objects.

../../_images/vs_fresnel.webp

Boolean node

The Boolean node can be converted to Scalar or Vector to represent 0 or 1 and (0, 0, 0) or (1, 1, 1) respectively. This property can be used to enable or disable some effect parts with one click.

../../_images/vs_boolean.gif

Nodo If

The If node allows you to setup a vector which will be returned the result of the comparison between a and b. There are three vectors which can be returned: a == b (in that case the tolerance parameter is provided as a comparison threshold – by default it is equal to the minimal value, i.e. 0.00001), a > b and a < b.

../../_images/vs_if.png

Nodo Switch

Il nodo Switch restituisce un vettore se la condizione booleana è true o false. Il concetto di Boolean è stato introdotto poco prima. Per convertire un vettore in un valore booleano true, tutte le componenti del vettore devono essere diverse da zero.

../../_images/vs_switch.webp

Mesh Emitter

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

Tieni presente che non tutti gli oggetti 3D sono file di mesh. Un file glTF non può essere trascinato e rilasciato nel grafico. Tuttavia, puoi creare una scena ereditata da esso, salvare la mesh in quella scena come file separato e utilizzare quest'ultimo.

../../_images/vs_meshemitter.webp

È anche possibile trascinare e rilasciare i file OBJ nell'editor grafico per aggiungere il nodo corrispondente a quella specifica mesh; altri file di mesh non funzioneranno con questo.