diff options
Diffstat (limited to 'files/de/tools/shader-editor/index.html')
| -rw-r--r-- | files/de/tools/shader-editor/index.html | 57 |
1 files changed, 57 insertions, 0 deletions
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 +--- +<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 <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.</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> |