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.