Web & mobile apps

How does an in-browser room visualiser work?

The short answer

The customer's photo is analysed on their own device: a segmentation model marks which pixels are floor, wall or cabinet, new materials are rendered onto those surfaces in perspective, and one reference line gives real measurements. Nothing is uploaded.

Updated September 26, 2026

Segment the room

Atelier, our own visualiser, runs semantic segmentation in the browser — SegFormer through transformers.js, using WebGPU where available and WASM where not — and isolates six surfaces without a server.

Render new materials in perspective

Sixteen procedural floor materials, plus wall, cabinet, counter, bath and door finishes, are placed into the photo's perspective, each with brightness, room-light matching and shadow controls.

Measure from one line

Trace one reference line of known length and a perspective homography turns the photo into real area: square metres, square feet and a materials cost estimate with a 10% waste factor. A live camera mode adds continuous floor detection and an A|B comparison.

Embed it anywhere

It ships as one iframe tag and ingests a catalogue from any Shopify, WooCommerce or plain JSON feed, so a retailer's storefront stays where it is.

Asked next

Does an in-browser visualiser need a powerful phone?

Atelier uses WebGPU where the device supports it and falls back to WASM where it does not, so it is not limited to devices whose GPU the browser can use. Newer hardware is simply faster.

Can a room visualiser show our own product range?

Yes. Atelier ingests a catalogue from a Shopify, WooCommerce or plain JSON feed, so the materials a customer tries are the ones you actually sell.