Un pigeon cartoon — ou sept autres personnages au choix — qui se déforme en rythme sur vos notes MIDI ou les touches de votre clavier, chacun dans son propre décor 3D animé.
Vue d’ensemble
Midi 3D est un port web d’un lecteur MIDI 3D initialement écrit en Python : un modèle en trois dimensions se déforme en rythme avec les notes jouées, qu’elles viennent d’un vrai clavier MIDI branché, du clavier virtuel à l’écran, des touches du clavier d’ordinateur ou d’un simple clic. Huit personnages sont disponibles, chacun avec son propre décor et son ambiance lumineuse : un pigeon cartoon au coucher de soleil (le personnage par défaut), un humanoïde dans un labo néon avec sol miroir, un danseur sur un dancefloor à boule disco, une main posée en studio, une ballerine sous les projecteurs d’un théâtre, un visage synchronisé sur des échantillons vocaux, un banc de méduses polyphoniques dans les abysses, et un renard dans une clairière forestière. Un bouton dédié fait défiler les huit personnages, modèle et décor changeant ensemble.
Chaque note jouée déclenche à la fois un échantillon audio propre au personnage et une animation dédiée — pas une simple réaction générique — la vélocité de la frappe modulant l’amplitude du mouvement. Seul le pigeon (le plus lourd) est chargé au lancement ; les sept autres personnages sont chargés à la demande au premier changement, puis gardés en cache.
Fonctionnalités
- 8 personnages, 8 décors — pigeon (coucher de soleil), humanoïde (labo néon à sol miroir), danseur (dancefloor à boule disco), main (studio), ballerine (théâtre), visage (studio portrait, lip-sync), méduses (abysses, polyphonique), renard (clairière forestière).
- Animation pilotée par les notes — chaque note MIDI joue un clip d’animation dédié au personnage, la vélocité modulant l’intensité de la déformation.
- Compatible clavier MIDI, clavier PC et clic — un vrai clavier MIDI branché en USB, les touches AZERTY du clavier, ou le clavier virtuel affiché à l’écran.
- Méduses polyphoniques — jusqu’à huit voix de méduses indépendantes peuvent pulser en même temps, une par note tenue.
- Ancrage au sol par frame — les pieds ou les pattes du personnage restent au sol image par image, même pendant un saut.
- Décor et éclairage dédiés à chaque personnage — bloom, brume et exposition changent avec le personnage actif.
- Mode performance et plein écran — interface masquable pour un rendu épuré en direct.
Sous le capot
Chaque modèle est encodé comme un « flipbook » de morph targets glTF plutôt que comme une animation classique : le GLB contient une base plus une série de cibles de déformation relatives, et le moteur joue une frame fractionnaire en pondérant seulement les deux cibles voisines — three.js calcule alors nativement l’interpolation et la mise à l’échelle par la vélocité, sans code supplémentaire. Une carte de correspondance en JSON associe chaque note MIDI à une plage de frames à jouer (avec une éventuelle vitesse propre), et une plage d’inactivité bouclée quand aucune note ne sonne ; la vélocité module l’amplitude de la déformation, sauf pour les notes marquées comme jouées à pleine amplitude quel que soit le toucher (le lip-sync du visage, par exemple).
Le sol est recalculé image par image pour que les appuis restent plantés : la hauteur minimale du modèle est précalculée pour chaque frame de l’animation (impossible à déduire automatiquement puisque les boîtes englobantes standards ignorent les morph targets), le personnage étant re-posé dessus à chaque frame — sauf pour le banc de méduses, qui flotte librement. Les sauts, eux, ne passent pas par la déformation mais par un canal vertical séparé mesuré sur la vraie courbe de hauteur des hanches du modèle source, ajouté par-dessus le recalage au sol. Les modèles les plus lourds sont compressés avec meshopt pour réduire leur poids de téléchargement, et la rotation du plateau tourne uniquement autour de l’axe vertical pour ne jamais montrer le personnage de dos.
Contrôles
| Touche / geste | Action |
|---|---|
| Clavier MIDI branché | Joue les notes sur le personnage actif |
| Q S D F G H J K L M W X | Clavier PC (AZERTY) mappé sur les clips de notes |
| Clavier virtuel à l’écran | Une touche par clip disponible |
| T / bouton 🔁 | Change de personnage (et de décor) dans l’ordre défini |
| P | Bascule le mode performance (masque l’interface) |
| ⛶ | Plein écran |
Stack technique
- Vanilla JS (ES modules), zéro framework
- Three.js — scène, décors, `Reflector` (sol miroir), `EffectComposer` + `UnrealBloomPass`
- Web MIDI API — connexion et écoute d’un clavier MIDI physique
- glTF / GLB avec morph targets — animations « flipbook », certaines meshopt-compressées
- Web Audio (échantillons MP3 par note et par personnage)
Cas d’usage
Une démo ludique pour un clavier MIDI ou un simple ordinateur portable : accompagnement visuel d’une improvisation, curiosité à montrer en portfolio, ou simplement s’amuser à faire danser un pigeon cartoon note après note.
Huit personnages, une seule règle : chaque note les fait vivre.
