Creare shader con progettazione shader in Visual Studio

Questo articolo illustra come usare la finestra di progettazione shader per creare diversi tipi di shader.

Creare shader di colore flat di base

È possibile usare la finestra di progettazione shader e il linguaggio DGSL (Directed Graph Shader Language) per creare uno shader a colori flat. Questo shader imposta il colore finale su un valore di colore RGB costante. È possibile implementare uno shader con colore uniforme scrivendo il valore di colore di una costante di colore RGB nel colore di output finale.

Prima di iniziare, assicurarsi che siano visualizzate la finestra Proprietà e la casella degli strumenti.

1. Creare uno shader DGSL da utilizzare. Per informazioni su come aggiungere uno shader DGSL al progetto, vedere la sezione Introduzione in Finestra di progettazione shader.

2. Eliminare il nodo Colore punto. Usare lo strumento Seleziona per selezionare il nodo Colore punto e scegliere Modifica>Elimina nella barra dei menu.

3. Aggiungere un nodo Costante colore al grafico. Nella casella degli strumenti, in Costanti, selezionare Costante colore e spostarlo nell'area di progettazione.

4. Specificare un valore di colore per il nodo Costante colore. Usare lo strumento Seleziona per selezionare il nodo Costante colore e quindi specificare un valore di colore nella proprietà Output della finestra Proprietà. Per arancione, specificare un valore di (1.0, 0,5, 0,2, 1.0).

5. Connettere la costante di colore al colore finale. Per creare le connessioni, spostare il terminale RGB del nodo Costante colore nel terminale RGB del nodo Colore finale e quindi spostare il terminale Alfa del nodo Costante colore nel terminale Alfa del nodo Colore finale. Queste connessioni impostano il colore finale sulla costante di colore definita nel passaggio precedente.

La figura seguente illustra il grafico shader completato e un'anteprima dello shader applicato a un cubo.

Nota

Nella figura è stato specificato un colore arancione per illustrare meglio l'effetto dello shader.

Alcune forme potrebbero produrre anteprime migliori per alcuni shader. Per altre informazioni su come visualizzare in anteprima gli shader nella finestra di progettazione shader, vedere Finestra di progettazione shader.

Creare shader Lambert di base

È anche possibile usare la finestra di progettazione shader e il linguaggio DGSL (Directed Graph Shader Language) per creare uno shader di illuminazione che implementa il modello di illuminazione Lambert classico.

Il modello di illuminazione Lambert incorpora l'illuminazione ambientale e direzionale per ombreggiare oggetti in una scena 3D. I componenti ambientali forniscono un livello di illuminazione di base della scena 3D, mentre i componenti direzionali forniscono illuminazione aggiuntiva da sorgenti di luce (lontane) direzionali. L'illuminazione ambientale interessa allo stesso modo tutte le superfici della scena, indipendentemente dall'orientamento. Per una determinata superficie, è un prodotto del colore ambientale della superficie, nonché del colore e dell'intensità dell'illuminazione ambientale nella scena. L'illuminazione direzionale, invece, influenza ogni area della scena in modo diverso, in base all'orientamento della superficie rispetto alla direzione della sorgente di luce. È un prodotto del colore diffuso e dell'orientamento della superficie, nonché del colore, dell'intensità e della direzione delle sorgenti di luce. Le superfici rivolte direttamente verso una sorgente di luce ricevono il massimo contributo, mentre le superfici rivolte in senso contrario alla luce non ricevono alcun contributo. Nel modello di illuminazione Lambert, il componente ambientale e uno o più componenti direzionali vengono combinati per determinare il contributo totale di colore con riflessione diffusa per ogni punto sull'oggetto.

Prima di iniziare, assicurarsi che siano visualizzate la finestra Proprietà e la casella degli strumenti.

1. Creare uno shader DGSL da usare. Per informazioni su come aggiungere uno shader DGSL al progetto, vedere la sezione Introduzione in Finestra di progettazione shader.

2. Scollegare il nodo Colore punto dal nodo Colore finale. Scegliere il terminale RGB del nodo Colore punto e quindi scegliere Interrompi collegamenti. Lasciare connesso il terminale Alfa.

3. Aggiungere un nodo Lambert al grafico. Nella casella degli strumenti, in Utilità, selezionare Lambert e spostarlo nell'area di progettazione. Il nodo Lambert calcola il contributo totale di colore con riflessione diffusa del pixel in base ai parametri di illuminazione ambientale e diffusa.

4. Collegare il nodo Colore punto al nodo Lambert. In modalità Seleziona spostare il terminale RGB del nodo Colore punto nel terminale Colore diffuso del nodo Lambert. Questa connessione fornisce il nodo Lambert con interpolazione del colore con riflessione diffusa del pixel.

