Finestra di progettazione shader

 

Per la documentazione più recente di Visual Studio 2017 RC, vedere Documentazione di Visual Studio 2017 RC.

In questo documento viene descritto come utilizzare il Visual Studio Progettazione Shader per creare, modificare ed esportare effetti visivi personalizzati che sono note come shader.

È possibile utilizzare la finestra di progettazione Shader per creare effetti visivi personalizzati per il gioco o app, anche se non si conosce la programmazione HLSL. Per creare uno shader in Progettazione Shader, sufficiente creare il layout in un grafico; ovvero, aggiungere all'area di progettazione nodi che rappresentano i dati e le operazioni e quindi si connettono tra loro per definire come le operazioni di elaborano dei dati. In ogni nodo dell'operazione, viene fornita un'anteprima dell'effetto fino a quel punto in modo che è possibile visualizzare il risultato. Flussi di dati tra i nodi verso un nodo finale che rappresenta l'output dello shader.

La finestra di progettazione Shader supporta questi formati dello shader:

Nome del formatoEstensione nome del fileOperazioni supportate (visualizzazione, modifica, esportazione)
Grafico Shader Language. dgslVisualizzazione, modifica
Shader HLSL (codice).HLSLEsporta
Shader HLSL (byte).CSOEsporta
Intestazione C++ (matrice di byte HLSL)hEsporta

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

Per aggiungere uno shader DGSL al progetto

  1. In Esplora, aprire il menu di scelta rapida per il progetto che si desidera aggiungere lo shader e quindi scegliere Aggiungi, nuovo elemento.

  2. Nel Aggiungi nuovo elemento nella finestra di dialogo installato, selezionare grafica, quindi selezionare Visual Effect Graph (. dgsl).

  3. Specificare il nome del file shader e percorso in cui si desidera creare.

  4. Scegliere il pulsante Aggiungi .

Shader predefinito

Ogni volta che si crea uno shader DGSL, inizia come shader minimo che è semplicemente un colore punto nodo in cui è connesso al colore finale nodo. Sebbene questo shader sia completo e funzionale, non fa molto. Pertanto, il primo passaggio nella creazione di uno shader funzionante consiste spesso nell'eliminare il colore punto nodo o la disconnessione dal colore finale nodo per creare spazio per gli altri nodi.

Nelle sezioni seguenti viene descritto come utilizzare Progettazione shader per utilizzare shader personalizzati.

Barre degli strumenti Progettazione shader

La finestra di progettazione Shader barre degli strumenti contengono i comandi che consentono di lavorare con i grafici di shader DGSL.

I comandi che incidevano sullo stato della finestra di progettazione Shader si trovano sul modalità progettazione Shader barra degli strumenti principale Visual Studio finestra. Strumenti di progettazione e i comandi si trovano sul Progettazione Shader barra degli strumenti nell'area di progettazione di progettazione Shader.

Ecco il modalità progettazione Shader barra degli strumenti:

Barra degli strumenti modale progettazione shader.

Questa tabella vengono descritti gli elementi nel modalità progettazione Shader barra degli strumenti che sono elencate nell'ordine in cui vengono visualizzati da sinistra a destra:

Elemento della barra degli strumentiDescrizione
SelezionareConsente di interagire con i nodi e bordi del grafico. In questa modalità, è possibile selezionare nodi e spostare o eliminarli ed è possibile stabilire bordi o suddividerli.
PanoramicaConsente lo spostamento di un grafico shader relativo la cornice della finestra. Per visualizzare una panoramica, selezionare un punto nell'area di progettazione e spostarlo.

In selezionare modalità, è possibile premere e tenere premuto Ctrl per attivare Pan temporaneamente la modalità.
Eseguire lo zoom avantiConsente di visualizzare più o meno i dettagli grafico shader relativo la cornice della finestra. In Zoom modalità, selezionare un punto nell'area di progettazione, quindi spostarlo a destra o verso il basso per eseguire lo zoom avanti o a sinistra o zoom out.

