konfigurator webgl header kadeco

3D Konfigurator Sicht- und Sonnenschutz

  • e-Commerce
  • Konfigurator
  • WebGL
  • Shop

KADECO ist ein im schönen Ostwestfalen heimisches Familienunternehmen und entwickelt seit über 30 Jahren hochwertige Sicht- und Sonnenschutzlösungen – höchster Anspruch an ausgefeilte Technik und ansprechendes Design steht dabei immer im Fokus. So entstand ein gewaltiges Portfolio an innovativen Produkten für den Innen- und Außenbereich, die bereits das Zuhause von zahlreichen Kunden schützen und verschönern. Mit dem von redPlant entwickelten 3D Konfigurator können diese nun alle interaktiv zusammengestellt und direkt über das KADECO Portal bestellt werden. 

Jedes Produkt ein Unikat

KADECO verfügt nicht nur über ein breites Produktportfolio, sondern auch über eine hohe Individualisierbarkeit jedes einzelnen Produkts. So kann jedes Produkt nicht nur auf den mm genau gefertigt werden, sondern hält auch viele weitere Produkteigenschaften zur Personalisierung bereit. Um diese Möglichkeiten ihren Kunden näher zu bringen und ihren Fachpartnern die Möglichkeit zu geben, dies auf besten Wege kommunizieren und auch direkt bestellen zu können, wurde ein 3D Konfigurator entwickelt, der diese Individualisierung der Produkte abbildet und direkt an den KADECO Online Shop und an weitere interne Prozess weiterreichen kann.

Einer für Alle

Derzeit sind neun verschiedene Produktkategorien im 3D Konfigurator integriert. Jede dieser Kategorien beinhaltet weitere Unterkategorien und diese wieder eine Vielzahl von verschiedenen Modellen, die dank zahlreicher Parameter ganz individuell konfiguriert werden können. Durch den dynamischen und datengetriebenen Aufbau des 3D Konfigurators ist es möglich, alle Produkte über ein und dieselbe Anwendung abzubilden. Anhand des gewünschten Produktes wird eine spezielle Konstruktions- und Konfigurationslogik aufgerufen, die das Modell in Gänze beschreibt, visualisiert und die Konfiguration des Produktes bereitstellt.

konfigurator webgl Markise kadeco

Markisen

Markisen dienen als Sicht- und Sonnenschutz im Außenbereich. Der Konfigurator bietet eine große Auswahl an verschiedenen Modellen in den Bereichen Terrassen-, Wintergarten-, Pergola- und Fenstermarkisen. Neben der mm-genauen Anpassung und der Auswahl aus diversen Profilfarben, Bedienoptionen, Befestigungsarten, kannst Du Dir aus einer bunten Palette ansprechender Markisenstoffen Deine Wunschmarkise zusammenstellen. Weitere Optionen wie beispielsweise gekoppelte Anlagen oder auch verschiedene Volanttypen stehen Dir je nach Modell ebenso zur Verfügung.

konfigurator webgl Insektenschutz kadeco

Insektenschutz

Möchtest Du lüften, aber nicht gleich jedem Insekt Unterschlupf gewähren, dann kann ein Insektenschutz sehr hilfreich sein. Egal ob Fenster, Türen oder Lichtschächte - im Konfigurator können Spann- und Drehrahmen, Schiebe-, Plissee- oder Rolloanlagen passgenau geplant werden. Außerdem kannst Du zwischen verschiedenen Profilfarben und Gewebearten wählen und Dich für diverse Bedien- und Bürstenoptionen entscheiden, die Deine Zusammenstellung abrunden. 

konfigurator webgl Plissee kadeco

Plissee

Plissees dienen dem innenliegenden Sicht- und Sonnenschutz. Hier können verspannte oder freihängende Plissees, Plafond-Anlagen oder auch Plissees für Dein Dachfenster im 3D Konfigurator geplant werden. Neben der Angabe der exakten Maße und der Profilfarbe, kann der gewünschte Plisseestoff aus einer gewaltigen Kollektion an Designs ausgewählt werden. Zudem stehen Dir je nach Modell verschiedene Befestigungs- und Bedienarten oder verschiebbare Ober- und/oder Unterschienen zur Verfügung.

