Uniforms in Echtzeit aktualisieren

Uniforms interaktiv verändern

Dieses Beispiel ist keine Übungsaufgabe. Öffnen Sie die Anwendung und experimentieren Sie mit den Reglern. Verändern Sie die Lichtrichtung und die Parameter des Streifenmusters und beobachten Sie, wie sich die Darstellung der Kugel unmittelbar verändert.

Wenn Sie sich den Quellcode ansehen, beachten Sie, dass wir die Uniform-Werte bewusst in einem JavaScript-Objekt uniforms verwalten und bei Änderungen aktualisieren. Die Werte werden anschließend in das Float32Array übertragen, das als Grundlage für den GPU-Uniform-Buffer dient.

Natürlich ließe sich dieser Vorgang durch Hilfsfunktionen vereinfachen. Ein Beispiel dafür ist updateUniformBuffer() in utils02.ts, das die Werte anhand ihrer definierten Indizes überträgt.

Hier verzichten wir bewusst auf diese Abstraktion, damit die einzelnen Schritte der Datenübertragung in WebGPU sichtbar bleiben. Schließlich geht es in diesem Buch um WebGPU und nicht um die Entwicklung allgemeiner JavaScript-Hilfsfunktionen.

TODOS: 2 bilder aus 18 einfügen