Webseries: Layer-by-Layer - Unser Weg vom Pixel zum Produkt

Kapitel 4:Produktdarstellung: Automatisierung und 3D-Rendering

Mockup eines Buchcovers mit der Aufschrift 'Layer by Layer - an Umami Creative Webseries', Kapitel 4: Produktdarstellung – Automatisierung und 3D-Rendering, vor einem dunkelblauen Hintergrund.

Was bisher geschah

In den letzten Kapiteln unserer Webserie haben wir euch mitgenommen auf eine spannende Reise durch die Entstehung unseres eigenen 3D-gedruckten Produktshops. 🌿💡 Von der entspannten Ideenfindung auf dem Sofa (Kapitel 3) bis hin zur Entwicklung unserer Marke und ersten Prototypen – wir haben viel gelernt, getestet und optimiert. Falls ihr die vorherigen Kapitel verpasst habt, findet ihr sie hier.

Doch jetzt stehen wir vor einer neuen Herausforderung: Wie zeigen wir unseren Kunden unendlich viele Produktvarianten, ohne diese alle drucken und fotografieren zu müssen? Die Antwort liegt in der Kombination aus Automatisierung, Rendering und unserer Expertise in 3D. 🚀

Die Herausforderung: 128 Produktvarianten mal Farbe und Größe

Mann in Anzug macht mit den Händen eine kleine, verzweifelte Geste, während er ein angespanntes Gesicht zeigt, vor dem Hintergrund eines Stadtfensters bei Nacht.

Mit 17 Farben und verschiedenen Größen ergibt sich eine enorme Vielfalt an Varianten pro Produkt – und das ist nur der Anfang. Hinzu kommen Bundles aus unterschiedlich großen Produkten und Lampen, bei denen Kunden sogar die Kabelfarbe individuell bestimmen können. Die möglichen Kombinationen potenzieren sich schnell zu einer schier unüberschaubaren Anzahl. Diese alle testdrucken und fotografieren? Ein logistischer Albtraum – und das wollen wir unseren Druckern (und uns selbst) nicht zumuten.

 

Wir haben verschiedene Ansätze getestet:

Produkte nachträglich in Photoshop umfärben? ❌ Problem: Farben reflektieren unterschiedlich auf Oberflächen, und die Farbgenauigkeit leidet.

Nahaufnahme eines blau gerenderten, strukturierten Objekts auf einer weißen Oberfläche mit subtilen Schatten und Lichteffekten.
Ältere Frau mit Digitalkamera, die ein Foto macht, lächelt zufrieden in einer humorvollen Szene.

Physische Fotoshootings für jede Variante?

 

❌ Problem: Zeitaufwendig, kostenintensiv und wenig skalierbar. Und was geschieht hinterher mit all den Testdrucken? Noch ein zusätzliches Problem: Wenn der Filament-Hersteller eine neue Farbe ins Sortiment aufnimmt, müsste das gesamte Setup erneut aufgebaut und alle Varianten nachproduziert werden.

Es war klar - Wir brauchen eine bessere Lösung: Automatisierung und 3D Renderings

Unser Ansatz kombiniert Automatisierung und fotorealistisches Rendering. Mit einer cleveren Python-Skripting-Lösung und der 3D-Software Blender konnten wir unser Ziel erreichen

Unendliche Produktvarianten, Vielfältige Szenarien und Fotorealismus

Unser 3D-Artist hat dafür ein professionelles Setup in Blender aufgebaut, das alle Elemente eines echten Fotostudios simuliert: präzise Lichtquellen, realistische Schatten und perfekt platzierte Set-Props. Dank physikalisch korrektem Licht und Schatten sowie realistischer Oberflächenstrukturen wirken die Ergebnisse wie echte Fotos. Hochwertige PBR-Texturen (Physically Based Rendering) und Details wie Surface Imperfections und Normal Maps garantieren, dass die Produkte authentisch und greifbar erscheinen – inklusive der typischen „Layers“, die beim 3D-Druck entstehen. Diese Details machen unsere Visualisierungen nicht nur fotorealistisch, sondern auch ehrlich, sodass unsere Kunden wissen, was sie erwarten können.

Screenshot einer 3D-Render-Szene in Blender: Ein Blumentopf mit Pflanze auf einem weißen Podest, umgeben von Set-Props und Lichtquellen.
Blumentopf mit Rippenstruktur und einer Monstera-Pflanze, auf einem weißen Tisch vor einer grauen Wand.