konfigurator webgl Wabenplissee kadeco

Wabenplissee

Die Wabenplissee Kollektion verfügt überwiegend über die gleichen Modelle und Konfigurationsoptionen wie die klassischen Plissees. Sie haben jedoch den großen Vorteil, dass sie durch ihre innenverlaufenden Schnüre und ihre Wabenstruktur perfekt abdunkeln und zugleich über einen angenehmen schallabsorbierenden und effizienten wärmeisolierenden Effekt verfügen. Wie auch die Plissees können Wabenplissee-Anlagen durch weitere Schienen optisch getrennt werden, wodurch eine Kombination von mehreren Stoffen beispielsweise für Tag und Nacht möglich ist. 

konfigurator webgl Rollo kadeco

Rollo

Egal ob als perfekte Verdunkelung für Dein Schlafzimmer oder einfach als Sichtschutz, die Rollo Kollektion ist jeder Anforderung gewachsen. Neben dem klassischen Rollo stehen Dir im 3D Konfigurator auch Einbaukassetten- und Dachfensterrollos zur Verfügung. Eine passgenaue Planung mit einer großen Auswahl an ansprechenden Rollostoffen lässt keine Wünsche offen. Neben diversen Bedien- und Befestigungsarten stehen Dir je nach Modell auch einige Endkappenformen und Abschlussprofile zur Verfügung. Zudem können die Einbaukassetten unsichtbar in die Decke eingelassen werden und schaffen so einen flächenbündigen Übergang.

konfigurator webgl Variorollo kadeco

Vario Rollo

Vario Rollos erzeugen durch die Kombination aus zwei voreinander liegenden Stoffbahnen und einer großen Auswahl an exklusiven Stoffdesigns atemberaubende Lichtspiele und dienen vor allem als dekorativer Sicht- und Blendschutz. Im 3D Konfigurator stehen Dir zwei verschiedene Systeme zur Verfügung. Beim Trägerprofil liegt das gesamte Rollo offen und bietet somit eine einfache und flexible Montage. Beim Kassettensystem endet das Rollo in einer hochwertigen Aluminiumkassette, welche weiter individualisiert werden kann. Die Bedienung erfolgt bei beiden Systemen standardmäßig über eine Endlos-Bedienkette.

konfigurator webgl Jalousie kadeco

Jalousie

Ein fein justierbarer und langlebiger Sicht- und Sonnenschutz für den Innenbereich. Im 3D Konfigurator stehen Dir 3 verschiedene Arten zur Verfügung: Die Aluminiumjalousie, welche sich durch ihre Resistenz gegenüber Feuchtigkeit besonders für Bad und Küche eignet, die Holzjalousie, welche sich als handgefertigtes Einzelstück besonders nachhaltig gestaltet und die Jalousie aus Design-Filz, welche durch ihre einzigartige Optik ein echter Hingucker im Wohnzimmer ist und gleichzeitig Geräusche im Raum dämpft. Alle Modelle können mm genau geplant werden und verfügen darüber hinaus über weitere wertvolle Optionen.

konfigurator webgl Lamellenvorhang kadeco

Lamellenvorhang

Du bist auf der Suche nach dem idealen Blend- und Sonnenschutz für Dein Wohnzimmer oder Büro? Moderne Lamellenvorhänge sind vielseitig einsetzbar und eignen sich besonders für den Einsatz vor Fenstern oder für den Einbau in Fensternischen sowie gerade für große Fensterfronten. Im 3D Konfigurator steht Dir die Konfiguration von geraden, schrägen oder gebogene Anlagen zur Verfügung. Dank der einfachen Bedienung bspw. über eine Kette lässt sich der Lichteinfall durch die vertikalen Lamellen stufenlos regulieren.

