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