WebGL - Grundlagen: Eine freundliche Einführung für Anfänger

Hallo da draußen, zukünftige WebGL-Zauberer! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von WebGL zu sein. Als jemand, der seit Jahren Computergrafik unterrichtet, kann ich es kaum erwarten, die Magie von WebGL mit Ihnen zu teilen. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind - wir beginnen bei null und bauen unser Wissen schrittweise auf. Also, holen Sie sich eine Tasse Kaffee (oder Tee, wenn das mehr Ihr Ding ist) und tauchen wir ein!

Was ist WebGL?

Bevor wir uns den Details zuwenden, lassen Sie uns verstehen, was WebGL eigentlich ist. WebGL (Web Graphics Library) ist eine mächtige JavaScript-API, die es uns ermöglicht, atemberaubende 3D-Grafiken direkt in unseren Webbrowsern zu erstellen. Es ist, als hätten Sie ein Mini-Filmstudio an Ihren Fingerspitzen!

Stellen Sie sich WebGL als Brücke zwischen Ihrem Webbrowser und der Grafikhardware Ihres Computers vor. Es ermöglicht uns, die Leistung Ihrer GPU (Graphics Processing Unit) zu nutzen, um komplexe 3D-Szenen mit flüssiger Performance zu rendern. Cool, oder?

WebGL - Koordinatensystem

Nun, lassen Sie uns über das WebGL-Koordinatensystem sprechen. Stellen Sie sich vor, Sie stehen in der Mitte eines riesigen, unsichtbaren 3D-Würfels. Das ist im Grunde, was das WebGL-Koordinatensystem ist!

Das kartesische Koordinatensystem

WebGL verwendet ein 3D-kartesisches Koordinatensystem. Es ist ähnlich wie das 2D-System, das Sie vielleicht in Mathematik gelernt haben, aber mit einer zusätzlichen Dimension:

• X-Achse: Horizontal (links nach rechts)
• Y-Achse: Vertikal (unten nach oben)
• Z-Achse: Tiefe (hinten nach vorne)

Hier ist ein einfaches Beispiel, um es Ihnen zu veranschaulichen:

// Definiere einen Vertex (Punkt im 3D-Raum)
var vertex = [
0.5,  // X-Koordinate
0.7,  // Y-Koordinate
0.0   // Z-Koordinate
];

In diesem Beispiel definieren wir einen Punkt, der leicht nach rechts (0.5) und nach oben (0.7) vom Zentrum entfernt ist und genau an der Oberfläche des Bildschirms liegt (0.0).

Der Schattenraum

Eine Besonderheit von WebGL ist, dass es einen besonderen Koordinatenbereich namens "Schattenraum" verwendet. Alle Koordinaten müssen zwischen -1.0 und 1.0 auf jeder Achse liegen. Alles außerhalb dieses Bereichs wird "geschnitten" (nicht gezeichnet).

// Ein Punkt an der oberen rechten Ecke des Schattenraums
var cornerPoint = [1.0, 1.0, 0.0];

// Ein Punkt, der geschnitten wird (nicht sichtbar)
var clippedPoint = [1.5, 0.5, 0.0];

WebGL Grafik

Nun, da wir das Koordinatensystem verstehen, lassen Sie uns darüber sprechen, wie WebGL tatsächlich Dinge zeichnet.

Primitive

WebGL zeichnet alles mit einfachen Formen namens Primitive. Die drei Hauptarten sind:

1. Punkte
2. Linien
3. Dreiecke

Hier ist eine Tabelle, die diese Primitive zusammenfasst:

Primitive	Beschreibung	Verwendungszweck
Punkte	Einzelpixel	Partikeleffekte, Sterne
Linien	Gerade zwischen Punkten	Drahtgitter, Graphen
Dreiecke	Dreipunktfelder	Die meisten 3D-Modelle, Gelände

Sehen wir uns an, wie wir ein einfaches Dreieck definieren könnten:

var triangleVertices = [
0.0,  0.5,  0.0,  // Oberer Punkt
-0.5, -0.5,  0.0,  // Linker unterer Punkt
0.5, -0.5,  0.0   // Rechter unterer Punkt
];