5. Collegare il valore del colore calcolato al colore finale. Spostare il terminale Output del nodo Lambert nel terminale RGB del nodo Colore finale.

   La figura seguente illustra il grafico shader completato e un'anteprima dello shader applicato a un modello di teiera.

Nota

Per illustrare meglio l'effetto dello shader in questa figura, è stato specificato un colore arancione usando il parametro MaterialDiffuse dello shader. Un gioco o un'app può usare questo parametro per specificare un valore di colore univoco per ogni oggetto. Per informazioni sui parametri del materiale, vedere Progettazione shader.

La figura seguente illustra lo shader descritto in questo documento applicato a un modello 3D.

Creare shader phong di base

È anche possibile usare la finestra di progettazione shader e il linguaggio DGSL (Directed Graph Shader Language) per creare uno shader di illuminazione che implementa il modello di illuminazione Phong classico.

Il modello di illuminazione Phong estende il modello di illuminazione Lambert con l'evidenziazione speculare, che simula le proprietà riflettenti di una superficie. Il componente speculare fornisce maggiore illuminazione dalle stesse sorgenti di luce direzionale usate nel modello di illuminazione Lambert, ma il contributo apportato al colore finale viene elaborato in modo diverso. L'evidenziazione speculare influenza ogni area della scena in modo diverso, in base alla relazione tra la direzione di visualizzazione, la direzione delle sorgenti di luce e l'orientamento della superficie. È un prodotto del colore speculare, della potenza speculare e dell'orientamento della superficie, nonché del colore, dell'intensità e della direzione delle sorgenti di luce. Le superfici che riflettono la sorgente di luce in direzione dell'osservatore ricevono il contributo speculare massimo, mentre le superfici che riflettono la sorgente di luce lontano dall'osservatore non ricevono alcun contributo. Nel modello di illuminazione Phong uno o più componenti speculari vengono combinati per determinare il colore e l'intensità di evidenziazione speculare di ogni punto sull'oggetto e quindi vengono aggiunti al risultato del modello di illuminazione Lambert per produrre il colore finale del pixel.

Per altre informazioni sul modello di illuminazione Lambert, vedere Procedura: Creare uno shader con Lambert di base.

Prima di iniziare, assicurarsi che siano visualizzate la finestra Proprietà e la casella degli strumenti.

1. Creare uno shader Lambert, come descritto in Procedura: Creare uno shader con Lambert di base.

2. Scollegare il nodo Lambert dal nodo Colore finale. Scegliere il terminale RGB del nodo Lambert e quindi scegliere Interrompi collegamenti. In questo modo si crea lo spazio per il nodo che viene aggiunto nel passaggio successivo.

3. Aggiungere un nodo Aggiungi al grafico. Nella casella degli strumenti, in Matematica, selezionare Aggiungi e spostarlo nell'area di progettazione.

4. Aggiungere un nodo Speculare al grafico. Nella casella degli strumenti, in Utilità, selezionare Speculare e spostarlo nell'area di progettazione.

5. Aggiungere il contributo speculare. Spostare il terminale Output del nodo Speculare nel terminale X del nodo Aggiungi e quindi spostare il terminale Output del nodo Lambert nel terminale Y del nodo Aggiungi. Queste connessioni combinano i contributi totali di colore con riflessione diffusa e colore speculare per il pixel.

6. Collegare il valore del colore calcolato al colore finale. Spostare il terminale Output del nodo Aggiungi nel terminale RGB del nodo Colore finale.

   La figura seguente illustra il grafico shader completato e un'anteprima dello shader applicato a un modello di teiera.

Nota

Per illustrare meglio l'effetto dello shader in questa figura, è stato specificato un colore arancione usando il parametro MaterialDiffuse dello shader e un colore metallizzato usando i parametri MaterialSpecular e MaterialSpecularPower. Per informazioni sui parametri del materiale, vedere Progettazione shader.

Alcune forme potrebbero produrre anteprime migliori per alcuni shader. Per altre informazioni sull'anteprima degli shader, vedere Progettazione shader.

La figura seguente illustra lo shader descritto in questo documento applicato a un modello 3D. La proprietà MaterialSpecular è impostata su (1.00, 0.50, 0.20, 0.00) e la proprietà MaterialSpecularPower è impostata su 16.

Nota

La proprietà MaterialSpecular determina la finitura apparente della superficie. Una superficie molto lucente come il vetro o la plastica tende ad avere un colore speculare equivalente a una sfumatura brillante di bianco, mentre una superficie metallica tende ad avere un colore speculare simile al relativo colore diffuso. Una superficie con finitura satinata tende invece ad avere un colore speculare equivalente a una sfumatura scura di grigio.

