diff options
Diffstat (limited to 'files/de/web/api/webgl_api')
4 files changed, 15 insertions, 15 deletions
diff --git a/files/de/web/api/webgl_api/index.html b/files/de/web/api/webgl_api/index.html index cd699e7ee1..0a8e35a37d 100644 --- a/files/de/web/api/webgl_api/index.html +++ b/files/de/web/api/webgl_api/index.html @@ -9,12 +9,12 @@ translation_of: Web/API/WebGL_API <div>{{WebGLSidebar}}</div> <div class="summary"> -<p>WebGL (Web Graphics Library) ist eine Javascript-API zum Rendern interaktiver 3D und 2D Grafiken mittels eines kompatiblen Web-Browsers ohne Einsatz zusätzlicher Plugins. Mit <a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> steht eine API zur Verfügung, die an <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES 2.0</a> angelehnt ist und deren Inhalte mittels eines {{HTMLElement("canvas")}} Elements dargestellt werden.</p> +<p>WebGL (Web Graphics Library) ist eine Javascript-API zum Rendern interaktiver 3D und 2D Grafiken mittels eines kompatiblen Web-Browsers ohne Einsatz zusätzlicher Plugins. Mit <a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> steht eine API zur Verfügung, die an <a class="external" href="http://www.khronos.org/opengles/">OpenGL ES 2.0</a> angelehnt ist und deren Inhalte mittels eines {{HTMLElement("canvas")}} Elements dargestellt werden.</p> </div> -<p>WebGL steht ab <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ und <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+ zur Verfügung. Allerdings muss auch die Hardware des Zielgerätes dieses Feature unterstützen.</p> +<p>WebGL steht ab <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ und <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie">Internet Explorer</a> 11+ zur Verfügung. Allerdings muss auch die Hardware des Zielgerätes dieses Feature unterstützen.</p> -<p>WebGL2 steht ab <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 51+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 56+ und <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 42+ standardmäßig zur Verfügung. WebGL2 wird derzeit nicht von Internet Explorer oder Edge unterstützt.</p> +<p>WebGL2 steht ab <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 51+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 56+ und <a href="http://www.opera.com/">Opera</a> 42+ standardmäßig zur Verfügung. WebGL2 wird derzeit nicht von Internet Explorer oder Edge unterstützt.</p> <p>Das {{HTMLElement("canvas")}} Element kann auch von <a href="/de/docs/Web/API/Canvas_API">Canvas 2D</a> genutzt werden, um 2D Grafiken rendern zu können.</p> @@ -117,17 +117,17 @@ translation_of: Web/API/WebGL_API <h2 id="Ressourcen">Ressourcen</h2> <dl> - <dt><a class="link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/" title="https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html">WebGL Spezifikation</a></dt> + <dt><a class="link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/">WebGL Spezifikation</a></dt> <dd>Der Entwurf der WebGL Spezifikation.</dd> - <dt><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL Seite</a></dt> + <dt><a class="external" href="http://www.khronos.org/webgl/">Khronos WebGL Seite</a></dt> <dd>Die Hauptseite für WebGL der Khronos Group.</dd> - <dt><a class="external" href="http://learningwebgl.com/blog/" title="http://learningwebgl.com/blog/">Learning WebGL</a></dt> + <dt><a class="external" href="http://learningwebgl.com/blog/">Learning WebGL</a></dt> <dd>Eine Reihe von Tutorials über WebGL (Englisch).</dd> - <dt><a class="external" href="http://learningwebgl.com/cookbook/index.php/" title="http://learningwebgl.com/cookbook/index.php/">Das WebGL Kochbuch</a></dt> + <dt><a class="external" href="http://learningwebgl.com/cookbook/index.php/">Das WebGL Kochbuch</a></dt> <dd>Rezepte für das Schreiben von WebGL-Code (Englisch).</dd> - <dt><a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a></dt> + <dt><a class="external" href="http://sylvester.jcoglan.com/">Sylvester</a></dt> <dd>Eine Open-Source Bibliothek, die das Verarbeiten von Vektoren und Matrizen erleichtert.</dd> - <dt><a class="external" href="http://planet-webgl.org/" title="http://planet-webgl.org/">Planet WebGL</a></dt> + <dt><a class="external" href="http://planet-webgl.org/">Planet WebGL</a></dt> <dd>Eine Feed-Sammlung von Leuten, die in der WebGL Community aktiv sind.</dd> </dl> diff --git a/files/de/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/de/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html index e7e22ad619..7f497a126b 100644 --- a/files/de/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html +++ b/files/de/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html @@ -28,7 +28,7 @@ original_slug: Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_W <h3 id="Initialisierung_der_Shader">Initialisierung der Shader</h3> -<p>Shader sind durch die <a class="external" href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf" title="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf">OpenGL ES Shading Language (pdf)</a> spezifiziert. Damit es einfacher ist unsere Inhalte zu warten und zu aktualisieren, können wir unseren Code so schreiben, dass die Shader im HTML Dokument gefunden werden, anstatt alles mittels JavaScript zu bauen. Werfen wir einen Blick auf unsere <code>initShaders()</code> Routine, welche diese Aufgabe übernimmt:</p> +<p>Shader sind durch die <a class="external" href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf">OpenGL ES Shading Language (pdf)</a> spezifiziert. Damit es einfacher ist unsere Inhalte zu warten und zu aktualisieren, können wir unseren Code so schreiben, dass die Shader im HTML Dokument gefunden werden, anstatt alles mittels JavaScript zu bauen. Werfen wir einen Blick auf unsere <code>initShaders()</code> Routine, welche diese Aufgabe übernimmt:</p> <pre class="brush: js">function initShaders() { var fragmentShader = getShader(gl, "shader-fs"); @@ -202,7 +202,7 @@ function initBuffers() { <h2 id="Matrix_Operationen">Matrix Operationen</h2> -<p>Matrix Operationen sind schon kompliziert genug. Keiner möchte wirklich den ganzen Code selbst schreiben, der benötigt wird um die Berechnungen selber durchzuführen. Glücklicherweise gibt es <a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a>, eine sehr handliche Bibliothek, die bestens mit Vektor und Matrix Operationen in JavaScript umgehen kann.</p> +<p>Matrix Operationen sind schon kompliziert genug. Keiner möchte wirklich den ganzen Code selbst schreiben, der benötigt wird um die Berechnungen selber durchzuführen. Glücklicherweise gibt es <a class="external" href="http://sylvester.jcoglan.com/">Sylvester</a>, eine sehr handliche Bibliothek, die bestens mit Vektor und Matrix Operationen in JavaScript umgehen kann.</p> <p>Die <code>glUtils.js</code> Datei, die in dieser Demo benutzt wird, wird bei einer ganzen Reihe von WebGL-Demos, die Web zu finden sind, verwendet. Keiner scheint sich völlig sicher zu sein, woher diese Bibliothek ursprünglich herkommt, aber es vereinfacht den Gebrauch von Sylvester noch weiter, in dem Methoden hinzugefügt werden, die auch spezielle Matrizentypen ermöglichen und HTML ausgegeben werden kann, um die Matrizen anzeigen zu lassen.</p> @@ -232,8 +232,8 @@ function setMatrixUniforms() { <h2 id="Siehe_auch">Siehe auch</h2> <ul> - <li><a class="external" href="http://mathworld.wolfram.com/Matrix.html" title="http://mathworld.wolfram.com/Matrix.html">Matrizen</a> auf Wolfram MathWorld (Englisch).</li> - <li><a class="external" href="http://de.wikipedia.org/wiki/Matrix_%28Mathematik%29" title="http://de.wikipedia.org/wiki/Matrix_%28Mathematik%29">Matrix</a> auf Wikipedia.</li> + <li><a class="external" href="http://mathworld.wolfram.com/Matrix.html">Matrizen</a> auf Wolfram MathWorld (Englisch).</li> + <li><a class="external" href="http://de.wikipedia.org/wiki/Matrix_%28Mathematik%29">Matrix</a> auf Wikipedia.</li> </ul> <p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Einführung_in_WebGL", "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen")}}</p> diff --git a/files/de/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/de/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html index ad8f707ab6..772939de8c 100644 --- a/files/de/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html +++ b/files/de/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html @@ -9,7 +9,7 @@ original_slug: Web/API/WebGL_API/Tutorial/Einführung_in_WebGL --- <p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext")}}</p> -<p>Mit <a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> steht eine API zur Verfügung, die auf <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES 2.0</a> basiert, um 3D Rendering im HTML <a href="/de/HTML/Element/canvas" title="de/HTML/canvas"><code>canvas</code></a> Element zu ermöglichen. WebGL Programme bestehen aus Steuercode in JavaScript und Shadercode (GLSL), der auf dem Grafikprozessor (GPU) des Computers ausgeführt wird. WebGL Elemente können mit anderen HTML Elementen kombiniert werden.</p> +<p>Mit <a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> steht eine API zur Verfügung, die auf <a class="external" href="http://www.khronos.org/opengles/">OpenGL ES 2.0</a> basiert, um 3D Rendering im HTML <a href="/de/HTML/Element/canvas" title="de/HTML/canvas"><code>canvas</code></a> Element zu ermöglichen. WebGL Programme bestehen aus Steuercode in JavaScript und Shadercode (GLSL), der auf dem Grafikprozessor (GPU) des Computers ausgeführt wird. WebGL Elemente können mit anderen HTML Elementen kombiniert werden.</p> <p>Dieser Artikel ist eine Einführung in die Grundlagen von WebGL. Es wird vorausgesetzt, dass einige mathematischen Kenntnisse im 3D-Bereich (Matrizen) vorhanden sind. Dieser Artikel wird daher keine 3D-Grafik-Konzepte vermitteln. Es gibt einen anfängergeeigneten Leitfaden mit Programmieraufgaben in unserem Lernbereich: <a href="https://developer.mozilla.org/en-US/docs/Learn/WebGL">Learn WebGL for 2D and 3D graphics</a>.</p> diff --git a/files/de/web/api/webgl_api/tutorial/index.html b/files/de/web/api/webgl_api/tutorial/index.html index 34db3f57e6..71c44c6de7 100644 --- a/files/de/web/api/webgl_api/tutorial/index.html +++ b/files/de/web/api/webgl_api/tutorial/index.html @@ -9,7 +9,7 @@ translation_of: Web/API/WebGL_API/Tutorial <div>{{WebGLSidebar}}</div> <div class="summary"> -<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> enables web content to use an API based on <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.</p> +<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> enables web content to use an API based on <a class="external" href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.</p> </div> <p><span class="seoSummary">This tutorial describes how to use the <code><canvas></code> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.</span></p> |