La cape d’invisibilité version webcam : fermez le poing pour disparaître progressivement du cadre, rouvrez la main pour réapparaître.
Vue d’ensemble
Hollow Man capture d’abord une image du décor sans personne dedans, puis compare en continu cette référence à l’image live de la webcam pour repérer là où une silhouette s’est ajoutée. Fermer le poing devant la caméra fait progressivement fondre le corps dans le fond capturé, jusqu’à disparaître presque entièrement ; rouvrir la main inverse l’effet et fait réapparaître le corps. Le résultat n’est pas un simple fondu : la zone de transition applique un effet de distorsion façon mirage de chaleur, avec une légère aberration chromatique qui accentue l’impression de dématérialisation.
L’expérience se pilote au clavier avec des raccourcis, propose une barre tactile pour mobile, et permet d’enregistrer le résultat en vidéo pour repartir avec la preuve de sa disparition.
Fonctionnalités
- Capture de fond à la demande — l’utilisateur prend un instantané du décor vide, servant de référence pour l’effet d’invisibilité.
- Disparition au poing fermé — fermer la main fait fondre progressivement le corps dans le fond capturé ; le rouvrir le fait réapparaître.
- Distorsion mirage de chaleur — la zone en transition n’est pas un simple fondu mais un déplacement de pixels avec aberration chromatique.
- Enregistrement vidéo — capture le rendu final et le télécharge en `.webm` ou `.mp4` selon le navigateur.
- Contrôles clavier et tactile — raccourcis desktop et barre d’outils dédiée pour mobile.
Sous le capot
Le rendu est un quad plein écran affiché à chaque frame en WebGL, alimenté par deux textures : le flux caméra live et l’instantané du fond capturé une fois par l’utilisateur. Le fragment shader compare ces deux textures pour calculer un masque de premier plan (là où l’image diffère du fond de référence, c’est qu’il y a un corps), puis applique sur la zone masquée une distorsion façon mirage de chaleur avec aberration chromatique, mélangée au fond selon une intensité qui varie en continu.
La détection de poing tourne via MediaPipe HandLandmarker, appelée en synchrone toutes les ~90 ms plutôt qu’à chaque frame pour ne pas saturer le thread principal : un poing est reconnu quand au moins trois bouts de doigts sont plus proches du poignet que leur articulation médiane. Un poing fermé fait grimper l’intensité du mélange vers l’invisibilité totale ; une main ouverte la ramène vers zéro, à une vitesse de fondu calée pour atteindre l’invisibilité en une vingtaine de frames. Le pipeline reste volontairement en WebGL 1, sans VAO ni UBO, pour garder la compatibilité Safari.
Contrôles
| Touche / geste | Action |
|---|---|
| Poing fermé | Disparaît progressivement du cadre |
| Main ouverte | Réapparaît progressivement |
| Espace / N | Capture le fond de référence |
| R | Démarre / arrête l’enregistrement vidéo |
| H | Masque l’interface |
| F | Plein écran |
Stack technique
- Vanilla JS (module ES unique), zéro framework
- WebGL 1 — pipeline de rendu par shader (masque de premier plan, distorsion, aberration chromatique)
- MediaPipe HandLandmarker — détection du poing fermé
- getUserMedia — accès à la caméra
- MediaRecorder + `canvas.captureStream` — enregistrement vidéo du rendu
Cas d’usage
Un effet spectaculaire et immédiat pour une démo portfolio, une animation d’accueil sur un stand ou simplement s’amuser à disparaître devant ses amis, capture vidéo à l’appui.
Fermez le poing, et le décor vous avale.
