WebGL anhand von Beispielen

Die Beispiele sind mit steigender Schwierigkeitsstufe geordnet. Anstatt sie jedoch nur in einer langen Liste zu präsentieren, sind sie zusätzlich in Themen unterteilt. Manchmal kehren wir zu einem Thema mehrfach zurück, z.B. wenn wir es zunächst auf einer grundlegenden Ebene und später auf mittlerem und fortgeschrittenem Niveau diskutieren müssen.

Anstatt gleich im ersten Programm Shader, Geometrie und die Arbeit mit GPU-Speicher zu jonglieren, werden hier WebGL in einer inkrementellen Weise untersucht. Wir glauben, dass dies zu einem effektiveren Lernerlebnis führt und letztendlich zu einem tieferen Verständnis der zugrunde liegenden Konzepte.

Erklärungen zu den Beispielen finden sich sowohl im Haupttext als auch in Kommentaren innerhalb des Codes. Sie sollten alle Kommentare lesen, da fortgeschrittenere Beispiele möglicherweise keine Kommentare zu Teilen des Codes wiederholen, die bereits erklärt wurden.

WebGL erkennen

Dieses Beispiel demonstriert, wie man einen WebGL-Rendering-Kontext erkennt und das Ergebnis dem Benutzer mitteilt.

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 einfache Farbanimation, die durch Löschen des WebGL-Zeichenpuffers mit einer anderen zufälligen Farbe jede Sekunde durchgeführt wird.

Farbmaskierung

Modifizieren zufälliger Farben durch Anwendung von Farbmaskierung und damit Begrenzung des Bereichs der angezeigten Farben auf spezifische Schattierungen.

Grundlegendes Scheren

Wie man mit Scheroperationen Rechtecke und Quadrate zeichnet.

Leinwandgröße und WebGL

Dieses Beispiel untersucht die Wirkung der Einstellung (oder Nicht-Einstellung) der Leinwandgröße auf ihre Elementgröße in CSS-Pixeln, wie sie im Browserfenster angezeigt wird.

Vorlage 1

Das Beispiel beschreibt wiederkehrende Codefragmente, die ab jetzt ausgeblendet werden, sowie die Definition einer JavaScript-Dienstprogrammfunktion, um die WebGL-Initialisierung zu erleichtern.

Scheranimation

Ein wenig Spaß mit Animationen, Scheren und Löschoperationen.

Regnende Rechtecke

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

Hallo GLSL

Ein sehr einfaches Shader-Programm, das ein Quadrat in einer Volltonfarbe zeichnet.

Hallo Vertex-Attribute

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

Texturen aus Code

Eine Demonstration der prozeduralen Texturierung mit Fragment-Shadern.

Videotexturen

Dieses Beispiel zeigt, wie man Videodateien als Texturen verwendet.

• Weiter