guia-matthieu/clawfu-skills/image-to-3d-pipeline

Image to 3D Pipeline

Transformez une image 2D en modèle 3D animé prêt pour le web ou le jeu en moins de 30 minutes, en utilisant le workflow Dilum Sanjaya (Hunyuan3D + Mixamo).

When to Use This Skill

• Créer un personnage 3D pour un site web - Mascotte, avatar, illustration interactive
• Prototyper un asset de jeu - Character design, props, environnements
• Produire du contenu marketing 3D - Produits rotatifs, personnages animés
• Convertir des illustrations existantes - Logo, mascotte, character design → 3D
• Tester une idée rapidement - Prototype 3D en 30 minutes au lieu de jours

Methodology Foundation

Source: Dilum Sanjaya (@DilumSanjaya) - Game Character Pipeline (2025-2026)

Core Principle: "L'image 2D est votre blueprint. Hunyuan3D génère le mesh, Mixamo ajoute le rig automatiquement. En 30 minutes, vous avez un personnage animé utilisable dans Three.js ou Unity."

Why This Matters: Traditionnellement, passer d'un concept 2D à un modèle 3D riggé prenait des jours de travail de modélisation. Ce workflow réduit le temps à moins d'une heure tout en produisant des assets de qualité suffisante pour la production.

What Claude Does vs What You Decide

What This Skill Does

1. Guide le choix de l'outil 3D - Hunyuan3D vs Tripo vs Meshy selon le use case
2. Structure le workflow complet - De l'image source au modèle exporté
3. Optimise le mesh généré - Réduction de polygones, correction de textures
4. Automatise le rigging - Configuration Mixamo pour personnages
5. Prépare l'export - Formats GLB/FBX selon la destination

How to Use

Convertir un character design en personnage 3D animé

J'ai cette image de personnage [joindre image]. Aide-moi à la convertir en modèle 3D animé avec le skill image-to-3d-pipeline.

Créer un produit 3D rotatif

Je veux créer un modèle 3D de mon produit [description] à partir de photos. Guide-moi avec le pipeline image-to-3d.

Prototyper une mascotte de marque

Voici le design de notre mascotte [image]. Je veux la transformer en 3D pour notre site web avec des animations idle.

Instructions

Quand vous aidez à convertir une image 2D en 3D, suivez ce processus :

Step 1: Évaluer l'image source

## Analyse de l'Image Source
 
**Type d'image:**
[ ] Character design / Personnage
[ ] Objet / Produit
[ ] Illustration / Logo
[ ] Photo réelle
 
**Qualité pour conversion 3D:**
[ ] ✅ Vue frontale claire
[ ] ✅ Fond simple ou transparent
[ ] ✅ Couleurs/textures distinctes
[ ] ✅ Proportions cohérentes
[ ] ⚠️ Détails complexes (peut perdre en conversion)
 
**Complexité estimée:**
[ ] Simple - Forme géométrique basique
[ ] Moyenne - Personnage ou objet organique
[ ] Complexe - Détails fins, accessoires multiples

Points clés:

• Les vues frontales donnent de meilleurs résultats
• Les fonds transparents/blancs simplifient le traitement
• Les personnages avec membres distincts se riggent mieux

Step 2: Choisir l'outil de conversion

Recommandation par use case:

• Personnage pour web → Hunyuan3D + Mixamo
• Prototype rapide → Tripo AI
• Asset jeu stylisé → Meshy ou Rodin
• Produit réaliste → Hunyuan3D + post-processing

Step 3: Pipeline de conversion

## Pipeline Standard (Hunyuan3D)
 
### A. Préparation de l'image
1. Supprimer le fond (remove.bg ou outil intégré)
2. Recadrer serré sur le sujet
3. Résolution recommandée: 1024x1024 minimum
4. Sauvegarder en PNG (préserver transparence)
 
### B. Génération 3D
1. Uploader sur Hunyuan3D (hunyuan3d.tencent.com)
2. Sélectionner mode: "Image to 3D"
3. Paramètres recommandés:
   - Quality: High
   - Texture: Enable
   - Multi-view: Enable (si disponible)
4. Générer et télécharger (GLB ou OBJ)
 
### C. Validation du mesh
- Ouvrir dans Blender ou viewer en ligne
- Vérifier: topology, textures, scale
- Identifier problèmes: trous, textures manquantes

Step 4: Optimisation et nettoyage

## Checklist Optimisation
 
### Mesh
[ ] Poly count acceptable (< 50k pour web, < 100k pour jeu)
[ ] Pas de faces inversées
[ ] Pas de vertices orphelins
[ ] Mesh manifold (étanche)
 
### Textures
[ ] UV map correcte
[ ] Résolution appropriée (1024x1024 ou 2048x2048)
[ ] Pas de stretching visible
[ ] Couleurs fidèles à l'original
 
### Scale
[ ] Proportions correctes
[ ] Orientation (Y-up ou Z-up selon destination)
[ ] Centré sur origin

Outils de cleanup:

