Shader-Designer

In diesem Dokument wird beschrieben, wie Sie mit dem Visual Studio Shader-Designer benutzerdefinierte visuelle Effekte, die als Shader bezeichnet werden, erstellen, ändern und exportieren.

Mithilfe des Shader-Designers können Sie auch ohne HLSL-Programmierkenntnisse benutzerdefinierte visuelle Effekte für Ihr Spiel oder Ihre App erstellen. Zum Erstellen eines Shaders im Shader-Designer, legen Sie den Shader einfach als Diagramm an; das heißt, Sie fügen der Entwurfsoberfläche Knoten hinzu, die Daten und Vorgänge darstellen, und stellen dann Verbindungen zwischen ihnen her, um zu definieren, auf welche Weise die Vorgänge die Daten verarbeiten. Eine Vorschau an jedem Vorgangsknoten zeigt Ihnen den Effekts bis zu diesem Punkt, damit Sie sich das Ergebnis veranschaulichen können. Daten fließen durch die Knoten bis zu einem Endknoten, der die Ausgabe des Shaders darstellt.

Unterstützte Formate

Die folgenden Shaderformate werden vom Shader-Designer unterstützt:

Formatname	Dateierweiterung	Unterstützte Vorgänge (Anzeigen, Bearbeiten, Exportieren)
Directed Graph Shader Language	DGSL	Anzeigen, Bearbeiten
HLSL-Shader (Quellcode)	HLSL	Exportieren
HLSL-Shader (Bytecode)	CSO	Exportieren
C++-Header (HLSL-Bytecodearray)	.h	Exportieren

Erste Schritte

Dieser Abschnitt beschreibt, wie ein DGSL-Shader Visual Studio-Projekt und stellt grundlegende Informationen, die Ihnen den Einstieg zu erleichtern.

So einen DGSL-Shader dem Projekt hinzufügen

1. In Projektmappen-Explorer öffnen Sie das Kontextmenü für das Projekt, den Shader hinzufügen möchten, und dann Hinzufügen auszuwählen, Neues Element.

2. Im Dialogfeld Neues Element hinzufügen unter Installiert, wählen Sie Grafiken und wählen Sie dann Visuelles Shaderdiagramm (.dgsl) aus.

3. Geben Sie den Name der Shaderdatei und Speicherort an, in dem sie erstellt werden sollen.

4. Wählen Sie die Schaltfläche Hinzufügen aus.

Der standardmäßigen Shader

Immer wenn Sie einen DGSL-Shader erstellen, wird ein minimaler als Shader, der nur einen Knoten Punktfarbe verfügt, der an den Knoten Endgültige Farbe verbunden ist. Obwohl dieser Shader vollständig und funktionsfähig ist, hat er nicht viel. Daher ist der erste Schritt, wenn er einen funktionierenden Shader erstellt, häufig, den Knoten Punktfarbe zu löschen oder ihn vom Knoten Endgültige Farbe zu trennen, um für andere Knoten Platz zu schaffen.

Arbeiten mit dem Shader-Designer.

In den folgenden Abschnitten wird beschrieben, wie Sie den Shader-Designer verwendet, um mit benutzerdefinierten Shadern.

Symbolleisten des Shader-Designers

Die Symbolleisten des Shader-Designers enthalten hilfreiche Befehle für die Arbeit mit DGSL-Shaderdiagrammen.

Befehle, die den Zustand des Shader-Designers beeinflussen, finden Sie auf der Symbolleiste Shader-Designer-Modus im Hauptfenster von Visual Studio. Tools und Befehle für den Entwurf finden Sie auf der Symbolleiste Shader-Designer auf der Entwurfsoberfläche des Shader-Designers.

Die Symbolleiste Shader-Designer-Modus:

In dieser Tabelle werden die Elemente der Symbolleiste Shader-Designer-Modus beschrieben und in der Reihenfolge aufgelistet, in der sie auf der Symbolleiste von links nach rechts angezeigt werden:

