WebGL anhand von Beispielen

Die Beispiele sind in aufsteigender Schwierigkeit sortiert. Anstatt sie nur in einer langen Liste zu präsentieren, sind sie zusätzlich in Themen unterteilt. Manchmal behandeln wir ein Thema mehrmals, z. B. wenn wir es zunächst auf einem grundlegenden Niveau erörtern müssen und später auf mittlerem und fortgeschrittenem Niveau.

Anstatt schon im ersten Programm Shader, Geometrie und die Arbeit mit GPU-Speicher zu jonglieren, werden die Beispiele hier schrittweise in WebGL erkundet. Wir glauben, dass dies zu einem effektiveren Lernerlebnis führt und letztendlich ein tieferes Verständnis der zugrunde liegenden Konzepte ermöglicht.

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

Detect WebGL

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

Clearing with colors

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

Clearing by clicking

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

Simple color animation

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

Color masking

Modifizieren zufälliger Farben durch Anwenden von Farbmaskierung und dadurch Begrenzung des Bereichs der angezeigten Farben auf bestimmte Schattierungen.

Basic scissoring

Wie man Rechtecke und Quadrate mit Zuschneideoperationen zeichnet.

Canvas size and WebGL

Das Beispiel untersucht die Auswirkung der Festlegung (oder Nichtfestlegung) der Canvas-Größe auf ihre Elementgröße in CSS-Pixeln, wie sie im Browserfenster angezeigt wird.

Boilerplate 1

Das Beispiel beschreibt wiederkehrende Codeabschnitte, die von nun an ausgeblendet werden, sowie die Definition einer JavaScript-Dienstfunktion zur Vereinfachung der WebGL-Initialisierung.

Scissor animation

Etwas Animationsspaß mit Zuschneide- und Löschoperationen.

Raining rectangles

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

Hello GLSL

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

Hello vertex attributes

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

Textures from code

Eine Demonstration prozeduraler Texturierung mit Fragment-Shadern.

Video textures

Dieses Beispiel zeigt, wie man Videodateien als Texturen verwendet.

• Weiter