Window Configurator in 3D and AR: The Client Sees the Window in Their Own Room

The Challenge

Selling windows is selling something the client cannot see until it is installed. The salesperson draws a sketch, quotes a number, and the client has to trust that the arched window over the door will look right and that the price covers what they asked for.

The task was to give window companies one tool that handles the whole product range - windows, balcony and entrance doors, glass partitions, pergolas - where the client designs the product, sees the price change with every decision, and can look at the result in 3D and in their own room before anyone comes to measure.

Our Estimia case study covers the consumer site built around this configurator; this one is about the configurator itself.

The 2D Builder

The client starts from a template - a single fixed pane, a two- or three-sash window, a window with a transom, a balcony door, a sliding or folding system - and then changes it directly on the drawing. Click a pane and a small toolbar appears: split it horizontally or vertically, delete it, or choose how it opens (fixed, casement, tilt and turn, top-hung, bottom-hung, French door). Drag a mullion and the pane sizes follow, with the dimensions shown in millimetres along the edges.

From the side panel the client adds the rest: glazing bars (between the panes, on the surface or on the sash), interior and exterior sills, roller shutters, mosquito nets, frame extensions, trickle vents. Colours come in standard and special RAL groups, with separate outside and inside colours and wood-grain laminates. Every action can be undone, across all windows in the order, step by step back to the start.

The price is calculated as the client works, and it comes from the company’s own catalogue, not from a national average. The pricing engine reads the company’s settings and adds up the real parts of the window: profile by the metre of frame and sash, glass by the square metre with tiered rates, hardware per opening sash, mullions, glazing beads, seals, steel reinforcement, labour, the colour surcharge, then the company’s markup and VAT.

Shaped Windows Priced by Real Geometry

Arches, half-arches, triangles, trapezoids and circles are where most calculators give up and price the bounding rectangle. Here every non-rectangular window is a real outline: a list of corners, each edge straight or curved. The client can pick a named shape, drag its corners and bend its edges, or draw a free outline on a grid. Divisions inside the shape become real panes, each with its own opening type; an arched window can keep a normal split-and-sash layout under the springline.

The price follows the actual shape. Frame length is measured along the outline, arcs included; glass area and the size of each pane come from the real panes; mullion length is measured after clipping to the shape. On top of that the company can set its own surcharge for non-rectangular work - a multiplier, a fixed fee, or both - for the extra glass cutting, bending and assembly.

Doors and Partitions

Doors use the same builder with door-specific rules. A balcony or entrance door gets a low threshold instead of a bottom frame member, the opening leaf is priced as a heavier door sash, and the threshold is priced by the metre of door width. Balcony blocks - a door coupled with a window - are built as one assembly where the shared frame member is counted once.

Interior glass partitions are fixed glass walls: single, two or three sections, or with a door in the centre. The builder hides the opening options for the fixed sections, because a partition panel does not open.

Pergolas with Roofs and Side Enclosures

Pergolas have their own set of choices: freestanding, long or wall-mounted; width, depth and height, with a lower back for a sloped roof. The roof can be adjustable louvres, fixed or sliding glass, polycarbonate, a solid panel or retractable fabric. Each open side - front, left, right - can stay open or get an enclosure: a screen, sliding or fixed glass (clear, tinted or opaque), or an aluminium slat wall. On a sloped pergola the triangles between the roof and the side walls can be closed as well.

The drawing is a perspective view from the front corner, at eye level, so the client sees the roof from below as they would in the garden. The price is built from the company’s rates: a base price and a price per square metre of footprint, roof surcharges per square metre, enclosures priced by the area of each side, closed triangles by their area, and colour surcharges for the frame and the roof slats.

3D from the Same Geometry, then AR in the Room

One switch turns the drawing into a 3D model. The model is not a separate design that can drift from the drawing: it is built from the same computed geometry that draws the 2D view, so every split, sash, arch and coupled unit matches exactly. The frame and sash are swept along the outline from a real profile cross-section, outside and inside colours are split along the profile depth, laminates show their real texture, and glazing bars, nets, sills and shutters appear where they were configured. An “Open” slider swings the sashes on their hinges, slides the sliding leaves and folds the bi-fold doors. On a pergola the same slider tilts the louvres.

Then the client presses “View in AR”. On a computer the configurator shows a QR code; on a phone it opens straight away. The model is exported in two formats - one for Android, one for iPhone - uploaded under a random link and opened in the phone’s own AR viewer at true scale: windows are placed on a wall, pergolas on the floor. The links expire after 48 hours and the files are deleted; uploads are size-limited, checked by their content and rate-limited per visitor.

The 3D engine loads only when the client turns 3D on, so the configurator stays quick for everyone who never uses it.

Energy Savings and IRPF in the Quote

The quote summary answers the client’s next question: what do I get back? For each window it shows an estimate of the yearly saving on heating and on air conditioning, the simple payback in years, and the possible IRPF income-tax deduction for energy-efficiency works. The saving compares the new window’s thermal performance and glass solar factor against an old single-glazed window, using national average energy prices and climate-zone figures.

These are estimates and the interface says so: “approximately” and “potentially up to”, never a promise. The real saving depends on the home, its orientation and its energy certificate, and the deduction depends on the improvement that certificate shows. If the glass has no solar factor in the catalogue, that part of the saving is left out rather than guessed.

Tech Stack

- Configurator: React 19 + TypeScript, Tailwind CSS
- Geometry engine: Paper.js (rectangular trees, polygon outlines with arcs, coupled assemblies)
- Pricing: configuration-driven engine on the company's own catalogue and margins
- 3D: three.js, loaded on demand in its own bundle
- AR: GLB and USDZ export, Google model-viewer (WebXR, Scene Viewer, AR Quick Look)
- Backend: Laravel (AR model upload, token links, expiry and cleanup)
- File storage: Cloudflare R2
- Undo/redo: order-wide history of serialisable snapshots
- Languages: Spanish, English, Russian

Result

A window company gets one configurator for windows, shaped windows, doors, partitions and pergolas, priced from its own catalogue down to the metre of profile and the square metre of glass. The client designs the product, sees the price change with each decision, turns it in 3D, opens the sashes, and places it at real size on their own wall before the measurer arrives. The quote already shows an estimate of the yearly saving and the possible tax deduction, so the conversation moves from “how much” to “which one”.