← Projects

3D graphics · local tools · computational geometry · PWA

Floor plan and renovation editor in 3D

Apartment editor that runs in the browser offline: 2D floor plan, 3D build-up with furniture, natural light hour by hour and first-person walkthrough. All in a single HTML file.

Role
Complete design and implementation
Period
September 2026
Status
in progress
Visibility
Case study

It contains the floor plan of a real home. It will not be published until it is replaced with a synthetic plan.

The problem

Renovating an apartment means answering questions nobody answers for you until it is already done: does the sofa fit?, is there room for a table for four?, at what time does the sun come in?, can you see the TV from the kitchen?

Hiring a studio for a neighbourhood apartment makes no sense. And the existing applications want an account, need a connection, and never make clear what is stored where.

The constraint that defined the design

The whole editor had to fit in a single HTML file that opens with a double click, no server and no connection.

That constraint looks like a limitation and it is the feature. You work on it at home on Sunday, carry the file on your phone to the site, and open it where there is no coverage. Nothing to install, nothing to sync, nothing to explain to anyone.

Meeting it forced me to bundle the modular sources into a single bundle with esbuild, to store data in the browser’s local storage instead of a backend, and to write the geometry by hand instead of leaning on server-side utilities.

What it does

The floor plan is drawn in 2D —walls, rooms, doors, windows, dimensions— over the image of the original plan, with the scale derived from the PDF points so the measurements are real and not a visual approximation.

That plan is built up in 3D with parametric furniture. Over it, natural light is simulated hour by hour according to orientation, which is the feature that changed decisions the most: seeing the living room in the dark at nine in the morning is more convincing than any advice.

And you can go in and walk around, first-person and with collision, to check whether the gap between the bed and the wardrobe is enough to pass through.

It exports to GLB, to PNG, to a dimensioned plan for printing, and to a text package meant to be pasted to an assistant when a second opinion is needed.

Why it is not published

Because it contains a real person’s home, with their address in the original plan file’s name and the exact measurements of every room.

A floor plan is not anonymised by moving a coordinate: the image is the data. Publishing it requires designing a fictitious apartment with an equivalent layout, regenerating the model and taking all the screenshots again. It is pending work, not a cleanup detail, and until it is done the project stays as a case-study card.

It is a shame, because technically it is the most eye-catching thing I have: a floor plan editor with a walkthrough mode in a single file sounds like an exaggeration until someone opens it.

Terminal mode

german@portfolio: ~/portfolio26 cmds