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 darber geben, was Sie mit WebGL machen knnen, und enthalten Code-Snippets, die Ihnen den Einstieg in die Erstellung eigener Inhalte erleichtern knnen.

WebGL ermglicht es, dass Webinhalte eine API basierend auf OpenGL ES 2.0 verwenden, um 3D-Rendering in einem HTML <canvas> in untersttzenden Browsern ohne die Verwendung von Plug-ins durchzufhren. WebGL-Programme bestehen aus Steuerungscode, der in JavaScript geschrieben wird, und Spezialeffektcode (Shader-Code), der auf der Graphikprozessor-Einheit (GPU) eines Computers ausgefhrt wird. WebGL-Elemente knnen 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 bentigen ein grundlegendes Verstndnis von HTML und JavaScript. Das <canvas>-Element und WebGL werden in einigen lteren Browsern nicht untersttzt, aber in den aktuellen Versionen aller groen 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.
Hinzufgen 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 einfrbt.
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 Wrfel) erstellt und animiert.
Verwendung von Texturen in WebGL: Demonstriert, wie man Texturen auf die Flchen 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 Flchen eines rotierenden Wrfels.

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden