webgl planungstool header obi

OBI 3D Terrassenplaner

  • e-Commerce
  • Planer
  • WebGL
  • Responsive

Mit 250 Millionen Kunden jährlich zählt OBI europaweit zu den ersten Adressen, wenn es um die Gestaltung des eigenen Zuhauses geht. Ob Profi oder Hobbyhandwerker, im Baumarkt mit dem orangen Biber findet jeder Renovierungswillige neben dem richtigen Werkzeug auch hochwertige Materialien und immer eine gute Beratung. Hierfür stehen kompetente Mitarbeiter zur Verfügung, die zudem von verschiedenen digitalen Planungstools unterstützt werden. Dazu gehört auch der von den redPlant Realtime Studios mitentwickelte 3D Terrassenplaner. 

 

Vorhandenes Bildmaterial wurde zur Verdeutlichung von Funktionen teilweise nachbearbeitet

Innovative Lösungen für Ihre Kunden

OBI hat es sich zum Ziel gesetzt, in Europa der führende Händler für das Gestalten des eigenen Zuhauses zu sein. Hierfür muss man sich besonders in den Bereichen Innovation, Technologie und Softwareentwicklung gut aufstellen und kontinuierlich weiterentwickeln. Dies übernimmt ein eigener Unternehmensbereich der OBI Gruppe, der neben der Entwicklung innovativer IT-Lösungen auch für die Informations- und Datenverarbeitung Sorge trägt und somit in unserer Zusammenarbeit für die Umsetzung des Backends verantwortlich war. 

Der Weg zur individuellen Terrasse

Der Weg zu Deiner individuellen Terrasse startet mit einem Berater in Deinem OBI Markt. Dieser kann über den OBI 3D Terrassenplaner im Handumdrehen direkt mit Dir eine neue Terrasse planen. Dabei stehen zahlreiche Möglichkeiten zur Individualisierung zur Verfügung - egal ob Größe, Bodenbelag, Einfassung oder Bauweise, alles kann speziell auf Deine Wünsche abgestimmt werden. Am Ende der digitalen Planung stehen diverse Hilfsmittel wie eine detaillierte Materialliste und verschiedene Ansichten der Planung zur Verfügung, damit Du Dein Projekt direkt umsetzen kannst.

Welche Form ist gewünscht?

Die Planung einer neuen Terrasse beginnst Du immer mit der Auswahl der gewünschten Terrassenform. Hier stehen Dir die gängigsten und am häufigsten vertretenen Grundformen wie Rechteck, L-Form und U-Form zur Verfügung. Hast Du Dich für eine Fläche entschieden, startest Du jeweils mit einer bereits vorkonfigurierten Terrasse in den statistisch am meisten verwendeten Maßen, damit Du direkt loslegen kannst. 

webgl planungstool freiform zeichnen obi

Noch nicht die Richtige dabei?

Je nach individuellen Wünschen und örtlichen Gegebenheiten kannst Du mit den vorgegebenen Grundformen auch mal an Deine Grenzen stoßen. Zu diesem Zweck wurde ein Zeichentool für die Erstellung individueller Flächen integriert, mit dem auch die noch so verrückteste Form mit wenigen Klicks erstellt werden kann. Du setzt einfach die Punkte der gewünschten Form, und der Planer verbindet diese automatisch zu einer Fläche, die im Anschluss die gleichen Optionen für die Bearbeitung bietet wie eine Grundform. 

Exakt anpassen ...

Unabhängig davon, ob Du eine der Grundformen verwendest oder doch eine individuelle Form gezeichnet hast, eine spätere Anpassung der Fläche ist Dir jederzeit möglich. Je nachdem wie es Dir beliebt, kannst Du die Form der Terrassenfläche durch das direkte Verschieben der Punkte und Kanten in der 3D Szene verändern oder Du bestimmst durch Eingabe exakter Seitenlängen die Maße der Terrasse. 

...inklusive technischer Unterstützung ...

Für die Bearbeitung Deiner Fläche stehen Dir verschiedene Hilfsmittel zur Verfügung. Neben einem dynamischen Hintergrundraster, das sich anhand des Zoomgrades verfeinert, kannst Du außerdem zum exakten Ausrichten von Punkten und Kanten auf verschiedene Snappingverhalten zurückgreifen. Damit Du die wichtigsten Aspekte Deiner Fläche immer im Blick behältst, kannst Du Dir außerdem sämtliche Seitenlängen bis hin zu einzelnen Winkeln jederzeit ein- und auch wieder ausblenden. 

webgl planungstool tools kante verschieben obi

