Physically Based Rendering mit threejs

Wie können wir in unseren 3D-Konfiguratoren die Produkte so realistisch darstellen? Der Schlüssel dazu heisst PBR (physically based rendering). Wie’s geht, schreiben wir hier.

Was ist PBR?

Generell wird in WebGL die Berechnung der Oberflächenmaterialien recht rudimentär behandelt. Die Darstellung schert sich recht wenig um die Lösung der Maxwell-Gleichungen, die uns zeigen würde, wie eine Szene bei gegebener Beleuchtung wirklich aussieht. Renderings versuchen das über sogenanntes Pathtracing nachzuahmen. Aber für Live-3D ist das viel zu aufwändig (allermodernste Graphikkarten versuchen allerdings, dem nahe zu kommen).

Deshalb approximiert man in WebGL alle Oberflächen durch Dreiecke und interpoliert die Flächen. Früher war man dabei mit Phong-Shading zufrieden. State of the art ist aber PBR.

Dabei wird zwischen metallischen und dielektrischen Oberflächen unterschieden. Metalle sind eher glänzend, Dielektrika können eine Farbe tragen (aber auch glänzen, z.B. eine lackierte Oberfläche).

Die Shader sind so programmiert, dass Energieerhaltung gesichert ist: Was an Licht absorbiert wird, wird im Ganzen auch emittiert.

Besonders realistisch wirkt PBR, weil es über drei Maps gesteuert wird, also letztlich Bilder, die über UV-Koordinaten auf die Oberfläche der Geometrie abgebildet werden:

• Metallness: der oben genannten Unterschied zwischen glänzendem Metall und eher mattem Stoff,
• Roughness: Der Grad der Mikrostruktur. Je näher an 1 desto rauher die Oberfläche.
• AO-Map: ein Mikroschatten, der 3D-Struktur in der Oberfläche darstellt.

In threejs werden die drei Kanäle effizient durch die 3 RGB-Kanäle einer Textur dargestellt.

Bekannte Texturen wie Normal-, Bump- oder Displacement-Maps werden von den Shadern noch zusätzlich verarbeitet.

Und wie sieht das dann aus?

Der Unterschied lässt sich an diesem Konfigurator für Maßtische ganz gut erkennen:

Mit diesem Modell sind wir gestartet. Wir haben eine Holztextur auf die Geometrie gelegt und mit Phong rendern lassen.

Nach dem Aufsetzen der PBR Pipeline sieht das ganz dann so aus:

Übrigens war bei diesen Tischplatten auch die Modellierung einer konkaven Geometrie ganz wichtig. Nur im Zusammenspiel von Geometrie und Material ergibt sich ein wirklich realistischer Eindruck.