Depthbake

A local-first depth image pipeline for the creative web.

Drop a photo, estimate depth in the browser (WebGPU/WASM), preview depth-aware effects, and export a .depthbake package. Everything runs locally — nothing is uploaded.

GitHub npm / depthbake-cli npm / depthbake-runtime npm / depthbake-three
Examples
  1. hero Copy-paste starter — pointer follow, idle autopilot, reduced-motion.
  2. three-scene three.js scene that loads a package into a custom shader.
  3. depth-splats Depth-placed point cloud, importance-sampled from the photo.
  4. relight Cursor-driven point light using depth + normal maps.
Controls
Package export
px
px
MB
Combined size of the included maps. 0 disables the limit.
Photo formats
Extra maps
Effect
View
Camera / Depth
55°
12
.03

Photo formats are bundled as available and listed in meta.json; the runtime tries them in order, with JPEG always included as the universal fallback. Extra maps are optional and declared in meta.json. All included maps share one resolution — if their combined PNG size exceeds the limit, they are rebaked at a smaller common resolution.

Idle