
OBI 3D Terrassenplaner
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.

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.

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.

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.

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.

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.

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.

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.

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.

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
WebGL
Der 3D Konfigurator wurde in WebGL umgesetzt und ist in den meisten Browsern verfügbar.
Responsive Design
Der 3D Konfigurator ist auf Smartphone, Tablet bis hin zum Desktop verfügbar.
Individuelle ID
Jede Konfiguration kann anhand einer ID gespeichert und wieder aufgerufen werden.
Validierung
Ist es konfigurierbar, so ist es produzierbar. Der Konfigurator lässt nur valide Konfigurationen zu.
Bemaßungssystem
Alle relevanten Maße und Winkel werden automatisch berechnet und in der 3D Szene visualisiert.
Line- & Text-Rendering
Mittels Line und Textrendering werden die Verlegepläne für Unterkonstruktion & Co. generiert.
Augmented Reality
Aus jeder gespeicherten Konfiguration kann auch ein AR Modell generiert werden.
Tools

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.

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.

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