Real-time 3D patio roof configurator — from first dimension input to complete material list.

The client is a northern German wholesaler specializing in wood, construction-related plastics and building foils. They had built an early product configurator in 2009 — but the system had aged out. The task was to rebuild it entirely for HTML5 and WebGL, with a dramatically better user experience.

The result is a 5-step configurator that starts with a real-time 3D preview from the very first input. The user immediately sees the price impact of every decision. Invalid configurations are caught automatically — the user is never stuck.

What this configurator does

• Real-time 3D WebGL preview rendered while the user enters their very first measurements
• 5-step process: substructure → sheet properties → roof → accessories → material list
• Automatic product recommendation based on preferences — a sheet model is pre-selected for the user
• Invalid configuration detection with suggested solutions — no dead ends
• Fully automated material list calculation with save and print option
• Admin backend: all products, prices and relationships updated via Excel upload
• Since the user always starts with a valid configuration, price changes are immediately visible

Why 3D matters for this product

Patio roofs are spatial products. Width, depth, angle and material all interact visually — and customers buying a roof for their home garden need to see the result before committing. The 3D preview removes the largest entry barrier: the fear of buying the wrong thing.

The real-time feedback loop (every input immediately updates the 3D model and the price) removes the need for a sales consultation in most cases. The configurator does the job of an experienced advisor — for every visitor, at any time.

Other configurator projects