Builder
Open the designer

WebGL2 · Three.js · ES modules

All of it,in a tab.

Builder is a full 3D house designer that happens to live in a browser tab. Three.js r183 on WebGL2, ES modules served via importmap — no bundler, no build step, no install. Eleven cinematic passes a frame, held under a hard 60 FPS gate.

Six doors. That's the whole interface.

The design IS the page: a rail of six doors — Design, Outside, Plan, Furnish, Light, Share — with the tools living inside as tabs. Everything floats; nothing takes width from the canvas. Open a door, and the tools you need are already there.

DOOR 01
Design

Walls, Openings, Roof — the tools that draw and change the building. This door also arms editing; it starts OFF so a shared design opens looking finished.

DOOR 02
Outside

Terrain, Garden, Roads: sculpt the plot, plant with wind, lay terrain-hugging roads, choose the surrounding land.

DOOR 03
Plan

Read the building: the plan, the rooms the wall graph computed, cross-section and layer views.

DOOR 04
Furnish

The 381-model catalogue and the materials — place with geometric legality checks, finish in 64 procedural swatches.

DOOR 05
Light

The Sun panel: a place, a date, an hour; play the day in 15 / 45 / 120 seconds; film looks graded on top.

DOOR 06
Share

Rooms, roles, permission areas, voice — and the ?design= link that opens the same house on someone else's screen.

Architecture

No bundler. No build. No install.

The app ships as ES modules, served directly and wired through an importmap. Three.js r183 loads straight into the tab; the page is the application. There is no build pipeline to break and nothing to download.

  • Importmap, not a bundler

    Modules resolve by name through an importmap — the browser does the linking, the server just serves files.

  • WebGL2, as required

    Three.js r183 targets WebGL2 — instancing, float textures and the shadow work all run on the modern path.

  • The URL is the app

    Open builder.castomo.com/editor/ and a house builds itself. ?fresh=1, ?empty=1, ?quality= and ?reveal=0|1 parameterise it.

  • Saved where you are

    Autosave to localStorage, designs stored server-side, *.webhome.json in and out, Ctrl+S whenever you like.

Feature · In the browser

The gate is the promise: 60 FPS.

Under a stress design — 1 foundation, 2 levels, 15 walls, 8 openings including triangles, 50 objects — the gate holds at 60 FPS, under 300 draw calls and 250 MB of heap. Measured on Apple M4: 286 draws, 60 fps, 28 MB at medium quality with the full 11-pass stack.

See it run

Eleven passes, one frame, sixty times a second.

The cinematic stack is not a preset applied at export — it runs on every frame you look at: GTAO ambient occlusion, god rays, anamorphic streaks, HDR bloom, motion blur, hexagonal depth-of-field with autofocus, ACES tone mapping, a 3D LUT film grade, halation, vignette, grain, chromatic aberration and sharpening, and SMAA antialiasing — with screen-space reflections on glazing.

  • 7 film looks — natural, cinematic, golden, overcast, dusk, bleach (+ neutral) — saved with the design
  • 4096² PCF-soft shadow map fitted to the site — about 2 cm/texel over a 45 m radius
  • Exactly one shadow-casting light at a time — the sun by day, the moon by night
  • Interior daylight: every daylit opening carries a RectAreaLight into the room — rooms light correctly instead of glowing uniformly
  • 4 quality tiers: low, medium, high, ultra (2× supersampled)
  • Compass turns with the camera; sun and moon pips sit on it; click to face north

"A render engine used to be a render farm. Now it's a frame loop — and it keeps up."

— Builder, by design

Why it must be live

A designer cannot use pre-baked lighting.

Baked-look showrooms photograph one moment and freeze it. A designer edits live geometry — move a wall, extend the roof, open a window, and every shadow, every bounce, every god ray must re-derive in the same second. Builder renders the real sun (Meeus low-precision series, about 0.01° of accuracy) against whatever the plan is right now. Nothing is pre-baked because nothing stays still: the light is computed per frame, so it stays honest when the design changes under it.

  • Pick a place, a date and an hour — the shadows are the ones the building would really cast on that plot, that day
  • Play the day in 15 / 45 / 120 seconds; the night is real: moonlight scaled by the lit fraction of the disc, 1,400 stars fading in through civil twilight
  • Sun colour keyed to elevation — white noon, gold at 12°, orange on the horizon; hemisphere light and fog follow the same curve
  • Sun-path study over the year — the solstice questions answered before the foundation is poured
  • QA checks the physics: solstice noon vs earth's tilt, equinox sunrise due east, equation-of-time extremes, polar day/night, midsummer in Warsaw 04:14–21:01

Open a tab.
Design a house.

WebGL2, ES modules, eleven cinematic passes — and nothing to install.

Illustrations by GetIllustrations.com (Angle pack).