3D WebGL

3D WebGL

We have designed and programmed a customised WebGL product configurator for Tierschrank GmbH. The patented animal enclosure as the central product can be customised in all design options.

Die entstandene Lösung ermöglicht die Konfiguration von zwei verschiedenen Systemlogiken: Tierschrank mit Klapptür und Tierschrank mit Koje. The corresponding price display is always shown in real time for each configuration.

Depending on the basic configuration, countless variations of shelves, drawers, animal bed variants and accessories can be configured.

Animations have been integrated for the moving elements of the animal cupboard, such as drawers, doors and the folding bed, which can be activated simply by clicking on them.

  • Service

    3D Modeling | Development | UI design

  • Input

    Excel list with rules | CI manual

  • Output

    HTML output for hosting

What is WebGL?

If you would like to learn more about the definition and possibilities of WebGL, we highly recommend our blog post on this topic. We also go into the advantages and disadvantages of this technology.

The best way to find out whether a WebGL implementation is also suitable for your products is to talk to us in person.

Parametric configurator

It is a parametric configurator, i.e. the individual dimensions of height, width and depth can be changed smoothly or in 1 mm increments.

As there are design-related specifics for perforated grids and cup band positions in some dimension ranges, the overall technical result is a deep and complex configuration logic, which was realised on the basis of customised programming. The application is highly performant and runs smoothly in real time on almost all end devices.

A PDF data sheet can be created and downloaded for each individual configuration. In addition, a further function has been integrated with which each personal configuration can be saved and shared via a link.

In addition to a Shopify webshop interface, a module for production was also programmed: the solution not only configures optics, but also determines exact information on the dimensions and drill hole positions of the individual assemblies and components.

In addition to the conceptualisation and implementation of a UI for desktop and mobile devices in accordance with corporate design specifications, a special pop-up system enables the communication of further information on product details.

Plan your configurator project

This involves customised programming in which numerous technical details and interfaces have to be taken into account. Several months should always be planned for the development. In order to work efficiently and effectively right from the start, the first step is a detailed project briefing from you with a description of the content and technical requirements. We would be happy to advise you personally and individually on your project!

more projects