konfigurator webgl header schweng terrassenkonfigurator

Terrace roof 3D configurator

  • e-Commerce
  • Configurator
  • WebGL
  • Responsive

The company Schweng from Butzbach, with a wide product portfolio of canopies, patio roofs, carports, sunrooms, and awnings, is one of the leading companies in the distribution, installation, and manufacturing of roofing systems. It currently operates nearly 20 stores across Germany and Austria. To enhance its online presence in the area of personalized planning, redPlant Realtime Studios has developed a 3D configurator that can be used both by end customers without prior knowledge and by employees for the planning of roofing systems. 

To the configurator

konfigurator webgl alles aus einer hand schweng terrassenkonfigurator

Everything from a single source ...

Settling for the status quo? Unthinkable at Schweng. The company is constantly evolving, optimizing its processes and product portfolio to always offer its customers the best products and maximum comfort. Schweng supports its customers every step of the way: from planning and manufacturing to sales and installation. This comprehensive service is now complemented by a digital planning tool, which enables fast, easy, and independent planning of Schweng products 24/7. 

konfigurator webgl responsive design schweng terrassenkonfigurator

... and always there

Ease of use and high availability are, of course, key when using a configurator. Thanks to the Responsive Design of the 3D configurator, you can plan your patio roof from anywhere—whether on a tablet, smartphone, or desktop. The 3D configurator, along with its user interface and 3D scene, adapts to all current screen sizes and device types. And with the ability to save your individual configuration, you can now take your Schweng roof with you wherever you go.

konfigurator webgl maximalkonfiguration schweng terrassenkonfigurator

One source makes so much possible

The 3D configurator is specifically used for products where manual assembly by the customer is not possible. The origin of the various 3D configurators and 3D products is the S400, a patio roof with a mono-pitch roof design. Since the construction and profiles used in the products are similar, a comprehensive blueprint with all configuration options was created based on the S400, and various products with mono-pitch and flat-roof designs were derived from it. Over time, this led to the development of 3D configurators for different canopies, patio roofs, and carports. 

konfigurator webgl von grund auf gut schweng terrassenkonfigurator

Good from the ground up

When planning your roof, you have various options at your disposal, neatly organized into categories. In the "Construction" category, you determine the basic structure of your wall-mounted or freestanding roof by specifying different dimensions. In addition to choosing the color, you also decide on which post the gutter drain will be placed and at what height it should be positioned. The latter can impact the installation of a vertical awning. But don't worry, you can adjust all the options at any time. 

konfigurator webgl pfosten zu pfosten schweng terrassenkonfigurator

Post to post

By specifying the width and depth of the roof, the posts are automatically distributed, which determines the size of the spaces between them. If this automatic arrangement isn't ideal for your needs, you can still adjust the number and placement of the posts afterward. For instance, it’s possible to recess the posts to create a roof overhang. The adjustment of the posts can be done either via the user interface or directly on the 3D model. 

The roof and its possibilities

Essential for a patio roof, besides the substructure, is, of course, the right roofing material. Schweng offers a selected range of bestsellers, including glass and polycarbonate panels. Each material has unique properties and is suited for specific applications, allowing you to tailor your roof to your individual needs. The number of roof panels is automatically calculated based on the width and the selected roofing material and is displayed in 3D. 

konfigurator webgl materialprobe glas 8mm schweng terrassenkonfigurator

Glass - 8mm

The high-quality all-rounder made from clear or frosted glass. 

konfigurator webgl materialprobe glas 10mm schweng terrassenkonfigurator

Glass - 10mm

A greater thickness allows for higher load capacity and increased stability. 

konfigurator webgl materialprobe polycarbonat schweng terrassenkonfigurator

Polycarbonate

Multiwall polycarbonate panels offer a stable and cost-effective alternative to glass. 

konfigurator webgl materialprobe heatstop schweng terrassenkonfigurator

Heatstop

The panel with special heat-reflective properties. 

