Skip to content
runonweb

Depth: Depth estimation

Turn a single photo into a depth map. Great for parallax effects, portrait blur or 3D-ish previews without any server round-trip.

Try Depth

Runs in this tab · nothing uploaded

Pick a sample or drop an image. It runs right away
Try with

Drop an image here

or click · PNG JPG WEBP

What it does

A depth map from a single photo.

  • Output is a grayscale PNG: brighter means closer.
  • The Small variant is Apache-2.0; larger Depth Anything models are not.
  • Sample photos, resized: Obelisco by Roberto Fiadone (CC BY-SA 4.0), Congreso by Jorge Royan (CC BY-SA 3.0), Caminito by Lars Curfs (CC BY-SA 3.0 NL), Palacio Barolo by Beatrice Murch (CC BY 2.0).

Specifications

Package
runonweb/depth
License
Apache-2.0
Download
~50 MB / ~27 MB
Quantization
fp16 on WebGPUq8 on WASM
Backend
WebGPUWASM fallback
Input
Image

Get started with runonweb/depth

pnpm add runonweb
runonweb/depthts
import { DepthEstimator } from 'runonweb/depth'

const estimator = new DepthEstimator()
await estimator.load()

const { depth, width, height } = await estimator.estimate(imageFile)
// depth is a grayscale PNG Blob

document.querySelector('img').src = URL.createObjectURL(depth)

estimator.dispose()

Same shape everywhere: construct, load(), run, dispose(). Pass onProgressto show download progress on first use.

Questions about Depth

Does Depth run on device?

Yes. Weights download once and stay in the browser. Nothing is sent to a server.

Which model does Depth use?

Depth Anything V2 Small by DepthAnything (HKU / TikTok), under Apache-2.0. runonweb loads the onnx-community/depth-anything-v2-small weights and runs fp16 on WebGPU · q8 on WASM.

How big is the Depth download?

~50 MB / ~27 MB, fetched once on first use. The browser caches the weights, so later loads skip the network and keep working offline.

What does Depth cost?

Nothing. runonweb is free and MIT-licensed, with no device limits, tokens or sign-in. The weights keep their own license: Apache-2.0.

Which browsers support Depth?

Chromium browsers use WebGPU. Firefox and Safari fall back to WebAssembly automatically, slower but identical output.

Can I use a different model with runonweb/depth?

Yes. See each module’s docs for the options it accepts (model, size, language…). Check the license and test both backends before shipping.