konfigurator webgl Flaechenvorhang kadeco

Flächenvorhang

Du bist auf der Suche nach einem stylischen Sicht- und Sonnenschutz oder vielleicht doch einem Raumteiler? Dann ist der Flächenvorhang genau das Richtige für Dich. Die drei unterschiedlichen Modelle Freeline, Classicline und Slimline stehen Dir im 3D Konfigurator zur Verfügung und bieten Dir neben der mm-genauen Konfiguration viele verschiedene Stoffdesigns, Profilfarben, Montage- und Bedienarten. Laufschienen, Paneele und die eigentlichen Vorhänge können separat konfiguriert werden. Die Vorhänge bieten sogar die Möglichkeit verschiedene Stoffe miteinander zu kombinieren.

Metalle, Kunststoffe, Holz und viele Stoffdesigns

Neben einer exakten 3D Rekonstruktion der einzelnen Produkte mit der Gesamtheit an Konfigurationseigenschaften, lag KADECO eine realistische Nachbildung der verschiedenen Materialien, insbesondere der zahlreichen Stoffe sehr am Herzen. Jede Produktkategorie verfügt über einen dedizierten Stoffkatalog, indem Du Dir Deinen gewünschten Stoff anhand von realen Stoffmustern und Abbildungen aussuchen kannst. Wir nutzten diese Kataloge ebenfalls, um die Materialien inklusive ihrer physikalischen Eigenschaften nahezu exakt nachzubilden. 

konfigurator webgl Stoffe Faecher kadeco
konfigurator webgl 2D Produktdetail Plan kadeco

Alle Produkte an einem Ort

Nicht alle Produkte im 3D Konfigurator müssen anhand einer dynamischen 3D Konstruktion abgebildet werden. Ist eine 3D Rekonstruktion zu aufwändig oder unnötig, kommen beispielsweise 2D Konstruktionszeichnungen, Bilddaten oder im einfachsten Fall das Konfigurationspanel ohne visuelle Unterstützung zum Einsatz. Der Fachpartner kann somit auch diese Produkte individuell konfigurieren und über das Portal erwerben. Ein weiterer Vorteil ist, dass KADECO brandneue Produkte ad hoc im 3D Konfigurator zur Verfügung stellen kann.

Anbindung ERP-System

KADECO verwaltet alle unternehmensrelevanten Informationen in einem maßgeschneiderten ERP-System. Der 3D Konfigurator erhält über dieses ERP nahezu alle produktrelevanten Daten, die für die Konfiguration notwendig sind. Somit sind alle konfigurierten Produkte durch das ERP validiert und KADECO kann die Produktpflege in ihren eigenen Systemen vornehmen. Alle Änderungen werden automatisch an den 3D Konfigurator ausgeliefert.

Optionen

Der 3D Konfigurator erhält pro Produkt eine Liste an Eigenschaften und allen verfügbaren Optionen.

Validierung

Diese gewählten Eigenschaften werden über das ERP validiert. Somit können nur valide Produkte konfiguriert und erworben werden.

Preisberechnung

Hier werden nicht nur Einzelpreise, sondern auch wichtige Rabatte und Preisfaktoren ausgetauscht, damit immer ein aktuell gültiger Preis ausgegeben werden kann.

Fertigungsstückliste

Über das ERP-System werden Instruktionen übermittelt, die die Berechnung der Fertigungsliste pro Produkt beschreiben.

Lokalisierung

Damit wir die Konfiguration in mehreren Sprachen anbieten können, liefert das ERP-System die Übersetzungen aller Produkte.

Fehlerbehandlung

Ist eine Konfiguration nicht valide, wird dies über den Konfigurator mitgeteilt und ein Hinweis zur Fehlerbehandlung gegeben.

konfigurator webgl Webshop kadeco

Webshopanbindung