Um den Prozess der Produktvisualisierung noch effizienter zu gestalten, haben wir die Arbeit mit Blender durch Automatisierung mittels Python-Skripten optimiert. Diese Skripte ermöglichen es uns, die verschiedenen Produktfarben und Varianten vollautomatisch zu rendern und zu konfigurieren – ohne jedes Mal manuell neue Materialien oder Farben anlegen, Renderings starten und anpassen zu müssen. Dank der Skripte konnten wir einfach ein neues Produkt in das bestehende Setup unseres 3D-Artists laden und alle Varianten in den gewünschten Farben und Größen mit einem Klick herausrendern. Kein zeitaufwendiges Warten auf einzelne Anpassungen, kein mühseliges Nachjustieren – das Setup läuft effizient und konsistent.

Blender-Benutzeroberfläche mit einer 3D-Szene eines Blumentopfs, Python-Skript im Text-Editor und gerenderten Objekt-Daten im Seitenbereich.

Die Vorteile liegen auf der Hand: enorme Zeitersparnis, ein gleichbleibender Qualitätsstandard und die Möglichkeit, eine große Bandbreite an Varianten schnell und ohne zusätzlichen Aufwand darzustellen. Diese Automatisierung hat uns nicht nur viel Arbeit abgenommen, sondern auch gezeigt, wie flexibel und leistungsfähig moderne Tools wie Blender in Kombination mit Python sein können.

Shopify-Plugins: Mehr Individualisierung, weniger Aufwand

Um das Einkaufserlebnis unserer Kunden noch interaktiver und personalisierter zu gestalten, haben wir ein Shopify-Plugin entwickelt und ein weiteres geplant, um unsere 3D-Produkte in ein neues Licht zu rücken:
  • Ein geplantes Realtime-Plugin in WebGL:Wir haben die Idee entwickelt, ein Plugin zu schaffen, das es ermöglichen würde, Modelle in Echtzeit zu drehen, zu konfigurieren und Farben direkt im Browser anzupassen. Dieses Konzept hat das Potenzial, das Einkaufserlebnis noch intuitiver und flexibler zu gestalten.
  • Ein Plugin für mehrteilige 3D-Drucke, mit dem Kunden verschiedene Bestandteile eines Produkts mittels Overlays individuell einfärben können
Während das Plugin für mehrteilige Produkte bereits erfolgreich umgesetzt wurde, bleibt das Realtime-Plugin eine spannende Vision, die zeigt, wie weit die Möglichkeiten der 3D-Technologie reichen können. Beide Ansätze zielen darauf ab, Kreativität und Flexibilität für unsere Kunden zu maximieren und jedes Produkt zu einem echten Unikat zu machen.
Online-Konfigurator für eine personalisierbare Vase, bei der Kunden Farben für verschiedene Teile des 3D-Modells auswählen können.

Plugin um Bestandteile einer Vase unterschiedlich einzufärben

Das Plugin nutzt Maskierungstechniken und verschiedene Layers, um spezifische Teile eines 3D-Modells individuell anpassbar zu machen. Kunden können so ihrer Kreativität freien Lauf lassen und personalisierte Farbkombinationen erstellen, die genau ihren Vorstellungen entsprechen.

Vision: Ein Plugin für modulare Vasen

Die Idee: Eine Vase, die durch das Zusammensetzen verschiedener vordesignter Module entsteht, die übereinandergestapelt eine turmartige Form ergeben. Im WebGL-Konfigurator könnten Kunden die Reihenfolge der Module frei auswählen und so eine Vase erstellen, die genau ihren Vorstellungen entspricht.

Generatives Design in Blender

Die Module für diese Vase könnten mithilfe von generativem Design in Blender erstellt werden, unter Einsatz von Geometry Nodes. Doch was genau ist generatives Design? Generatives Design ist ein Prozess, bei dem Formen und Designs algorithmisch erzeugt werden, basierend auf zuvor definierten Regeln und Parametern. Dieses Konzept würde es ermöglichen, eine breite Auswahl an vordesignten Modulen zu entwickeln, die flexibel kombinierbar und für jeden Kunden anpassbar sind.

🎥 Einblicke in die ersten Tests des Vasen-Generators

Das Video zeigt einige der ersten Ergebnisse aus unserem Vasen-Generator – eine Art „Spielwiese“, die uns geholfen hat, uns an die später druckbaren Modelle heranzutasten. Mithilfe generativen Designs und Geometry Nodes in Blender konnten wir unzählige Varianten erstellen, experimentieren und die besten Ansätze für die nächsten Schritte identifizieren.

