Aufgabe: Interaktive Vertex-Transformationen

Aufgabe: Interaktive Vertex-Transformationen

Wir entwickeln Beispiel 21 auf Grundlage von Beispiel 20 – Vertex-Transformationen.

Matrizen nach TypeScript verlagern

• Model-, View- und Projektionsmatrix aus dem WGSL-Shader entfernen.
• Alle drei Matrizen mit wgpu-matrix in TypeScript erstellen.
• Matrizen über einen Uniform-Buffer an den Shader übergeben.
• Vertex-Transformationen weiterhin in WGSL durchführen.

Objekttransformationen mit Tweakpane

• Position des Würfels entlang der X-, Y- und Z-Achse verändern.
• Würfel um die X-, Y- und Z-Achse drehen.
• Würfel entlang der drei Achsen skalieren.
• Translation, Rotation und Skalierung zu einer Model-Matrix kombinieren.

Kamera mit Tweakpane steuern

• Kameraposition entlang der X-, Y- und Z-Achse verändern.
• Blickrichtung der Kamera verändern.
• View-Matrix bei Änderungen neu berechnen.
• Perspektive über den Öffnungswinkel (Field of View) einstellen.
• Projektionsmatrix bei Änderungen aktualisieren.

Normalentransformation

• Normalenmatrix aus der Model-Matrix berechnen.
• Normalenmatrix als Uniform an WGSL übergeben.
• Normalen im Vertex-Shader korrekt transformieren.

Interaktive Aktualisierung

• Änderungen in Tweakpane unmittelbar übernehmen.
• Betroffene Matrizen in TypeScript neu berechnen.
• Uniform-Buffer mit device.queue.writeBuffer() aktualisieren.
• Würfel mit den neuen Transformationen rendern.