Condividi tramite


Finestra di progettazione shader

In questo documento viene descritto come utilizzare la finestra di Progettazione shader di Visual Studio per creare, modificare ed esportare gli effetti visivi personalizzati noti con il termine di shader.

È possibile utilizzare Progettazione shader per creare effetti visivi personalizzati per il gioco o applicazione anche se non si conosce la programmazione di HLSL.Per creare uno shader nella finestra di Progettazione shader, è sufficiente disporlo come un grafico, vale a dire si aggiungono dei nodi nell'area di progettazione che rappresentano i dati e le operazioni, quindi li si collega tra loro per definire il modo in cui le operazioni elaborano i dati.A ogni nodo di un'operazione, viene fornita un'anteprima dell'effetto fino a quel momento in modo da poterne visualizzare il risultato.I dati passano attraverso i nodi verso un nodo finale che rappresenta l'output dello shader.

Formati supportati

La finestra di Progettazione shader supporta questi formati di shader:

Nome del formato

Estensione file

Operazioni supportate (visualizzazione, modifica, esportazione)

Linguaggio dello shader del grafico diretto

.dgsl

Visualizza, Modifica

Shader HLSL (codice sorgente)

.hlsl

Esportare

Shader HLSL (bytecode)

.cso

Esportare

Intestazione C++ (matrice di bytecode HLSL)

H

Esportare

Introduzione

In questa sezione viene descritto come aggiungere uno shader di DGSL al progetto Visual Studio e vengono fornite informazioni di base introduttivi.

Per aggiungere uno shader di DGSL al progetto

  1. In Esplora soluzioni, scegliere dal menu di scelta rapida del progetto a cui aggiungere lo shader e quindi scegliere Aggiungi, Nuovo elemento.

  2. Nella finestra di dialogo Aggiungi nuovo elemento, in Installato, Graficaquindi selezionare Visual Effect Graph (.dgsl).

  3. Specificare Nome del file di shader e Percorso posizione desiderata da creare.

  4. Selezionare il pulsante Aggiungi.

Hh315733.collapse_all(it-it,VS.110).gifLo shader predefinito

Ogni volta che si crea uno shader di DGSL, inizia come shader minimo che dispone di un solo nodo Colore punto connesso al nodo Colore finale.Sebbene shader è completo e funzionale, non esegue molto.Di conseguenza, il primo passaggio per creare uno shader funzionante costituisce spesso di eliminare il nodo Colore punto o di disconnetterlo dal nodo Colore finale per creare spazio per altri nodi.

Utilizzo della finestra di Progettazione shader.

Nelle sezioni seguenti viene descritto come utilizzare la finestra di progettazione di shader per l'utilizzo di shader personalizzati.

Hh315733.collapse_all(it-it,VS.110).gifBarre degli strumenti di Progettazione shader

Le barre degli strumenti della finestra di Progettazione shader contengono i controlli che consentono di lavorare con i grafici di shader DGSL.

I comandi che influiscono sullo stato della finestra di Progettazione shader si trovano nella barra degli strumenti Modalità progettazione shader nella finestra principale di Visual Studio.Gli strumenti e i comandi di progettazione si trovano nella barra degli strumenti della finestra di Progettazione shader nell'area di progettazione.

Di seguito viene riportata la barra degli strumenti Modalità progettazione shader:

Barra degli strumenti modale progettazione shader.

In questa tabella vengono descritti gli elementi nella barra degli strumenti Modalità progettazione shader, nell'ordine in cui appaiono da sinistra verso destra.

Elemento della barra degli strumenti

Descrizione

Select

Abilita l'interazione con i nodi e i bordi nel grafico.In questo modo, è possibile selezionare nodi e spostarli o eliminarli e definire i bordi o interromperli.

Dettaglio

Consente lo spostamento di un grafico dello shader relativa alla cornice della finestra.Per visualizzare una panoramica, selezionare un punto sull'area di progettazione e spostarlo intorno.

In modalità Seleziona è possibile premere e tenere premuto CTRL per attivare temporaneamente la modalità Panoramica.

