From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/tools/shader-editor/index.html | 57 +++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 files/de/tools/shader-editor/index.html (limited to 'files/de/tools/shader-editor') diff --git a/files/de/tools/shader-editor/index.html b/files/de/tools/shader-editor/index.html new file mode 100644 index 0000000000..baf56c7597 --- /dev/null +++ b/files/de/tools/shader-editor/index.html @@ -0,0 +1,57 @@ +--- +title: Shader Editor +slug: Tools/Shader-Editor +translation_of: Tools/Shader_Editor +--- +
{{ToolsSidebar}}

Der Shader Editor ermöglicht es, Vertex- and Fragment-Shader unter Verwendung von WebGL zu editieren.

+ +

{{EmbedYouTube("-pEZXNuFFWI")}}

+ +

WebGL ist eine JavaScript API um 3D und 2D Grafiken ohne zusätzliche PlugIns im Browser zu rendern. WebGL verfügt 2 Programme ("shader") auf der betreffenden Ebene der OpenGL rendering pipeline arbeiten:  ein vertex shader, der die Koordinaten für jeden Vertex liefert und den fragment shader, der Farbwerte jedes einzelnen pixels liefert, der gezeichnet werden soll.
+
+ Diese Programme ("Shader") wurden in der OpenGL Shading Language, or GLSL geschrieben. WebGL kann auf unterschiedliche Arten in Webseiten eingebunden werden: als hardcodierter Text in einem Java Skript Quellcode , als externe Quelldatei über das <script>-Tag oder als Klartext direkt vom Server abgerufen werden.Der auf der Webseite enthaltene Java Script code wird mittels einer WebGL API direkt auf der GPU des jeweiligen Gerät (Device) ausgeführt.

+ +

Mit dem Shader-Editor kann der Quellcode von Vertex- und Fragment-Shadern untersucht und bearbeiten werden.

+ +

Hier ein weiterer Screencast, der zeigt wie der Schader-Editor für complexe Applikationen genutzt werden kann (in diesem Fall, der Unreal Engine Demo):

+ +

{{EmbedYouTube("YBErisxQkPQ")}}

+ +

Öffnen des Shader-Editors

+ +

Standartmäßig ist der Shader-Editor deaktiviert. Dieser kann in den Toolbox settings unter "Default Firefox Developer Tools" aktiviert werden.  Der Shader Editor ist nun in der Toolbar verfügbar und kann mittels Mausklick auf Shader-Editor geöffnet werden.
+
+ Zunächst erscheint ein leeres Fenster mit einem RELOAD-Button um die Seite neu zu laden:

+ +

+ +

Der RELOAD der Seite erzeugt einen WebGL Kontext der das Programm lädt.
+ Der folgende Screenshot zeigt eine Demo der Unreal Engine.

+ +

Das Fenster ist in drei Bereiche unterteilt: links eine Auflistung der GLSL Programme, in der Mitte der Vertex-Shader mit dem aktuell selektierten Programm und der Fragment-Shader des aktuell selektierten Programms im rechten Fenster.

+ +

+ +

Programme verwalten

+ +

Im linken Fenster werden die aktuellen Programme des WebGL-Kontext aufgelistet. Fährt man mit dem Cursor über einen der Listeneinträge, wird die betreffende Geometrie in rot hervor gehoben:

+ +

Mit einen Mausklick auf das Auge-Icon links der Programmeinträge, wird das betreffende Programm deaktiviert. Das ist praktisch bei Fokussierung eines bestimmten Shaders oder zum auffinden überlappender Geometrien:

+ +

Durch Anklicken eines Programmeintrags erscheint dessen Vertex- und Fragment Shader in den beiden angrenzenden Fenstern und kann bearbeitet werden.

+ +

Shader bearbeiten

+ +

Das mittlere und rechte Fenster zeigen den Vertex- und den Fragment-Shader des aktuell ausgewählten Programms.
+
+ Sie können die Programme bearbeiten und die Ergebnisse ansehen nachdem der WebGL Kontext neu gezeichnet hat (beispielsweise im nächsten Animations-Frame). Zum Beispiel nach dem modifizieren der Farbwerte:

+ +

Der Editor markiert ("highlighted") Fehler im Quellcode:

+ +

Wenn Sie die X-Icons neben den Zeilen mit der Maus überfahren ("hovern") werden Ihnen detailierte Informationen zum jeweiligen Problem angezeigt:

+ +

+ +

 

+ +

 

-- cgit v1.2.3-54-g00ecf