WebGL-Tutorial

Dieses Tutorial beschreibt, wie Sie das <canvas>-Element verwenden, um WebGL-Grafiken zu zeichnen, beginnend mit den Grundlagen. Die bereitgestellten Beispiele sollten Ihnen einige klare Vorstellungen darüber geben, was Sie mit WebGL machen können, und enthalten Code-Snippets, die Ihnen den Einstieg in die Erstellung eigener Inhalte erleichtern können.

WebGL ermöglicht es, dass Webinhalte eine API basierend auf OpenGL ES 2.0 verwenden, um 3D-Rendering in einem HTML <canvas> in unterstützenden Browsern ohne die Verwendung von Plug-ins durchzuführen. WebGL-Programme bestehen aus Steuerungscode, der in JavaScript geschrieben wird, und Spezialeffektcode (Shader-Code), der auf der Graphikprozessor-Einheit (GPU) eines Computers ausgeführt wird. WebGL-Elemente können mit anderen HTML-Elementen vermischt und mit anderen Teilen der Seite oder dem Seitenhintergrund zusammengesetzt werden.

Bevor Sie beginnen

Die Verwendung des <canvas>-Elements ist nicht sehr schwierig, aber Sie benötigen ein grundlegendes Verständnis von HTML und JavaScript. Das <canvas>-Element und WebGL werden in einigen älteren Browsern nicht unterstützt, aber in den aktuellen Versionen aller großen Browser. Um Grafiken auf der Leinwand zu zeichnen, verwenden wir ein JavaScript-Kontextobjekt, das Grafiken in Echtzeit erstellt.

In diesem Tutorial

Erste Schritte mit WebGL: Wie man einen WebGL-Kontext einrichtet.
Hinzufügen von 2D-Inhalten zu einem WebGL-Kontext: Wie man einfache flache Formen mit WebGL rendert.
Verwendung von Shadern zur Farbgestaltung in WebGL: Zeigt, wie man Formen mit Shadern einfärbt.
Objekte mit WebGL animieren: Zeigt, wie man Objekte dreht und verschiebt, um einfache Animationen zu erstellen.
Erstellen von 3D-Objekten mit WebGL: Zeigt, wie man ein 3D-Objekt (in diesem Fall einen Würfel) erstellt und animiert.
Verwendung von Texturen in WebGL: Demonstriert, wie man Texturen auf die Flächen eines Objekts abbildet.
Beleuchtung in WebGL: Wie man Beleuchtungseffekte in Ihrem WebGL-Kontext simuliert.
Texturen in WebGL animieren: Zeigt, wie man Texturen animiert; in diesem Fall durch das Abbilden eines Ogg-Videos auf die Flächen eines rotierenden Würfels.