Dieser Artikel erschien ursprünglich in der DP 05 : 2019.
Die Betrachtung von Assets im Browser ist heutzutage keine große Neuheit mehr, so möchte man meinen. Doch zwei Entwickler haben sich der Aufgabe verschrieben, Lighting und Look Development in den heimischen Browser zu übertragen. Der Clou dabei ist, dass keine Plug-ins zur Benutzung notwendig sind und die Geschwindigkeit des Path Tracings von den eigenen Ressourcen abhängt, da Client-seitiges Rendering implementiert wurde. Der eigene Browser wird zur kompakten Mehrzweckanwendung für zum Beispiel Qualitätskontrolle oder den Austausch sowie das reine Rendering von 3D-Assets in einer kleinen Szene. Keine Plugins müssen installiert werden, keine Installation der Software ist notwendig und bis dato ist die App kostenlos verfügbar. Eigenschaften, die es Wert machen, die App genauer unter die Lupe zu nehmen.
Um die App nutzen zu können, muss nur die Internetseite cer.org besucht werden. Über einen www.lighttraButton wird direkt die App gestartet. Auf den ersten Blick wirkt die App wie eine herkömmliche 3D-Software – mit puristisch wirkenden Benutzerschnittstellen.
Nur das Wichtigste
Die beiden Köpfe hinter der Lighttracer-App namens Ph.D. Denis Bogolepov und Danila Ulyanov haben den Aufbau und die Darstellung bewusst so gewählt. Es geht um das Wichtigste für den Anwender und die Vermeidung von Komplexität durch maßgeschneiderte Menüs. Wird die App geöffnet, so erscheint mittig die 3D-Szene, die direkt bei Mauszeigerstillstand in das progressive Rendering übergeht und zusätzlich noch einen Denoiser anwendet. Links daneben ist der Geometrie-Editor nebst Rendereinstellungen untergebracht. Rechts neben der 3D-Szene beziehungsweise Renderausgabe befinden sich Material-Editor sowie ein Bereich für die Lichtquellen.
Bevor eine App genutzt werden kann, stellt sich grundsätzlich erst mal die Frage, für welchen Zweck sie genutzt werden soll. So wird die Suche nach bekannten und je nach User oft genutzten Funktionen ausgesetzt. Dem Aufbau der Benutzeroberfläche zufolge sollen 3D-Daten eingeladen, schnell in Szene gesetzt und mittels IBL und bestimmten Kameraeinstellungen gerendert werden. Es geht hierbei auch nicht um Animationen wie zum Beispiel Drehscheiben (Turntables), sondern um Standbilder.
User müssen zunächst einmal das Wunschobjekt in die App importieren. Wichtig ist es an der Stelle, je nach Größe der Datei eine gute Internetverbindung zu besitzen, damit die Daten zügig dargestellt werden. Zulässig für den Import ist zum Testzeitpunkt lediglich eine OBJ-Wavefront-Datei, und das mit bestimmten Einschränkungen. Die beiden Entwickler kommen aus dem Sektor des Computer Aided Designs, und daher liegt es nahe, dass ein CAD-Visualisierungsarbeitsfluss als Grundlage dient. Es können zum Testzeitpunkt keine unterschiedlichen Materialien an einem einzelnen Objekt interpretiert und angezeigt werden. Dafür kann eine OBJ-Datei aus einer Vielzahl von Objekten bestehen, und Objekte mit demselben Material können während des Imports gruppiert werden.
Ist das Objekt bestehend aus einzelnen Objekten in der App zu sehen, so lohnt sich ein Blick in den Material-Editor am rechten Bildschirmrand. Darin enthalten sind lediglich die wichtigsten Parameter für die Darstellung und einfache Anpassung von Oberflächen. Das erste Auswahl-Menü ist vom Typ Dropdown und beinhaltet eine Reihe an unterschiedlichen Presets – Voreinstellungen – weit genutzter Materialien. Zum Testzeitpunkt waren 25 unterschiedliche Materialien auswählbar. Dazu zählten gängige Metalle, Autolackierungen, Plastik, Gummi und leuchtende Materialien. Ist das benötigte Material nicht vorhanden, so können auf Basis der Presets Änderungen durchgeführt werden oder es wird ein Material von der Pike auf neu eingestellt.
Eine Frage des Aussehens
Der Materialaufbau seitens der Benutzerschnittstelle ist simpel aufgebaut. Es gibt zwei grundlegende Bereiche. Im zweiten Bereich geht es rein um die Emission von Licht nebst Auswahl von Farbe und der Intensität der Leuchtkraft. Innerhalb des ersten Bereichs namens BSDF geht es um grundlegende Eigenschaften – die aber auch nur im kompakten Format. Bei der Lighttracer-App handelt es sich um einen PBR-fähigen Renderer, was bedeutet, dass Materialien in grundlegende Gruppen unterteilt sind: Leiter und Nichtleiter. Vereinfacht gesprochen haben elektrische Eigenschaften der MateriaInnerhalb des Material-Editors gibt es eine Palette an Voreinstellungen, aus denen User wählen können. Vorhandene CAD-Daten können ohne große Vorarbeit direkt in die App geladen werden. lien Einfluss auf die optischen Eigenschaften eines Mediums.
Im Materialeditor können User nun zwischen Leitern und Nichtleitern als Basis wählen. Wobei im Rahmen der Nichtleiter weitere Unterteilungen vorgenommen wurden, um die Arbeit zu erleichtern. So wird bei den Nichtleitern unterschieden zwischen Mattes, Glas, Farbe im Sinne von Lack sowie glänzenden Oberflächen. User können aus den Grundbausteinen wählen und auf deren Basis werden die jeweils wichtigen Parameter aufgezeigt.
Natürlich lässt sich ebenfalls als Basis das Feld „Custom“ wählen, und es wird eine Palette an Standardmaterialeinstellungen kontextunabhängig bereitgestellt. Kontextabhängig sind die Parameter für metallische Oberflächen wie folgt angeordnet: Zunächst kann eine Reflexionsfarbe definiert werden. Darauf aufbauend gibt es die Möglichkeit, die Rauigkeit (Roughness) zu bestimmen, gefolgt von einem Interface, das im Grunde die Fresnel-Komponente bestimmt. Geht es bei der Visualisierung um akkurate Darstellungen von Metallen, dann können noch Brechungsindex und Brechungskoeffizient von Hand eingetragen werden. Die dafür benötigten Werte können in Portalen wie zum Beispiel www.refractiveindex.info ermittelt werden.
Bei der Basis für Glas kann die Farbe für die Verteilung (Scattering) vergeben werden sowie für die Lichtbrechung (Refraction). Handelt es sich um dünnes Glas oder solide Formen? Abhilfe schafft an der Stelle ein Parameter zur Festlegung der Dichte: Density. Neben dem Interface wird noch der Brechungsindex als einzelner Wert angegeben, obwohl es sich hierbei um eine komplexe Zahl handelt. Viele Renderer nutzen nur einen IOR-Wert und verbergen die Komplexität des IOR hinter einem einfachen Menü. Bei der Basis Paint (Lackierungen) sind im Grunde zwei Ebenen an Einstellungen vorhanden, die überlagert werden können. Glänzende Oberflächen erhalten eine Handvoll Einstellungen für Farben und Rauigkeit. Die Anzahl der verfügbaren Parameter und deren Anordnung scheint wohl- überlegt und überfordert auch User nicht, die weniger stark in der Materie Computergrafik und Rendering verankert sind.
Die Wahl der Lichtquelle
Im Rahmen der Beleuchtung ist der Aufbau abgesteckt. Wie es sich für einen PBR-fähigen Renderer gehört, gibt es die Möglichkeit, im Menü „Environment“ auf Image Based Lighting – kurz IBL – zurückzugreifen und eine HDR-Textur für die Beleuchtung auszuwählen. Standardmäßig ist eine HDR-Textur vorhanden, die kann aber auch gegen einen Farbverlauf ausgetauscht werden, falls keine HDR-Textur vorrätig ist. Wahlweise kann die Umgebungsbeleuchtung, ganz gleich welcher Art, deaktiviert werden. Ein weiteres Menü mit dem Namen „Light Sources“ kümmert sich um die Erstellung zusätzlicher Lichtquellen. Es darf zwischen zwei Lichtquellen ausgewählt werden: einmal dem Infinite Light, einer Lichtquelle, die quasi aus einer Richtung scheint, und einer Art Punktlicht mit einer kreisrunden Lichtausbreitung ausgehend von einem Punkt im Raum. Die Einstellungen der Lichtquellen umfassen die Position, Farbe und Intensität. Daneben gibt es noch Einstellungen, die spezifisch sind für die unterschiedlichen Lichter wie zum Beispiel der Radius beim Punktlicht. Sind Objekte im Raum platziert und die gewünschten Lichtquellen erstellt sowie justiert, dann können über den Geometrieeditor noch kleine Feinheiten in die Szene einfließen wie zum Beispiel eine polygonale Bodenfläche in quadratischer oder kreisrunder Form. Des Weiteren kann eine Art Bühne mit Hintergrund eingebunden werden, deren Übergang von Bodenplatte zur Rückplatte abgerundet ist für eine bessere Lichtverteilung und ein schöneres optisches Ergebnis.
Kameraeinstellungen
Der finale Schliff für das Rendering wird in den Kameraeinstellungen durchgeführt. Zu finden sind die Kameraeinstellungen innerhalb der Rendereinstellungen. User können als Basis entweder ein sehr einfaches Kameramodell auswählen namens Pinhole – Lochkamera – oder es dürfen dünne Linsen imitiert werden mit deutlich mehr Einstellungsmöglichkeiten. Bei der Lochkamera stehen User lediglich die Sensorgröße sowie Brennweite für die Einstellung zur Verfü- gung. Für die meisten Asset Tests sicherlich in Ordnung. Soll es etwas ausgefeilter und künstlerisch angehauchter sein, dann empfiehlt sich die Auswahl „Thin Lens“. Neben Sensorgröße und Brennweite stehen Usern nun noch die Entfernung zum Fokuspunkt zur Verfügung nebst F-Stop-Anpassung wie auch die Anzahl der Blendenlamellen. So lassen sich Effekte wie Tiefenunschärfe realisieren, um Objekte imposant in Szene zu setzen. Die grundlegenden Einstellungen seitens der Renderausgabe umfassen die Größe der Ausgabe in Pixeln und das Seitenverhältnis. Die Einstellungen wirken rudimentär, erleichtern jedoch die Arbeit enorm, da User sich nicht in gigantischen Material-Buildern verirren wie zum Beispiel der Arnold Standard Surface in Max, Maya oder Cinema 4D.
Das Sichern der Arbeit in der LighttracerApp geschieht über die Abspeicherung der Szene in das GLB-Format, das ebenfalls in anderen Programmen geöffnet werden kann, die glTF unterstützen. So könnten User die Lighttracer-App ebenfalls dazu benutzen visualisierte Konstruktionsdatensätze aus Catia, Inventor oder Solidworks für einen interaktiven Produktkatalog aufzubereiten. Wichtig ist, dass der Browser kompatibel ist mit der App und die zugrunde liegende Grafikkarte ordentlich Leistung bietet. Es handelt sich nach wie vor um Monte-Carlo Path Tracing, das mit der Lighttracer-App im eigenen Browser Client-seitig stattfindet. Spannend ist, dass durchaus wichtige Features wie zum Beispiel Importance Sampling implementiert wurden, um die Renderzeit intelligent zu verkürzen, ohne das visuelle Ergebnis zu beeinträchtigen. User können teilweise auch selbst noch die eine oder andere Stellschraube anpassen wie zum Beispiel den Kohärenz-Parameter oder die Anzahl der Bounces. Letztere ist standardmäßig auf einen geringen Wert eingestellt, Bogolepov empfiehlt die Werte an die eigene Hardware anzupassen. Gleiches gilt für den Kohärenz-Parameter, der nahe am Wert Eins angesetzt ist. Je niedriger der Wert ist, desto langsamer wird das Rendering – laut Bogolepov an die 30%, wobei das visuelle Ergebnis glatter wirkt mit deutlich mehr natürlichem Rauschen im Bild.
Geschwindigkeitszuwachs
Es gibt noch den einen oder anderen Hebel, den User außerhalb der App anwenden können, um das Arbeitserlebnis deutlich angenehmer zu gestalten. Schritt eins ist wohl der wichtigste: Der aktuelle Grafikkartentreiber sollte installiert sein, um auf die neuesten Funktionen der zugrunde liegenden GPU zugreifen zu können. Des Weiteren muss der Web Browser, der genutzt wird, mit der stärksten GPU arbeiten. Es kann vorkommen, dass gerade bei mobilen Geräten wie Notebooks auf die integrierte Onboard-Grafik zurückgegriffen wird anstatt auf den stärksten Grafikchip.
Die Implementierung der Lighttracer-App baut auf WebGL 2.0, daher ist es empfehlenswert die, zugrunde liegende 3D-API auf OpenGL zu ändern, um maximale Performance für die App zu gewinnen. Ein weiterer großer Vorteil ist, dass die Kompilierung der Shader deutlich schneller vonstattengeht. Jeder Browser besitzt für die Anpassung der 3D-API einen eigenen Workflow, der in der jeweiligen Dokumentation zu finden ist. Sind alle notwendigen Anpassungen durchgeführt worden, dann dürfen sich User auf eine kompakte, aber durchweg gut durchdachte App freuen zur Anfertigung von Stills und für den Austausch von GLB-Szenen.
Da sich das Projekt noch in einer experimentellen Phase befindet, freuen sich Bogolepov und Ulyanov auf weitere User, die die App testen und das Feedback im dazugehörigen Forum posten. Laut Bogolepov handelt es sich bei der App um nicht nur einen physikalisch plausiblen Renderer, sondern einen physikalisch korrekten Renderer, der laut eigener Recherche der beiden ein Alleinstellungsmerkmal besitzt – laut einem Post auf Linkedin vom 14 Juni 2019. Über den zu Beginn genannten Link www.lighttracer.org darf sich jeder sein eigenes Bild machen und die App auskosten. Die Entwickler arbeiten stetig weiter und es scheinen noch spannende Features hinzuzukommen, gerade im Import-Bereich für die Unterstützung weiterer Dateiformate nebst Texturen.