Zoom

Consente la visualizzazione di più o meno dettagli del grafico dello shader a seconda della cornice della finestra.In modalità Zoom selezionare un punto nell'area di progettazione, quindi spostarlo a destra o in basso per fare zoom avanti oppure a sinistra o in basso per fare zoom indietro.

In modalità Seleziona è possibile premere e tenere premuto CTRL per ingrandire o ridurre utilizzando la rotellina del mouse.

Adatta alla finestra

Viene visualizzato il grafico dello shader completo nella cornice della finestra.

Modalità rendering in tempo reale

Quando è attivato il rendering in tempo reale, in Visual Studio viene ridisegnata l'area di progettazione, anche quando l'utente non ha eseguito alcuna azione.Questa modalità è utile quando si utilizzano gli shader che cambiano nel tempo.

Anteprima con sfera

Una volta abilitata, viene utilizzato un modello di sfera per visualizzare in anteprima lo shader.È possibile abilitare una sola forma di anteprima alla volta.

Anteprima con cubo

Una volta abilitata, viene utilizzato un modello di cubo per visualizzare in anteprima lo shader.È possibile abilitare una sola forma di anteprima alla volta.

Anteprima con cilindro

Una volta abilitata, viene utilizzato un modello di cilindro per visualizzare in anteprima lo shader.È possibile abilitare una sola forma di anteprima alla volta.

Anteprima con cono

Una volta abilitata, viene utilizzato un modello di cono per visualizzare in anteprima lo shader.È possibile abilitare una sola forma di anteprima alla volta.

Anteprima con teiera

Una volta abilitata, viene utilizzato un modello di teiera per visualizzare in anteprima lo shader.È possibile abilitare una sola forma di anteprima alla volta.

Anteprima con piano

Una volta abilitata, viene utilizzato un modello di piano per visualizzare in anteprima lo shader.È possibile abilitare una sola forma di anteprima alla volta.

Casella degli strumenti

In alternativa verrà mostrata o nascosta la finestra Casella degli strumenti.

Proprietà

In alternativa verrà mostrata o nascosta la finestra Proprietà.

Avanzate

Contiene i comandi avanzati e le opzioni.

Esportare

Consente l'esportazione di uno shader in diversi formati.

Esporta come

Esporta lo shader come codice sorgente HLSL o come bytecode shader compilato.Per ulteriori informazioni sulle modalità di esportazione degli shader, vedere Procedura: esportare uno shader.

Motori grafica

Consente la selezione del renderer utilizzato per visualizzare l'area di progettazione.

Eseguire il rendering con D3D11

Utilizza Direct3D 11 per eseguire il rendering dell'area di progettazione della finestra di Progettazione shader.

Eseguire il rendering con D3D11WARP

Utilizza la piattaforma WARP di Direct3D 11 per eseguire il rendering dell'area di progettazione della finestra di Progettazione shader.

Visualizzazione

Consente la selezione di informazioni aggiuntive sulla finestra di progettazione shader.

Frequenza dei fotogrammi

Quanto attivata, consente di visualizzare la frequenza dei fotogrammi corrente nell'angolo superiore destro dell'area di progettazione.La frequenza dei fotogrammi è il numero di frame disegnati al secondo.

Questa opzione è utile quando si abilita l'opzione Modalità rendering in tempo reale.

SuggerimentoSuggerimento
È possibile scegliere Avanzate per eseguire nuovamente l'ultimo comando.

Hh315733.collapse_all(it-it,VS.110).gifUtilizzo dei nodi e le connessioni

Utilizzare la modalità di Selezione per aggiungere, rimuovere, riposizionare, connettere e configurare i nodi.Di seguito viene illustrato come eseguire queste operazioni di base:

Per eseguire le operazioni di base in modalità di selezione

  • Di seguito viene illustrato come:

    • Per aggiungere un nodo al grafico, selezionarlo in Casella degli strumenti, quindi spostarlo nell'area di progettazione.

    • Per rimuovere un nodo dal grafico, selezionarlo, quindi premere CANC.

    • Per riposizionare un nodo, selezionarlo e spostarlo in una nuova posizione.

    • Per connettere due nodi, spostare un terminale di output di un nodo a un terminale di input dell'altro nodo.Solo i terminali con tipi compatibili possono essere connessi.Una linea tra i terminal mostra la connessione.

    • Per rimuovere una connessione, scegliere Interrompi collegamenti dal menu di scelta rapida per uno dei terminali connessi.

    • Per configurare le proprietà di un nodo, selezionare il nodo, quindi nella finestra Proprietà specificare i nuovi valori per le proprietà.

Hh315733.collapse_all(it-it,VS.110).gifVisualizzare in anteprima gli shader

Per capire come uno shader apparirà nell'app, è possibile configurare il modo in cui l'effetto viene visualizzato in anteprima.Per creare un'app approssimativa, è possibile scegliere una delle varie forme per il rendering, configurare le trame e altri parametri di materiale, attivare l'animazione degli effetti temporizzati ed esaminare l'anteprima da diverse angolature.

Hh315733.collapse_all(it-it,VS.110).gifForme

Nella finestra di Progettazione shader sono disponibili sei forme, una sfera, un cubo, un cilindro, un cono, una teiera e un piano, che è possibile utilizzare per visualizzare in anteprima lo shader.A seconda dello shader, alcune forme potrebbero offrire una migliore anteprima.

Per selezionare una forma in anteprima

  • Sulla barra degli strumenti Modalità progettazione shader, selezionare la forma desiderata.

Hh315733.collapse_all(it-it,VS.110).gifParametri di trame e materiale

Molti shader si basano sulle trame e proprietà materiali per produrre un aspetto univoco per ogni tipo di oggetto nell'applicazione.Per vedere l'aspetto che avrà lo shader nell'applicazione, è possibile impostare le trame e le proprietà di materiale utilizzate per il rendering dell'anteprima per confrontare le trame e i parametri utilizzabili nell'applicazione.

Per associare una trama differente a un registro di trama o per modificare altri parametri dei materiali

  1. In modalità Seleziona selezionare un'area vuota dell'area di progettazione.In questo modo, nella finestra Proprietà vengono visualizzate le proprietà dello shader.

  2. Nella finestra Proprietà specificare i nuovi valori per le proprietà di parametro e trama che si desidera modificare.

Di seguito sono riportati i parametri di shader che è possibile modificare:

Parametro

Proprietà

Trama 1Trama 8

Accesso

Pubblico per poter impostare questa proprietà dall'editor modello; in caso contrario Privato.

Nome file

Percorso completo del file della trama associato a questo registro di trama.

Ambiente materiale

Accesso

Pubblico per poter impostare questa proprietà dall'editor modello; in caso contrario Privato.

Valore

Colore diffuso del pixel corrente dovuto all'illuminazione indiretta o ambientale.

Materiale diffuso

Accesso

Pubblico per poter impostare questa proprietà dall'editor modello; in caso contrario Privato.

Valore

Colore che descrive in che modo l'illuminazione diretta viene diffusa dal materiale del pixel corrente.

Materiale emissivo

Accesso

Pubblico per poter impostare questa proprietà dall'editor modello; in caso contrario Privato.

Valore

Contributo di colore del pixel corrente, in base all'illuminazione autofornita.

Materiale speculare

Accesso

Pubblico per poter impostare questa proprietà dall'editor modello; in caso contrario Privato.

Valore

Colore che descrive in che modo l'illuminazione diretta viene riflessa dal pixel corrente.

Materiale potenza speculare

Accesso

Pubblico per poter impostare questa proprietà dall'editor modello; in caso contrario Privato.

Valore

Esponente che definisce l'intensità delle evidenziazioni speculari nel pixel corrente.

Hh315733.collapse_all(it-it,VS.110).gifEffetti temporizzati

Alcuni shader dispongono di un componente temporale che anima l'effetto.Per vedere come apparirà l'effetto, è necessario aggiornare l'anteprima più volte al secondo.Per impostazione predefinita, l'anteprima viene aggiornata solo quando lo shader viene modificato; per modificare questo comportamento in modo da poter visualizzare gli effetti temporizzati, è necessario consentire il rendering in tempo reale.

