Real-Time 3D / Architecture / Marathi

Tradition meets
the present.

आंगण is a contemporary wada — a luxury Indian duplex built, as wadas always were, around a courtyard open to the sky. The whole residence is a scroll-driven walkthrough in eighteen chapters, and every wall, jaali, pillar and leaf in it is generated in code: no model files, no texture images, the entire house under two megabytes.

RoleConcept, Spatial Design & Front-End
Timeline2026
CategoryReal Estate / Architectural Storytelling
TypeReact · Three.js / R3F · Tailwind · Lenis · Vite
AANGAN — the entrance hall looking through a cusped arch into the courtyard
18
Chapters
0
Model or Texture Files
4
Times of Day, Live
1.6MB
Entire Residence

The problem
Luxury property marketing sells a plan and a render. Neither conveys the one thing a wada is actually about — a courtyard you move around, at an hour of the day, in weather.
The approach
Build the residence in code as one continuous camera move, written in Marathi with an English gloss beside it, and hand the visitor the sun so they can see the same room at dawn and at night.
The outcome
A walkthrough that loads in seconds because there is nothing to download — no .glb, no texture atlas — and ends on a private-viewing request rather than a brochure.
348
Shell meshes, merged on mount
25k
Triangles in the shell
587
Draw calls glass once cost
256²
Generated texture resolution

01 — The Premise

A wada is not a style.
It is a plan.

The wada — the courtyard house of Maharashtra — is usually borrowed for its ornament: the carved columns, the cusped arches, the brass. But the thing that actually makes a wada is structural. Every room faces inward onto an open square of sky, so the house is organised around weather and light rather than around a view out.

AANGAN takes that plan seriously and builds a contemporary duplex on it. Which set the brief for the website too: if the courtyard is the idea, a gallery of stills cannot carry it. You have to arrive from the sky, see the plan from above, come down the approach, step through the entrance and find the courtyard at the centre — in that order, without a cut.

01
Renders lie about light
A property render is one sun angle, chosen because it flatters. A courtyard house is a different building at dawn than at night, and that difference is the product.
02
A walkthrough is normally a download
Real-time architecture usually means tens of megabytes of geometry and texture atlases before anything appears — on a phone, on Indian mobile data, that is the whole audience gone.
03
Uniform surfaces read as CGI
The strongest tell that something is rendered is not the geometry — it is roughness that does not vary. Real plaster, stone and timber vary at every scale.
04
Marathi as decoration
Regional-language property marketing usually means a Devanagari headline over an English brochure. Here the room names are the primary text and the English sits under them as gloss.

02 — The Plan

Eighteen chapters,
one camera move.

The scroll is a single continuous camera path with no cuts. Each chapter claims a slice of it and names its own camera, so the sequence is a plan rather than a slideshow — sky, approach, threshold, courtyard, then the rooms in the order you would actually walk them, and back out to the garden as the light goes.

00आकाशThe Sky — the film opens above the weather.0–7%
01विहंगम दृश्यAerial Reveal — the courtyard is legible as a plan before it is a place.7–19%
02वाटचालApproach — down to eye level along the paved walk.19–27%
03प्रवेशद्वारThe Entrance — the threshold, framing the courtyard through a cusped arch.27–41%
04आंगणThe Aangan — open to the sky. The longest chapter, and the point of the house.41–56%
05दिवाणखानाLiving Room — where conversations slow down.56–61%
06स्वयंपाकघरKitchen — made for gathering.61–67%
07पाहुण्यांची खोलीGuest Room — a quiet place to stay.67–74%
08शयनकक्षMaster Suite — wake up to green.74–79%
09स्नानगृहBathroom — a daily ritual.79–82%
10जिनाThe Staircase — the turn upward.82–86%
11वरचा मजलाDuplex Floor — a second level, a second perspective.86–88%
12चित्रदालनThe Gallery — curated, not crowded.88–92%
13तरणतलावThe Pool — stepping back outside.92–96%
14बागThe Garden — the city disappears.96–97%
15सोनेरी संध्याकाळGolden Hour.97–98%
16रात्रNight — the house lit from inside.98–99%
17घरी याCome Home — the closing aerial, and the request to visit.99–100%

Frames from the walkthrough

AANGAN — the aerial reveal showing the courtyard cut through the roof

विहंगम दृश्य

The plan reads in one frame: the roof, and the square of sky cut out of it.

AANGAN — the entrance hall framing the courtyard

प्रवेशद्वार

The threshold does the work an establishing shot normally does.

AANGAN — the tulsi vrindavan at the centre of the courtyard, rain falling

आंगण

The tulsi vrindavan at the centre — and because the courtyard is open, it rains into it.

AANGAN — the residence at night, lit from within

रात्र

The same geometry, four hours later. Nothing was re-rendered to get here.


03 — Light

The visitor is handed
the sun.

A slider labelled दिवसाची वेळ sits in the corner for the entire journey. Sun angle and colour, hemisphere light, ambient level, fog colour and density, interior and architectural lighting, haze, sun glow and exposure are all interpolated between four presets — so any room can be seen at any hour, and the change is continuous rather than four fixed states.

