Atelier

2026-06-13

Outil Relief

Transformer une image plate en scene 3D parallaxe : la profondeur est estimee par IA directement dans le navigateur (WebGPU), la camera suit la souris et un mouvement cinematique se declenche au repos.

Image IAToolsParallaxeDepth3D
Acceder a l outil interactif

Ce que fait l outil

Relief donne du relief 3D a une image fixe (un paysage, une illustration, une photo). Il estime une carte de profondeur, deforme l image en consequence et la fait vivre : la camera reagit a la souris, et apres quelques secondes d inactivite un mouvement automatique cinematique prend le relais. Tout tourne 100% dans le navigateur, sans upload ni serveur.

Quand l utiliser

  • Donner vie a un decor ou un splash art (page d accueil, fiche, banniere animee).
  • Previsualiser l effet “photo 3D” facebook/iOS sur une image generee (ComfyUI, fal.ai, etc.).
  • Produire une depth map exploitable (export PNG) pour un autre pipeline.

Tutoriel rapide

  1. Ouvrir /outils/relief.
  2. Charger une image : glisser-deposer, bouton de parcours, URL, ou un des exemples integres (Vallee, Moto, Cyberpunk, Foret).
  3. Cliquer Generer (IA) pour estimer la profondeur (le 1er lancement telecharge le modele ~50 Mo, ensuite c est instantane). Les exemples ont deja leur depth map precalculee.
  4. Bouger la souris sur la scene : la parallaxe suit le curseur.
  5. Regler le relief : plan de mise au point, profondeur, amplitude, style de camera (rotation / translation), et le detourage (fondu des bords).
  6. Choisir le mouvement automatique au repos : Orbite, Balayage, Flottement ou Dolly.
  7. Passer en plein ecran (bouton ou touche F) : l image remplit l ecran bord a bord, sans surcouche.

Reglages cles

  • Plan de mise au point : la profondeur qui reste fixe quand la camera bouge (le reste glisse autour).
  • Profondeur : intensite du relief (deplacement en Z du maillage).
  • Amplitude / Style camera : dosage du mouvement, et melange entre rotation (decalage shader) et translation (deplacement camera).
  • Detourage / fondu des bords : dilatation de la depth map pour detourer les silhouettes et eviter les etirements.
  • Mouvement auto : presets d animation au repos inspires de DepthFlow (orbite, balayage horizontal, flottement vertical, dolly avec zoom doux).
  • Detail du maillage / Qualite : finesse de la grille 3D et pixel ratio de rendu.

Comment ca marche (technique)

  • Rendu Three.js : un plan fortement subdivise, dont chaque sommet est deplace en Z par la valeur de profondeur.
  • La parallaxe est appliquee dans le vertex shader : decalage XY pondere par l ecart au plan de mise au point, avec un fondu smoothstep sur les bords pour ne pas dechirer le cadre.
  • Profondeur estimee par Depth-Anything V2 (small) via transformers.js, sur WebGPU si disponible (sinon repli WASM) — la carte graphique locale est utilisee, mais tout reste cote navigateur.
  • Dilatation morphologique de la depth map pour detourer proprement les plans (les silhouettes “gagnent” quelques pixels vers l arriere-plan).

Limites actuelles

  • Premiere generation = telechargement du modele (~50 Mo), puis mis en cache navigateur.
  • La deformation par maillage peut etirer legerement les bords des silhouettes tres contrastees (attenue par le detourage).
  • Une image importee depuis une URL doit autoriser le cross-origin (CORS) pour la generation de profondeur.

Evolutions envisagees

  • Rendu par ray-march (parallax occlusion, facon DepthFlow) pour une occlusion exacte sans etirement de bords.
  • Profondeur de champ et vignette cinematiques basees sur la depth.
  • Export d une animation (boucle video / GIF) du mouvement.
  • Modeles de profondeur alternatifs (Depth Pro, Marigold) si une variante navigateur devient disponible.

Credits

  • Technique de parallaxe par depth map inspiree de tiefling.app (combatwombat, Apache-2.0) et des presets d animation de DepthFlow.
  • Images d exemple : Unsplash (libres de droit).

Acces rapide

  • Outil interactif: /outils/relief