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. It is live at skyline.devopsrockstars.com.

Run it locally

With Bun installed (the version is pinned in mise.toml):

bun install --ignore-scripts
bun run build:site
python3 -m http.server -d dist

Then open 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 enhanced drawing, the original drawing, and a WebGL prototype one button away | 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

sh scripts/git/install-hooks.sh   # once per clone
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 and its verification. To add a building or improve one, start with Adding a building or the fidelity queue. Coding agents follow AGENTS.md.

All documentation is indexed in docs/.