Element der Symbolleiste	Beschreibung
Auswählen	Ermöglicht die Interaktion mit Knoten und Rändern im Diagramm. In diesem Modus können Sie Knoten auswählen, verschieben oder löschen, und Sie können Ränder erstellen oder unterbrechen.
Schwenken	Ermöglicht das Bewegen eines Shaderdiagramms relativ zum Fensterrahmen. Wählen Sie zum Schwenken einen Punkt auf der Entwurfsoberfläche aus und verschieben Sie ihn. Im Auswahl-Modus können Sie den Schwenken-Modus durch Gedrückthalten der STRG-TASTE vorübergehend aktivieren.
Zoom	Ermöglicht das Anzeigen von mehr oder weniger Shader-Diagrammdetails relativ zum Fensterrahmen. Wählen Sie im Zoom-Modus einen Punkt auf der Entwurfoberfläche aus und verschieben Sie ihn; zum Vergrößern nach rechts oder nach unten und zum Verkleinern nach links oder nach oben. Im Auswahl-Modus können Sie zum Vergrößern oder Verkleinern bei gedrückter STRG-TASTE das Mausrad verwenden.
Mit Zoom anpassen	Zeigt das vollständige Shaderdiagramm im Fensterrahmen an.
Real-Time Rendering Mode	Bei aktiviertem Real-Time Rendering, zeichnet Visual Studio die Entwurfsoberfläche auch dann neu, wenn keine Benutzeraktion ausgeführt wird. Ein hilfreicher Modus, bei der Arbeit mit Shadern, die sich im Laufe der Zeit ändern.
Vorschau mit Kugel	Bei aktivierter Option, wird das Modell einer Kugel verwendet, um den Shader in der Vorschau anzuzeigen. Es kann immer nur eine Vorschauform aktiviert werden.
Vorschau mit Würfel	Bei aktivierter Option, wird das Modell eines Würfels verwendet, um den Shader in der Vorschau anzuzeigen. Es kann immer nur eine Vorschauform aktiviert werden.
Vorschau mit Zylinder	Bei aktivierter Option, wird das Modell eines Zylinders verwendet, um den Shader in der Vorschau anzuzeigen. Es kann immer nur eine Vorschauform aktiviert werden.
Vorschau mit Kegel	Bei aktivierter Option, wird das Modell eines Kegels verwendet, um den Shader in der Vorschau anzuzeigen. Es kann immer nur eine Vorschauform aktiviert werden.
Vorschau mit Teekanne	Bei aktivierter Option, wird das Modell einer Teekanne verwendet, um den Shader in der Vorschau anzuzeigen. Es kann immer nur eine Vorschauform aktiviert werden.
Vorschau mit Ebene	Bei aktivierter Option, wird das Modell einer Ebene verwendet, um den Shader in der Vorschau anzuzeigen. Es kann immer nur eine Vorschauform aktiviert werden.
Toolbox	Zeigt den Werkzeugkasten an oder blendet ihn aus.
Eigenschaften	Zeigt das Fenster Eigenschaften an oder blendet es aus.
Erweitert	Enthält erweiterte Befehle und Optionen. Exportieren Ermöglicht den Export eines Shaders in mehreren Formaten. Exportieren als Exportiert den Shader entweder als HLSL-Quellcode oder als kompilierten HLSL-Bytecode. Weitere Informationen zum Exportieren von Shadern finden Sie unter Gewusst wie: Exportieren eines Shaders. Grafik-Engine Aktiviert die Auswahl des Renderers, der zum Anzeigen der Entwurfsoberfläche verwendet wird. Mit D3D11 rendern Verwendet Direct3D 11 zum Rendern der Shader-Designer-Entwurfsoberfläche. Mit D3D11WARP rendern Verwendet Direct3D 11 Windows Advanced Rasterization Platform (WARP) zum Rendern der Shader-Designer-Entwurfsoberfläche. Ansicht Aktiviert die Auswahl der zusätzlichen Informationen über den Shader-Designer. Frame Rate Bei aktivierter Option wird in der rechten oberen Ecke der Entwurfsoberfläche die aktuelle Einzelbildrate angezeigt. Die Einzelbildrate ist die Anzahl von Bildern, die pro Sekunde gezeichnet werden. Eine hilfreiche Option, wenn Sie die Option Real-Time Rendering Mode aktivieren. Tipp Klicken Sie zum erneuten Ausführen des letzten Befehls auf die Schaltfläche Erweitert.

