WebGL - Geometrie: Ein Anfängerleitfaden

Hallo da draußen, zukünftige WebGL-Meister! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt der WebGL-Geometrie zu sein. Als jemand, der seit über einem Jahrzehnt Computergrafik unterrichtet, kann ich Ihnen sagen, dass das Verständnis der Geometrie in WebGL so ist, als würde man mit Code malen. Es ist herausfordernd, aber oh so lohnenswert! Also, lasst uns die Ärmel hochkrempeln und eintauchen!

Definition der erforderlichen Geometrie

Bevor wir mit der Erstellung beeindruckender 3D-Grafiken beginnen, müssen wir verstehen, was Geometrie in WebGL bedeutet. Im Wesentlichen ist Geometrie die Grundlage für alles, was wir auf dem Bildschirm sehen. Sie besteht aus Punkten, Linien und Formen, die die Struktur unserer 3D-Objekte bilden.

Stellen Sie sich vor, Sie bauen ein Haus mit LEGO-Steinen. Jeder Stein verkörpert einen Punkt im 3D-Raum, und wenn Sie diese Punkte verbinden, erstellen Sie Kanten und Flächen. Genau das tun wir in WebGL, aber mit Code anstatt mit Plastiksteinen!

Lassen Sie uns mit einem einfachen Beispiel beginnen - die Erstellung eines Dreiecks:

const triangleVertices = [
0.0,  1.0,  0.0,
-1.0, -1.0,  0.0,
1.0, -1.0,  0.0
];

Hier haben wir drei Punkte im 3D-Raum definiert. Jeder Punkt wird durch drei Zahlen (x, y, z) dargestellt. Diese Zahlenreihe ist das, was wir verwenden, um WebGL zu sagen, wo unser Dreieck gezeichnet werden soll.

Puffer-Objekte

Nun, da wir unsere Geometrie definiert haben, benötigen wir eine Möglichkeit, diese Daten an die GPU zu senden. Hier kommen Puffer-Objekte ins Spiel. Stellen Sie sich Puffer-Objekte als spezielle Behälter vor, die unsere Geometriedaten halten und sie leicht zugänglich für die GPU machen.

Erstellung eines Puffers

Die Erstellung eines Puffers ist unser erster Schritt, um unsere Geometrie für die GPU vorzubereiten. So machen wir das:

const buffer = gl.createBuffer();

Diese Zeile erstellt ein leeres Puffer-Objekt. Es ist wie ein leerer Kasten, der bereit ist, mit unseren LEGO-Steinen gefüllt zu werden.

Puffer binden

Nach der Erstellung des Puffers müssen wir WebGL mitteilen, dass dies der Puffer ist, mit dem wir arbeiten möchten. Wir tun dies durch das Binden des Puffers:

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

Das ist wie das Aufheben unseres LEGO-Kastens und das Sagen: "Hey WebGL, ich werde jetzt einige Steine in diesen Kasten legen!"

Daten in den Puffer übertragen

Nun kommt der spannende Teil - das Füllen unseres Puffers mit unseren Geometriedaten:

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

Lassen Sie uns das auseinandernehmen:

• gl.bufferData() ist die Methode, mit der wir den Puffer füllen.
• gl.ARRAY_BUFFER tells WebGL, dass wir mit unserem aktuell gebundenen Puffer arbeiten.
• new Float32Array(triangleVertices) konvertiert unser JavaScript-Array in ein typisiertes Array (mehr dazu in einer Minute).
• gl.STATIC_DRAW ist ein Hinweis an WebGL darüber, wie wir diese Daten verwenden planen.

Typisierte Arrays

Sie fragen sich vielleicht, warum wir im vorherigen Schritt Float32Array verwendet haben. Nun, WebGL ist sehr pingelig, wenn es um Datentypen geht. Es bevorzugt die effiziente Arbeit mit typisierten Arrays. Typisierte Arrays stellen sicher, dass jede Datenstelle eine konsistente Größe und Art hat.

Hier ist eine Tabelle der commonly verwendeten typisierten Arrays in WebGL:

Typisiertes Array	Beschreibung	Verwendungszweck
Float32Array	32-Bit Fließkommazahlen	Vertexpositionen, Texturkoordinaten
Int8Array	8-Bit vorzeichenbehaftete Ganzzahlen	Kleine ganze Zahlen
Uint8Array	8-Bit unvorzeichenbehaftete Ganzzahlen	Farbkomponenten
Int16Array	16-Bit vorzeichenbehaftete Ganzzahlen	Größere ganze Zahlen
Uint16Array	16-Bit unvorzeichenbehaftete Ganzzahlen	Vertex-Indizes
Int32Array	32-Bit vorzeichenbehaftete Ganzzahlen	Sehr große ganze Zahlen
Uint32Array	32-Bit unvorzeichenbehaftete Ganzzahlen	Sehr große positive ganze Zahlen

In unserem Fall verwenden wir Float32Array, weil unsere Vertexpositionen Fließkommazahlen sind.

Puffer lösen

Nachdem wir mit einem Puffer gearbeitet haben, ist es eine gute Praxis, diesen zu lösen:

gl.bindBuffer(gl.ARRAY_BUFFER, null);

Das ist wie das Zurückstellen des LEGO-Kastens auf den Regal. Es verhindert versehentliche Änderungen an unserem Puffer und hält unseren WebGL-Zustand sauber.

Und das war's, Leute! Wir haben erfolgreich unsere Geometrie definiert, einen Puffer erstellt, mit Daten gefüllt und typisierte Arrays kennengelernt. Dies ist die Grundlage für die Erstellung jedes 3D-Objekts in WebGL.

Denken Sie daran, dass das Lernen von WebGL eine Reise ist. Machen Sie sich keine Sorgen, wenn einige Konzepte initially verwirrend erscheinen. Mit Übung werden Sie in kurzer Zeit erstaunliche 3D-Grafiken erstellen! In meinen Jahren des Unterrichtens habe ich unzählige Schüler von verwirrten Anfängern zu WebGL-Zauberern werden sehen. Sie sind auf dem besten Weg, ihnen beizutreten!

In unserer nächsten Lektion werden wir erkunden, wie wir diese Puffer verwenden, um unsere Geometrie actually auf dem Bildschirm zu zeichnen. Bereiten Sie sich darauf vor, Ihr erstes WebGL-Dreieck zum Leben zu erwecken! Bis dahin, viel Spaß beim Coden und vergessen Sie nicht, Pausen zu machen und Ihre Codierfinger zu dehnen!

Credits: Image by storyset