konfigurator webgl dachoption sonnensegel schweng terrassenkonfigurator

Sun Awning

Especially in summer, it can get quite hot. That’s why Schweng offers various products in the sun and privacy protection category for the further design of your roof. A classic option is the sun sail with its separately opening panels made of lightweight fabric. These not only provide good protection from the sun and shade your patio but also serve as a stylish eye-catcher. 

konfigurator webgl dachoption aufdachmarkise schweng terrassenkonfigurator

Roof awning

When using an awning, heat can accumulate between the roof and the awning. A rooftop awning has the advantage that the heat buildup occurs on the outside, allowing it to escape directly. This helps to counteract heat formation in the interior, especially in a closed structure. Rooftop awnings can be operated with either a radio or electric motor. 

konfigurator webgl dachoption unterdachmarkise schweng terrassenkonfigurator

Under-roof awning

In contrast to the rooftop awning, the under-roof awning, as the name suggests, is installed beneath the roof, on the interior side of the canopy. This way, it is protected from wind and weather, preventing damage to the product and contributing to its durability. Under-roof awnings can also be operated with a radio or electric motor, and they offer the option of manual operation via a hand crank. 

konfigurator webgl beleuchtung schweng terrassenkonfigurator

Lighting

In addition to the many shading options, Schweng also provides the opportunity to create a cozy lighting atmosphere on your patio. LEDs can be installed in the rafters of the substructure, and you can freely vary the number of lights. You also have the choice between dimmable LEDs or those that can only be switched on and off. 

konfigurator webgl feld fuer feld schweng terrassenkonfigurator

Field by field

To further customize your roof, you can equip each panel with your desired side wall. You can select the panels through the user interface as well as directly on the 3D model. Thanks to the underlying rules, only currently valid options for each panel will be displayed. For more comfortable and faster operation, you can also select multiple panels at once to equip them with the same side wall. 

konfigurator webgl korrekt bemasst schweng terrassenkonfigurator

Correctly dimensioned

You can easily display all the dimensions of your roof directly on the 3D model. The measurements of the currently selected panel are automatically shown, so you always have the size in view while editing and equipping the panel. This way, you have all the important numbers available down to the centimeter at all times, ensuring you won’t encounter any unpleasant surprises. 

Walls without end

A patio roof itself invites long summer evenings—whether under a clear starry sky or during warm summer thunderstorms. However, with the addition of side walls, it can offer so much more, such as expanding your living space. Schweng provides you with a visually appealing and functional selection of side walls, allowing you to customize the roof to meet your individual needs. 

konfigurator webgl wandoptionen giebeldreieck schweng terrassenkonfigurator

Gable triangle

Some side walls can be designed to extend seamlessly into the slope of the mono-pitch roof. If you prefer not to do this for aesthetic reasons, or if your desired side wall cannot be slanted, the gap will be filled with a gable triangle—the piece that connects the roof and side wall. It has the same design options as the full range of side walls, allowing it to be customized to match any style. 

konfigurator webgl wandoptionen lichtdurchlaessig schweng terrassenkonfigurator

Translucent

The translucent glass walls are the perfect choice for anyone who wants an unobstructed view of their garden. Regardless of the weather or the season, translucent walls combine the comfort of a weather-protected space with the feeling of being outdoors. For those who value their privacy a bit more, clear glass can be replaced with frosted glass. 

konfigurator webgl wandoptionen glasschiebewand schweng terrassenkonfigurator

Sliding glass wall

The translucent glass walls are the perfect choice for anyone seeking an unobstructed view of their garden. Regardless of the weather or season, these walls combine the comfort of a weather-protected space with the sensation of being outdoors. For those who value their privacy more, clear glass can be replaced with frosted glass. 

konfigurator webgl wandoptionen paneele schweng terrassenkonfigurator

Panels

Panels visually limit the view of your patio while the gaps between them allow for refreshing air circulation. You can choose between modern aluminum panels in various colors or a wood look, or opt for a natural material by selecting Siberian larch. 

