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

In diesem Abschnitt wird beschrieben, wie ein DGSL-Shader Visual Studio dem Projekt hinzugefügt und stellt grundlegende Informationen, die Ihnen zu können.

So fügen Sie einen DGSL-Shader dem Projekt hinzufügen

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

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

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

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

Hh315733.collapse_all(de-de,VS.110).gifDer standardmäßige Shader

Immer wenn Sie einen DGSL-Shader erstellen, wird es als minimaler 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 keine großen.Daher ist der erste Schritt, wenn er ein funktionierender Shader erstellt, häufig, den Knoten Punktfarbe zu löschen oder ihn im 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 der Shader-Designer verwendet, um mit benutzerdefinierten Shadern zu arbeiten.

Hh315733.collapse_all(de-de,VS.110).gifSymbolleisten 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:

Modale Shader-Designer-Symbolleiste

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.

TippTipp
Klicken Sie zum erneuten Ausführen des letzten Befehls auf die Schaltfläche Erweitert.

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.

Hh315733.collapse_all(de-de,VS.110).gifVorschau 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.

Hh315733.collapse_all(de-de,VS.110).gifFormen

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.

Hh315733.collapse_all(de-de,VS.110).gifTexturen 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:

Parameter

Eigenschaften

Textur 1 - Textur 8

Zugriff

Öffentlich, damit die Eigenschaft im Modell-Editor festgelegt werden kann, andernfalls Privat.

Dateiname

Der vollständige Pfad der Texturdatei, die diesem Texturregister zugeordnet ist.

Material Ambiente

Zugriff

Öffentlich, damit die Eigenschaft im Modell-Editor festgelegt werden kann, andernfalls Privat.

Wert

Die diffuse Farbe des aktuellen Pixels aufgrund der indirekten oder umgebenden Beleuchtung.

Material Diffus

Zugriff

Öffentlich, damit die Eigenschaft im Modell-Editor festgelegt werden kann, andernfalls Privat.

Wert

Eine Farbe, die die Streuung der direkten Beleuchtung durch das aktuelle Pixel beschreibt.

Material Selbstleuchtend

Zugriff

Öffentlich, damit die Eigenschaft im Modell-Editor festgelegt werden kann, andernfalls Privat.

Wert

Die Farbeinbringung des aktuellen Pixels aufgrund der selbsterzeugten Beleuchtung.

Material Glänzend

Zugriff

Öffentlich, damit die Eigenschaft im Modell-Editor festgelegt werden kann, andernfalls Privat.

Wert

Eine Farbe, die die Reflexion der direkten Beleuchtung durch das aktuelle Pixel beschreibt.

Material Glanzkraft

Zugriff

Öffentlich, damit die Eigenschaft im Modell-Editor festgelegt werden kann, andernfalls Privat.

Wert

Der Exponent, mit dem die Intensität von Lichtreflexen auf dem aktuellen Pixels definiert wird.

Hh315733.collapse_all(de-de,VS.110).gifZeitbasierte 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.

Hh315733.collapse_all(de-de,VS.110).gifUntersuchen 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.

Hh315733.collapse_all(de-de,VS.110).gifExportieren 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

ENTF

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

Bietet eine Übersicht über die Visual Studio Tools, die Sie verwenden können, um mit Texturen und Bilder, 3D-Modelle und Shadereffekte 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.