depth-estimation · vision · WebGPU (fp16) · ~100 MB
Give it one ordinary photo — no stereo pair, no depth sensor — and it estimates the distance to every pixel. That single grayscale map is the raw material for 3D parallax, portrait-style background blur, and AR occlusion. It runs entirely on your device; the photo never leaves the tab.
| Model | onnx-community/depth-anything-v2-small |
|---|---|
| Task / pipeline | depth-estimation — monocular (single-image) relative depth |
| Architecture | DINOv2 ViT-S encoder + DPT depth head → one depth value per pixel |
| Quantization | fp16 (half precision) ONNX |
| Backend | WebGPU (fp16); falls back to WebAssembly where WebGPU is absent |
| Download | ~100 MB, cached after first load |
| License | Apache-2.0 (Depth Anything V2 Small) |
| Web APIs | WebGPU, Web Workers, Canvas 2D, FileReader — WebGPU is the only non-Baseline piece, and the page says so if it's missing |
Pick or drop a photo, then estimate depth. Warmer / brighter means closer; darker means further away. Switch the colour map to read the scene differently.
The model doesn't output a picture — it outputs a tensor of real numbers, one per pixel: the raw relative depth. Bigger = nearer. The colour map above is just those numbers, min–max normalized to 0–255. Below is the honest view: the raw range straight from the model and how the depths are distributed across the scene.
| predicted_depth shape | – |
|---|---|
| raw depth range | – |
| mean raw depth | – |
| pixels estimated | – |
Depth used to need special hardware — a stereo rig, a LiDAR sensor, a structured-light camera. Depth Anything estimates it from a single frame, small enough and fast enough to run in a web page. Once you know how far away each pixel is, a whole class of effects opens up client-side:
One photo in, a colourised depth map out — read distance as colour.
Depth-driven background blur — fake a portrait-mode lens in the browser.
3D parallax — tilt a flat photo with your mouse and feel the depth.
Depth + background removal → a pop-out composite: sharp subject over a depth-blurred scene.
Depth is a one-liner with Transformers.js. The pipeline returns both a ready-to-display image and the raw tensor:
import { pipeline } from "@huggingface/transformers";
const estimator = await pipeline(
"depth-estimation",
"onnx-community/depth-anything-v2-small",
{ device: "webgpu", dtype: "fp16" }, // ~100 MB, cached after first load
);
const { depth, predicted_depth } = await estimator(imageURL);
// depth → RawImage: grayscale, min–max normalized to 0–255 (great for display)
// predicted_depth → Tensor: the raw per-pixel relative depth (dims = [H, W]); bigger = nearer
This page colourises depth on a canvas and reads predicted_depth for
the real range + distribution in "See inside". Inference runs in a Web Worker, so estimating a
large photo never freezes the page.