Obwohl diese ersten Outputs eher experimentellen Charakter haben, zeigen sie schon jetzt das Potenzial des Generators: kreative Formen, modulare Designs und die Möglichkeit, jedes Modell individuell anzupassen. Ein wichtiger Schritt auf dem Weg zu einem Tool, das Kunden bald ihre ganz persönliche Vase gestalten lässt! 🌿✨

Algorithmisch generierte gelbe Vase mit facettiertem, geometrischem Design vor schwarzem Hintergrund.

Vorteile des generativen Designs:

 

Generatives Design bietet uns zahlreiche Vorteile, die den Entwicklungsprozess erheblich verbessern. Innerhalb kürzester Zeit können wir eine Vielzahl an Modulen erstellen, was die Effizienz unserer Arbeit deutlich steigert. Trotz der algorithmischen Generierung bleiben die Designs dabei ästhetisch ansprechend und harmonisch, sodass sie sich nahtlos in unser Gesamtkonzept einfügen. Gleichzeitig sind die Module so flexibel gestaltet, dass sie beliebig miteinander kombiniert werden können, um individuelle und kreative Lösungen zu ermöglichen.

Nach dem Export der generierten Module werden die Meshes für den Einsatz in WebGL optimiert. Dadurch wird sichergestellt, dass die Performance im Browser erhalten bleibt und die Darstellung hochwertig bleibt.

Anschließend werden die Module in den WebGL-Konfigurator integriert und über unser Shopify-Plugin nutzbar gemacht. Das Plugin setzt auf Realtime-3D, um den Kunden ein interaktives und flexibles Gestaltungserlebnis zu bieten

 

  • Direkte Visualisierung: Kunden sehen sofort, wie ihre Vase mit den ausgewählten Modulen aussieht, und können sie aus allen Blickwinkeln betrachten.
  • Einfache Anpassung: Die Reihenfolge der Module und ihre Auswahl können mit wenigen Klicks geändert werden.
  • Realitätsnahe Darstellung: Mit gut gesetztem Licht und Schatten sowie detaillierten Texturen wirkt die Vase fast wie ein echtes Produkt.
  • Kreative Freiheit: Kunden können spielerisch verschiedene Varianten ausprobieren und so ihre persönliche Wunsch-Vase gestalten.

Fazit: Tools für grenzenlose Kreativität

Dank moderner Technologien wie Blender, Python und unseres selbstentwickelten Shopify-Plugins konnten wir die Herausforderungen im Shop-Projekt meistern und unseren Kunden ein visuell beeindruckendes Einkaufserlebnis bieten. Gleichzeitig zeigt dieses Projekt, wie 3D-Lösungen vielfältig eingesetzt werden können – von der Produktdarstellung bis hin zu interaktiven Konfiguratoren.

Unsere 3D-Expertise aus anderen Projekten

Unsere Erfahrung im Bereich 3D-Rendering und interaktiver Anwendungen geht weit über dieses Shop-Projekt hinaus. In der Vergangenheit haben wir für namhafte Kunden immersive und innovative Projekte umgesetzt, die modernste 3D-Technologien nutzen.

Interaktive 3D-Anwendungen

Dazu zählen immersive Realtime-3D-Projekte wie die Industrial Edge 2 Go Digital Twin-Anwendung und der Siemens Virtual Twin, die komplexe Prozesse in Echtzeit erlebbar machen. Ergänzt wird dies durch AR-Learning-Apps für das Handwerk, die interaktives Lernen und praxisnahe Trainingsmethoden kombinieren.

Gaming-Erlebnisse

Mit Projekten wie dem Siemens Plant Racer DCS Experience, der SIMIT Experience oder dem COMOS Pipe Planner haben wir spielerische Ansätze geschaffen, die technische Inhalte auf unterhaltsame Weise vermitteln.

3D-Animationen und Renderings

Für Kunden wie BROCHIER mit ihrem OctoLink oder die DrivesGreen E-Scooter Renderings haben wir beeindruckende Trailer und Animationen erstellt. Auch in der Architekturvisualisierung zeigen wir mit fotorealistischen Renderings, was 3D leisten kann.

Diese Projekte verdeutlichen, wie flexibel und leistungsfähig 3D-Technologien sind – von interaktiven Produktkonfiguratoren bis hin zu virtuellen Erlebnissen und visuellem Storytelling.

Mit dieser Expertise konnten wir unsere Fähigkeiten auch im Shop-Projekt optimal einsetzen. Ob im Bereich Rendering, Realtime-3D oder generatives Design – wir verstehen es, 3D-Technologien vielseitig und effektiv einzusetzen, um Mehrwert zu schaffen. 🚀