konfigurator webgl wandoptionen geschlossen schweng terrassenkonfigurator

Closed with optional door

Closed walls provide the greatest possible protection against external influences and unwanted views. They are also ideal when the installation of doors is required. The side walls consist of individual panels that are placed directly on top of each other, offering the same design options as the panels. In terms of doors, both the color design and the door swing direction can be customized to suit your preferences. 

konfigurator webgl wandoptionen senkrechtmarkise schweng terrassenkonfigurator

Vertical awning

Closed walls offer maximum protection against external elements and unwanted views. They are also perfect for situations where door installation is necessary. The side walls are made up of individual panels that are stacked directly on top of each other, providing the same design options as the panels themselves. For doors, you can customize both the color scheme and the swing direction to fit your preferences. 

There is movement in the game

So you don't have to buy a pig in a poke, all features in your individual configuration are not only displayed statically but can also be brought to life by you. For example, you can extend and retract your awning and stop it at specific positions. Corresponding animations have been integrated for all products. This allows you to view the operation specifically for a feature or run all animations of your configuration in a bundled manner. 

konfigurator webgl uneingeschraenkte aufmerksamkeit schweng terrassenkonfigurator

Unrestricted attention

When configuring, the focus should be entirely on the product. To achieve this, we present it in a simple environment scene. Additionally, we ensure that the product is always visualized and displayed in the highest possible quality. However, for the environment scene, we may make compromises based on current performance. For instance, the lighting calculations using dynamic light sources may be replaced with a statically colored environment through vertex colors when necessary. 

konfigurator webgl in bildern festgehalten schweng terrassenkonfigurator

Captured in pictures

In addition to the interactive 3D representation, you can also download images of your roof directly from the 3D configurator. You will receive a short photo series that showcases your product from six different perspectives. Additionally, the images are dimensioned, providing all the essential information you need. 

konfigurator webgl anfrage schweng terrassenkonfigurator

Do you still have questions?

If you have any questions about your configuration, you can easily send a request to Schweng. All components that make up your current configuration will be clearly listed. If you notice something that you don't need, you can conveniently delete it directly from the list. The changes will be immediately reflected in the configuration and the interactive 3D representation of your patio roof, ensuring that all generated data, such as images and the saved configuration, remain consistent. 

konfigurator webgl speichern warenkorb schweng terrassenkonfigurator

Or buy directly

When you are satisfied with the result of your individual configuration, you can either save it for later editing or purchase it directly through the Schweng shop. When saving, you will receive an ID via email, which allows you to retrieve your customized roof at any time. When transferring to the shop, all important information, including a list of all components that make up your configuration, will be automatically transmitted. 

konfigurator webgl preisberechnung schweng terrassenkonfigurator

You can't do without prices

Thanks to the direct connection to the Schweng back office, a system for price maintenance, the 3D configurator always has access to current prices. The back office only receives information about the components of the current configuration from the 3D configurator, calculates the corresponding prices, including installation surcharges and discounts, and then sends this information back, along with the total price. This ensures that there are no discrepancies between the different systems. 

konfigurator webgl ar modus schweng terrassenkonfigurator

In your own garden

Would you like to see your newly configured patio roof in your garden or at your house and walk around it in 360 degrees? All you need is a smartphone or tablet with a functioning camera and the native AR capabilities of iOS or Android. Currently, the AR viewer is available only to Schweng employees in the internal mode of the configurator. 

konfigurator webgl gltf export schweng terrassenkonfigurator

Not only in the configurator

You should not only experience the three-dimensional environment in the 3D configurator. You have the option to use the 3D model of the roof in other programs through a glTF export. In the case of Schweng, we convert the glTF file into a SketchUp file. This file can currently only be downloaded in the internal mode of the 3D configurator. 

All this and much more...

In its launched version, the 3D patio roof configuration from Schweng already offers a wide range of patio roofs and user-friendly features. But even here, the status quo is just a stopover, because Schweng already has plans for the next steps. Check back occasionally on our website or directly in the 3D configurator and be the first to find out what's new in terms of product range and user experience.

