files/de/tools/shader_editor/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

---
title: Shader Editor
slug: Tools/Shader_Editor
translation_of: Tools/Shader_Editor
original_slug: Tools/Shader-Editor
---
<div>{{ToolsSidebar}}</div><p>Der Shader Editor ermöglicht es, Vertex- and Fragment-Shader unter Verwendung von <a href="/en-US/docs/Web/WebGL">WebGL</a> zu editieren.</p>

<p>{{EmbedYouTube("-pEZXNuFFWI")}}</p>

<p>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 <a href="https://www.opengl.org/wiki/Rendering_Pipeline_Overview">OpenGL rendering pipeline</a> arbeiten:  ein <a href="https://www.opengl.org/wiki/Vertex_Shader">vertex shader</a>, der die Koordinaten für jeden Vertex liefert und den <a href="https://www.opengl.org/wiki/Fragment_Shader">fragment shader</a>, der Farbwerte jedes einzelnen pixels liefert, der gezeichnet werden soll.<br>
 <br>
 Diese Programme ("Shader") wurden in der OpenGL Shading Language, or <a href="https://www.opengl.org/documentation/glsl/">GLSL</a> geschrieben. WebGL kann auf unterschiedliche Arten in Webseiten eingebunden werden: als hardcodierter Text in einem Java Skript Quellcode , als externe Quelldatei über das &lt;script&gt;-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.</p>

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

<p>Hier ein weiterer Screencast, der zeigt wie der Schader-Editor für complexe Applikationen genutzt werden kann (in diesem Fall, der <a href="http://www.unrealengine.com/html5/">Unreal Engine</a> Demo):</p>

<p>{{EmbedYouTube("YBErisxQkPQ")}}</p>

<h2 id="Öffnen_des_Shader-Editors">Öffnen des Shader-Editors</h2>

<p>Standartmäßig ist der Shader-Editor deaktiviert. Dieser kann in den <a href="/en-US/docs/Tools_Toolbox#Settings">Toolbox settings</a> 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.<br>
 <br>
 Zunächst erscheint ein leeres Fenster mit einem RELOAD-Button um die Seite neu zu laden:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6421/shader-editor-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>Der RELOAD der Seite erzeugt einen WebGL Kontext der das Programm lädt.<br>
 Der folgende Screenshot zeigt eine Demo der <a href="http://www.unrealengine.com/html5/">Unreal Engine</a>.</p>

<p>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.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6431/shader-editor-loaded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h2 id="Programme_verwalten">Programme verwalten</h2>

<p>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:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6427/shader-editor-highlight.png" style="display: block; margin-left: auto; margin-right: auto;">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:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6429/shader-editor-disable.png" style="display: block; margin-left: auto; margin-right: auto;">Durch Anklicken eines Programmeintrags erscheint dessen Vertex- und Fragment Shader in den beiden angrenzenden Fenstern und kann bearbeitet werden.</p>

<h2 id="Shader_bearbeiten">Shader bearbeiten</h2>

<p>Das mittlere und rechte Fenster zeigen den Vertex- und den Fragment-Shader des aktuell ausgewählten Programms.<br>
 <br>
 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:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6433/shader-editor-edit-color.png" style="display: block; margin-left: auto; margin-right: auto;">Der Editor markiert ("highlighted") Fehler im Quellcode:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6435/shader-editor-error.png" style="display: block; margin-left: auto; margin-right: auto;">Wenn Sie die X-Icons neben den Zeilen mit der Maus überfahren ("hovern") werden Ihnen detailierte Informationen zum jeweiligen Problem angezeigt:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6437/shader-editor-error-info.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p> </p>

<p> </p>