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.