Model · View · Projection
🧮Koordinatensysteme, Matrizen, Kamera
Jeder Vertex wird mit drei 4×4-Matrizen multipliziert: Model (wo steht das Objekt in der Welt?), View(wo steht die Kamera?) und Projection (wie wird 3D auf 2D abgebildet?). Der Rechner zeigt jede Zwischenstufe – mit denselben Funktionen, die auch das WebGL-Labor und die Pipeline-Ansicht verwenden.
Warum 4×4 und nicht 3×3?
Mit einer vierten, „homogenen“ Koordinate w lassen sich Verschiebungen als Matrixprodukt schreiben – und mehrere Transformationen zu einer einzigen Matrix zusammenfassen (MVP).Rechtshändig, Y nach oben
WebGL, three.js und glTF: +X rechts, +Y oben, +Z zum Betrachter. Die Kamera schaut entlang −Z. Blender nutzt Z nach oben – der glTF-Exporter dreht das Modell deshalb beim Export.Spaltenweise gespeichert
WebGL erwartet Matrizen spaltenweise (column-major): Die Verschiebung steht in den Elementen 12, 13, 14 des Float32Array. Angezeigt werden sie hier wie auf Papier in Zeilen.Model: Objekt → Welt
View: Kamera umkreist den Ursprung
Projektion
Punkt p im Objektraum
P – Projektion
1,360,000,000,000,002,410,000,000,000,00-1,05-1,030,000,00-1,000,00
V – View
0,820,00-0,570,00-0,200,94-0,280,000,540,340,77-8,000,000,000,001,00
M – Model
0,870,000,501,000,001,000,000,50-0,500,000,870,000,000,000,001,00
MVP
1,3530,000-0,1181,112-0,0722,269-0,8230,661-0,086-0,360-0,9846,638-0,082-0,342-0,9367,290
Der Punkt p auf seinem Weg (Leinwand 1280 × 720)
| Objektraum | p | (0,500; 0,500; 0,500; 1,000) | w = 1: Punkt (Richtungen hätten w = 0) |
| Weltraum | M · p | (1,683; 1,000; 0,183; 1,000) | nach Skalieren, Drehen, Verschieben |
| Kameraraum | V · M · p | (1,274; 0,558; -6,610; 1,000) | z = -6,61 → vor der Kamera |
| Clip-Space | P · V · M · p | (1,730; 1,348; 5,923; 6,610) | w = −z_Kamera = 6,610 |
| NDC | clip / w | (0,262; 0,204; 0,896) | ✅ im Würfel [−1; 1]³ |
| Bildschirm | Viewport | (807,5; 286,6) | Pixel, Tiefe 0,9481 |
Sichtvolumen von der Seite (Kameraraum)
Perspektive: Das Volumen ist ein Pyramidenstumpf – je weiter weg, desto mehr passt ins Bild, desto kleiner wirkt alles.
Wo landet p auf der Leinwand?
Reihenfolge zählt
Matrizen werden von rechts nach links angewendet. T·R dreht das Objekt um seinen eigenen Ursprung und schiebt es dann – R·T schiebt zuerst und dreht dann um den Weltursprung: das Objekt fliegt auf einer Kreisbahn davon.
Brennweite und Bildwinkel (FOV)
Fotografen denken in Millimetern, three.js in Grad. Der Zusammenhang ist reine Trigonometrie:FOV = 2 · atan(Sensorhöhe / (2 · Brennweite)). Die Ferienwohnung wurde in Blender mit echten Brennweiten gerendert; der Viewer rechnet sie für das Standbildformat 3000 × 2100 (36-mm-Sensor waagerecht, senkrecht 36 · 2100/3000 = 25,2 mm) in den vertikalen Bildwinkel um.
vertikaler Bildwinkel (24-mm-Sensorhöhe): 26,99°
Normalbrennweite – ähnlich dem Auge
Normalbrennweite – ähnlich dem Auge
| Ansicht der Ferienwohnung | Brennweite | FOV im Viewer (10:7) | Kamera → Ziel |
|---|---|---|---|
| Gesamt | 48 mm | 29,42° | 39,8 m |
| Erdgeschoss | 45 mm | 31,28° | 27,3 m |
| Schlafzimmer unten | 55 mm | 25,81° | 14,1 m |
| Obergeschoss | 48 mm | 29,42° | 21,9 m |
| Wohnen / Küche | 50 mm | 28,29° | 16,2 m |
| Patio | 42 mm | 33,40° | 15,5 m |
| Antresola / Bad oben | 52 mm | 27,24° | 11,2 m |
| Vogelperspektive | 42 mm | 33,40° | 37,2 m |