La proprietà MaterialSpecularPower determina l'intensità delle evidenziazioni speculari. Potenze speculari elevate simulano evidenziazioni deboli e più localizzate, mentre potenze speculari molto deboli simulano evidenziazioni intense e ampie che possono saturare eccessivamente e nascondere il colore dell'intera superficie.

Creare shader di trama di base

Usare la finestra di progettazione shader e il linguaggio DGSL (Directed Graph Shader Language) per creare uno shader a trama singola. Questo shader imposta il colore finale direttamente sui valori RGB e alfa campionati dalla trama.

È possibile implementare uno shader a trama singola di base scrivendo i valori di colore e alfa di un campione di trama direttamente nel colore di output finale.

Prima di iniziare, assicurarsi che siano visualizzate la finestra Proprietà e la casella degli strumenti.

1. Creare uno shader DGSL da utilizzare. Per informazioni su come aggiungere uno shader DGSL al progetto, vedere la sezione Introduzione in Finestra di progettazione shader.

2. Eliminare il nodo Colore punto. In modalità Seleziona selezionare il nodo Colore punto e scegliere Modifica>Elimina nella barra dei menu. In questo modo si crea lo spazio per il nodo che viene aggiunto nel passaggio successivo.

3. Aggiungere un nodo Trama al grafico. Nella casella degli strumenti, in Trama, selezionare Campione trama e spostarlo nell'area di progettazione.

4. Aggiungere un nodo Coordinata trama al grafico. Nella casella degli strumenti, in Trama, selezionare Coordinata trama e spostarlo nell'area di progettazione.

5. Scegliere una trama da applicare. In modalità Seleziona selezionare il nodo Campione trama e nella finestra Proprietà specificare la trama che si vuole usare tramite la proprietà Nome file.

6. Rendere la trama accessibile pubblicamente. Selezionare il nodo Campione trama e nella finestra Proprietà impostare la proprietà Accesso su Pubblico. A questo punto è possibile impostare la trama da un altro strumento, ad esempio dall'editor dei modelli.

7. Collegare le coordinate di trama al campione di trama. In modalità Seleziona spostare il terminale Output del nodo Coordinata trama nel terminale UV del nodo Campione trama. Questa connessione esegue la campionatura della trama in corrispondenza delle coordinate specificate.

8. Collegare il campione di trama al colore finale. Spostare il terminale RGB del nodo Campione trama nel terminale RGB del nodo Colore finale e quindi spostare il terminale Alfa del nodo Campione trama nel terminale Alfa del nodo Colore finale.

La figura seguente illustra il grafico shader completato e un'anteprima dello shader applicato a un cubo.

Nota

In questa illustrazione, viene utilizzato un piano come forma di anteprima ed è stata specificata una trama per illustrare meglio l'effetto dello shader.

Alcune forme potrebbero produrre anteprime migliori per alcuni shader. Per altre informazioni su come visualizzare in anteprima gli shader nella finestra di progettazione shader, vedere Finestra di progettazione shader.

Creare shader di trame in scala di grigi

Usare la finestra di progettazione shader e il linguaggio DGSL (Directed Graph Shader Language) per creare uno shader di trama in scala di grigi. Questo shader modifica il valore di colore RGB del campione di trama e lo usa insieme al valore alfa invariato per impostare il colore finale.

È possibile implementare uno shader con trama in scala di grigi modificando il valore di colore di un campione di trama prima di scriverlo nel colore di output finale.

Prima di iniziare, assicurarsi che siano visualizzate la finestra Proprietà e la casella degli strumenti.

1. Creare uno shader con trama di base, come descritto in Procedura: Creare uno shader con trama di base.

2. Scollegare il terminale RGB del nodo Campione trama dal terminale RGB del nodo Colore finale. In modalità Seleziona scegliere il terminale RGB del nodo Campione trama e quindi scegliere Interrompi collegamenti. In questo modo si crea lo spazio per il nodo che viene aggiunto nel passaggio successivo.

3. Aggiungere un nodo Desatura al grafico. Nella casella degli strumenti, in Filtri, selezionare Desatura e spostarlo nell'area di progettazione.

4. Calcolare il valore della scala di grigi usando il nodo Desatura. In modalità Seleziona spostare il terminale RGB del nodo Campione trama nel terminale RGB del nodo Desatura.

   Nota

   Per impostazione predefinita, il nodo Desatura desatura completamente il colore di input e usa i valori di luminanza standard per la conversione in scala di grigi. È possibile modificare il comportamento del nodoDesatura modificando il valore della proprietà Luminanza o desaturando parzialmente il colore di input. Per desaturare parzialmente il colore di input, immettere un valore scalare compreso nell'intervallo [0,1) nel terminale Percentuale del nodo Desatura.

5. Collegare il valore del colore in scala di grigi al colore finale. Spostare il terminale Output del nodo Desatura nel terminale RGB del nodo Colore finale.

