Ein gutes PCB-Design (Leiterplatte) ist die Grundlage jedes elektronischen Geräts. Unternehmen, die auf das Design von Leiterplatten spezialisiert sind, sollten modernste Technologien und Prozesse nutzen, um beste Ergebnisse zu erzielen. Mit einem PCB-Konfigurator können Hersteller Materialänderungen und die Auswirkungen des Designs bei jedem neuen Produkt-Release schnell visualisieren. Auch Marketingteams profitieren von einem Website-Embed, das das neue Design zeigt.
Dieser PCB-Konfigurator zeigt verschiedene Möglichkeiten mit Fokus auf emissiven Materialien: Du kannst zwischen einem animierten, einem konstanten und einem nicht-emissiven Material wählen. Die Interaktion erfolgt über die zusätzlichen Floating UI-Icons.
Die Floating UI muss:
Ziel war es, den Datenfluss von der Chipset-Einheit zu den anderen Komponenten des PCBs zu visualisieren. Die dunklen Materialien wurden gewählt, um das animierte, emissive Material besser hervorzuheben. Der Bloom-Effekt verstärkt diesen Effekt zusätzlich.



Das Modell wurde in 3ds Max vorbereitet, die Texturen in Substance Painter unwrapped und finalisiert. Um den Realismus zu erhöhen, war es wichtig, die feinen Verbindungen zwischen allen Komponenten des Boards darzustellen.
Für die verschiedenen Teile der PCB-Einheit wurde eine dunkle Farbpalette gewählt. Beim Arbeiten mit dunklen Materialien in einer dunklen Umgebung ist es wichtig, mit verschiedenen Typen zu experimentieren. Es gibt eine Vielzahl von Kontrasten zwischen Metall- und Kunststoffmaterialien. Ein weiterer wichtiger Parameter ist die Rauheit (Roughness), die beeinflusst, wie das Licht auf der Oberfläche gestreut wird. Du kannst den Look-and-Feel mit ein paar Texturen aufwerten – vor allem in den Roughness- oder Metallic-Kanälen, zum Beispiel mit Noise.
Für die Hauptkomponente des PCBs ist ein Material mit Dünnschicht (Thin Film) eine der besten Optionen. Thin Film befindet sich in den Advanced Materials-Einstellungen. Wir empfehlen dir auszuprobieren, wie verschiedene Verlaufsfarben den finalen Look des Materials beeinflussen.
Das animierte Material wurde in Adobe After Effects erstellt und als Lottie-Datei importiert. Es nutzt die Plane-Projektion, um auf alle Komponenten zu passen.
In diesem Projekt wurde kaum Baking genutzt, da ohnehin alles recht dunkel war und die Schatten ausreichten.
Für detailreiche, realistische Projekte im kleinen Maßstab sind Sticker ein wichtiger Teil des Designs – wie die Informationen auf der Batterie oder den Chipset-Einheiten –, da sie für mehr Tiefe sorgen.
A Es wurde das Standard-HDRI verwendet, eingestellt auf eine Intensität von 30 % mit angepassten Parametern. Insgesamt gibt es vier Lichter:
Das Hauptziel bestand darin, aus jedem Winkel schöne Reflexionen zu erzielen, damit sich die dunkle Oberfläche gut vom schwarzen Hintergrund abhebt.
Es gibt zwei Gruppen von Interaktionen:
Für die emissiven Materialien der Pins gibt es eine On-Load-Interaktion, die das Abspielen einer animierten Textur auslöst, sodass diese in Dauerschleife läuft. Über das Floating UI kannst du dann ein konstantes emissives Material auswählen oder es ausschalten, indem du zu einem dunklen Material wechselst. Interaktionen nutzen den Materialwechsel per Klick und Sichtbarkeitsänderungen mit Ein-/Ausblenden-Aktionen.
Tipp: Das Klicken auf das Icon mit dem Farbverlaufs-Feld löst einen Materialwechsel aus, blendet aber auch das Verlaufs-Icon aus und zeigt das schwarze Farbfeld. Ein Klick auf das schwarze Farbfeld blendet dieses aus und zeigt wieder das Verlaufs-Icon. So erstellst du einen einfachen Loop, bei dem du immer die nächste verfügbare Option wählen kannst. Dasselbe Prinzip gilt für die emissiven Materialien – du musst nur mehr Icons ein- und ausblenden.