Arbeiten mit Knoten und Verbindungen

Mithilfe des Auswahl-Modus können Sie Knoten hinzufügen, entfernen, neu anordnen, verbinden und konfigurieren. Auf diese Weise führen Sie die grundlegenden Vorgänge aus:

So führen Sie grundlegende Vorgänge im Auswahlmodus aus

• Gehen Sie folgendermaßen vor:

  • Um dem Diagramm einen Knoten hinzuzufügen, wählen Sie ihn im Werkzeugkasten aus und verschieben Sie ihn auf die Entwurfsoberfläche.

  • Um einen Knotens aus dem Diagramm zu entfernen, wählen Sie ihn aus und drücken Sie anschließend ENTF.

  • Um einen Knoten neu anzuordnen, wählen Sie ihn aus und verschieben Sie ihn auf eine neue Position.

  • Um zwei Knoten miteinander zu verbinden, verschieben Sie den Ausgabeanschluss eines Knoten zum Eingabeanschluss des anderen Knotens. Nur Anschlüsse, die in Ihrer Art kompatibel sind, können miteinander verbunden werden. Eine Linie zwischen den Anschlüssen zeigt die Verbindung an.

  • Um eine Verbindung zu entfernen, wählen Sie im Kontextmenü eines der beiden Anschlüsse den Menüpunkt Verbindung umbrechen.

  • Um die Eigenschaften eines Knotens zu konfigurieren, wählen Sie den Knoten aus, und geben Sie im Fenster Eigenschaften neue Eigenschaftswerte an.

Vorschau für Shaders anzeigen

Zum besseren Verständnis, wie ein Shader in der App angezeigt wird, können Sie konfigurieren, wie der Effekt in der Vorschau angezeigt wird. Für eine Annäherung an die App können Sie eine von mehreren zu rendernden Formen wählen, Texturen und andere Materialparameter konfigurieren, Animation von zeitabhängigen Effekten aktivieren und die Vorschau aus verschiedenen Winkeln überprüfen.

Formen

Der Shader-Designer stellt sechs Formen bereit, die Sie zur Vorschau des Shaders verwenden können: eine Kugel, einen Würfel, einen Zylinder, einen Kegel, eine Teekanne und eine Ebene. Je nach Shader liefern bestimmte Formen möglicherweise eine bessere Vorschau.

So wählen Sie eine Vorschauform aus

• Klicken Sie auf der Symbolleiste Shader-Designer-Modi auf die gewünschte Form.

Texturen und Materialparameter

Viele Shader beruhen auf Texturen und Materialeigenschaften, eine eindeutige Darstellung jeder Art von Objekt in der App zu erzeugen. Um zu sehen, wie der Shaders in der App aussehen wird, können Sie die zum Rendern der Vorschau verwendeten Texturen und Materialeigenschaften entsprechend der Texturen und Parametern festlegen, die Sie möglicherweise in der Anwendung verwenden.

So fügen Sie einem Texturregister eine weitere Textur hinzu oder passen andere Materialparameter an.

1. Wählen Sie im Auswahl-Modus einen leeren Bereich der Entwurfsoberfläche aus. Dadurch werden im Fenster Eigenschaften die globalen Shadereigenschaften angezeigt.

2. Geben Sie im Fenster Eigenschaften neue Werte für die Textur- und Parametereigenschaften an, die Sie ändern möchten.

Im Folgenden finden Sie Shaderparameter, die Sie ändern können:

		Zugriff Dateiname
Material Ambiente		Zugriff Wert
Material Diffus		Zugriff Wert
Material Selbstleuchtend		Zugriff Wert
Material Glänzend		Zugriff Wert
Material Glanzkraft		Zugriff Wert

Zeitbasierte Effekte

Einige Shader verfügen über eine zeitabhängige Komponente, mit der die Effekte animiert werden. Um anzuzeigen, wie der Effekt wirkt, wenn er aktiv ist, muss die Vorschau mehrmals pro Sekunde aktualisiert werden. Standardmäßig wird die Vorschau nur aktualisiert, wenn der Shader geändert wird. Soll dieses Verhalten geändert werden, damit zeitabhängige Effekte angezeigt werden, aktivieren Sie das Real-Time Rendering.