La figura seguente illustra il grafico shader completato e un'anteprima dello shader applicato a un cubo.

In questa illustrazione, viene utilizzato un piano come forma di anteprima ed è stata specificata una trama per illustrare meglio l'effetto dello shader. Alcune forme potrebbero produrre anteprime migliori per alcuni shader. Per altre informazioni sull'anteprima degli shader, vedere Progettazione shader.

Creare shader sfumature basate su geometria

Usare la finestra di progettazione shader e il linguaggio shader Directed Graph Shader per creare uno shader basato su geometria. Questo shader ridimensiona un valore di colore RGB costante in base all'altezza di ogni punto di un oggetto nello spazio globale.

È possibile implementare uno shader basato sulla geometria incorporando la posizione del pixel nello shader. Nei linguaggi shader, oltre al colore e alla posizione sullo schermo 2D, un pixel contiene altre informazioni. Un pixel, noto in alcuni sistemi come frammento, è costituito da una raccolta di valori che descrivono l'area corrispondente a un pixel. Lo shader descritto in questo documento usa l'altezza di ciascun pixel di un oggetto 3D nello spazio globale per influire sul colore di output finale del frammento.

Prima di iniziare, assicurarsi che siano visualizzate la finestra Proprietà e la casella degli strumenti.

1. Creare uno shader DGSL da usare. Per informazioni su come aggiungere uno shader DGSL al progetto, vedere la sezione Introduzione in Informazioni sulla finestra di progettazione shader.

2. Scollegare il nodo Colore punto dal nodo Colore finale. Scegliere il terminale RGB del nodo Colore punto e quindi scegliere Interrompi collegamenti. In questo modo si crea lo spazio per il nodo che viene aggiunto nel passaggio successivo.

3. Aggiungere un nodo Per al grafico. Nella casella degli strumenti, in Matematica, selezionare Per e spostarlo nell'area di progettazione.

4. Aggiungere un nodo Mascheramento vettore al grafico. Nella casella degli strumenti, in Utilità, selezionare Mascheramento vettore e spostarlo nell'area di progettazione.

5. Specificare i valori di maschera per il nodo Mascheramento vettore. In modalità Seleziona selezionare il nodo Mascheramento vettore e nella finestra Proprietà impostare la proprietà Verde / Y su True. Impostare quindi le proprietà Rosso / X, Blu / Z e Alfa / W su False. In questo esempio, le proprietà Rosso / X, Verde / Y e Blu / Z corrispondono ai componenti x, y e z del nodo Posizione globale e Alfa / W non viene usato. Poiché solo Verde / Y è impostato su True, dopo il mascheramento del vettore di input rimane solo il componente y.

6. Aggiungere un nodo Posizione globale al grafico. Nella casella degli strumenti, in Costanti, selezionare Posizione globale e spostarlo nell'area di progettazione.

7. Mascherare la posizione del frammento nello spazio globale. In modalità Seleziona spostare il terminale Output del nodo Posizione globale nel terminale Vettore del nodo Mascheramento vettore. Questa connessione maschera la posizione del frammento in modo da ignorare i componenti x e z.

8. Moltiplicare la costante di colore RGB per la posizione mascherata nello spazio globale. Spostare il terminale RGB del nodo Colore punto nel terminale Y del nodo Per e quindi spostare il terminale Output del nodo Mascheramento vettore nel terminale X del nodo Per. Tale connessione consente di ridimensionare il valore del colore in base all'altezza del pixel nello spazio globale.

9. Collegare il valore del colore ridimensionato al colore finale. Spostare il terminale Output del nodo Per nel terminale RGB del nodo Colore finale.

La figura seguente illustra il grafico shader completato e un'anteprima dello shader applicato a una sfera.

Nota

In questa figura è stato specificato un colore arancione per illustrare meglio l'effetto dello shader, ma poiché la forma di anteprima non ha una posizione nello spazio globale, lo shader non può essere interamente visualizzato in anteprima nella finestra di progettazione dello shader. Per poter illustrare l'effetto completo, lo shader deve essere visualizzato in anteprima in una scena reale.

Alcune forme potrebbero produrre anteprime migliori per alcuni shader. Per altre informazioni sull'anteprima degli shader, vedere Progettazione shader.

La figura seguente illustra lo shader descritto in questo documento applicato alla scena 3D illustrata in Procedura: Creare un modello di terreno 3D. L'intensità del colore aumenta con l'altezza del punto nello spazio globale.

Per altre informazioni su come applicare uno shader a un modello 3D, vedere Procedura: Applicare uno shader a un modello 3D.

Contenuto correlato

• Procedura: Applicare uno shader a un modello 3D
• Procedura: Esportare uno shader
• Nodi della finestra di progettazione shader
• Editor di immagini