konfigurator webgl redPlant insights meine stegplatten

Finely tuned

The animations of the awnings and similar products consist of both the animation of the geometry and the material. For example, when the vertical awning moves upward, the fabric must also move upward in perfect sync, as if it is being rolled up. While this is obvious in reality, it is a finely tuned process for us. The geometry is adjusted by manipulating the vertices. Normally, this would alter the UVs of the geometry, resulting in compression and distortion of the fabric's texture. To compensate for this, the offset repeat is dynamically adjusted simultaneously. 

Unusual sun awnings

The animation of the sun sails takes it a step further. To simulate the appearance efficiently, instances, or copies, of just one fabric fold—essentially a sagging fabric section—are used. During the animation, the successive folds are brought together, and the individual folds are scaled in width and height while being gathered to simulate the characteristic draping of sun sails. 

konfigurator webgl wunderbar wandelbar schweng terrassenkonfigurator

Wonderfully versatile

Our constant aim is to reduce the load on the graphics card as effectively as possible. For this, all fabrics have been implemented using a special shader that allows color variations to be represented with just one texture set. Through our shader graph, the color of fabric parts down to the individual thread colors can be controlled separately. Additionally, ordered dithering was applied to better represent transparencies and to prevent the often disruptive moiré effect. For this, only every second, third, or nth pixel of the affected fabric texture is rendered at a distance. 

konfigurator webgl glasklare sache schweng terrassenkonfigurator

A crystal clear matter

Our ongoing aim is to minimize the load on the graphics card as much as possible. To achieve this, all fabrics are implemented with a specialized shader that enables color variations to be displayed using just one texture set. This allows for separate control over the colors of specific areas of the fabric, including the individual threads of the yarn, via our shader graph. Additionally, ordered dithering has been utilized to improve transparency representation and prevent the undesirable moiré effect. For example, at a distance, only every second pixel of the fabric texture is rendered. 

Features

icon WebGL

WebGL

The 3D Configurator has been implemented in WebGL and is available in common browsers.

icon responsive

Responsive Design

The 3D Configurator is available on smartphones, tablets, and desktops.

icon diamond id

Individual ID

Each configuration is assigned an ID and can be retrieved at any time.

icon validation

Validation

If it is configurable, it is producible. The configurator only allows valid configurations.

icon unlimited

Millions of possibilities

The entire Schweng product range, along with the configuration logic, has been integrated into the 3D Configurator.

icon synchronisation

Real-time prices

Prices and all other dynamic parameters are calculated in real-time.

icon performance

Performance

To save draw calls, components are instantiated even during animations.

icon measurements

Dimensions

All relevant dimensions can be easily shown or hidden. The measurements of the currently selected field are always displayed.

icon download

Download image files

Download function for image files including dimensions.

icon line text rendering

Line- & Text-Rendering

The labels and dimensions are generated and displayed directly in the 3D scene using optimized line and text rendering.

icon ar augmented reality

Internal mode

The internal mode includes an AR viewer as well as the option to download the configuration as a SketchUp file.

icon woocommerce

WooCommerce

The interface to the shop system WooCommerce allows for the direct purchase of the roofing system and ensures accurate price calculation.

Tools

Insights StateEngine 3D icon

State Engine

The heart of every 3D configurator is our State Engine. It ensures at all times that a valid state of the product is delivered.

Insights Construction Engine 3D icon

Construction Engine

Our Construction Engine implements the 3D reconstruction of the product based on and within the guidelines of the State Engine, placing all components accordingly.

Insights Performance 3D icon

Performance Monitor

Our Performance Monitoring tracks graphics utilization and dynamically adjusts the quality of the 3D configurator to match the device's current performance.

Insights Cloudservice 3D icon

Cloud Service

Our CloudService generates various formats of our configurations on demand and makes them available to the user, for example, as AR models.