Das individuell zusammengestellte Produkt kann direkt an das Shopsystem des KADECO Portals übergeben und dort erworben werden. Hierzu wird der 3D Konfigurator über die Produktdetailseite des Onlineshops aufgerufen und beim Abschluss der Konfiguration werden alle relevanten Informationen zum Produkt an den Shop übermittelt. Zudem wird das Produkt direkt in den Warenkorb übertragen und ein Mini-Warenkorb des Shops über den 3D Konfigurator eingeblendet, der den Fachpartnern die Möglichkeit bietet, direkt in den Warenkorb zu wechseln und den Kauf abzuschließen oder weiter zu konfigurieren. 

konfigurator webgl Projekt Speichern kadeco

In Projekt speichern

Neben der direkten Übergabe des individuell zusammengestellten Produkts an den Warenkorb des Onlineshops, hat der Fachpartner auch die Möglichkeit, die gewünschte Konfiguration vorerst in einem Projekt abzuspeichern. Hierfür kann ein bestehendes Projekt ausgewählt oder ein neues Projekt über den 3D Konfigurator im Portal angelegt werden.

Usability Upgrades

Um den Fachpartner und den Kunden bei der Auswahl und Konfiguration seines Produktes optimal zu unterstützen, wurden neben der 3D Visualisierung und Konfiguration der Produkte auch verschiedene Features in den 3D Konfigurator integriert.

Light and Dark Mode

Um die Fachpartner dabei zu unterstützen, sich bei der Planung voll und ganz auf das Wesentliche konzentrieren zu können, wird das Produkt initial ohne 3D Umgebungsszene präsentiert. Hierbei wird das Produkt in einer einfachen hellen oder wahlweise dunklen Szene dargestellt und kann dank einer freien 360-Grad Rotation von allen Seiten und ohne Limitierung der Zoomstufe betrachtet werden. Vor allem bei der Vielzahl von hellen Stoffen bietet die dunkle Szene einen schönen Kontrast.

konfigurator webgl light mode kadeco konfigurator webgl dark mode kadeco

In Szene gesetzt

Der Fachpartner kann sich jederzeit eine zum Produkt passende 3D Umgebungsszene einblenden, um das Produkt in seiner natürlichen Umgebung zu zeigen und beispielsweise die verschiedenen Montagearten genauer erläutern zu können. In insgesamt 5 ansprechenden 3D Umgebungsszenen wird jedes Produkt originalgetreu an der korrekten Position verbaut – ganz egal ob innen, außen, freistehend, an der Wand oder in einer Nische. 

konfigurator webgl mit 3D Szene kadeco konfigurator webgl ohne 3D Szene kadeco
konfigurator webgl responsive Desgin kadeco

Responsive Design

Das Responsive Design ermöglicht, den 3D Konfigurator auf nahezu jedem Gerät zu nutzen, egal wann und egal wo. So kann der Fachpartner beispielsweise direkt beim Kunden oder dieser auch in entspannter Atmosphäre auf der Couch sein individuelles Wunschprodukt auf dem Handy oder Tablet planen. Das User Interface passt sich selbst auf kleinen Geräten perfekt an und bietet so eine einfache und komfortable Planung.

konfigurator webgl High Low Quality kadeco

High und low Quality

Neben der Anpassung des User Interface an das jeweilige Endgerät, prüft der 3D Konfigurator auch automatisch die Performance der Anwendung und die GPU-Auslastung auf dem Endgerät. Wenn es nicht leistungsstark genug für eine flüssige Wiedergabe ist, springt der 3D Konfigurator automatisch in den Low Quality Mode. In diesem Modus werden beispielsweise auf Schatten, Animationen und die Umgebungsszene verzichtet. So wird gewährleistet, dass auch auf älteren Geräten eine flüssige Konfiguration zur Verfügung gestellt werden kann.

Animationen