Dieser Code definiert die drei Punkte eines Dreiecks. Jeder Punkt wird durch drei Zahlen (x, y, z) dargestellt.

Puffer

Um unser Dreieck actually auf den Bildschirm zu bekommen, müssen wir etwas called ein Puffer verwenden. Stellen Sie sich einen Puffer als Behälter vor, der unsere Vertex-Daten hält und sie an die GPU sendet.

Hier ist, wie wir möglicherweise einen Puffer erstellen und füllen:

// Erstelle einen Puffer
var buffer = gl.createBuffer();

// Binde den Puffer (mach ihn aktiv)
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

// Fülle den Puffer mit unseren Dreieckdaten
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

Machen Sie sich keine Sorgen, wenn das jetzt etwas verwirrend aussieht. Wir werden das im Laufe der Zeit näher erläutern!

Shader-Programme

Nun kommen wir zu dem wirklich aufregenden Teil: Shadern! Shaders sind spezielle Programme, die auf Ihrer GPU laufen. Sie sind wie kleine Fabriken, die jeden Vertex und jeden Pixel Ihrer 3D-Szene verarbeiten.

Arten von Shadern

Es gibt zwei Hauptarten von Shadern in WebGL:

1. Vertex-Shaders: Verarbeiten jeden Vertex (Punkt) in Ihrer 3D-Szene
2. Fragment-Shaders: Bestimmen die Farbe jedes Pixels

Hier ist ein einfaches Beispiel für jeden:

// Vertex Shader
attribute vec4 a_position;

void main() {
gl_Position = a_position;
}

// Fragment Shader
precision mediump float;

void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // Helles rote Farbe
}

Der Vertex-Shader nimmt jeden Punkt (Vertex) und entscheidet, wo er auf dem Bildschirm sein sollte. Der Fragment-Shader färbt dann alle Pixel zwischen diesen Punkten.

Kompilieren und verknüpfen von Shadern

Um unsere Shaders zu verwenden, müssen wir sie kompilieren und in ein Programm verknüpfen:

// Erstelle ein Shader-Programm
var program = gl.createProgram();

// Hänge und kompiliere Shaders an
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// Verknüpfe das Programm
gl.linkProgram(program);

Dieser Vorgang ist wie das Kompilieren und Verknüpfen eines regulären Programms, aber es passiert auf der GPU!

OpenGL ES SL-Variablen

Schließlich sprechen wir über einige spezielle Variablen, die in der OpenGL ES Shading Language (der Sprache, in der unsere Shaders geschrieben sind) verwendet werden.

Attribute

Attribute sind Eingabevariablen, die in Vertex-Shaders verwendet werden. Sie enthalten typischerweise Daten über jeden Vertex, wie Position oder Farbe.

attribute vec4 a_position;

Uniforms

Uniforms sind globale Variablen, die für alle Vertices und Fragments gleich bleiben. Sie sind großartig für Dinge wie Transformationsmatrizen oder Beleuchtungsinformationen.

uniform mat4 u_modelViewMatrix;

Varyings

Varyings sind Variablen, die Daten vom Vertex-Shader an den Fragment-Shader übergeben. Sie werden zwischen den Vertices interpoliert.

varying vec4 v_color;

Hier ist eine Tabelle, die diese Variablentypen zusammenfasst:

Variablenart	Verwendet in	Zweck
Attribut	Vertex Shader	Pro-Vertex-Eingangsdaten
Uniform	Beide	Globale Daten
Varying	Beide	Daten, die vom Vertex-Shader an den Fragment-Shader übergeben werden

Und das ist es! Wir haben die Grundlagen von WebGL abgedeckt, von Koordinaten bis hin zu Shadern. Denken Sie daran, dass das Lernen von WebGL wie das Malen ist - es erfordert Übung und Geduld. Lassen Sie sich nicht entmutigen, wenn es nicht sofort klick macht. Halten Sie experimentierfreudig, und bald werden Sie erstaunliche 3D-Grafiken in Ihrem Browser erstellen!

Fröhliches Coden, zukünftige WebGL-Meister!

Credits: Image by storyset