Verschieben von Kanten

Zum Verschieben einer Kante selektierst Du die Kante mit der linken Maustaste und ziehst sie dann in die gewünschte Richtung. Währenddessen werden lediglich die angrenzenden Kantenlängen eingeblendet. 

webgl planungstool tools punkt verschieben obi

Verschieben von Punkten

Zum Verschieben eines Punktes selektierst Du den Punkt mit der linken Maustaste und ziehst ihn dann in die gewünschte Richtung. Währenddessen werden lediglich die angrenzenden Kantenlängen und Winkel angezeigt. 

webgl planungstool tools punkt einfuegen obi

Punkte einfügen

Das Einfügen eines Punktes ermöglicht Dir eine Kante zu unterteilen. Durch Klicken auf eine beliebige Position auf der Kante öffnet sich ein Menü, was einen neuen Punkt genau an dieser Position einfügt. 

webgl planungstool tools kantenlaenge obi

Angabe von Kantenlängen

Wählst Du direkt das Label der Bemaßung an der Kante an, hast Du die Möglichkeit, ein exaktes Maß einzugeben. Außerdem kannst Du Dich entscheiden, in welche Richtung die Kante sich verlängern oder verkürzen soll. 

webgl planungstool tools raster obi

Dynamisches Hilfsraster

Im Hintergrund Deiner Fläche liegt ein quadratisches Raster, welches Dir eine grobe Orientierung geben soll. Je nach Zoomgrad passt sich die Feinheit des Rasters dynamisch an, um auch feinste Anpassungen umsetzen zu können. 

webgl planungstool tools snapping obi

Snapping

Um Punkte und Kanten exakt aufeinander abzustimmen, wurde Snapping integriert. Es ermöglicht Dir einen Punkt oder eine Kante exakt auf die Höhe eines anderen Punktes oder im 90° Winkel zu diesem zu setzen.   

webgl planungstool tools masse im blick obi

Alle Maße im Blick

Für den bestmöglichen Überblick werden Dir alle wichtigen Daten wie die Größe der Gesamtfläche in m² und die Längen der einzelnen Kanten sowie die Gradzahl jedes Winkels, der nicht einem 90° Winkel entspricht, ausgegeben. 

webgl planungstool tools relevante masse obi

Nur relevante Maße

Während des Verschiebens von Kanten und Punkten werden Dir jeweils nur die aktuell relevanten Längen und Winkel angezeigt. Wenn diese bei der Bearbeitung stören sollten, kannst Du sie jederzeit ausblenden. 

... und automatischer Fehlervermeidung & Korrektur

Außerdem verfügt der 3D Planer über Sicherheitsmechanismen, die das Erstellen invalider Flächen verhindern oder diese direkt wieder korrigieren. Sehr offensichtliche Fehler wie das Überkreuzen von Kanten werden direkt beim Bearbeiten markiert und prompt korrigiert. Um weitere Fälle zu prüfen, werden die Punkte der Fläche in ihrer exakten Reihenfolge an das Backend geschickt. Sollten hier weitere produktspezifische Problematiken erkannt werden, stellt der 3D Planer die letzte valide Fläche wieder her.

Kommunikation ist alles

Während der Erstellung Deiner gewünschten Fläche werden alle Punkte in ihrer erstellten Reihenfolge sowie die entsprechenden Konfigurationsoptionen direkt mit dem OBI Calculation Service ausgetauscht, um den ausgewählten Belag, die Unterkonstruktion sowie die Einfassungen in den richtigen Schnitten zu erhalten. Wir nehmen diese Schnitte und rekonstruieren unter Einbeziehung der 3D Modelle daraus die exakte 3D Ansicht der Produkte. 

Eine Frage der Perspektive

Eine orthografische und schlichte Ansicht ist perfekt für die Planung einer zweidimensionalen Fläche. Tatsächlich planst Du aber bereits in 3D und somit ist auch der Wechsel in eine 3D Ansicht unproblematisch möglich. In dieser kannst Du die Beschaffenheit des Bodenbelags sehr viel besser bewerten und die nachgebildeten physikalischen Eigenschaften der verschiedenen Materialien kommen auch hier erst richtig zur Geltung. Damit Du Dir Deine Terrasse bereits besser im eigenen Garten vorstellen kannst, haben wir eine kleine blühende Rasenfläche hinzugefügt. 

Das richtige Topping für deine Terrassenfläche