Wie der Kunde die Sicht- und Sonnenschutzfunktion seines Produkts steuern kann und wie sich dieses dabei genau verhält, ist am schnellsten mit einer aussagekräftigen Animation des 3D Modells erklärt. So lassen sich beispielsweise Markisen ein und ausfahren, Plissees zusammenfahren, Lamellen drehen und vieles mehr. Aus diesem Grund wurden die 3D Rekonstruktionen der Produkte zusätzlich mit detailgetreuen Animationen versehen und somit kann der Fachpartner seinem Kunden eindrucksvoll die Funktionsweise jedes einzelnen Produktes erläutern. 

Digitaler Assistent

Um die Möglichkeiten der Konfiguration und das Produkt an sich besser verstehen zu können, wurde ein Notification System, sprich Digitaler Assistent in den 3D Konfigurator integriert. Er wandelt die Fehlerbehebung bzw. Fehlermeldungen des ERP-Systems in für den Fachpartner und Kunden nachvollziehbare Informationen und Hinweise um und gibt diese im 3D Konfigurator priorisiert aus.

Interner Modus

Speziell für die Mitarbeiter von KADECO und die interne Handhabung wurden weitere Daten und Konfigurationsoptionen, aber auch Features in den 3D Konfigurator integriert, die ausschließlich über einen internen Modus zugänglich sind. Beispielsweise finden diese Features im Produktmarketing ihren Einsatz, um spezielle Visualisierungen der Produkte zu generieren. Hierfür können unter anderem individuelle Kameraeinstellungen gespeichert werden und auf andere Produkte angewandt werden. So können Bilder verschiedener Produkte oder Produktkonfigurationen aus der immer gleichen Perspektive erzeugt werden. 

konfigurator webgl interner externer modus kadeco
konfigurator webgl Config Engine 3D kadeco

Config Engine 

Das Leben könnte so leicht sein, aber leider konnte keine direkte Schnittstelle vom ERP-System zum 3D Konfigurator geschaffen werden, um alle produktrelevanten Daten abzurufen. Die Antwortzeiten, gerade die für die Validierung der Konfiguration, nahmen zu viel Zeit in Anspruch, um eine gute Usability im Frontend gewährleisten zu können. Damit die produktrelevanten Daten aus dem ERP-System genutzt werden können, wird anhand eines ERP-Exports ein Klon generiert, der alle Formeln und Berechnungen nachvollzieht und somit unsere Config Engine ersetzt. Durch die bereits vorkompilierten Daten sind Antwortzeiten in Echtzeit möglich.

konfigurator webgl construction Engine 3D kadeco

Construction Engine

Nahezu alle produktrelevanten Daten außer die eigentliche 3D Konstruktion der Produkte kommen aus dem ERP-System von KADECO. Für diese werden CAD Daten der Produkte mit allen alternativen Bauteilen aufbereitet und nicht als statische 3D Modelle, sondern als eine Art 3D Konstruktionsplan oder auch Baukastensystem in den 3D Konfigurator integriert. Diese dynamische Konstruktion wird an die Konfigurationsoptionen aus dem ERP gekoppelt und über diese gesteuert. Somit werden alle über das ERP-System validierten Zustände und Eigenschaften direkt am 3D Produkt visualisiert.

konfigurator webgl Physically Based Node Tree kadeco

Physically Based

KADECO verfügt über eine atemberaubende Stoffkollektion. Aber nicht nur die Menge raubt einem den Atem, sondern auch die verschiedenen visuellen Eigenschaften der Stoffe. Durch spezielle Shader und gelayerte Materialien wird nicht nur die Fernwirkung des Stoffes, sondern auch die detaillierte Darstellung des Webmusters und weitere visuelle Eigenheiten möglichst realistisch nachempfunden. So ist die Visualisierung von speziellen Mustern, Oberflächenstrukturen, Reflexionen, Transluzenzen, Transparenzen und verschiedenen Materialdicken kein Problem. 

Der schmale Grat 

