OBI 3D terrace planner
With 250 million customers annually, OBI is one of the leading destinations in Europe for home improvement and design. Whether you're a professional or a DIY enthusiast, the hardware store with the orange beaver logo offers not only the right tools but also high-quality materials and excellent advice. This advice is provided not only by knowledgeable staff but also through various planning tools, including the 3D Terrace Planner co-developed by redPlant Realtime Studios.
Innovative solutions for your customers
OBI aims to become the leading retailer in Europe for home design and improvement. To achieve this, the company places a strong focus on innovation, technology, and software development, ensuring continuous progress in these areas. This responsibility lies with OBI Smart Technologies, which not only develops innovative IT solutions but also manages information and data processing for OBI. In our collaboration, OBI Smart Technologies handled the development of the backend, while we took charge of the frontend development for the 3D planning tool.
Your path to an individual terrace
As the name suggests, the OBI 3D Terrace Planner is a configurator that allows you to plan your terrace quickly and easily. It offers numerous customization options—whether it’s size, flooring, edging, or construction style, everything can be tailored to your specific preferences. At the end of your digital planning, you’ll receive helpful tools such as a detailed material list and various views of your design, enabling you to bring your project to life immediately afterward.
Which form is desired?
Planning a new terrace always begins with selecting your desired terrace shape. You can choose from the most common and widely used basic shapes, such as rectangular, L-shape, and U-shape. Once you’ve chosen a layout, you’ll start with a preconfigured terrace featuring the most statistically common dimensions, allowing you to dive right into the design process.
Still haven't found the right one?
Depending on your personal preferences and the specific conditions of your space, the predefined basic shapes might sometimes fall short. To address this, a drawing tool has been integrated, allowing you to create custom shapes with ease - even the most unconventional designs can be achieved with just a few clicks. Simply set the points of your desired shape, and the planner automatically connects them into a surface. This custom surface then offers the same editing options as any predefined 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 of the terrace by directly moving points and edges in the 3D scene or by entering exact side lengths to define the dimensions of your terrace.
...including technical support ...
Various tools are available to help you edit your terrace layout. In addition to a dynamic background grid that adjusts in precision based on the zoom level, you can use different snapping behaviors for precise alignment of points and edges. To ensure you always have an overview of the most important aspects of your design, you can toggle the display of all side lengths and even individual angles on or off as needed.
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
The 3D Planner also includes safety mechanisms that prevent the creation of invalid surfaces or automatically correct them. Obvious errors, such as crossing edges, are immediately highlighted during editing and corrected promptly. To check for further issues, the points of the surface are sent to the backend in their exact sequence. If any additional product-specific issues are detected, the 3D Planner will restore the last valid surface.
Communication is everything
During the creation of your desired surface, all points are exchanged in their created sequence, along with the corresponding configuration options, directly with the OBI Calculation Service. This ensures that the selected flooring, substructure, and edging are provided in the correct cuts. We then 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 surface. However, you are already planning in 3D, so switching to a 3D view is seamlessly possible. In this view, you can better assess the texture of the flooring, and the recreated physical properties of the various materials truly come into their own. To help you better imagine your terrace in your own garden, we’ve added a small blooming lawn area.
The right topping for your patio area
Each surface is automatically provided with a predefined configuration, including the corresponding terrace flooring. The vast selection of decking options, including wood and WPC boards, paving stones and slabs made of natural stone or concrete, as well as porcelain stoneware and gravel, leaves no wish unfulfilled. All materials are represented faithfully according to their laying plan.
Not all coverings are the same
Depending on the choice of flooring, additional configuration options are available. For example, a wooden board can be laid in either an English or parallel bond pattern, and the laying direction can also be specified. Furthermore, the direction of laying can be defined directly along an edge, which then becomes the starting edge for the installation of the respective terrace flooring.
Set boundaries for your terrace
Edging protects your terrace from shifting and can visually separate different garden areas. A wide variety of materials is available for this purpose. In the 3D Planner, you can add edging to all edges with a single click, or you can specifically select the edges that require edging. Often, it’s the edges adjacent to the house that are directly connected to the building without edging.
Inner values also count
Even though the substructure may not be visible in the end, it is literally a crucial part of your configuration, and it’s helpful to take a look inside. In the construction section, various structures are available for selection, 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 illustrates the interplay between the flooring and the substructure.
Planning with Backupplan
Feel as free as possible during your planning and don't hesitate to try something different. Thanks to the integrated history feature, you can easily jump between the steps of your planning using the Undo and Redo buttons, ensuring you never lose a step in your design. Of course, it’s also possible to save your plan permanently in the OBI Consulting Center. For quick visual identification of your plan, a current image of your configuration is saved and also transferred to the Consulting Center.
Closing and export
Once you're satisfied with your terrace design, you can finalize it, and all the relevant planning documents will be automatically exported to the Consulting Center. In addition to a detailed material list that includes all the items required for building your terrace, you'll also receive plans for laying the flooring and substructure. If you later have any changes, no problem. Your exported plan is now available for viewing only, but you can easily create a copy of it with just a few clicks, allowing you to make further edits.
3D planning to go
In addition to the planning-related data exported to the Consulting Center, an AR model of the saved design is also included. When exported, an AR model is generated from the terrace plan and made available via a link. This allows you to project a scaled 3D model of your project live into your garden and explore it in 360° beforehand.
Off to the OBI world
For collaboration with OBI Smart Technologies, it was essential to seamlessly integrate into OBI’s entire system landscape. This involved not only familiarizing ourselves with and setting up OBI's infrastructure regarding proxy, versioning systems, and deployment but also connecting our frontend with OBI’s existing tools, including authentication, tracking, and digital assistant systems.
Beautifully data-driven
The entire frontend content can be controlled by the backend. This not only included the seamless integration of assets and the design pattern library but also the implementation of the 3D Planner’s user interface, which had to be designed in such a way that it could be entirely data-driven and built/modified by the backend. Every change made by the user first goes through the backend, providing us in the frontend with only the currently valid values.
Mesh cutting algorithm
To realistically depict all possible terrace configurations, including flooring, edging, and substructure, we need to be able to cut the planks, tiles, and other materials to their dimensions, just like in real life. To achieve this, a mesh cutting algorithm was implemented, allowing us to trim existing 3D models based on provided coordinates and then close the open 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 doesn't affect user interaction, ensuring smooth performance even with resource-heavy algorithms. As a result, we not only outsourced the mesh cutting algorithm to a worker, but also the generation of various screenshots, where the 3D scene is 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 terrace area because the vegetation is positioned directly adjacent to the shape you've created. Since we also rely on visual comparison of expected identical states for our end-to-end tests, the vegetation must be exactly reproducible to avoid failures in testing caused by randomly distributed meshes.
Nothing beats meaningful tests
To provide OBI employees with the most stable application possible, we integrated extensive tests into the 3D Planner. Not only were the key functions of terrace planning, the "happy path," automatically tested, but the visual content of the configuration was also compared visually through automatically generated screenshots to ensure consistency.
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 is assigned an ID and can be retrieved at any time.
Validation
If it is configurable, it is producible. The configurator only allows valid configurations.
Real-time data
Prices and all other dynamic parameters are calculated in real time.
Dimensions
All relevant dimensions and angles can be easily shown and hidden.
Line & text rendering
Labels and dimensions are generated and displayed directly in the 3D scene using optimized line and text rendering.
Augmented reality
The configurator has an AR viewer.
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.