WebGL Tutorial

WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 3D rendering in an HTML <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.

This tutorial describes how to use the <canvas> 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.

Before you start

Using the <canvas> element is not very difficult, but you do need a basic understanding of HTML and JavaScript. The <canvas> 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.

In diesem Tutorial

Einf├╝hrung in WebGL
Wie man einen WebGL-Kontext herstellt.
Hinzuf├╝gen von 2D Inhalten in einen WebGL-Kontext
Wie eine einfache, flache Form mittels WebGL erstellt wird.
Farben mittels Shader in einen WebGL-Kontext hinzuf├╝gen
Zeigt wie Farben mit Shadern auf die Form gebracht werden k├Ânnen.
Objekte mit WebGL animieren
Erkl├Ąrt wie Objekte rotiert und verschiebt werden, um eine einfache Animation zu erstellen.
3D-Objekte mit WebGL erstellen
Erl├Ąutert wie dreidimensionale Objekte erstellt und animiert werden (ein W├╝rfel dient als Beispiel).
Texturen in WebGL verwenden
Demonstriert wie Texturen auf die Oberfl├Ąche eines Objektes gezeichnet werden k├Ânnen.
Beleuchtung in WebGL
Wie Beleuchtungseffekte in unserem WebGL-Kontext simuliert werden.
Animierte Texturen in WebGL
Animierte Texturen werden mittels einem Ogg-Video auf der Oberfl├Ąche eines rotierenden W├╝rfels realisiert.