Der schmale Grat zwischen Performance & visueller Qualität. Um eine gute Perfomance des 3D Konfigurators garantieren zu können, ist die Reduzierung der Draw Calls ein essentielles Thema. Ein Draw Call entspricht dabei einem Zeichenaufruf der Grafikkarte, indem definiert wird, was und wie es gezeichnet werden soll, d.h. um die entsprechende 3D Modelle samt Materialien und Texturen in 3D zu visualisieren. Je höher die visuelle Qualität, umso mehr Draw Calls sind notwendig. Um demnach eine hohe visuelle Qualität trotz weniger Draw Calls erreichen zu können, kommen verschiedene Techniken wie effizienter Umgang mit Ressourcen, Instancing und individuelle bzw. hybride Rendertechniken zum Einsatz. 

Combined Meshes, Materials & Textures

Jeder einzelne Bestandteil eines 3D Modells, auch 3D Mesh genannt, sowie jedes einzelne Material und jede Textur erzeugt einen Draw Call. Durch eine sinnvolle Zusammenfassung oder auch Kombination dieser Meshes, Materialien und Texturen, ist eine Reduzierung der Draw Calls möglich.  Jedoch sollte diese Zusammenfassung bedacht umgesetzt werden. So ist es beispielsweise nicht sinnvoll, Meshes miteinander zu kombinieren, die bei einer Animation getrennt voneinander bewegt werden müssen oder unterschiedliche Materialien tragen sollen. Lediglich bei unterschiedlichen Texturen, kann ein Textur Atlas Anwendung finden, der je nach 3D Mesh einen anderen Teil der Textur referenziert und visualisiert. 

Instancing

Eine weitere Möglichkeit Meshes und somit auch Draw Calls zu sparen, ist das Instancing. Hier werden sich wiederholende Meshes wie beispielsweise die Lamellen der Jalousie über nur ein 3D Mesh einer Lamelle dargestellt, welche in der 3D Szene lediglich als Duplikat zum Einsatz kommt. Diese Duplikate müssen nicht haargenau gleich sein, sondern können mit unterschiedlicher Position, Rotation und weiteren Parametern in der Szene tausendfach verwendet werden, ohne weitere Draw Calls zu erzeugen und die Performance des 3D Konfigurators negativ zu beeinflussen. Somit wird auch meist nicht von einem Duplikat oder Klon gesprochen, sondern von einer Instanz. 

Render on demand

Um eine hohe und detailreiche visuelle Qualität zu erreichen, müssen bestimmte visuelle Techniken und Effekte zum Einsatz kommen. Dafür ist es notwendig, die 3D Szene mit unterschiedlichen Anforderungen zu zeichnen und die entstandenen Ebenen der 3D Szene unterschiedlich miteinander zu verrechnen. Doch jede dieser Ebenen bedeutet wieder einen weiteren Draw Call, den die Grafikkarte berechnen muss. Deswegen ist es wichtig, nur die Ebenen berechnen zu lassen, die für den gewünschten visuellen Effekt zum Einsatz kommen sollen.

konfigurator webgl render on demand kadeco

Features

icon WebGL

WebGL

Der 3D Konfigurator wurde in WebGL umgesetzt und ist in gängigen Browsern verfügbar.

icon responsive

Responsive Design

Der 3D Konfigurator ist auf Smartphone, Tablet bis hin zum Desktop verfügbar.

icon unlimited

Milliarden Möglichkeiten

Die KADECO Produktpalette wurde samt Konfigurationslogik in den 3D Konfigurator integriert. 

icon validation

Validierung

Ist es konfigurierbar, so ist es produzierbar. Der Konfigurator lässt nur valide Konfigurationen zu.

icon translation

Mehrsprachigkeit

Der Konfigurator ist in mehreren Sprachen verfügbar und wartet auf die Integration von Weiteren.

icon synchronisation

Echtzeit Preise

Mit jeder Änderung der Konfiguration wird der Preis neu berechnet und gut sichtbar ausgegeben.

icon ERP

ERP

Die Anbindung an das ERP ermöglicht eine schnelle und valide Produktpflege 

icon performance

Performance

Um Draw Calls zu sparen, werden die Bauteile selbst bei Animationen instanziiert.