Navigation

Maps & data

Christchurch Site Viewer

A browser 3D prototype that places an IFC building on a real Christchurch site, with LiDAR terrain, review tools, live collaboration and AI renders.

Designed and built by me.

  • WebLive

Open live demo (opens in a new tab)

Christchurch Site Viewer in the browser: a grey 3D clinic building on a car park outlined with an orange dashed boundary, surrounded by aerial imagery, extruded neighbouring buildings and the Avon River, with a Layers panel listing five discipline models and four levels.

What it does

Christchurch Site Viewer is a browser prototype for architecture and construction review. It places a federated IFC building model on a real site in central Christchurch, New Zealand, with LiDAR terrain, aerial imagery and the neighbouring buildings around it. Several people can review the model together in real time, and any view can be turned into a photoreal render.

Open the live demo (opens in a new tab). To see the collaboration, open the same link in a second tab.

  • IFC in the browser. The model is buildingSMART’s open “Medical-Dental Clinic” sample: 5 discipline models with about 4.6 million triangles. Click any element to see its IFC class, level, materials and property sets. Filter by level and by IFC class, or drop your own .ifc file to place it on the site.
  • A real site. 1.2 × 1.2 km of central Christchurch with 1 m LiDAR terrain (2024–25), 2025 aerial imagery and 925 neighbouring buildings. The site boundary is shown as a cleared building pad.
  • Review tools. Distance and area measurement with vertex and edge snapping. A section plane that cuts a plan at each level or a vertical section, with a filled poché. Move and rotate the model on the site. Sun and shadows for real New Zealand dates and times.
  • Real-time collaboration. You see other people’s cameras, cursors and selections. Placement, the section, the sun time and measurements are shared. Comment threads are pinned to IFC elements and follow the model when it moves.
  • AI render. The current 3D view becomes a photoreal image, with a before/after slider and a shared gallery.
  • Phone layout. A bottom dock and bottom sheets on small screens, and a dark mode.

AI-generated render made in the viewer: the sample clinic as a stone-and-glass building on a car park beside the Avon River, central Christchurch office towers behind it, in warm evening light.

An AI-generated render made from a viewer camera angle. It is not a photograph, and the building is not a real project.

Key decisions

Open data and an open model. The site is built only from public data: LINZ LiDAR and aerial imagery, and OpenStreetMap footprints. The building is an openly licensed IFC sample rather than anyone’s real project.

Neighbour heights measured, not guessed. OpenStreetMap footprints rarely carry a height. Each of the 925 buildings takes its height from the LiDAR itself: the surface model minus the ground model.

Levels federated by elevation. Each discipline model has its own storeys. I match them across disciplines by elevation, so one level filter works for architecture, structure and services at once.

Comments attached to elements, not to points in space. A thread is pinned to an element’s IFC GlobalId. When the model is moved or rotated on the site, the comments move with it.

The AI key stays on the server. Renders go through my own proxy with rate limits, and an 18+ and terms consent is required before the first render.

How it is built

The front end is React and TypeScript with Vite, three.js through React Three Fiber and drei, and Zustand for state. IFC files are parsed with web-ifc in a Web Worker. Picking uses three-mesh-bvh, and the prepared models are compressed with meshoptimizer.

Terrain, imagery and building footprints are converted from NZTM2000 to local metres with proj4. Sun positions come from SunCalc.

Collaboration uses Yjs, a CRDT, over WebSockets. A small Node server handles the WebSocket sync and the render proxy to fal.ai. Everything runs in Docker behind Caddy.

Performance

Measured on a MacBook Air 15” (M3) in Chrome.

Metric Before After
Draw calls 7,811 23
Orbit frame rate 19.6 fps 60 fps
Picking 7.2 ms 0.075 ms
First-view download 32 MB 2.2 MB
Worker bundle 3.7 MB 197 KB
  • Draw calls: geometry is merged, and per-element state lives in a data texture.
  • Frame rate: measured on a scripted orbit around the site.
  • Picking: about 95× faster with a BVH built in a Web Worker.
  • Download: meshoptimizer, gzip and vertex welding instead of shipping raw IFC.
  • Worker bundle: web-ifc is loaded only when a live IFC file needs parsing.

With all 5 models loaded (4.75 million triangles) it still runs at 60 fps, and the models are ready in about 0.9 s locally.

Current state

A live demo, built in November 2026. It is an independent, self-initiated project, and the source code is not public.

Data and licences

  • Contains data sourced from the LINZ Data Service, licensed by Environment Canterbury under CC BY 4.0.
  • Neighbouring buildings © OpenStreetMap contributors (ODbL).
  • IFC model: buildingSMART International “Medical-Dental Test Files”, CC BY 4.0.
  • AI renders via fal.ai.

Conceptual demonstration only. The development scenario is fictional: an open sample model placed on an existing car park. It is not affiliated with, commissioned or endorsed by any company or landowner.

Details

Platforms
  • Web — live
Role
Designed and built by me.
Category
Maps & data
Built with
TypeScript, React, three.js, Node.js

More projects

All projects
  • Maps & data

    Pixel Brisbane

    An interactive isometric map of Brisbane, combining buildings, places and useful city data.

    • WebLive
  • Everyday tools

    Freely Forms

    A free, open-source form builder that delivers every response as a new row in your own Google Sheet.

    • WebLive

    Built with TypeScript · React · Cloudflare Workers