Avez-vous déjà passé des heures sur After Effects pour créer une simple animation de 30 secondes qui explique un concept. Entre nous, c’est un cauchemar. Jongler avec les keyframes, les courbes de bézier et 150 calques qui se battent en duel pour savoir lequel doit apparaître en premier, c’est bien relou et on finit par perdre plus de temps à se battre avec le logiciel qu’à créer du contenu.

Vous voyez de quoi je parle, non ?

Mais voilà, j’ai testé un truc qui s’appelle StoryMotion et qui permet de créer des animations façon tableau blanc aussi facilement que vous faites des slides PowerPoint. Pas de compétences professionnelles requises, pas de formation de 3 mois sur YouTube. Juste vous, vos idées, et un outil qui sait que votre temps est précieux.

L’idée de StoryMotion est venue à son créateur, Chun Rapeepat, après avoir utilisé Excalidraw et Keynote pendant des années pour créer des visuels pour ses articles de blogs techniques. Quand il a voulu passer à la vidéo, il s’est retrouvé à passer des heures interminables sur des logiciels complexes pour obtenir un résultat qu’il aurait pu dessiner à la main en 5 minutes.

Pour ceux qui ne connaissent pas, Excalidraw c’est un outil de dessin collaboratif open source qui a conquis le cœur des développeurs et créateurs tech, et qui permet de dessiner vos schémas, diagrammes ou illustrations directement sur un espèce de tableau blanc.

Vous vous souvenez de ces autocollants holographiques qu’on trouvait à tous les coins de rue dans les années 90 ? Mais siiiii, ces machins brillants qui changeaient de couleur selon l’angle de vue et qui scintillaient de mille feux grâce à leurs petites paillettes métalliques ? Eh bien, un développeur a réussi à reproduire cet effet en WebGL et en a fait un générateur. Et je dois dire que le résultat est plutôt bluffant.

Le projet en question part d’une observation simple qui est que ces autocollants jouent sur deux phénomènes visuels. D’abord l’iridescence, ce changement de couleur selon l’angle de vue qui rappelle les bulles de savon ou les ailes de papillon. Et ensuite ces minuscules paillettes métalliques qui captent la lumière et créent ces points brillants qui semblent danser à la surface.

Ce qui est vraiment cool du coup, c’est que le développeur a réussi à reproduire ces effets sans simulation physique complexe. Pas de calculs d’interférence de films minces, pas de modélisation de microfacettes métalliques. À la place, une approche purement visuelle qui approxime le rendu final avec des techniques de shader astucieuses.

Le vertex shader gère en réalité un effet de “pelage” de la géométrie en utilisant la formule de rotation de Rodrigues . Pour ceux qui ne connaissent pas, c’est une méthode mathématique élégante pour faire tourner des vecteurs dans l’espace 3D autour d’un axe arbitraire. Ici, elle permet de simuler le décollage progressif de l’autocollant, avec des calculs d’occlusion ambiante et d’intensité de pelage qui donnent cette impression de matière qui se décolle vraiment.

Du côté du fragment shader, c’est là que la magie opère vraiment. Le bruit procédural génère ces fameuses paillettes métalliques. Ainsi au lieu de placer manuellement des milliers de petits points brillants, l’algorithme crée des patches aléatoires de luminosité qui ressemblent à s’y méprendre à des flocons métalliques qui accrochent la lumière. L’échantillonnage de la carte d’environnement ajoute les reflets réalistes, pendant que le calcul d’iridescence utilise des ondes sinusoïdales pour décaler la teinte en fonction de l’angle de vue.

L’effet Fresnel, ce phénomène qui rend les surfaces plus réfléchissantes sur les bords, complète l’illusion. C’est ce qui donne cette impression que l’autocollant “s’allume” différemment selon comment on le regarde. Enfin, le shader combine tout ça avec un contrôle fin de la réflectivité métallique, la taille des paillettes, leur intensité, et même le rendu de la face arrière avec des ombres.

En plus, le dev a tout mis sous licence Creative Commons BY-NC 4.0 donc vous pouvez donc l’utiliser, le modifier, l’adapter à vos projets, tant que c’est non-commercial et que vous créditez l’auteur.

Sérieux, qui aurait cru qu’un jour on pourrait recréer la magie des autocollants holographiques de notre enfance directement dans le navigateur ?

Source