Back to Journal
Visualization 2 December 2024 13 min read Sheece Gardezi

Digital Twin Cities with CesiumJS, deck.gl, and 3D Tiles

3D Tiles 1.1 streams photogrammetry meshes of entire cities into the browser. CesiumJS and deck.gl render them with real-time sensor overlays for urban planning and infrastructure ops.

Digital TwinCesiumJSdeck.gl3D TilesUrban Planning
Aerial view of a modern city skyline at dusk
Denys Nevozhai on Unsplash

Cesium ion fields 300 million monthly requests from 30,000+ active users. CesiumJS has been downloaded over 10 million times, making it the most deployed 3D geospatial engine. Cities worldwide now build 3D replicas of their infrastructure for planning, emergency response, and citizen engagement on a standardized stack: CesiumJS for global-scale 3D rendering, deck.gl for data-driven analytical layers, and OGC 3D Tiles for streaming heterogeneous 3D content.

Beyond Static 3D Models: Real-Time Sensor Data and Simulation

A static 3D city model shows building geometries. A digital twin integrates real-time sensor data, simulation, and temporal analysis -- traffic flows, energy consumption, air quality, flooding scenarios. The distinction matters for decision support.

When a city evaluates a new development, a digital twin simulates shadow impacts, models traffic changes, estimates stormwater runoff, and visualizes view corridors -- all before ground is broken. The data is live; the simulations update continuously.

CesiumJS: 10M+ Downloads, Acquired by Bentley Systems

CesiumJS is the open-source JavaScript library for 3D globes and maps in the browser. Originally built for aerospace visualization, it became the de facto standard for geospatial 3D. Bentley Systems acquired Cesium in September 2024 -- a signal of enterprise-grade maturity.

Cesium ion fields over 300 million monthly requests from more than 30,000 active users. CesiumJS has been downloaded more than 10 million times, making it the most widely deployed 3D geospatial engine.
Bentley Systems Acquisition Announcement, 2024

CesiumJS manages terrain, buildings, and imagery across the entire Earth's surface with level-of-detail rendering. Performance stays consistent whether the viewport shows a continent or a single building.

3D Tiles: OGC Standard for Streaming Heterogeneous 3D Data

3D Tiles is the OGC community standard for streaming massive 3D geospatial datasets -- the equivalent of vector tiles for 3D content. A hierarchical spatial data structure enables efficient streaming and rendering of buildings, point clouds, terrain, and meshes simultaneously.

Supported Content Types

  • Batched 3D Models (b3dm) — Buildings and infrastructure with per-feature metadata
  • Instanced 3D Models (i3dm) — Repeated objects like trees, street furniture
  • Point Clouds (pnts) — LiDAR data with billions of points
  • Composite Tiles — Multiple content types in a single tile
  • Implicit Tiling — Octree/quadtree structures without explicit tile JSON

3D Tiles separates content from structure. Swap a building model without regenerating the tileset. Attach real-time sensor data to features. Style content dynamically based on application state.

deck.gl + 3D Tiles: Analytical Layers Over Photorealistic Context

CesiumJS handles photorealistic global rendering. deck.gl (developed by Uber's visualization team) handles data-driven analytical layers -- massive point datasets, flow maps, heatmaps, and aggregation visualizations.

Since deck.gl 7.3, the Tile3DLayer enables hybrid applications that combine Cesium's terrain and building models with deck.gl's analytical layers. Digital twins get both realistic context and data overlay from a single rendering pipeline.

deck-gl-3dtiles.js
import { Tile3DLayer } from '@deck.gl/geo-layers';

const layer = new Tile3DLayer({
  id: 'city-buildings',
  data: 'https://tiles.cesium.ion.com/3dtiles/tileset.json',
  pointSize: 2,
  onTileLoad: (tileHeader) => {
    // Attach real-time sensor data to features
    attachSensorData(tileHeader);
  }
});

Virtual City Systems: Open-Source CesiumJS Platform Serving European Cities

Virtual City Systems (VCS) built their VC Map platform on CesiumJS, handling CityGML ingestion, mesh processing, and real-time visualization for cities across Europe. VCS released VC Map as open source in 2021.

The platform renders terrain, CityGML models, mesh data, and point clouds at scale in the browser. Strategic planning becomes visual. Public engagement becomes interactive.

GovHack Hobart: Offline-First Digital Twin Without Enterprise Infrastructure

Our GovHack-winning Digital Twin for Hobart used Three.js for rendering and PMTiles on S3 for tile storage. The architecture prioritized accessibility: PWA capabilities for offline use, progressive loading for slow connections, minimal compute requirements.

For government projects where reliability trumps features, this approach demonstrates that digital twins can deploy without massive IT investment -- a static site with pre-processed 3D tiles on commodity object storage.

Start with Visualization, Add Simulation Incrementally

The technology stack for digital twins is stable and standardized. The harder problem is governance: who maintains the twin, how is data freshness ensured, what is the update workflow. These are organizational questions, not technical ones.

A well-maintained 3D model with integrated building data delivers immediate value for planning and public engagement. Real-time sensor integration and predictive simulation can follow once the foundation and governance model are solid.

Have a project in mind?

Location

  • Canberra
    ACT, Australia