In selezionare modalità, è possibile premere e tenere premuto Ctrl per eseguire lo zoom avanti o indietro utilizzando la rotellina del mouse.
Adatta alla finestraVisualizza grafico shader completo nella cornice della finestra.
Modalità di Rendering in tempo realeSe è abilitato il rendering in tempo reale, in Visual Studio viene ridisegnata l'area di progettazione, anche se non viene eseguita alcuna azione da parte dell'utente. Questa modalità è utile se si utilizzano shader mutevoli nel tempo.
Visualizzare in anteprima con sferaQuando abilitato, per visualizzare in anteprima lo shader viene utilizzato un modello di una sfera. Forma anteprima solo una alla volta può essere abilitata.
Visualizzare in anteprima con cuboQuando abilitato, per visualizzare in anteprima lo shader viene utilizzato un modello di un cubo. Forma anteprima solo una alla volta può essere abilitata.
Anteprima con cilindroQuando abilitato, per visualizzare in anteprima lo shader viene utilizzato un modello di un cilindro. Forma anteprima solo una alla volta può essere abilitata.
Visualizzare in anteprima con conoQuando abilitato, viene utilizzato un modello di cono per visualizzare in anteprima lo shader. Forma anteprima solo una alla volta può essere abilitata.
Visualizzare in anteprima con TeieraQuando abilitato, un modello di un Teiera viene utilizzato per visualizzare in anteprima lo shader. Forma anteprima solo una alla volta può essere abilitata.
Visualizzare in anteprima con pianoQuando abilitato, viene utilizzato un modello di un piano per visualizzare in anteprima lo shader. Forma anteprima solo una alla volta può essere abilitata.
Casella degli strumentiVerrà mostrata o nascosta la della casella degli strumenti.
ProprietàIn alternativa Mostra o nasconde la proprietà finestra.
AvanzateContiene opzioni e comandi avanzati.

 Esportare: consente l'esportazione di uno shader in vari formati.

 Esporta come: Esporta lo shader come codice sorgente HLSL o come codice byte dello shader compilati. Per ulteriori informazioni su come esportare 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 il rendering dell'area di progettazione di progettazione Shader.

 Eseguire il rendering con D3D11WARP: utilizza Direct3D 11 avanzate rasterizzazione piattaforma WARP (Windows) per il rendering dell'area di progettazione di progettazione Shader.

 Visualizzazione: consente la selezione di ulteriori informazioni su progettazione Shader.

 Fotogrammi: quando abilitato, la frequenza dei fotogrammi corrente viene visualizzato nell'angolo superiore destro dell'area di progettazione. La frequenza dei fotogrammi è il numero di fotogrammi disegnati al secondo. Questa opzione è utile quando si abilita il modalità di Rendering in tempo reale (opzione).
System_CAPS_ICON_tip.jpg Suggerimento

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

Utilizzo di nodi e connessioni

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

Per eseguire operazioni di base in modalità di selezione
  • Ecco come:

    • Per aggiungere un nodo nel grafico, selezionarlo nella della casella degli strumenti e spostarlo nell'area di progettazione.

    • Per rimuovere un nodo nel grafico, selezionarlo e 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 in un terminale di input di altro nodo. Possono essere connesso solo terminali tipi compatibili. Una linea tra i terminali Mostra la connessione.

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

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

Anteprima degli shader

Per comprendere come uno shader apparirà nell'app, è possibile configurare la modalità di anteprima l'effetto. Per simulare l'app, è possibile scegliere una delle diverse forme per il rendering, configurare trame e altri parametri di materiale, abilitare l'animazione degli effetti basato sul tempo ed esaminare l'anteprima da diverse angolazioni.

Forme

La finestra di progettazione Shader include sei forme, ovvero una sfera, un cubo, un cilindro, un cono, un Teiera e un piano, che consente di visualizzare in anteprima lo shader. A seconda di shader, alcune forme potrebbero lasciare un'anteprima migliore.

Per scegliere una forma di anteprima
  • Nel modalità progettazione Shader sulla barra degli strumenti, scegliere la forma desiderata.

Parametri di materiale e trame

Molti shader si basano su trame e le proprietà del materiale per produrre un aspetto univoco per ogni tipo di oggetto nell'applicazione. Per visualizzare l'aspetto shader nell'app, è possibile impostare le trame e le proprietà del materiale che vengono utilizzati per eseguire il rendering dell'anteprima per corrispondere le trame e i parametri che è possibile utilizzare nell'applicazione.

Per associare una trama diversa per la registrazione una trama, o per modificare altri parametri di materiale
  1. In selezionare modalità, selezionare un'area vuota dell'area di progettazione. In questo modo la proprietà finestra per visualizzare le proprietà globali shader.

  2. Nel proprietà finestra, specificare nuovi valori per le proprietà della trama e il parametro che si desidera modificare.

Ecco i parametri dello shader che è possibile modificare:

ParametroProprietà
Trama 1trama 8Accesso: pubblico per consentire la proprietà deve essere impostato dall'Editor del modello; in caso contrario, privata.

 Nome del file: il percorso completo del file di trama che è associato a questo registro trama.
Materiale di ambienteAccesso: pubblico per consentire la proprietà deve essere impostato dall'Editor del modello; in caso contrario, privata.

 Valore: il colore del pixel corrente a causa di illuminazione indiretta – o ambiente – diffuso.
