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

| Claude Does | You Decide |

|-------------|------------|

| Structures video workflow | Final creative vision |

| Suggests shot compositions | Equipment selection |

| Creates storyboard templates | Brand aesthetics |

| Generates script frameworks | Final approval |

| Identifies technical requirements | Budget allocation |

What This Skill Does

• Guide le choix de l'outil 3D - Hunyuan3D vs Tripo vs Meshy selon le use case
• Structure le workflow complet - De l'image source au modèle exporté
• Optimise le mesh généré - Réduction de polygones, correction de textures
• Automatise le rigging - Configuration Mixamo pour personnages
• 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

| Outil | Forces | Idéal pour | Limitations |

|-------|--------|------------|-------------|

| Hunyuan3D | Meilleure texture, open source | Personnages, objets détaillés | Cleanup parfois nécessaire |

| Tripo AI | UX simple, rigging auto | Prototypes rapides | Moins de contrôle |

| Meshy | Bon pour stylisé | Assets cartoon/low-poly | Textures moins réalistes |

| Rodin Gen-1 | Vitesse, topology game-ready | Game assets | Moins de fidélité |

| CSM | Multi-view consistency | Objets complexes | Plus lent |

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

| Destination | Format | Notes |

|-------------|--------|-------|

| Three.js / Web | GLB | Format recommandé, embedde textures |

| Unity | FBX | Import natif, configurer materials |

| Unreal | FBX | Nécessite skeleton retargeting |

| React Three Fiber | GLB | Utiliser gltfjsx pour composant |

# 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:

• Nano Banana → Génération character sheet cohérent
• Hunyuan3D → Conversion en mesh 3D
• Blender → Cleanup rapide (5 min)
• Mixamo → Auto-rig + animations idle/select
• 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:

• Cleanup fond (remove.bg)
• Hunyuan3D → Mesh 3D avec textures
• Pas de rigging (statique)
• Export GLB optimisé
• 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:

• CSM → Multi-view reconstruction (meilleur pour objets)
• Cleanup Blender → Simplifier geometry
• Bake textures hautes résolution
• Export GLB
• 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

| Critère | Hunyuan3D | Tripo AI | Meshy | Rodin | CSM |

|---------|-----------|----------|-------|-------|-----|

| Qualité texture | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ |

| Vitesse | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐ |

| Facilité | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |

| Cleanup requis | Moyen | Faible | Faible | Faible | Moyen |

| Prix | Gratuit | Freemium | Freemium | Payant | Freemium |

| Best for | Personnages | Prototypes | Stylisé | Jeux | Multi-view |

Troubleshooting

| Problème | Cause probable | Solution |

|----------|----------------|----------|

| Mesh "explosé" | Fond non transparent | Retirer le fond avant upload |

| Textures manquantes | Export sans embedde | Re-exporter avec textures packées |

| Rigging échoue | Pose non T-pose | Modifier pose dans Blender avant Mixamo |

| Fichier trop lourd | Trop de polygones | Utiliser Decimate modifier |

| Animations saccadées | FPS incompatible | Re-exporter à 30fps |

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*