Générateur de depth map en ligne, gratuit

Source

Aucune image

Ou glisse-dépose, ou colle avec Ctrl/Cmd + V. Rien n'est envoyé sur un serveur : l'image reste dans ton navigateur.

Modèle

Apache-2.0

Options avancées

Calcul

Poids

Les modèles sont téléchargés une seule fois depuis Hugging Face puis gardés en cache par le navigateur.

Qualité

Affinage

Accroche aux contours

Lissage des surfaces

Élargir le premier plan

Adoucir

L'accroche cale les bords de la profondeur sur ceux de l'image. Le lissage efface le faux relief des textures tout en gardant les contours. Élargir et adoucir limitent les déchirures dans un effet de parallaxe.

Tonalité

Plan lointain (noir)

Plan proche (blanc)

Courbe

Paliers

Inverser (proche = noir)

Aperçu relief

Amplitude

Plan fixe

Mouvement automatique

Survole l'aperçu Relief 3D pour piloter la parallaxe à la souris.

Export

Taille

Intégration WebGL (OGL)

Shader de parallaxe avec occlusion, le même que l'aperçu Relief 3D. Blanc = proche.

// Parallaxe WebGL avec OGL (npm i ogl) à partir d'une image et de sa depth map.
// Convention : blanc = proche. Même shader que l'aperçu Relief 3D.
import { Renderer, Program, Mesh, Triangle, Texture, Vec2 } from 'ogl';

const renderer = new Renderer({ dpr: Math.min(window.devicePixelRatio, 2) });
const gl = renderer.gl;
document.body.appendChild(gl.canvas);

function loadTexture(src, options = {}) {
  const texture = new Texture(gl, { generateMipmaps: false, ...options });
  const img = new Image();
  img.crossOrigin = 'anonymous';
  img.onload = () => (texture.image = img);
  img.src = src;
  return texture;
}

const program = new Program(gl, {
  vertex: /* glsl */ `#version 300 es
    in vec2 position;
    in vec2 uv;
    out vec2 vUv;
    void main() { vUv = uv; gl_Position = vec4(position, 0.0, 1.0); }`,
  fragment: /* glsl */ `#version 300 es
    precision highp float;
    uniform sampler2D tImage;
    uniform sampler2D tDepth;
    uniform vec2 uMouse;      // -1..1
    uniform float uStrength;  // amplitude, 0.02 à 0.06
    uniform float uFocus;     // profondeur qui reste immobile (0 = fond, 1 = premier plan)
    in vec2 vUv;
    out vec4 fragColor;

    float depthAt(vec2 uv) { return texture(tDepth, uv).r; }
    // Export "WebGL RG" (16 bits) : charger tDepth en NEAREST, puis remplacer par :
    // float depthAt(vec2 uv) { vec2 rg = texture(tDepth, uv).rg; return (rg.r * 65280.0 + rg.g * 255.0) / 65535.0; }

    void main() {
      vec2 uv = (vUv - 0.5) * (1.0 - 2.0 * uStrength * max(uFocus, 1.0 - uFocus)) + 0.5;
      vec2 par = -uMouse * uStrength;
      const int STEPS = 48;
      float h = 1.0, prevH = 1.0;
      for (int i = 0; i <= STEPS; i++) {            // marche du premier plan vers le fond
        if (depthAt(uv - (h - uFocus) * par) >= h) break;
        prevH = h;
        h -= 1.0 / float(STEPS);
      }
      float lo = max(h, 0.0), hi = prevH;
      for (int j = 0; j < 5; j++) {                 // affinage par dichotomie
        float m = 0.5 * (lo + hi);
        if (depthAt(uv - (m - uFocus) * par) >= m) lo = m; else hi = m;
      }
      fragColor = texture(tImage, clamp(uv - (lo - uFocus) * par, 0.0, 1.0));
    }`,
  uniforms: {
    tImage: { value: loadTexture('image.jpg') },
    tDepth: { value: loadTexture('image-depth8.png') },
    uMouse: { value: new Vec2() },
    uStrength: { value: 0.04 },
    uFocus: { value: 0.5 },
  },
});

const mesh = new Mesh(gl, { geometry: new Triangle(gl), program });
const target = new Vec2();
window.addEventListener('pointermove', (e) => {
  target.set((e.clientX / window.innerWidth) * 2 - 1, 1 - (e.clientY / window.innerHeight) * 2);
});
function resize() { renderer.setSize(window.innerWidth, window.innerHeight); }
window.addEventListener('resize', resize);
resize();
requestAnimationFrame(function loop() {
  requestAnimationFrame(loop);
  program.uniforms.uMouse.value.lerp(target, 0.08);
  renderer.render({ scene: mesh });
});

Créer une depth map à partir d'une image, gratuitement

