WebGL an Beispielen

Die Beispiele sind in aufsteigender Schwierigkeit sortiert. Statt sie nur in einer langen Liste zu präsentieren, sind sie zusätzlich in Themen unterteilt. Manchmal wird ein Thema mehrmals behandelt, zum Beispiel auf einer grundlegenden Ebene und später auf mittleren und fortgeschrittenen Ebenen.

Anstatt gleich im ersten Programm mit Shadern, Geometrie und der Arbeit mit dem GPU-Speicher zu jonglieren, erkunden die Beispiele hier WebGL auf eine inkrementelle Weise. Wir glauben, dass dies zu einem effektiveren Lernerlebnis führt und letztlich zu einem tieferen Verständnis der zugrunde liegenden Konzepte.

Erklärungen zu den Beispielen finden sich sowohl im Haupttext als auch in Kommentaren im Code. Sie sollten alle Kommentare lesen, da bei fortgeschritteneren Beispielen möglicherweise Kommentare zu Teilen des Codes nicht wiederholt werden, die bereits erklärt wurden.

WebGL erkennen

Dieses Beispiel zeigt, wie ein WebGL-Rendering-Kontext erkannt und das Ergebnis dem Benutzer mitgeteilt wird.

Mit Farben löschen

Wie man den Rendering-Kontext mit einer Volltonfarbe löscht.

Durch Klicken löschen

Wie man Benutzerinteraktion mit Grafikoperationen kombiniert. Löschen des Rendering-Kontexts mit einer zufälligen Farbe, wenn der Benutzer klickt.

Einfache Farbanimation

Eine sehr grundlegende Farbanimation, indem der WebGL-Zeichenpuffer jede Sekunde mit einer anderen zufälligen Farbe gelöscht wird.

Farbmaskierung

Modifizieren zufälliger Farben durch Anwendung von Farbmaskierung und dadurch Begrenzung der Anzeigefarben auf bestimmte Schattierungen.

Grundlegendes Ausschneiden

Wie man einfache Rechtecke und Quadrate mit Ausschneideoperationen zeichnet.

Canvas-Größe und WebGL

Das Beispiel untersucht die Auswirkungen, wenn die Canvas-Größe nicht auf ihre Elementgröße in CSS-Pixeln gesetzt wird, wie sie im Browserfenster erscheint.

Vorlage 1

Das Beispiel beschreibt wiederholte Codeabschnitte, die von nun an ausgeblendet werden, sowie die Definition einer JavaScript-Hilfsfunktion, um die WebGL-Initialisierung zu erleichtern.

Ausschnitt-Animation

Etwas Animationsspaß mit Ausschneide- und Löschoperationen.

Regnende Rechtecke

Ein einfaches Spiel, das das Löschen mit Volltonfarben, Ausschneiden, Animation und Benutzerinteraktion demonstriert.

Hallo GLSL

Ein sehr einfaches Shader-Programm, das ein Vollfarbquadrat zeichnet.

Hallo Vertex-Attribute

Kombination aus Shader-Programmierung und Benutzerinteraktion durch Vertex-Attribute.

Texturen aus Code

Eine einfache Demonstration der prozeduralen Texturierung mit Fragment-Shadern.

Video-Texturen

Dieses Beispiel zeigt, wie Videodateien als Texturen verwendet werden können.

• Weiter