Skip to content
runonweb

Depth estimation

Depth

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

Try it nowDocs

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.

Specifications

Package
runonweb/depth
Base model
Depth Anything V2 Small · DepthAnything (HKU / TikTok)
License
Apache-2.0
Weights
onnx-community/depth-anything-v2-small
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.

What does Depth cost?

Nothing. runonweb is free and MIT-licensed, with no device limits, tokens or sign-in.

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.