पहाट
Dawn
Low, cool sun and heavy haze. The courtyard fills before the rooms do.
दिवस
Day
High sun, hard shadow through the jaali, interiors carried by bounce.
संध्याकाळ
Sunset
Long raking light down the length of the courtyard; the plaster goes warm.
रात्र
Night
The sun is gone and the house lights itself. Interior and architectural lighting take over entirely.

The journey also drives it on its own — the last chapters are titled सोनेरी संध्याकाळ and रात्र — so a visitor who never touches the slider still ends the walkthrough at night. The control is there for the one who wants to go back and see the bedroom at dawn.


04 — Voice & Type

Marathi first,
English underneath.

Every cue in the piece is a pair: the Marathi line carries the meaning and the English sits below it, smaller, spaced out, as gloss. Room names, statements, hints, the wordmark and both calls to action all follow the same rule. The page is lang="mr", and the English is the translation — not the other way round.

परंपरा · भेटते · वर्तमानालाTradition meets the present
घराचे हृदयThe heart of the home
काही जागा रचल्या जातातSome spaces are designed
काही अनुभवल्या जातातOthers are felt
शहर विरून जातेThe city disappears
पिढ्यांसाठी एक आधुनिक वाडाA contemporary wada for generations to come
Palette Tokens
Night#12110F
Brass#C8944E
Terracotta#A8553A
Plaster#E8DED0
Leaf#4F6B3A
Ending on a Question
The final chapter offers two things and no brochure: खाजगी भेटीसाठी नोंदणी — book a private viewing — and वास्तू पुन्हा पहा, explore the residence again. Viewings are described as one household at a time, in the hour before sunset, which is also the hour the slider defaults toward.

05 — Engineering

A whole house,
and nothing to download.

There is not a single .glb, .hdr or texture image in the build. Every wall, column, jaali screen, baluster, plant and bird is authored as geometry in code, and every surface material is generated at load. The entire residence — engine, application and all — is smaller than one photograph of it would be.

Geometry
Boxes, planes, cylinders and lathes, plus instanced meshes for everything repeated. The architecture is authored the way a plan is drawn — a wall is a box at a position, a sill is a smaller box on top of it — because that is the only form in which it stays editable.
Draw calls
The renderer wants the opposite of an editable plan. On mount, every static mesh is baked into world space, bucketed by material and merged — the shell goes from 348 meshes and ~70 triangles a draw to one draw call per material. Nothing above that component has to know it happened.
Materials
Procedural PBR: albedo variation, a normal map and a roughness map generated per surface at load, on a wrapping noise lattice so they tile without a visible seam. Uniform roughness across a wall is the single strongest "this is CGI" signal.
Texture size
256², not 512. Each set is multi-octave noise three times over on the main thread, and 512 pushed first paint past nine seconds for detail nobody can resolve — at ~2.5m per tile, 256 still gives roughly 100 texels per metre.
Glass
Real transmission makes windows read as glass rather than blue plastic, and it is also the most expensive thing in the scene — three renders the world a second time for it to refract, costing 587 draw calls at the aerial chapters to refract panes two pixels wide. Past ~55 metres it drops to a plain tinted sheet, where the refraction offset is under a pixel anyway.
Chunking
Split for cache lifetime, not first paint — the page is the renderer, so there is no above-the-fold content that could paint sooner. Three.js, R3F and React are separated from the application so moving a wall invalidates a hundred kilobytes rather than a megabyte and a half of engine.
Deploy
Relative asset paths (base: './'), so the build runs unchanged from a domain root or any subdirectory — which is how it drops into this portfolio without a rebuild.

06 — Outcomes

Procedural is
a distribution decision.

Choosing to author the building in code rather than model it was not an aesthetic preference. It is what makes a full real-time walkthrough openable from a text message on mobile data — which, for a property that sells by private viewing, is the entire funnel.

1.6MB
Total Payload
Engine, application and the entire residence, with nothing streamed after.
0
Asset Files
No models, no textures, no HDRIs — geometry and materials are generated.
18
Chapters, One Move
A single continuous camera path from the sky to the closing aerial.
4→∞
Lighting States
Four presets, interpolated continuously — any room at any hour.

07 — Key Learnings

What This Project Taught Me

Learning 01
Author for editing, derive for rendering
Keeping the building in the form a plan is drawn in — and deriving the fast form from it on mount — meant performance work never once cost me the ability to move a wall.
Learning 02
Variation matters more than resolution
Roughness that varies at 256px is more convincing than uniform roughness at 2048. What reads as CGI is not a lack of detail, it is a lack of inconsistency.
Learning 03
Spend the budget where the camera is
Real refraction is worth every millisecond from inside a room and worth nothing from 200 metres up. Most optimisation here was deciding where a feature stops earning its cost.
Learning 04
Give the visitor the variable that matters
One slider — the sun — does more for a courtyard house than any number of extra rooms would. The right single control beats a menu of features.

Reflection

"A wada is organised around a hole in the roof. Once I accepted that the courtyard is the whole idea, the sequence wrote itself — you have to see the plan from the air before you can understand the room you are standing in, and you have to be able to change the hour, because a house built around the sky is a different house at six in the morning than at eleven at night."
— Rupesh Chavan, Concept, Spatial Design & Front-End

Explore Projects

See more case studies

Walk Through It All Case Studies वडापाव
AANGAN — walkthrough frame