Materiale con riflessione diffusaAccesso: pubblico per consentire la proprietà deve essere impostato dall'Editor del modello; in caso contrario, privata.

 Valore: un colore che descrive come pixel corrente diffonde luce diretta.
Materiale con componente emissivaAccesso: pubblico per consentire la proprietà deve essere impostato dall'Editor del modello; in caso contrario, privata.

 Valore: il contributo di colore del pixel corrente a causa di illuminazione autonomo fornito.
Materiale con riflessione speculareAccesso: pubblico per consentire la proprietà deve essere impostato dall'Editor del modello; in caso contrario, privata.

 Valore: un colore che descrive come pixel corrente riflette la luce diretta.
Materiale con riflessione speculare PowerAccesso: pubblico per consentire la proprietà deve essere impostato dall'Editor del modello; in caso contrario, privata.

 Valore: l'esponente che definisce l'intensità delle evidenziazioni speculari sul pixel corrente.

Effetti basato sul tempo

Alcuni shader dispone di un componente basato sul tempo che anima l'effetto. Per mostrare l'effetto aspetto in azione, l'anteprima deve essere aggiornata più volte al secondo. Per impostazione predefinita, l'anteprima viene aggiornata solo quando viene modificato lo shader; Per modificare questo comportamento in modo che sia possibile visualizzare gli effetti basato sul tempo, è necessario attivare il rendering in tempo reale.

Per attivare il rendering in tempo reale
  • Sulla barra degli strumenti Progettazione Shader, scegliere per il Rendering in tempo reale.

Esaminare l'effetto

Molti shader sono interessate dalle variabili, quali la visualizzazione angolo o una luce direzionale. Per esaminare come l'effetto risponde come modificare queste variabili, è possibile ruotare la forma di anteprima liberamente e osservare il comportamento di shader.

Per ruotare la forma
  • Premere e tenere premuto Alt, quindi selezionare qualsiasi punto nell'area di progettazione e spostarlo.

Esportazione di shader

È possibile utilizzare uno shader nell'app, è necessario esportarlo in un formato comprensibile DirectX.

È possibile esportare shader come codice sorgente HLSL o come codice byte dello shader compilati. Codice sorgente HLSL viene esportato in un file di testo con estensione .hlsl. Codice byte dello shader può essere esportato in un file binario non elaborato con un'estensione .cso o in un file di intestazione (h) di C++ che consente di codificare il codice dello shader byte nella matrice.

Per ulteriori informazioni su come esportare shader, vedere procedura: esportare uno Shader.

ComandoScelte rapide da tastiera
Passare a selezionare modalitàCTRL+G, CTRL+Q

S
Passare a Zoom modalitàCTRL+G, CTRL+Z

Z
Passare a Pan modalitàCTRL+G, CTRL+P

K
Selezionare tuttoCTRL+A
Eliminare la selezione correnteEliminazione
Annullare la selezione correnteEscape
Zoom avantiCTRL+rotellina del mouse avanti

Segno più (+)
Zoom indietroCTRL rotellina del Mouse con le versioni precedenti

Segno meno (-)
Scorrere l'area di progettazione diRotellina del mouse indietro

PGGIÙ
Scorrere l'area di progettazione verso il bassoRotellina del mouse avanti

PGSU
Scorrere l'area di progettazione a sinistraMAIUSC+rotellina del mouse indietro

Rotellina del mouse a sinistra

MAIUSC+PGGIÙ
Scorrere a destra nell'area di progettazioneMAIUSC+rotellina del mouse avanti

Rotellina del mouse verso destra

MAIUSC+PGSU
Spostare lo stato attivo a un altro nodoI tasti di direzione
Selezionare il nodo che ha lo stato attivo della tastiera (aggiunge il nodo per il gruppo di selezione)MAIUSC + barra spaziatrice
Attivare o disattivare la selezione del nodo con lo stato attivoCTRL+BARRA SPAZIATRICE
Attivare o disattivare la selezione corrente (se è selezionato alcun nodo, selezionare il nodo che ha lo stato attivo)Barra spaziatrice
Sposta la selezione corrente suMAIUSC+Freccia SU
Spostare la selezione corrente verso il bassoMAIUSC+Freccia GIÙ
Sposta la selezione corrente a sinistraMAIUSC+Freccia SINISTRA
Spostare la selezione corrente a destraMAIUSC + freccia destra.
TitoloDescrizione
Utilizzo degli asset 3D per giochi e AppFornisce una panoramica degli strumenti di Visual Studio a cui attingere per poter utilizzare trame e immagini, modelli 3D ed effetti shader.
Editor di immaginiDescrive come utilizzare l'editor di immagini di Visual Studio con trame e immagini.
Editor dei modelliViene descritto come utilizzare il Visual Studio Editor modello per lavorare con i modelli 3D.
Mostra: