Chicago Skyline
A grayscale Chicago skyline traced from a 2013 photograph taken on the lakefront by the Adler Planetarium, and a 3D city of 34 mapped buildings seen through that photograph's own camera. Hover a building for its name, right-click it for a close look, or switch to the animated drawing it was fitted to. This repo is available on the web at https://skyline.devopsrockstars.com.
Quick start
Install mise and Python 3, which serves the built site:
mise install # Bun and Node from mise.toml
bun install --ignore-scripts
bun run hooks:install # Git hooks, once per clone
bun run build:site
python3 -m http.server -d dist # http://localhost:8000
Serve dist/ over HTTP rather than opening files directly: WebGL and the 3D pages need it.
Pages
| Page | Shows | Docs |
|---|---|---|
index.html | The viewer, mounted as the package mounts it: opens on the 3D skyline, with the original drawing one button away and links to the enhanced drawing and the WebGL prototype | The viewer |
skyline-3d.html | The full-screen 3D skyline on its own: camera views, streets, footprints, celebratory lights, and a building menu | Full-screen 3D skyline |
building-detail.html?building=<id> | One mapped building alone on its platform | Building menu and detail |
skyline-study.html | The 3D scene over the drawing, in the geographic layout or the original drawing's fit | 3D studies |
building-study.html | The Crain Communications Building beside its illustration | 3D studies |
skyline-webgl.html | The drawing's layers rendered as GPU textures | WebGL prototype |
Package
The repository also builds @a2f0/skyline, an ESM
package that mounts the complete viewer into a host page's own document, in a shadow root, with
reusable Three.js scenes and building models, and TypeScript declarations. Every merge to main
publishes a new version to npm; run bun run build:package or bun pm pack to build it locally.
The package guide covers installing, asset copying, mounting, imports, and
releases.
Development
bun run check # typecheck, unit and browser suites; needs Google Chrome
bun run deploy # publish to Cloudflare; needs Node.js 22+ and wrangler login
Development explains the checks, hooks, and PR workflow, and
Deploying the release, its verification, and the gitignored .secrets link
(ln -s ../matrix-secrets/skyline .secrets) that Terraform reads its Cloudflare and R2 state
credentials through. To add a building or improve one, start with
Adding a building or the fidelity queue.
All documentation is indexed in docs/.