• Blender (gratuit) - Decimate modifier, texture paint
• Meshlab (gratuit) - Réparation automatique
• gltf-transform (CLI) - Optimisation GLB pour web

Step 5: Rigging avec Mixamo (personnages uniquement)

## Workflow Mixamo
 
1. Exporter le mesh en FBX (sans textures embarquées)
2. Uploader sur mixamo.com
3. Positionner les markers:
   - Chin
   - Wrists
   - Elbows
   - Knees
   - Groin
4. Sélectionner "Auto-Rig"
5. Choisir animations:
   - Idle (standing, breathing)
   - Walk
   - Run
   - Autres selon besoin
6. Télécharger en FBX avec skin

Animations recommandées pour web:

• Idle - Animation de base
• Walking - Pour déplacements
• Waving - Interaction
• Talking - Si voix-off

Step 6: Export et intégration

# Optimisation GLB pour web (gltf-transform)
npx @gltf-transform/cli optimize input.glb output.glb --compress draco

Taille cible:

• Hero 3D (première chose visible): < 2MB
• Asset secondaire: < 500KB
• Personnage animé: < 5MB

Examples

Example 1: Personnage de jeu - Character Selection Screen

Input: Concept art de personnage (style cartoon)

Process:

1. Nano Banana → Génération character sheet cohérent
2. Hunyuan3D → Conversion en mesh 3D
3. Blender → Cleanup rapide (5 min)
4. Mixamo → Auto-rig + animations idle/select
5. Three.js → Intégration avec rotation au survol

Output: Personnage 3D interactif avec 3 animations Temps total: ~45 minutes

Code Three.js basique:

import { useGLTF, useAnimations } from '@react-three/drei'
function Character({ url }) {
  const { scene, animations } = useGLTF(url)
  const { actions } = useAnimations(animations, scene)
  useEffect(() => {
    actions['idle']?.play()
  }, [])
  return <primitive object={scene} />
}

Example 2: Mascotte de marque pour landing page

Input: Illustration 2D de mascotte entreprise

Process:

1. Cleanup fond (remove.bg)
2. Hunyuan3D → Mesh 3D avec textures
3. Pas de rigging (statique)
4. Export GLB optimisé
5. Spline ou Three.js → Animation CSS/JS simple (rotation, bounce)

Output: Mascotte 3D tournante en hero section Temps total: ~20 minutes

Example 3: Produit e-commerce 360°

Input: 4 photos du produit (face, dos, côtés)

Process:

1. CSM → Multi-view reconstruction (meilleur pour objets)
2. Cleanup Blender → Simplifier geometry
3. Bake textures hautes résolution
4. Export GLB
5. model-viewer → Viewer 3D responsive

Output: Viewer 3D interactif avec zoom/rotation Temps total: ~1 heure

Code model-viewer:

<model-viewer
  src="product.glb"
  ar
  auto-rotate
  camera-controls
  shadow-intensity="1"
></model-viewer>

Checklists & Templates

Checklist Pré-Conversion

## Image Source
[ ] Résolution suffisante (min 1024x1024)
[ ] Fond transparent ou uniforme
[ ] Sujet bien délimité
[ ] Style cohérent (pas de mix photo/illustration)
 
## Objectif
[ ] Destination claire (web/jeu/vidéo)
[ ] Poly budget défini
[ ] Animations nécessaires identifiées
[ ] Format d'export choisi

Template Brief 3D

## Brief Conversion 2D → 3D
 
**Image source:** [joindre]
**Type:** [ ] Personnage [ ] Objet [ ] Logo [ ] Autre
 
**Destination finale:**
- Plateforme: _______________
- Interaction: [ ] Statique [ ] Rotation [ ] Animation complète
- Taille max: ___ MB
 
**Style souhaité:**
- [ ] Fidèle à l'original
- [ ] Stylisé/Low-poly
- [ ] Réaliste
 
**Animations (si personnage):**
- [ ] Idle
- [ ] Walk
- [ ] Autres: _______________
 
**Contraintes:**
- _______________

Tool Comparison Matrix

Troubleshooting

Skill Boundaries

What This Skill Does Well

• Structuring video production workflows
• Creating storyboard frameworks
• Suggesting technical approaches
• Providing creative direction templates

What This Skill Cannot Do

• Replace professional videography
• Edit video files directly
• Make final creative judgments
• Guarantee audience engagement

References

Outils

• Hunyuan3D - Tencent, gratuit
• Tripo AI - Freemium
• Meshy - Freemium
• Mixamo - Adobe, gratuit
• gltf-transform - CLI optimisation

Tutorials

• Dilum Sanjaya: Character to 3D workflows (X/Twitter)
• Three.js Fundamentals: Loading 3D models
• React Three Fiber: useGLTF documentation

Research

• docs/research-ai-design-workflows-2026-01.md - Deep research 75+ sources

Related Skills

• character-design-ai/ - Générer des images de personnages cohérentes (input pour ce skill)
• vibe-coding-design/ - Méthodologie itérative rapide
• ai-ui-generation/ - Intégrer le 3D dans une interface générée

Skill version: 1.0 Last updated: 2026-01-28 Category: ai-design