AI Depth Map Generator: Turn a Single Photo into a Depth Map
Last updated October 18, 2026 · Built and maintained by the ImageFix team · Runs on your device with an open depth-estimation model
This AI depth map generator estimates how far every part of a photo sits from the camera and paints the answer as a depth map: white for near, black for far. You get a grayscale map for 3D and AI tools, a colorized version for visualization, and a live 3D photo effect that moves foreground and background at different speeds.
Photographers use depth maps for lens blur and selective edits. 3D artists use them as displacement maps in Blender and Three.js. AI artists feed them to ControlNet to keep the composition of a scene. Social creators turn a still picture into a short parallax video. All of it happens in your browser, so your photo stays private.
How to Create a Depth Map from a Photo
- Upload a photo. Drag a JPG, PNG or WebP image onto the drop zone, click to browse, or paste with Ctrl+V.
- Preview instantly. The tool shows a Quick estimate right away so you can see the depth layout without waiting.
- Generate with AI. Choose "AI model" and click Generate. The tool downloads the model once, then predicts a detailed depth map on your device.
- Adjust the look. Pick a color map, invert near and far, tune black point, white point, gamma and smoothing, and compare the result with your photo.
- Try the 3D effect and export. Open the 3D effect tab, set strength and focus, then download the depth PNG, the colorized map or a short parallax video.
How Monocular Depth Estimation Works
A normal photo has no depth channel, so the tool has to infer depth from a single image. Monocular depth estimation does this with a neural network trained on huge collections of images. The network recognizes perspective, object size, occlusion, texture gradients and typical scene layouts, then predicts a depth value for every pixel.
The tool uses Depth Anything V2 (the Small variant) in ONNX format. Transformers.js runs it through ONNX Runtime Web, using WebGPU when your browser supports it and WebAssembly otherwise. The model predicts relative inverse depth, so larger values mean nearer surfaces.
What happens after the prediction
- Normalize: the tool stretches the 2nd to 98th percentile of values to the full range, so one outlier cannot flatten the map.
- Smooth: an optional box blur removes noise that would cause jagged edges in 3D effects.
- Levels and gamma: black point, white point and gamma let you push the focus toward the foreground or background.
- Color map: a lookup table paints the 256 depth levels as grayscale, Turbo, Viridis, Magma, Inferno or Plasma.
AI Model vs. Quick Estimate
| AI model | Quick estimate |
|---|
| How it works | Neural network that understands scenes and objects | Simple cues: vertical position, sharpness, haze and center bias (not AI) |
| Download | One-time model download, then cached | None |
| Speed | Seconds on GPU, longer on CPU | Instant |
| Best for | Portraits, products, interiors, complex scenes | Fast previews, landscapes, shallow depth-of-field photos |
| Weak spots | Glass, mirrors, fog, thin wires | Flat scenes, objects standing on the same ground line |
How to Read a Depth Map and Choose a Color Map
In the default grayscale map, white pixels are near and black pixels are far. Most 3D tools expect this convention. If your software expects the opposite, tick Invert.
| Color map | Use it for |
|---|
| Grayscale | Blender, Three.js, Photoshop masks and ControlNet. Always export this one for tools. |
| Turbo | High-contrast visualization where you want to see small depth steps. |
| Viridis | Presentations and reports; perceptually even and readable for most color-vision types. |
| Magma, Inferno, Plasma | Dramatic, artistic visualizations and thumbnails. |
The histogram under the preview shows how depth values spread across the image. A map that crowds into a narrow band looks flat; enable Auto-stretch contrast or move the black and white points to use the full range.
What You Can Do with a Depth Map
- 3D photo and parallax effects: shift layers by depth to turn a still photo into a gentle camera move, like the 3D photos on social platforms.
- Displacement in 3D software: use the grayscale map in Blender's Displace modifier to sculpt a relief from a photo.
- Web 3D: apply the map as a displacementMap in Three.js.
- AI image generation: condition ControlNet depth models on the map to keep a scene's structure while changing its style.
- Selective editing: use the map as a mask for depth-based blur, fog, color grading or relighting in your editor.
- Visualization and teaching: color maps help explain scene layout, composition and the idea of a depth map.
Quick Three.js example
const loader = new THREE.TextureLoader();
const material = new THREE.MeshStandardMaterial({
map: loader.load('photo.jpg'),
displacementMap: loader.load('photo-depth.png'), // white = near
displacementScale: 0.6,
});
const mesh = new THREE.Mesh(new THREE.PlaneGeometry(4, 3, 256, 192), material);
scene.add(mesh);
Tips for Better Depth Maps and Cleaner 3D Effects
- Choose layered scenes. A clear foreground, midground and background gives the model strong cues.
- Use sharp, well-lit photos. Motion blur and heavy noise confuse depth edges.
- Start at 1024 px. Larger sizes add detail but take longer; you can scale the export to the original size.
- Keep 3D strength low. Small camera moves look natural; large moves reveal missing background behind subjects.
- Set the focus plane on your subject. The subject then stays still while the rest of the scene moves.
- Add a little smoothing. One or two pixels of blur reduces edge tearing in the parallax effect.
- Prepare the photo first. Crop and size it with the Image Resizer or clean it up with the Image Enhancer before generating the map.
Limitations to Know Before You Use the Result
- Depth is relative, not metric. The map orders surfaces by distance; it does not measure meters.
- Hard materials confuse any model. Mirrors, glass, water, fog and thin structures such as wires and hair often produce errors.
- Edges can halo. The map is smooth by nature, so object borders may bleed slightly into the background.
- Exports are 8-bit. The PNG has 256 depth levels, which is plenty for effects but can show banding on very large displacement.
- The Quick estimate is a heuristic. Use the AI model whenever accuracy matters.
Privacy and Performance
The tool never uploads your photo. Your browser decodes the image, runs the model and renders the result locally. The only network request for the AI path fetches the open model files, which your browser caches after the first run. WebGPU-capable browsers run the model on the GPU and finish faster; other browsers fall back to WebAssembly on the CPU. If the model cannot load, the tool tells you and shows the Quick estimate instead.
Frequently Asked Questions
What is a depth map?
A depth map is a grayscale or color image that stores how far each pixel of a photo is from the camera. In this tool, white means near and black means far. Software uses the map to blur backgrounds, shift layers for 3D effects, build 3D meshes and guide AI image generators.
How does the AI depth map generator work?
The tool runs a monocular depth-estimation neural network (Depth Anything V2 Small) directly in your browser through Transformers.js and ONNX Runtime. The network predicts the relative depth of every pixel from a single photo. The tool then normalizes the result, smooths it and lets you choose a color map.
Is the depth map accurate in real-world distances?
No. Single-photo depth estimation returns relative depth: it tells you which parts are nearer or farther, not how many meters away they are. That is ideal for visual effects, 3D photos and displacement, but unsuitable for measurement.
What is the difference between the AI model and the Quick estimate?
The AI model understands objects and scenes, so it separates a subject from its background reliably. The Quick estimate is not AI. It combines simple cues (position in the frame, sharpness and haze) and works instantly without a download, which makes it a good preview but less accurate on complex scenes.
Does the tool upload my photo to a server?
No. Your photo never leaves your device; the tool processes it with your own CPU or GPU. The AI model files, not your photo, download once from a public model host and your browser caches them for later visits.
How big is the AI model download?
The first AI run downloads the model once, roughly 25 to 100 MB depending on your device and browser. Later runs reuse the cached files. Use the Quick estimate if you want a result without any download.
Which photos give the best depth maps?
Photos with clear foreground, midground and background layers work best: portraits, product shots, interiors and landscapes. Good lighting and sharp subjects help. Mirrors, glass, water reflections, fog and very thin objects such as wires and hair are harder for any single-image depth model.
How do I use the depth map in Blender, Three.js or Photoshop?
Download the grayscale PNG. In Blender, use it as a texture in a Displace modifier. In Three.js, assign it as the displacementMap of a material on a subdivided plane. In Photoshop, use it as a channel or layer mask for lens blur and depth-based selections.
Can I use the depth map with Stable Diffusion ControlNet?
Yes. ControlNet depth models accept a grayscale depth image as a conditioning input. Download the grayscale PNG with near as white (the default) and load it into your ControlNet depth preprocessor slot.
How does the 3D photo effect work?
The 3D effect shifts each pixel sideways by an amount based on its depth, so near objects move more than far ones as you move the pointer. This is called depth-based parallax. The strength and focus-plane sliders control how far layers move and which depth stays still.
Why do I see stretched edges in the 3D effect?
Parallax reveals areas that the photo never captured behind foreground objects. Keep the strength low, add a little smoothing, and set the focus plane near your subject to minimize stretching. Smaller movements always look cleaner.
What formats and sizes can I use?
The tool accepts JPG, PNG, WebP and other image formats your browser can decode. It processes images at up to 768, 1024 or 1536 pixels on the longest side, and you can export the depth map at that size or scaled to the original image size.
Can I use the output commercially?
You keep the rights to your own photos and to depth maps made from them. The AI model has its own license terms, listed on its model card on Hugging Face; review them before using the tool in a commercial workflow.
Related ImageFix Tools
Sources and Further Reading
