Un filtre néon « Glowing Edges » en direct sur la webcam — la classique technique Photoshop de détection de contours et inversion, avec une bascule instantanée entre mode normal et inversé.
Vue d’ensemble
Neon cam transforme le flux de la webcam en pur tracé de contours lumineux, sans aucun remplissage couleur en dessous — la technique « détecter les contours puis inverser » popularisée par le filtre Photoshop « Glowing Edges ». Deux modes sont disponibles : traits vifs sur fond noir, ou traits sombres sur fond clair, avec une transition animée et fluide entre les deux plutôt qu’un simple flash.
Un flux ambiant de bruit procédural fait doucement onduler et fondre l’image en continu, et tout ce qui bouge réellement devant la caméra amplifie localement cette déformation — le mouvement se voit littéralement fondre l’image, comme un liquide chauffé par endroits. Sur mobile, un bouton dédié permet de basculer entre caméra avant et arrière.
Fonctionnalités
- Filtre néon « Glowing Edges » — détection de contours par gradient de Sobel, avec halo lumineux ajoutable autour du trait principal.
- Normal ↔ Inversé — bascule progressive et animée entre traits clairs sur fond noir et traits sombres sur fond clair, au curseur ou en un raccourci.
- Déformation liquide réactive au mouvement — un flux ambiant fait onduler l’image en continu, amplifié localement par ce qui bouge réellement dans le cadre.
- Cinq curseurs de réglage — épaisseur du trait, sensibilité, intensité du halo, fluidité de la déformation, réactivité au mouvement.
- Bascule caméra avant/arrière — sur mobile, avec détection automatique des appareils à caméra unique.
- Capture photo et enregistrement vidéo — export PNG instantané ou capture vidéo du rendu, avec gestion dédiée du téléchargement sur iOS.
Sous le capot
Deux passes WebGL tournent à chaque image dans un pipeline en ping-pong. La première calcule, à un quart de résolution, une énergie de mouvement lissée : diff de luminance entre l’image courante et la précédente, puis fusion avec l’énergie précédente selon une attaque instantanée et une décroissance lente — la même forme d’enveloppe qu’un suiveur d’enveloppe audio. Ce lissage évite que la déformation ne saccade au rythme des images de la caméra, et la basse résolution donne au champ de mouvement un aspect flou et organique plutôt que pixellisé une fois ré-échantillonné.
La seconde passe convertit la vidéo en contours purs : un champ de flux ambiant (bruit fractal à 2 octaves) déforme légèrement et en continu l’image, amplifié localement par l’énergie de mouvement calculée juste avant ; un gradient de Sobel 3×3 détecte les contours, ré-échantillonné une seconde fois à un espacement plus large pour ajouter un halo lumineux sans passer par une vraie passe de flou ; et un mélange linéaire final bascule entre trait clair sur fond noir et trait sombre sur fond clair. Sur mobile, la capture caméra est volontairement réduite (960×540 contre 1280×720 sur desktop) car le coût de ce filtre par pixel — jusqu’à seize lectures de texture avec le halo activé — est le principal facteur limitant les performances sur téléphone.
Contrôles
| Touche / geste | Action |
|---|---|
| I | Bascule Normal ↔ Inversé (animée) |
| P | Capture une photo PNG |
| S | Ouvre / ferme le panneau de réglages |
| R | Démarre / arrête l’enregistrement vidéo |
| H | Masque / affiche l’interface |
| F | Plein écran |
| Flèches | Ajuste finement l’épaisseur du trait et le flux liquide |
| Bouton caméra (mobile) | Bascule caméra avant / arrière |
Stack technique
- Vanilla JS — aucune dépendance, aucun build
- WebGL — pipeline 2 passes (énergie de mouvement quart-résolution + rendu néon des contours), FBO en ping-pong
- getUserMedia — flux webcam, avec bascule caméra avant/arrière sur mobile
- MediaRecorder — enregistrement vidéo, avec chemin de sauvegarde dédié pour iOS
Cas d’usage
Un filtre webcam prêt à l’emploi pour photobooth, stream ou simple curiosité visuelle : quelques secondes suffisent pour transformer n’importe quel visage en tracé néon vivant, capturable en photo ou en vidéo directement depuis le navigateur.
Il ne reste que les contours, et ils brillent.