Per abilitare il rendering in tempo reale

  • Sulla barra degli strumenti Progettazione shader, scegliere Rendering in tempo reale.

Hh315733.collapse_all(it-it,VS.110).gifEsame dell'effetto

Molti shader sono interessati da variabili come la visualizzazione dell'illuminazione angolare o direzionale.Per esaminare il modo in cui l'effetto reagisce al cambiamento di queste variabili, è possibile ruotare liberamente la forma di anteprima e osservare il comportamento dello shader.

Per ruotare la forma

  • Premere e tenere premuto ALT e selezionare qualsiasi punto nell'area di progettazione e spostarlo.

Hh315733.collapse_all(it-it,VS.110).gifEsportazione degli shader

Prima di poter utilizzare uno shader nell'applicazione, è necessario esportarlo in un formato noto a DirectX.

È possibile esportare gli shader come codice sorgente HLSL o come bytecode shader compilato.Il codice sorgente HLSL viene esportato in un file di testo con un'estensione del nome file hlsl.Il bytecode di shader può essere esportato in un file binario non elaborato con estensione di file cso o in un file di intestazione C++ (con estensione h) che codifica il bytecode di shader in una matrice.

Per ulteriori informazioni sulle modalità di esportazione degli shader, vedere Procedura: esportare uno shader.

Tasti di scelta rapida

Command

Tasti di scelta rapida

Passare alla modalità Seleziona.

CTRL+G, CTRL+Q

S

Passare alla modalità Zoom.

CTRL+G, CTRL+Z

Z

Passare alla modalità Panoramica.

CTRL+G, CTRL+P

K

Seleziona tutto

CTRL+A

Eliminare la selezione corrente

Eliminare

Annullare la selezione corrente

Escape

Zoom avanti

CTRL+rotellina di scorrimento del mouse in avanti

Segno più (+)

Zoom indietro

CTRL-rotellina di scorrimento del mouse all'indietro

Segno meno (-)

Area di progettazione pan in alto

Rotellina di scorrimento del mouse all'indietro

PGGIÙ

Fare una panoramica dell'area di progettazione verso il basso

Rotellina di scorrimento del mouse in avanti

PGSU

Fare una panoramica dell'area di progettazione verso l'alto

MAIUSC+rotellina di scorrimento del mouse all'indietro

Rotellina di scorrimento del mouse a sinistra

MAIUSC+PGGIÙ

Fare una panoramica dell'area di progettazione verso destra

MAIUSC+rotellina di scorrimento del mouse in avanti

Rotellina di scorrimento del mouse a destra

MAIUSC + PGSU

Sposta lo stato attivo della tastiera su un altro nodo

I tasti freccia

Selezionare il nodo con lo stato attivo della tastiera (aggiunge il nodo al gruppo di selezione)

MAIUSC+BARRA SPAZIATRICE

Attiva/disattiva la selezione del nodo con lo stato attivo

CTRL+Barra spaziatrice

Attiva/disattiva la selezione corrente (se non è selezionato alcun nodo, selezionare il nodo con lo stato attivo)

Barra spaziatrice

Spostare in alto la selezione corrente

MAIUSC+freccia SU

Sposta in basso la selezione corrente

MAIUSC+freccia GIÙ

Sposta a sinistra la selezione corrente

MAIUSC+Freccia SINISTRA

Sposta la selezione corrente a destra

MAIUSC+freccia DESTRA.

Argomenti correlati

Titolo

Descrizione

Utilizzo di risorse tridimensionali per giochi e app

Viene fornita una panoramica degli strumenti di Visual Studio da utilizzare con le trame e immagini, modelli 3D e effetti di shader.

Editor immagini

Viene descritto come utilizzare l'editor di immagini di Visual Studio da utilizzare con le trame e le immagini.

Editor modello

Viene descritto come utilizzare l'editor modello di Visual Studio da utilizzare con i modelli tridimensionali.