Jede Fläche wird standardmäßig bereits mit einer vordefinierten Konfiguration versehen. Hierzu gehört auch der entsprechende Belag der Terrasse. Die riesige Auswahl an Terrassendielen aus Holz und WPC oder Pflaster und Platten, jeweils aus Naturstein oder Beton oder auch Feinsteinzeug sowie Kies, lassen wirklich keinerlei Wünsche offen. Alle Materialien werden anhand ihres Verlegeplans originalgetreu dargestellt.

Belag ist nicht gleich Belag

Je nach Wahl des Bodenbelags bietet dieser weitere Konfigurationsoptionen. So kann eine Holzdiele beispielsweise als Englischer oder Parallelverband verlegt werden und zudem auch die Richtung der Verlegung angegeben werden. Darüber hinaus kann die Verlegrichtung auch direkt an einer Kante bestimmt werden, welche somit die Startkante für die Verlegung des jeweiligen Terrassenbelags definiert. 

Setz´ Deiner Terrasse Grenzen 

Einfassungen schützen Deine Terrasse vor dem Verrutschen und können verschiedene Gartenbereiche sichtbar voneinander trennen. Auch hier steht Dir eine große Auswahl an Materialien zur Verfügung. Du kannst im 3D Planer mit einem Klick alle Kanten mit Einfassungen versehen oder gezielt Kanten auswählen, die eine Einfassung benötigen. Oft sind es die Kanten zum Haus, die ohne Einfassung direkt an das Haus angebunden werden. 

webgl planungstool es zaehlen auch die inneren werte obi

Es zählen auch die inneren Werte

Selbst wenn die Unterkonstruktion am Ende nicht zu sehen sein wird, so ist sie doch im wahrsten Sinne ein tragender Bestandteil Deiner Konfiguration und es schadet nicht, einen Blick ins Innere zu riskieren. Im Bereich Bauweise stehen Dir verschiedene Aufbauten zur Auswahl, die Dir direkt im 3D Planer visualisiert werden. Hierbei kannst Du zwischen einer gezielten Ansicht von lediglich der Unterkonstruktion oder einer gemixten Ansicht von Belag und Unterkonstruktion wählen, welche das Zusammenspiel von Bodenbelag und Unterkonstruktion besser verdeutlicht. 

webgl planungstool beratungscenter obi

Planen mit Backupplan

Fühl Dich bei der Planung so frei wie möglich und traue Dich auch bewusst etwas anderes auszuprobieren. Dank der integrierten Zustandshistorie kannst Du mit den Undo- und Redo-Buttons zwischen den einzelnen Schritten Deiner Planung hin und her springen. So verlierst Du keinen Zustand Deiner Planung. Natürlich ist es auch möglich, Deine Planung dauerhaft zu speichern. Für eine schnelle visuelle Identifikation wird außerdem ein Bild der aktuellen Planung hinzugefügt.

webgl planungstool export verlegeplan obi

Abschluss und Export

Wenn Du mit Deiner Terrassenplanung zufrieden bist, schließt Du diese ab und es werden automatisch alle wichtigen planungsrelevanten Unterlagen exportiert. Neben einer ausführlichen Materialliste, die alle Artikel auflistet, die für den Bau Deiner Terrasse erforderlich sind, erhältst Du zudem Pläne für die Verlegung des Bodenbelags und der Unterkonstruktion. Solltest Du später noch Änderungswünsche haben, kein Problem. Deine exportierte Planung ist nun nur noch zur Ansicht vorhanden, aber es ist Dir möglich, mit nur wenigen Klicks eine Kopie Deiner Planung zu erstellen, die dann erneut bearbeitet werden kann.

webgl planungstool planung to go obi

3D Planung to go

Unter den planungsrelevanten Daten, die exportiert werden, befindet sich außerdem ein AR Modell der gespeicherten Planung. Bei Export wird hierzu ein AR Modell aus der Terrassenplanung generiert und über einen Link zur Verfügung gestellt. Hiermit hast Du die Möglichkeit, ein maßstabsgetreues 3D Modell Deines Projektes live in Deinen Garten zu projizieren und dieses vorab in 360° zu begehen.

konfigurator webgl redPlant insights meine stegplatten

Ab in die OBI Welt

Für die Zusammenarbeit war es essenziell, sich nahtlos in die komplexe Systemlandschaft, das Ökosystem von OBI zu integrieren. Hierzu gehörten nicht nur die Einarbeitung sowie Einrichtung in der OBI Infrastruktur bezüglich Proxy, Versionierungssystem und Deployment, sondern auch das Vernetzen unseres Frontends mit bestehenden OBI Tools hinsichtlich bereits bestehenden Authentifizierungs-, Tracking- und digitalen Assistentssystemen.

