Matrizen in TypeScript mit wgpu-matrix

Inhaltsverzeichnis

01 – Grundlagen und Einrichtung

Warum Matrizen in TypeScript berechnen?
Installation und Import von wgpu-matrix
mat4, mat3, Vektoren und Float32Array
Einheitsmatrix und Matrixdarstellung

02 – Transformationsmatrizen erstellen

Verschiebung mit mat4.translation()
Rotation mit mat4.rotationX(), rotationY() und rotationZ()
Skalierung mit mat4.scaling()
Matrizen mit mat4.multiply() kombinieren
Transformationsreihenfolge: Translation × Rotation × Skalierung

03 – Bestehende Matrizen verändern

Erzeugen und Verändern: translation() vs. translate()
Rotation und Skalierung bestehender Matrizen
Position auslesen mit mat4.getTranslation()
Position setzen mit mat4.setTranslation()
Skalierung auslesen mit mat4.getScaling()
Absolute und relative Transformationen
Lokale und globale Koordinatensysteme

04 – Transformationen interaktiv steuern

Zustandswerte für Position, Rotation und Skalierung
Absolute Positionsregler
Relative Bewegungen
Einzelne Transformationen gezielt ändern
Wann eine Matrix neu zusammengesetzt werden muss

05 – Matrizen effizient verwalten

Der dst-Parameter
Bestehende Arrays wiederverwenden
In-place-Operationen
Gezielte Aktualisierung statt unnötiger Neuberechnung

06 – Kameramatrizen

Kameraposition, Zielpunkt und Up-Vektor
Kameramatrix mit mat4.lookAt()
View-Matrix mit mat4.inverse()
Kamera bewegen und ausrichten

07 – Projektionsmatrizen

Perspektivische Projektion mit mat4.perspective()
Field of View, Aspect Ratio, Near und Far
Projektionsmatrix aktualisieren
Orthografische Projektion

08 – Normalenmatrix

Warum Normalen anders transformiert werden
Den 3×3-Teil mit mat3.fromMat4() extrahieren
Inverse und transponierte Matrix
Ungleichmäßige Skalierung

09 – Matrizen an WebGPU übergeben

Uniform-Strukturen und Speicherlayout
Matrizen in Float32Array speichern
Float32Array.set() und Offsets
Daten mit device.queue.writeBuffer() übertragen
Nur geänderte Daten aktualisieren

10 – Praxisbeispiel: Interaktive 3D-Transformation

Würfel mit Model-, View- und Projektionsmatrix
Tweakpane-Regler für Position, Rotation und Skalierung
Bestehende Transformationen gezielt verändern
Uniform-Buffer aktualisieren
Szene neu rendern