Spencer Morris
← Project index
ENGINEERING NOTES / 23 3 MIN READ

Street Craft

An editable voxel world built from street panoramas and map geometry, with photograph-projected surfaces and persistent local edits.

Prototype / development
Street Craft running at Times Square with its voxel hotbar and travel menuView full size ↗
Actual local Street Craft build, loading Times Square imagery and map geometry. The game menu and inventory sit over the photographed street. Imagery © Google; map attribution remains visible in the capture.
01 / THE PROBLEM

What needed solving.

A panoramic photo looks convincing from its capture point, but it is not a volume that a player can dig into or build on.

02 / SYSTEM OUTLINE
  1. 01Panorama + map footprints
  2. 02Projected voxel chunks
  3. 03Editable street + local deltas

Simplified from the implementation and project notes.

03 / TECHNICAL DECISIONS

How it fits together.

Turn map inputs into a voxel proxy

The app finds a nearby Street View panorama, fetches OpenStreetMap vector data, rasterizes building outlines and heights into one-meter columns, then composes that geometry with a sparse map of player edits.

Project photos onto editable geometry

Untouched voxel faces sample the panorama from its capture center; exposed faces use block textures. While walking, adjacent panoramas cross-fade. Sixteen-cubed chunks use greedy meshing, allowing a flat untouched street surface to collapse into a single quad.

Persist local edits; expose reconstruction limits

Edits are stored in browser localStorage and reloaded for nearby visits at the same block size. Core voxel behavior has a focused test and the app has a typecheck. Cars and trees are painted into photos, terrain is flat, map footprints may be incomplete, and saved edits do not sync to other browsers.

FEATURE WALKTHROUGH

Inside the software.

Browser prototype turns linked Street View panoramas and OpenStreetMap building geometry into an editable voxel world. The photo projection is viewpoint-dependent and player edits remain local to one browser.

01 / FEATURE

Navigate linked street panoramas

Start from a real street panorama and travel through linked capture points, cross-fading imagery as the view changes.

HOW IT WORKS

Map Tiles API locates nearby panoramas, loads a low-resolution preview before full tiled imagery, and uses neighbour links for movement/prefetch.

Implemented prototype; requires a configured Google Maps API key and billed tile requests.

Implementation references
  • street-craft/README.md
  • street-craft/src/streetview.ts
  • street-craft/src/pano.ts
  • street-craft/src/panoSampler.ts
  • street-craft/src/arrows.ts
02 / FEATURE

Build voxel geometry from map data

Convert building footprints and heights into an editable voxel proxy aligned to the local street grid.

HOW IT WORKS

OpenStreetMap vector tiles are rasterized into one-meter columns; the world combines terrain and buildings with sparse player edits.

Implemented prototype; map coverage and building measurements are approximate.

Implementation references
  • street-craft/README.md
  • street-craft/src/osm.ts
  • street-craft/src/heightfield.ts
  • street-craft/src/geo.ts
  • street-craft/src/world.ts
03 / FEATURE

Project street photography onto editable surfaces

Color untouched world faces from the panorama viewpoint, while newly exposed faces use block textures; cross-fade projection between adjacent viewpoints.

HOW IT WORKS

World material samples panorama pixels from capture center; enclosing sphere supplies sky and geometry beyond modeled height. Tint mode reveals proxy alignment.

Implemented; projection artifacts increase away from capture point.

Implementation references
  • street-craft/README.md
  • street-craft/src/worldMaterial.ts
  • street-craft/src/main.ts
  • street-craft/src/panoSampler.ts
04 / FEATURE

Mine, place and use blocks

Walk, mine photographed road/facade surfaces, place blocks, and use TNT and flint-and-steel interactions.

HOW IT WORKS

Raycast interaction updates sparse world deltas; mined photo surfaces can become street blocks with extracted imagery. Block selection uses hotbar controls.

Implemented prototype.

Implementation references
  • street-craft/README.md
  • street-craft/src/raycast.ts
  • street-craft/src/blocks.ts
  • street-craft/src/hud.ts
  • street-craft/src/fx/effects.ts
05 / FEATURE

Greedy chunk meshing

Reduce voxel geometry by merging adjacent faces, allowing untouched flat regions to render with few polygons.

HOW IT WORKS

Sixteen-cubed chunks are greedy-meshed and refreshed around changed areas rather than representing every block face separately.

Implemented; performance depends on device and scene size.

Implementation references
  • street-craft/README.md
  • street-craft/src/mesher.ts
  • street-craft/src/chunks.ts
  • street-craft/src/core.test.ts
06 / FEATURE

Walk and free-flight inspection

Walk along Street View arrows or toggle free roam to fly around and inspect reconstructed geometry.

HOW IT WORKS

Keyboard and pointer controls support movement, look, mining/place actions, hotbar slots and free-flight speed controls.

Implemented prototype.

Implementation references
  • street-craft/README.md
  • street-craft/src/main.ts
  • street-craft/src/hud.ts
  • street-craft/src/arrows.ts
07 / FEATURE

Persist edits by area

Reload local edits when revisiting the same area and block size in the same browser.

HOW IT WORKS

Sparse edit data is serialized through browser localStorage and associated with area identity and resolution.

Implemented; storage is local to the browser and does not sync across devices.

Implementation references
  • street-craft/README.md
  • street-craft/src/storage.ts
  • street-craft/src/world.ts
  • street-craft/src/core.test.ts
08 / FEATURE

Procedural textures, icons and effects

Generate block textures, icons, hand animations, sound and visual effects from code instead of bundled art assets.

HOW IT WORKS

Asset and effects modules create textures and interaction feedback at runtime, including cube/hand/audio effects.

Present in the reviewed source.

Implementation references
  • street-craft/README.md
  • street-craft/src/assets/textures.ts
  • street-craft/src/assets/icons.ts
  • street-craft/src/fx/audio.ts
  • street-craft/src/fx/effects.ts
  • street-craft/src/fx/hand.ts
04 / WORKING METHOD

Building and checking it.

The player moves between linked panoramas, mines or places blocks, and can switch to free flight to inspect the reconstructed geometry. Area edits persist in browser localStorage.

The implementation exposes a geometry tint view for diagnosing the relationship between the photo and its proxy surfaces. This is particularly useful because projection can hide errors at the original viewpoint.

05 / STATUS & LIMITS

Cars, trees, and people are painted onto proxy surfaces and smear away from the capture center. Flat ground misaligns in hilly areas; map footprints can be incomplete. This is local browser persistence, not a shared multiplayer world.

Source notes

Based on repository code and project records reviewed on October 30, 2026. Historical checks are described as recorded, not rerun for this article. Screenshots, renders, and mockups are labeled individually.

  • street-craft/README.md
  • street-craft/src/worldMaterial.ts
  • street-craft/src/mesher.ts
  • street-craft/src/main.ts
  • street-craft/src/storage.ts
  • street-craft/src/core.test.ts
  • street-craft/package.json
← All projectsNEXT PROJECTMusephoria →