ByteNest Book a free call

Case study 023D in the browserCroatiaLive

Kroz

Interactive 3D for selling apartments before they are built.

The film that opens kroz.hr: the building, roof off, the furnished plan, then inside. No sound.

Buyers walk through a flat that is still being built. Kroz rebuilds the property from the architect's plans, renders photoreal 360° rooms and runs as real-time 3D in any browser, phones included. It is our own product.

Role
Our product, built from scratch
Status
Live
Guided tour
Croatian and English
  • 20 to 3.5 MBtypical apartment model
  • Any browserno plugins, phones included

Try the live 3D demo (opens in a new tab)

The brief

A flat buyers can walk through before it exists.

Developers sell apartments before they are built. Kroz turns the architect's plans into a photoreal flat that buyers explore on their own phone or laptop. We built the whole chain: a Blender pipeline scripted in Python, Cycles panoramas, an asset diet, and a three.js viewer developers can embed in their own website.

System map

How it fits together

Kroz production pipeline and viewerThe architect's plans feed a Blender pipeline scripted in Python that rebuilds the property to measured dimensions. Cycles renders 360 degree room panoramas. An asset pipeline compresses meshes and textures (a typical apartment model goes from 20 MB to 3.5 MB) and cuts the panoramas into 6K, 4K and 1K sizes that load lazily. A three.js WebGL viewer, served as static files from Cloudflare Pages, shows the result to home buyers in any browser and can be embedded in a developer's website.01 DATA IN02 BUILD03 OPTIMISE04 DELIVER05 PEOPLEArchitect's planspublished plansmeasured sizesBlender modelscripted in Pythonrun headlessCycles renders360° panoramasone per roomAsset pipelinemeshopt + WebP20 MB to 3.5 MBTiered panoramas6K, 4K, 1Kloaded lazilyCloudflare Pagesstatic hostingthree.js viewerreal-time WebGLlow-power pathHome buyersany browser,phones includedDeveloper's siteviewer embedded123 Kroz production pipeline and viewerThe architect's plans feed a Blender pipeline scripted in Python that rebuilds the property to measured dimensions. Cycles renders 360 degree room panoramas. An asset pipeline compresses meshes and textures (a typical apartment model goes from 20 MB to 3.5 MB) and cuts the panoramas into 6K, 4K and 1K sizes that load lazily. A three.js WebGL viewer, served as static files from Cloudflare Pages, shows the result to home buyers in any browser and can be embedded in a developer's website.01 DATA IN02 BUILD03 OPTIMISE04 DELIVER05 PEOPLEArchitect's planspublished plansmeasured sizesBlender modelscripted in Pythonrun headlessCycles renders360° panoramasone per roomAsset pipelinemeshopt + WebP20 MB to 3.5 MBTiered panoramas6K, 4K, 1Kloaded lazilyCloudflare Pagesstatic hostingthree.js viewerreal-time WebGLlow-power pathHome buyersany browser,phones includedDeveloper's siteviewer embedded123
System map of Kroz. The four stages next to it describe each layer in words.
  1. 1
    From plans to a modelBlender, scripted in Python and run headless, rebuilds the property to measured dimensions
  2. 2
    Render, then shrinkCycles panoramas per room, meshopt and WebP, every panorama cut to 6K, 4K and 1K
  3. 3
    A viewer that runs anywherethree.js on Cloudflare Pages: orbit, lift the roof, walk room to room
  4. 4
    Three hard partsMaking photoreal fit in a phone

Three hard parts

Making photoreal fit in a phone

  1. Small enough for a phone

    It has to work on a phone. Meshopt mesh compression and WebP textures take a typical apartment model from 20 MB to 3.5 MB before it reaches the browser.

  2. Panoramas on demand

    Nobody should wait for rooms they never visit. Each room comes as 6K for desktops, 4K for phones and 1K as a preview, loaded only when needed.

  3. A low-power path

    Not every buyer has a fast laptop. Touch-first devices and machines with four cores or fewer skip post-processing, and phones get about half the foliage.

On screen

What a developer gets: rooms like these

A render of an open-plan living room and kitchen: a boucle sofa, a wooden dining table with woven chairs, a stone-topped island with walnut fronts, and a terrace with a sea view through floor-to-ceiling glass
Living room and kitchen, rendered from the architect's plans before the building exists.
A render of the kitchen from the island: a travertine worktop with a hob, wooden bar stools, cream cabinets, a built-in oven and a window onto the neighbouring houses
The kitchen, from the island.
A render of a bedroom: an upholstered grey bed with linen bedding, two fluted side tables with lamps, a walk-in wardrobe with a washer and dryer, and a window onto the hillside
A bedroom with its walk-in wardrobe.

Open the live demo (opens in a new tab)

Stack

  • Python
  • Blender
  • Cycles
  • meshopt
  • WebP
  • three.js
  • Cloudflare Pages

Our role: our own product, built from scratch.

Book a free call Back to all work