Holografisches Folien-Shader-Design

Eine Folienoberfläche ohne Bildtexturen

Das holografische Folien-Shader-Design ist ein offizielles OpenDesign-Beispiel, das auf einer bildschirmfüllenden WebGL-Komposition basiert. Die sichtbare Oberfläche kombiniert Bereiche in Magenta, Türkis, Grün, Violett und Gelb mit dünnen, konturartigen Glanzlichtern und erzeugt so den Eindruck zerknitterter Folie statt eines flachen Farbfelds.

Die Komposition wird ausdrücklich als „Thin-film interference over a crushed-foil surface“ vorgestellt, während sich die Palette mit dem Betrachtungswinkel verändert. Diese Formulierung beschreibt das beabsichtigte visuelle Modell; die Aufnahmen belegen das gerenderte Erscheinungsbild und die zugehörige Interaktionsanweisung, nicht jedoch optische Genauigkeit oder GPU-Leistung.

Wofür sich dieses Design eignet

Das Artefakt eignet sich vor allem als visuelle Referenz für interaktive Landingpage-Heros, Studien generativer Kunst und Creative-Coding-Demonstrationen. Seine wichtigste Lehre betrifft die Komposition: Ein detailreich animierter Hintergrund kann Atmosphäre schaffen, während ein zurückhaltendes Overlay Orientierung bietet.

Das sichtbare Label „OPENDESIGN · WEBGL PREVIEW“ kennzeichnet den Kontext des Beispiels, während „REAL-TIME · GPU“ auf den beabsichtigten Rendering-Ansatz hinweist. Diese Labels helfen Betrachtenden, die Arbeit einzuordnen, sollten jedoch weder als Benchmark noch als Nachweis einer Produktivbereitstellung verstanden werden.

Wie sich die Komposition bewegt

Die Lesereihenfolge bleibt in allen drei bereitgestellten Zuständen gleich: Das kleine OpenDesign-Vorschau-Label befindet sich oben links, der GPU-Status oben rechts, der große Titel „HOLOGRAPHIC FOIL“ nimmt den unteren linken Bereich ein und „TILT THE FILM ↗“ erscheint nahe der unteren rechten Ecke. Dieses stabile Overlay ermöglicht Veränderungen des Hintergrunds, ohne dass die Benutzeroberfläche wie ein anderer Bildschirm wirkt.

Der Titel verwendet eine kräftige erste Zeile in Großbuchstaben und eine leichtere zweite Zeile. Dieser Kontrast verleiht „HOLOGRAPHIC“ unmittelbares Gewicht, während „FOIL“ vor der bewegten Oberfläche visuell offen bleibt. Der Nachteil besteht darin, dass der Hintergrund mit den dünneren Buchstabenformen konkurrieren kann. Deshalb müssen Kontrast und Textplatzierung bei jeder Änderung der Shader-Palette überprüft werden.

Der Shader erzeugt aus sechs Rauschschichten ein verzerrtes Dickenfeld, schätzt dessen Gradienten und überführt eine aus Dicke und Neigung gebildete Phase in eine Kosinus-Farbpalette. Separate Grat- und Funkelterme ergänzen folienartige Lichtreflexe. Die Zeigerposition auf beiden Achsen liefert die Neigungsnäherung, während die verstrichene Zeit das Feld verändert. Diese Berechnungen erzeugen die konturartigen Farbinseln ohne Bildtextur oder Szenen-Mesh; sie stellen eine visuelle Materialannäherung und keine gemessene Dünnschichtoptik dar.

Grenzen des Funktionsumfangs

Die Quelle erstellt ein lokales WebGL2-Canvas und reagiert auf Zeigerbewegungen, wobei beide Koordinaten in jedem Frame geglättet an ihre Zielwerte angenähert werden. Sie verwendet diese Koordinaten als Näherung für den Betrachtungswinkel, nicht als physische Geräteausrichtung oder 3D-Kamerasteuerung. „TILT THE FILM“ ist eine statische Anweisung und keine Schaltfläche. Die Aufnahmen zeigen zeitliche Zustände eines einzigen Heros und belegen weder verbundene Dienste noch gespeicherte Daten, optische Genauigkeit, gemessene Leistung oder einen historischen Generierungsprozess.