files/de/web/api/webgl_api/tutorial/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

---
title: WebGL Tutorial
slug: Web/API/WebGL_API/Tutorial
tags:
  - Tutorial
  - WebGL
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>
</div>

<p><span class="seoSummary">This tutorial describes how to use the <code>&lt;canvas&gt;</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>

<h2 id="Before_you_start">Before you start</h2>

<p>Using the <code>&lt;canvas&gt;</code> element is not very difficult, but you do need a basic understanding of <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> and <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. The <code>&lt;canvas&gt;</code> element and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.</p>

<h2 id="In_diesem_Tutorial">In diesem Tutorial</h2>

<dl>
 <dt><a href="/de/Web/API/WebGL_API/Tutorial/Einführung_in_WebGL">Einführung in WebGL</a></dt>
 <dd>Wie man einen WebGL-Kontext herstellt.</dd>
 <dt><a href="/de/Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext">Hinzufügen von 2D Inhalten in einen WebGL-Kontext</a></dt>
 <dd>Wie eine einfache, flache Form mittels WebGL erstellt wird.</dd>
 <dt><a href="/de/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen">Farben mittels Shader in einen WebGL-Kontext hinzufügen</a></dt>
 <dd>Zeigt wie Farben mit Shadern auf die Form gebracht werden können.</dd>
 <dt><a href="/de/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren">Objekte mit WebGL animieren</a></dt>
 <dd>Erklärt wie Objekte rotiert und verschiebt werden, um eine einfache Animation zu erstellen.</dd>
 <dt><a href="/de/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen">3D-Objekte mit WebGL erstellen</a></dt>
 <dd>Erläutert wie dreidimensionale Objekte erstellt und animiert werden (ein Würfel dient als Beispiel).</dd>
 <dt><a href="/de/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden">Texturen in WebGL verwenden</a></dt>
 <dd>Demonstriert wie Texturen auf die Oberfläche eines Objektes gezeichnet werden können.</dd>
 <dt><a href="/de/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL">Beleuchtung in WebGL</a></dt>
 <dd>Wie Beleuchtungseffekte in unserem WebGL-Kontext simuliert werden.</dd>
 <dt><a href="/de/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL">Animierte Texturen in WebGL</a></dt>
 <dd>Animierte Texturen werden mittels einem Ogg-Video auf der Oberfläche eines rotierenden Würfels realisiert.</dd>
</dl>