Über Sandhelden

Die Sandhelden GmbH & Co. KG ist ein Startup mit Sitz in Lübeck, das 2014 von Peter Schiffner und Laurens Faure gegründet wurde. Das junge Unternehmen stellt mit Hilfe des 3D Druckverfahrens individuelle Waschbecken aus Sand her.

Technologien

PM Digitalagentur Hamburg Technologien - NodeJS    PM Digitalagentur Hamburg Technologien - AngularJS    PM Digitalagentur Technologien - redis    PM Digitalagentur Technologien- ThreeJS    PM Digitalagentur Technologien - TypeScript

Kunde

Logo Sandhelden

Sandhelden GmbH & Co. KG
www.sandhelden.de

Projektbeschreibung

Aufgabenstellung

Ziel des Projektes war die Implementierung eines Produktkonfigurators für Waschbecken. Besonderheit: Die Waschbecken werden mit Hilfe eines 3D Druckers aus einem speziellen Sand erzeugt.

Der Kunde sollte zwischen aufwändigen Oberflächendesigns wählen sowie die Breite, Höhe und Tiefe des Waschbeckens anpassen können. Auch die Farbe des Waschbeckens sollte auswählbar sein. Zudem wünschte Sandhelden sich, dass der Kunde, das von ihm gestaltete Waschbecken sowie vorgenommene Änderungen in Echtzeit in 3D sehen kann. Dabei sollte das sichtbare 3D-Bild des Waschbeckens optisch sehr gut aussehen. Unsere Aufgabe war es, möglichst nah an die 3D-Offline-Renderings der Waschbecken heranzukommen (http://www.sandhelden.de/#kollektion), die zwar auch aus einem 3D-Programm erzeugt wurden, jedoch mit fotorealistischen Berechnungseinstellungen erzeugt wurden. Sprich die dort sichtbaren Bilder wurden in mehreren Minuten und nicht in Echtzeit (weniger als 1 Sek.) berechnet.

Probieren Sie es selbst!

Der 3D Produktkonfigurator für Waschbecken

Challenges

GRÖßE DER MESH-DATEIEN

Die Mesh-Dateien der Waschbecken waren zum Teil über 100MB groß und damit sowohl ungeeignet für eine Echtzeitdarstellung im Browser als auch für den Download vom Server. Bei einer Komprimierung der Daten könnten aber Details der Oberflächenstruktur verloren gehen, wodurch die Optik der Waschbecken in Mitleidenschaft gezogen würde.

OBERFLÄCHEN­DARSTELLUNG

Echtzeit 3D-Renderings haben immer das Problem, dass Oberflächen, die z.B. metallisch (wie der Wasserhahn) oder teilweise reflektierend (das von einer Glasur überzogene Waschbecken) aussehen sollen, eher stumpf oder ``wie aus Plastik`` wirken. Auch ein weicher Schatten, der sich unter dem Waschbecken auf dem Holztisch abzeichnen soll, stellt eine Herausforderung dar, da eine exakte Lichtberechnung viel zu zeitintensiv für eine Echtzeitdarstellung im Webbrowser wäre.

CUSTOM SKALIERUNGEN

Die gleichförmige Verzerrung eines Waschbeckens, wie sie problemlos von jeder 3D-Library angeboten wird, würde z.B. bei einer Streckung entlang der X-Achse dazu führen, dass auch der runde Ausfluss oval wird. Eine mögliche Lösung wäre gewesen, jeden 3D-Punkt einzeln per JavaScript zu skalieren und den runden Ausfluss einfach auszusparen. Dies wäre jedoch sehr ineffizient gewesen, da die Unterstützung von 3D-Hardware nicht ausgenutzt worden wäre.

LÖSUNGEN

SPEZIELLES KOMPRESSSIONSVERFAHREN

Wir haben verschiedene Kompressionsverfahren evaluiert und letztlich eine nahezu verlustfreie Kompression von über 100MB auf unter 5MB erreicht. Hierzu wurde eine auf dem OpenCTM Format basierende Library für die JavaScript 3D-Bibliothek ThreeJS extra auf unsere Bedürfnisse angepasst und erweitert.

ENTWICKLUNG VON SHADERN

Es wurden aufwendige Shader programmiert, die Environment-Lighting, Reflexion und ambient Occlusion berechnen. Shader sind spezielle Programme, die auf der Grafikkarte äußerst effizient ausgeführt werden und somit rechenaufwendige Operationen schnell erledigen können. Zum Beispiel berechnen sie für jedes Pixel, wie sich Reflexion und Schattierung der Umgebungsgeometrie und Beleuchtung - auch in gegenseitiger Wechselwirkung - auf eben dieses Pixel auswirkt.

TRANSFORMATION PER VERTEX SHADER

Es wurde eine hardwarebeschleunigte Transformation per Vertex-Shader umgesetzt, die unsere speziellen Anforderungen berücksichtigen konnte.

Challenges

GRÖßE DER MESH-DATEIEN

Die Mesh-Dateien der Waschbecken waren zum Teil über 100MB groß und damit sowohl ungeeignet für eine Echtzeitdarstellung im Browser als auch für den Download vom Server. Bei einer Komprimierung der Daten könnten aber Details der Oberflächenstruktur verloren gehen, wodurch die Optik der Waschbecken in Mitleidenschaft gezogen würde.

OBERFLÄCHEN­DARSTELLUNG

Echtzeit 3D-Renderings haben immer das Problem, dass Oberflächen, die z.B. metallisch (wie der Wasserhahn) oder teilweise reflektierend (das von einer Glasur überzogene Waschbecken) aussehen sollen, eher stumpf oder ``wie aus Plastik`` wirken. Auch ein weicher Schatten, der sich unter dem Waschbecken auf dem Holztisch abzeichnen soll, stellt eine Herausforderung dar, da eine exakte Lichtberechnung viel zu zeitintensiv für eine Echtzeitdarstellung im Webbrowser wäre.

CUSTOM SKALIERUNGEN

Die gleichförmige Verzerrung eines Waschbeckens, wie sie problemlos von jeder 3D-Library angeboten wird, würde z.B. bei einer Streckung entlang der X-Achse dazu führen, dass auch der runde Ausfluss oval wird. Eine mögliche Lösung wäre gewesen, jeden 3D-Punkt einzeln per JavaScript zu skalieren und den runden Ausfluss einfach auszusparen. Dies wäre jedoch sehr ineffizient gewesen, da die Unterstützung von 3D-Hardware nicht ausgenutzt worden wäre.

LÖSUNGEN

SPEZIELLES KOMPRESSSIONSVERFAHREN

Wir haben verschiedene Kompressionsverfahren evaluiert und letztlich eine nahezu verlustfreie Kompression von über 100MB auf unter 5MB erreicht. Hierzu wurde eine auf dem OpenCTM Format basierende Library für die JavaScript 3D-Bibliothek ThreeJS extra auf unsere Bedürfnisse angepasst und erweitert.

ENTWICKLUNG VON SHADERN

Es wurden aufwendige Shader programmiert, die Environment-Lighting, Reflexion und ambient Occlusion berechnen. Shader sind spezielle Programme, die auf der Grafikkarte äußerst effizient ausgeführt werden und somit rechenaufwendige Operationen schnell erledigen können. Zum Beispiel berechnen sie für jedes Pixel, wie sich Reflexion und Schattierung der Umgebungsgeometrie und Beleuchtung - auch in gegenseitiger Wechselwirkung - auf eben dieses Pixel auswirkt.

TRANSFORMATION PER VERTEX SHADER

Es wurde eine hardwarebeschleunigte Transformation per Vertex-Shader umgesetzt, die unsere speziellen Anforderungen berücksichtigen konnte.

Haben wir Ihr Interesse geweckt?

Melden Sie sich jederzeit gerne bei uns! Wir beraten Sie unverbindlich und kostenlos.

+49 (0) 40 334-525 86

kontakt@pmagentur.com

P&M Agentur – Softwareentwicklung & IT Consulting