OBI 3D terrace planner
With 250 million customers annually, OBI is one of the top destinations in Europe for home improvement. Whether you're a professional or a DIY enthusiast, the hardware store with the orange beaver offers everything renovation enthusiasts need: the right tools, high-quality materials, and expert advice. Skilled employees are on hand to provide assistance, supported by various digital planning tools. Among them is the 3D terrace planner, co-developed by redPlant Realtime Studios.
Innovative solutions for your customers
OBI aims to become Europe's leading retailer for home improvement. To achieve this, the company places a strong focus on innovation, technology, and software development, ensuring continuous progress in these areas. A dedicated division within the OBI Group takes on this responsibility, overseeing the development of innovative IT solutions as well as information and data processing. In our collaboration, this division was responsible for implementing the backend.
Your path to an individual terrace
The path to your custom terrace begins with an advisor at your local OBI store. Using the OBI 3D Terrace Planner, they can quickly design a new terrace with you. Numerous customization options are available—whether it’s the size, flooring, edging, or construction style, everything can be tailored to your preferences. At the end of the digital planning process, helpful tools such as a detailed materials list and various views of the design are provided, so you can start your project right away.
Which form is desired?
Planning a new terrace always starts with selecting your desired terrace shape. You can choose from the most common basic shapes, such as rectangular, L-shaped, and U-shaped designs. Once you’ve decided on a shape, you begin with a pre-configured terrace in the most statistically common dimensions, allowing you to get started right away.
Still haven't found the right one?
Depending on your individual preferences and the specific conditions of your space, the predefined basic shapes might not always meet your needs. For this purpose, a drawing tool has been integrated, allowing you to create custom shapes effortlessly—even the most unconventional designs can be created with just a few clicks. Simply set the points of your desired shape, and the planner will automatically connect them to form an area. This custom shape then offers the same editing options as a standard basic shape.
Customize exactly ...
Whether you use one of the basic shapes or create a custom design, you can adjust the terrace layout at any time. Depending on your preference, you can modify the shape by directly moving the points and edges in the 3D scene or by specifying exact side lengths to set the terrace's dimensions precisely.
...including technical support ...
Various tools are available to help you edit your terrace layout. In addition to a dynamic background grid that adjusts based on the zoom level, you can use different snapping options to precisely align points and edges. To keep key aspects of your layout in focus, you can also toggle the display of all side lengths and individual angles on or off at any time.
Moving edges
To move an edge, select the edge with the left mouse button and drag it in the desired direction. During this process, only the lengths of the adjacent edges will be displayed.
Moving points
To move a point, select the point with the left mouse button and drag it in the desired direction. During this process, only the lengths of the adjacent edges and the angles will be displayed.
Insert points
Inserting a point allows you to divide an edge. By clicking on any position along the edge, a menu will open that inserts a new point precisely at that location.
Specification of edge lengths
If you click directly on the dimension label of an edge, you have the option to input an exact measurement. Additionally, you can decide in which direction the edge should extend or shorten.
Dynamic auxiliary grid
In the background of your layout, there is a square grid that provides a general orientation. Depending on the zoom level, the grid's precision dynamically adjusts to allow for even the finest adjustments.
Snapping
To align points and edges precisely, snapping functionality has been integrated. It allows you to place a point or an edge exactly at the height of another point or at a 90° angle to it.
All dimensions at a glance
For the best possible overview, all important data is displayed, such as the total area size in square meters, the lengths of the individual edges, and the degree of any angles that are not 90°.
Only relevant dimensions
While moving edges and points, only the currently relevant lengths and angles are displayed. If they interfere with the editing process, you can hide them at any time.
... and automatic error prevention & correction
Additionally, the 3D planner has safety mechanisms in place to prevent the creation of invalid shapes or automatically correct them. Obvious errors, such as crossing edges, are immediately highlighted and corrected during editing. To check for further issues, the points of the layout are sent to the backend in their exact order. If any product-specific problems are detected, the 3D planner will restore the last valid layout.
Communication is everything
During the creation of your desired layout, all points and their corresponding configuration options are directly exchanged with the OBI Calculation Service. This ensures that the selected flooring, substructure, and edging are provided with the correct cuts. We take these cuts and, by incorporating the 3D models, reconstruct the exact 3D view of the products.
A question of perspective
An orthographic and simple view is perfect for planning a two-dimensional layout. However, you are actually planning in 3D, so switching to a 3D view is seamless. In this view, you can assess the texture of the flooring much better, and the recreated physical properties of the various materials are more prominently displayed. To help you better visualize your terrace in your own garden, we’ve added a small blooming grass area.
The right topping for your patio area
Each layout is already provided with a predefined configuration by default, including the corresponding terrace flooring. The vast selection of decking materials, such as wood and WPC, as well as paving stones and slabs made from natural stone, concrete, or porcelain stoneware, and even gravel, leaves no wishes unfulfilled. All materials are displayed in their original layout, ensuring an accurate representation based on their installation plan.
Not all coverings are the same
Depending on the choice of flooring, additional configuration options are available. For example, a wooden deck board can be laid in either an English or parallel pattern, and the direction of installation can also be specified. Furthermore, the installation direction can be determined directly along an edge, which then defines the starting edge for laying the respective terrace flooring.
Set boundaries for your terrace
Edgings protect your terrace from shifting and can visibly separate different garden areas. A wide variety of materials is available for this purpose. In the 3D planner, you can add edgings to all edges with a single click or selectively choose edges that need an edging. Often, it is the edges connected to the house that are left without an edging and are directly attached to the house.
Inner values also count
Even though the substructure won't be visible in the end, it is a crucial component of your configuration, and it's worth taking a look inside. In the construction section, various structures are available, which are directly visualized in the 3D planner. You can choose between a focused view of just the substructure or a mixed view of both the flooring and the substructure, which better highlights the interaction between the floor covering and the substructure.
Planning with Backupplan
Feel as free as possible during the planning process and don't hesitate to try something different. Thanks to the integrated history feature, you can easily jump between steps in your planning using the Undo and Redo buttons, ensuring that no progress is lost. Of course, it's also possible to permanently save your plan. To help with quick visual identification, an image of the current plan is also added.
Closing and export
When you're satisfied with your terrace design, you can finalize it, and all relevant planning documents will be automatically exported. In addition to a detailed materials list, which includes all items needed for the construction of your terrace, you will also receive plans for laying the flooring and the substructure. If you later have any changes to make, no problem. Your exported plan will now be available for viewing only, but you can easily create a copy of your design with just a few clicks, which can then be edited again.
3D planning to go
Among the planning-related data that is exported, there is also an AR model of the saved design. When exported, an AR model of the terrace plan is generated and made available via a link. This allows you to project a scale model of your project live into your garden and walk through it in 360° before finalizing your design.
Off to the OBI world
For the collaboration, it was essential to seamlessly integrate into the complex system landscape, the OBI ecosystem. This included not only the familiarization and setup within the OBI infrastructure concerning proxies, version control systems, and deployment, but also connecting our frontend with existing OBI tools, particularly regarding already established authentication, tracking, and digital assistant systems.
Beautifully data-driven
The entire frontend content can be controlled by the backend. This not only involved the seamless integration of assets and the design pattern library but also required the implementation of the 3D planner's user interface in such a way that it could be entirely data-driven and built and modified by the backend. Any change made by the user first passes through the backend, and only the currently valid values are provided to the frontend.
Mesh cutting algorithm
To realistically represent all possible configurations of a terrace, including flooring, edging, and substructure, we need to be able to cut the boards, tiles, and other materials to their correct dimensions, just like in reality. For this purpose, a mesh cutting algorithm was implemented, allowing us to trim existing 3D models based on provided coordinates and close the exposed edges with the corresponding surface texture.
Outsourced in the worker
When algorithms are too computationally intensive, they are outsourced to a worker. This is a separate process that does not affect user interaction, ensuring smooth performance even with resource-heavy algorithms. As a result, we have not only offloaded the mesh cutting algorithm to a worker but also the generation of various screenshots, where the 3D scene is always opened with the corresponding settings, and a rendering is created.
Mesh Spread Algorithm
For positioning the grass clumps and flowers, we implemented a mesh spread algorithm that generates a defined number of 3D models based on the size of the terrace area and distributes them across the surface. The algorithm needs to know the exact terrace area, as the vegetation is positioned directly adjacent to the shape you’ve created. Since we rely on visual comparisons of expected identical states for our end-to-end testing, the vegetation must also be reproducible with precision to avoid testing failures caused by randomly distributed meshes.
Nothing beats meaningful tests
To provide OBI employees with a highly stable application, we integrated extensive testing into the 3D planner. Not only were the happy path—i.e., the most important functions of terrace planning—automatically tested, but the visual content of the configuration was also compared visually through automatically generated screenshots. This ensured that the results aligned with expectations and maintained consistency throughout the process.
Features
WebGL
The 3D Configurator has been implemented in WebGL and is available in common browsers.
Responsive Design
The 3D Configurator is available on smartphones, tablets, and desktops.
Individual ID
Each configuration can be saved and recalled using an ID.
Validation
If it is configurable, it is producible. The configurator only allows valid configurations.
Data-driven
Das Frontend ist datengetrieben aufgebaut und wird von den Daten des Backends manipuliert.
Dimensioning system
All relevant dimensions and angles are automatically calculated and visualized in the 3D scene.
Line & text rendering
Through line and text rendering, the installation plans for substructures and other components are generated.
Augmented reality
An AR model can also be generated from each saved configuration.
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.