webgl planungstool datengetrieben obi

Schön datengetrieben

Die gesamten Inhalte des Frontends können vom Backend gesteuert werden. So gehörte nicht nur die nahtlose Anbindung der Assets und der Design Pattern Library zu unseren Aufgaben, sondern auch das User Interface des 3D Planers musste so implementiert werden, dass es komplett datengetrieben vom Backend aufgebaut und verändert werden kann. Jede Änderung des Users durchläuft vorerst das Backend und liefert uns im Frontend nur die aktuell validen Werte.

webgl planungstool mesh cutting obi

Mesh Cutting Algorithmus

Um alle möglichen Konstellationen von Terrasse inklusive Belag, Einfassung und Unterkonstruktion realistisch abbilden zu können, müssen wir analog zur Realität die Dielen, Fliesen & Co. in ihrer Dimension zuschneiden können. Hierzu wurde ein Mesh Cutting Algorithmus implementiert, der es uns ermöglicht, bestehende 3D Modelle anhand von gelieferten Koordinaten zuzuschneiden und die offenen Kanten wieder mit der entsprechenden Oberflächentextur zu schließen.

webgl planungstool worker obi

Ausgelagert im Worker

Sind Algorithmen zu rechenintensiv, lagert man diese in einen Worker aus. Dies ist ein separater Prozess, der die Userinteraktion nicht beeinflusst und so trotz rechenintensiver Algorithmen eine flüssige Userinteraktion garantiert. Somit haben wir nicht nur den Mesh Cutting Algorithmus in einen Worker ausgelagert, sondern auch die Generierung von den verschiedenen Screenshots, bei denen immer die 3D Szene mit den entsprechenden Einstellungen geöffnet und ein Rendering erstellt wird.

webgl planungstool mesh spread obi

Mesh Spread Algorithmus

Für die Positionierung der Grasbüschel und Blümchen haben wir einen Mesh Spread Algorithmus implementiert, der anhand der Größe der Terrassenfläche eine definierte Anzahl an 3D Modellen generiert und diese um die Fläche verteilt. Hierbei muss dem Algorithmus die Terrassenfläche bekannt sein, da die Vegetation direkt angrenzend an die Form positioniert wird, die Du erstellt hast. Da wir für unsere End to End Tests auch auf das visuelle Abgleichen von erwartungsgemäß gleichen Zuständen zurückgreifen, muss die Vegetation zudem exakt reproduzierbar sein, um keine Fehlschläge im Testing durch zufällig verteilte Meshes zu provozieren.

Nichts geht über sinnvolle Tests

Um den OBI Mitarbeitern eine maximal stabile Anwendung bieten zu können, haben wir umfangreiche Tests in den 3D Planer integriert. Dabei wurde nicht nur der Happy Path, also die wichtigsten Funktionen der Terrassenplanung automatisch durchgetestet, sondern auch visuelle Inhalte der Konfiguration durch automatisch generierte Screenshots visuell miteinander abgeglichen.

Features

icon WebGL

WebGL

Der 3D Konfigurator wurde in WebGL umgesetzt und ist in den meisten Browsern verfügbar.

icon responsive

Responsive Design

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

icon diamond id

Individuelle ID

Jede Konfiguration kann anhand einer ID gespeichert und wieder aufgerufen werden.

icon validation

Validierung

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

icon synchronisation

Datengetrieben

Das Frontend ist datengetrieben aufgebaut und wird von den Daten des Backends manipuliert.

icon measurements

Bemaßungssystem

Alle relevanten Maße und Winkel werden automatisch berechnet und in der 3D Szene visualisiert.

icon line text rendering

Line- & Text-Rendering

Mittels Line und Textrendering werden die Verlegepläne für Unterkonstruktion & Co. generiert.

icon ar augmented reality

Augmented Reality

Aus jeder gespeicherten Konfiguration kann auch ein AR Modell generiert werden.

Tools

Insights RedCore 3D icon

redCore

Der elementare Kern unserer 3D Anwendungen ist redCore, unsere 3D Renderengine, die speziell auf die Bedürfnisse des Webs und der Konfiguration ausgerichtet ist.

Insights StateEngine 3D icon

State Engine

Das Herzstück eines jeden 3D Konfigurators ist unsere State Engine. Sie garantiert zu jeder Zeit, dass ein valider Zustand des Produktes ausgeliefert wird. 

Insights Cloudservice 3D icon

Cloud Service

Unser CloudService generiert on Demand verschiedene Formate unserer Konfigurationen und stellt diese dem User beispielsweise als AR Modell zur Verfügung.