WebGL anhand von Beispielen ist eine Serie von interaktiven Beispielen mit kurzen Erklärungen, die WebGL-Konzepte und -Fähigkeiten präsentieren.
Die Beispiele sind nach Thema und Schwierigkeitsgrad geordnet, wobei der WebGL-Rendering-Kontext, Shader-Programmierung, Texturen, Geometrie, Benutzerinteraktion und mehr abgedeckt werden.
Beispiele nach ThemaDie 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.
Den Rendering-Kontext kennenlernenDieses Beispiel demonstriert, wie man einen WebGL-Rendering-Kontext erkennt und das Ergebnis dem Benutzer mitteilt.
Wie man den Rendering-Kontext mit einer Volltonfarbe löscht.
Wie man Benutzerinteraktion mit Grafikoperationen kombiniert. Löschen des Rendering-Kontexts mit einer zufälligen Farbe, wenn der Benutzer klickt.
Eine sehr einfache Farbanimation, die durch Löschen des WebGL-Zeichenpuffers mit einer anderen zufälligen Farbe jede Sekunde durchgeführt wird.
Modifizieren zufälliger Farben durch Anwendung von Farbmaskierung und damit Begrenzung des Bereichs der angezeigten Farben auf spezifische Schattierungen.
Wie man mit Scheroperationen Rechtecke und Quadrate zeichnet.
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.
Das Beispiel beschreibt wiederkehrende Codefragmente, die ab jetzt ausgeblendet werden, sowie die Definition einer JavaScript-Dienstprogrammfunktion, um die WebGL-Initialisierung zu erleichtern.
Ein wenig Spaà mit Animationen, Scheren und Löschoperationen.
Ein Spiel, das Löschen mit Volltonfarben, Scheren, Animation und Benutzerinteraktion demonstriert.
Ein sehr einfaches Shader-Programm, das ein Quadrat in einer Volltonfarbe zeichnet.
Kombination von Shader-Programmierung und Benutzerinteraktion durch Vertex-Attribute.
Eine Demonstration der prozeduralen Texturierung mit Fragment-Shadern.
Dieses Beispiel zeigt, wie man Videodateien als Texturen verwendet.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4