So aktivieren Sie das Real-Time Rendering

• Klicken Sie auf der Shader-Designer-Symbolleiste auf Echtzeitrendering.

Untersuchen des Effekts

Viele Shader werden von Variablen wie dem Betrachtungswinkel oder der direktionale Beleuchtung beeinflusst. Um zu untersuchen, wie der Effekt auf Veränderungen der Variablen reagiert, können Sie die Vorschauform frei drehen und betrachten, wie sich der Shader verhält.

So drehen Sie die Form

• Halten Sie die ALT-TASTE gedrückt und wählen Sie einen Punkt auf der Entwurfsoberfläche aus und verschieben Sie ihn.

Exportieren von Shadern

Bevor Sie einen Shader in der App verwenden können, müssen Sie ihn in ein Format exportieren, das von DirectX verstanden wird.

Sie können Shader als HLSL-Quellcode oder als kompilierter Shader-Bytecode exportieren. HLSL-Quellcode wird in eine Textdatei mit HLSL-Dateinamenerweiterung exportiert. Shader-Bytecode kann entweder in eine unformatierte Binärdatei mit CSO-Dateinamenerweiterung exportiert werden oder in eine C++-Headerdatei (.h), die den Shader-Bytecode in ein Array codiert.

Weitere Informationen zum Exportieren von Shadern finden Sie unter Gewusst wie: Exportieren eines Shaders.

Tastenkombinationen

Befehl	Tastenkombinationen
In den Auswahl-Modus umschalten	STRG+G, STRG+Q S
In den Zoom-Modus umschalten	STRG+G, STRG+Z Z
In den Schwenk-Modus umschalten	STRG+G, STRG+P K
Alles auswählen	STRG+A
Die aktuelle Auswahl löschen	Löschen
Brechen Sie die aktuelle Auswahl ab.	Escape
Vergrößern	STRG+Mausrad vorwärts Pluszeichen (+)
Verkleinern	STRG+Mausrad rückwärts Minuszeichen (-)
Schwenken Sie die Entwurfsoberfläche aufwärts	Mausrad rückwärts BILD-AB
Schwenken Sie die Entwurfsoberfläche abwärts	Mausrad vorwärts BILD-AUF
Schwenken Sie die Entwurfsoberfläche nach links	UMSCHALT+Mausrad rückwärts Mausrad links UMSCHALT+BILD-AB
Schwenken Sie die Entwurfsoberfläche nach rechts	UMSCHALT+Mausrad vorwärts Mausrad rechts UMSCHALT+BILD-AUF
Verschieben Sie den Tastaturfokus auf einen anderen Knoten	Pfeiltasten
Wählen Sie den Knoten, auf dem der Tastaturfokus liegt aus (fügt den Knoten der Auswahlgruppe hinzu)	UMSCHALT+LEERTASTE
Schalten Sie die Auswahl des Knotens mit Tastaturfokus um	STRG+LEERTASTE
Schalten Sie die aktuelle Auswahl um (sind keine Knoten ausgewählt, wählen Sie den Knoten aus, auf dem der Tastaturfokus liegt)	LEERTASTE
Verschieben Sie die aktuelle Auswahl aufwärts	UMSCHALT+NACH-OBEN
Verschieben Sie die aktuelle Auswahl abwärts	UMSCHALT+NACH-UNTEN
Verschieben Sie die aktuelle Auswahl nach links	STRG+NACH-LINKS
Verschieben Sie die aktuelle Auswahl nach rechts	UMSCHALT+NACH-RECHTS

Verwandte Themen

Titel	Beschreibung
Arbeiten mit 3D-Objekten für Spiele und Apps	Stellt eine Übersicht über die Visual Studio - Tools, die Sie verwenden können, um mit Texturen und Bildern, 3D-Modellen und Shadereffekten zu arbeiten.
Grafik-Editor	Beschreibt, wie der Visual Studio Bild-Editor für die Arbeit mit Texturen und Bildern verwendet wird.
Modell-Editor	Beschreibt, wie der Visual Studio Modell-Editor für die Arbeit mit 3D-Modellen verwendet wird.