Kuartz Depth calcule la carte de profondeur (depth map) de n'importe quelle photo, rendu 3D ou illustration. Les modèles d'IA Depth Anything tournent directement dans ton navigateur, sur ta carte graphique (WebGPU) ou ton processeur (WebAssembly) : ton image n'est jamais envoyée sur un serveur, et il n'y a ni compte à créer ni filigrane.

Générer une depth map en 4 étapes

Importe ton image

Clique sur « Importer des images », glisse-dépose tes fichiers ou colle une image avec Ctrl/Cmd + V. Tu peux en charger plusieurs et tout calculer d'un coup.

Génère la profondeur

Choisis un modèle et une qualité (Rapide, Précis ou Haute déf.), puis lance le calcul. Le modèle se télécharge une seule fois, puis reste en cache.

Affine le résultat

Accroche la profondeur aux contours, lisse les surfaces, règle le plan lointain et le plan proche, la courbe, ou des paliers pour un découpage 2,5D.

Exporte

Télécharge en PNG 16 bits, PNG 8 bits, WebGL RG ou normal map, exporte tout en .zip, ou copie la depth map pour la coller dans Figma.

Qu'est-ce qu'une depth map ?

Une depth map, ou carte de profondeur, est une image en niveaux de gris où chaque pixel indique la distance entre la caméra et la scène. Par défaut, le blanc correspond aux zones proches et le noir aux zones lointaines.

Depth Anything estime cette profondeur à partir d'une seule image, sans capteur 3D ni paire stéréo : c'est de l'estimation de profondeur monoculaire. La depth map sert ensuite de base à un effet de parallaxe, à un displacement ou à un flou de profondeur.

À quoi sert une depth map ?

Parallaxe 3D sur un site

Fais bouger une photo en relief au survol de la souris. L'intégration WebGL (OGL) fournie reprend le shader de l'aperçu Relief 3D.

Motion design et 3D

En PNG 16 bits, sans effet d'escalier, la depth map sert de displacement dans Blender ou de calque de profondeur dans After Effects et TouchDesigner.

Flou de profondeur

Utilise-la comme carte de profondeur pour simuler un flou d'objectif réaliste dans Photoshop ou en compositing.

Éclairage en shader

La normal map calculée depuis la profondeur (convention OpenGL) permet de ré-éclairer une image en temps réel.

Quel modèle choisir ?

Modèle	Téléchargement	Pour qui
Depth Anything V2 Small	27 à 99 Mo	Le choix fiable par défaut : rapide, net, utilisable en projet client.
Depth Anything 3 Small	106 Mo	Dernière génération, géométrie plus juste. Expérimental dans le navigateur.
Depth Anything 3 Base	413 Mo	La meilleure qualité proposée, pour une machine récente avec un bon GPU.

Les trois modèles sont publiés sous licence Apache-2.0. Tu peux aussi charger ton propre modèle au format .onnx depuis les options avancées.

Questions fréquentes

Mes images sont-elles envoyées sur un serveur ?

Non. Tout se passe dans ton navigateur : l'image ne quitte jamais ta machine. Pour le calcul, seuls le moteur ONNX Runtime et les fichiers du modèle sont téléchargés (depuis jsDelivr et Hugging Face), une seule fois, puis gardés en cache.

Kuartz Depth est-il vraiment gratuit ?

Oui : gratuit, sans compte, sans limite et sans filigrane. Le code source est ouvert, sous licence MIT, sur GitHub.

Faut-il une carte graphique puissante ?

Non. Si ton navigateur prend en charge WebGPU, le calcul passe par la carte graphique ; sinon il tourne sur le processeur en WebAssembly, plus lentement. Le moteur utilisé s'affiche en haut à droite de l'outil.

Dans une depth map, le blanc est-il proche ou lointain ?

Par défaut, le blanc est proche et le noir lointain : c'est la convention attendue par la plupart des effets de parallaxe et de displacement. L'option « Inverser » donne la convention opposée.

Quelle résolution pour la depth map exportée ?

La taille de ton image d'origine, ou une version réduite à 4096, 2048 ou 1024 px. En qualité « Haute déf. », l'image est aussi analysée par tuiles pour garder le détail des grandes images.

Puis-je utiliser les depth maps dans un projet commercial ?

Les modèles proposés ici sont publiés sous licence Apache-2.0, qui autorise l'usage commercial. Si tu charges ton propre modèle .onnx, vérifie sa licence.

Comment créer un effet parallaxe 3D avec la depth map ?

Vérifie le rendu dans l'aperçu « Relief 3D », exporte la depth map, puis reprends le code de la section « Intégration WebGL (OGL) » : c'est le même shader de parallaxe, avec gestion de l'occlusion, prêt à intégrer dans un site.

Quels navigateurs sont compatibles ?

Les versions récentes de Chrome, Edge, Firefox et Safari. WebGPU accélère le calcul là où il est disponible et l'aperçu utilise WebGL 2 ; sans WebGL 2, le calcul et l'export fonctionnent quand même.