Ein Dreieck auf seinem Weg zum Pixel
🔺Die Rendering-Pipeline Schritt für Schritt
Vom Vertex-Puffer bis zum fertigen Bild: Dieses Dreieck durchläuft dieselben Stationen wie jedes der 16.076 Dreiecke der Ferienwohnung. Jede Zahl wird hier im Browser nachgerechnet – ein Software-Nachbau dessen, was die GPU tut.
Schritt 1 / 11 · Vertex-DatenTipp: Pfeiltasten ← →
Float32Array im Vertex-Puffer (Stride 24 Byte = 6 × 4 Byte)
+0
-1,00+4
-0,80+8
0,00+12
1,00+16
0,20+20
0,30+24
1,00+28
-0,80+32
0,00+36
0,15+40
0,80+44
0,40+48
0,00+52
1,00+56
0,00+60
0,25+64
0,40+68
1,00 aPosition (x, y, z) aColor (r, g, b)= 72 Byte für 3 Ecken
Schritt 1: Vertex-Daten
Alles beginnt mit Zahlen im Grafikspeicher: drei Vertices (Eckpunkte), je mit Position und Farbe. Das JavaScript lädt sie einmal per gl.bufferData in einen Vertex Buffer.
gl.vertexAttribPointer beschreibt das Layout: Position ab Byte 0, Farbe ab Byte 12, alle 24 Byte beginnt der nächste Vertex (Stride).
Die Koordinaten liegen im Objektraum – relativ zum Mittelpunkt des Dreiecks, ohne Wissen über Welt oder Kamera.
Shader-Code (GLSL ES 1.0 / WebGL 1)
1// ---- Vertex-Shader (läuft 1× pro Ecke) ----2attribute vec3 aPosition; // aus dem Vertex-Puffer3attribute vec3 aColor;4uniform mat4 uModel, uView, uProjection;5varying vec3 vColor; // wird an den Fragment-Shader gereicht6void main() {7 vec4 world = uModel * vec4(aPosition, 1.0); // Objekt → Welt8 vec4 eye = uView * world; // Welt → Kamera9 gl_Position = uProjection * eye; // Kamera → Clip-Space10 vColor = aColor;11}12// ---- fest verdrahtet in der GPU ----13// Clipping · Division durch w · Viewport · Culling · Rasterisierung14// ---- Fragment-Shader (läuft 1× pro Pixel) ----15precision mediump float;16varying vec3 vColor; // baryzentrisch interpoliert17void main() {18 gl_FragColor = vec4(vColor, 1.0); // → Tiefentest → Framebuffer19}