image-to-3d-pipeline

What this skill does

# 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

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

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

```bash
# 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:**
```jsx
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