Aufgabe – Eine Kugel aus Marmor

20 – Eine Kugel aus Marmor

Dein Ich aus der Zukunft fand deine einfarbige Phong-Kugel etwas langweilig und hat dir einen neuen Shader spendiert: eine prozedurale Marmoroberfläche mit geschwungenen Adern und glänzender Beleuchtung.

Leider hat es vergessen, den TypeScript-Code anzupassen.

Deine Aufgabe: Öffne Example 16 v1 und bringe die Marmorkugel zum Laufen. Geometrie, Pipeline und Rendering sind bereits vorhanden. Du musst nur die Uniform-Daten an den neuen Shader anpassen.

Startwerte

Verwende dieses uniforms-Objekt:

TypeScript

const uniforms = {
  baseColor: [0.12, 0.48, 0.72, 1.0],
  veinColor: [0.92, 0.94, 0.88, 1.0],

  patternFrequency: 24.0,
  distortion: [8.0, 11.0, 6.0],
  veinSharpness: 0.18,
  patternOffset: [2.0, 1.5],
  detailStrength: 0.7,
  detailFrequency: 35.0,

  lightDirection: [0.4, 0.6, 1.0],
  ambientFactor: 0.18,
  viewDirection: [0.0, 0.0, 1.0],
  diffuseStrength: 0.85,
  shininess: 48.0,
  specularStrength: 0.45,
  rimStrength: 0.15,
  rimPower: 3.0,
};

Was ist zu tun?

Vergleiche das Objekt mit der Uniforms-Struktur in shader.wgsl. Berechne die Speicherpositionen unter Berücksichtigung von Alignment und Padding und erstelle das passende Float32Array.

Passe anschließend den Uniform-Buffer an und übertrage die Daten auf die GPU.

Wichtig: Die Werte dürfen nicht einfach lückenlos hintereinanderstehen. Besonders bei vec3f musst du auf das Alignment achten.

Lösung

Die vollständige Lösung findest du in Example 16 v2.

Versuche es zuerst selbst. Wenn die Marmorkugel erscheint, hast du die manuelle Uniform-Speicherverwaltung erfolgreich umgesetzt.