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.

  • L'ultimo pulsante consente di aprire l'editor di shader in una finestra distinta, separata dal resto dell'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.

Il grafico di visual shader è convertito in uno script shader dietro le quinte, e puoi vedere questo codice premendo l'ultimo pulsante nella barra degli strumenti. Può aiutare a capire cosa fa un determinato nodo e come riprodurlo negli script.

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.

  • È anche possibile trascinare e rilasciare i nodi dal popup sul grafico.

Sebbene il popup includa i nodi ordinati per categorie, all'inizio potrebbe sembrare opprimente. Prova ad aggiungere alcuni nodi, collegali alla presa di output e osserva cosa succede.

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

Il nodo Fresnel è progettato per accettare vettori normali e vettori di vista e produce uno scalare che è il prodotto scalare saturo tra di essi. Inoltre, è possibile impostare l'inversione e la potenza dell'equazione. Il nodo Fresnel è ottimo per aggiungere un effetto di illuminazione sui contorni agli oggetti.

../../_images/vs_fresnel.webp

Boolean node

Il nodo Boolean può essere convertito in Scalar o Vector per rappresentare rispettivamente 0 o 1 e (0, 0, 0) o (1, 1, 1). Questa proprietà può servire per attivare o disattivare alcune parti di un effetto con un solo clic.

../../_images/vs_boolean.gif

Nodo If

Il nodo If consente di configurare un vettore che sarà restituito come il risultato del confronto tra a e b. Potrebbero essere restituiti tre vettori: a == b (in questo caso il parametro di tolleranza viene fornito come soglia di confronto – come predefinito è uguale al valore minimo, ovvero 0.00001), a > b e 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

Il nodo Mesh Emitter serve per emettere particelle dai vertici delle mesh. È disponibile solo per gli shader in modalità Particles.

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.