Alors que Zuckerberg claque 15 milliards par an pour nous convaincre de porter des casques VR à 2000 balles, un petit studio vient de créer le metaverse le plus cool de 2025. En plus c’est gratuit et ça fonctionne dans notre navigateur !

Messenger d’Abeto , c’est un jeu où vous livrez du courrier sur une planète tellement minuscule que vous en faites le tour complet en 30 secondes en courant. L’effet de courbure est permanent, et on est un peu comme ce simp intergalactique, qu’est le Petit Prince sur son astéroïde, sauf qu’on est facteur !

Le studio Abeto, spécialisé dans les expériences web interactives, a construit ça avec WebGL et Three.js et ça marche parfaitement sur mobile. Pas besoin de télécharger 3GB de data, pas d’installation, pas de compte Steam. On ouvre le navigateur, on va sur https://messenger.abeto.co/ et nous voilà dans un univers coloré avec une musique chill, en train de nous balader…

C’est un jeu assez relaxant je trouve… Ça va vous changer de Call of Duty et vous pouvez même personnaliser votre personnage, changer vos fringues, et bien sûr faire vos quêtes de super facteur…

Et vous voyez les autres personnages qui courent sur la planète en même temps que vous ? Hé bien ce sont les autres joueurs ! Si vous voulez échanger avec eux c’est possible, mais uniquement via des emotes…

Après c’est vrai qu’habituellement, plus c’est grand, mieux c’est… Skyrim, GTA, Zelda… on mesure la qualité en kilomètres carrés, mais avec Messenger il suffit d’une planète de 50 mètres de diamètre et on s’amuse déjà bien avec.

Rien à payer, pas de pub, pas de pass de combat ou ce genre de conneries… C’est juste un petit monde où on peut se poser 10 minutes pour faire une petite pause dans sa journée, croiser d’autres facteurs et se dire bonjour avec des petits émojis…

Source

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