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

A chaque fois que j’ouvre la boite de Tic Tac que j’ai dans ma voiture, au lieu de prendre un bonbon en tout délicatesse, je m’en verse 3 dans la paume, puis 5, puis au final je suis à 2 doigts de tous les bouffer. Heureusement, un maker génial vient de résoudre ce problème existentiel avec l’arme ultime : un pistolet à Tic Tac imprimé en 3D.

L’ingénieux système créé par “It’s On My Mind” utilise un mécanisme à ressort pour transformer vos petits bonbons en projectiles à la menthe qui atterrissent directement dans votre bouche. Fini la poignée de Tic Tac, maintenant place à la précision balistique.

Vous retirez l’étiquette de votre boîte de Tic Tac, vous enlevez le couvercle et ce distributeur s’interface parfaitement avec la forme du couvercle d’origine. Ensuite, vous clipsez le tout et hop ! Votre boîte de bonbons devient une arme de destruction massive contre la faim.

Mais attention, cette petite merveille peut tirer plus fort que prévu. Les créateurs vous auront prévenu : ne visez jamais un visage, le vôtre ou celui d’autrui. Les bonbons, c’est pour la bouche, pas pour les yeux.

J’aime bien quand des développeurs utilisent la technologie pour rendre accessible des concepts complexes. Alors après le système solaire, vous allez pouvoir visualiser des atomes en 3D de manière totalement interactive. Comme ça, s’en est terminé des schémas statiques dans les manuels de physique ! Ici, grâce à AtomAnimation, vous pourrez faire tourner, zoomer, observer sous tous les angles des structures atomiques qui prennent même vie sous vos yeux.

Ce projet, développé par matt765, utilise une stack technologique bien moderne à base de React 19, NextJS 15, TypeScript, CSS Modules, Zustand pour la gestion d’état, ThreeJS pour la 3D, et Recharts pour les graphiques. En gros, tout ce qu’il faut pour créer une expérience utilisateur fluide et moderne.

Il y a même des graphs et une table périodique ainsi que des tas de filtres pour par exemple visualiser les atomes par densité, électronégativité, point de fusion et j’en passe…

Et ce qui rend ce projet vraiment intéressant, c’est qu’il permet à tous mais surtout aux étudiants d’explorer les structures atomiques de manière dynamique. Comme ça, on apprend des choses et c’est pas chiant car au lieu de simplement regarder une image figée d’un atome, on peut le manipuler, voir les électrons en mouvement qui lui tourne autour, et comprendre sa structure nucléaire. Bref, si vous êtes prof de physique, vos rêves les plus humides viennent de s’exaucer.

Le côté open-source rend le tout encore plus sympa puisque le code est disponible sur Github. Une fois encore avec WebGL et des bibliothèques comme ThreeJS, on peut faire des trucs vraiment chouette en web 3D.

Voilà, AtomAnimation.com est un super outil éducatif de plus à bookmarker !!

Elle est loin l’époque où on s’extasiait devant un gif animé de la Terre qui tournait. Mais non, rien de rien, je ne regrette rien car un développeur du nom de SoumyaEXE nous a pondu un système solaire complet avec 50 lunes et des ceintures d’astéroïdes, le tout qui tourne dans votre navigateur. Sans plugin. Sans téléchargement. Juste du JavaScript et sa magie.

En plus ce projet débarque pile au moment où de plus en plus de développeurs cherchent l’équilibre parfait entre la simplicité et la performance pour leurs applications web, et ce système solaire en est le parfait exemple. Les textures viennent directement de la NASA, les distances sont mises à l’échelle pour que votre cerveau puisse y comprendre quelque chose, et même votre vieux smartphone peut faire tourner le tout sans broncher ou presque.

J’ai passé plusieurs minutes à zoomer / dezoomer sur les lunes de Jupiter et les astéroides, et c’est assez hypnotisant. Pan, zoom, rotation… tout est fluide comme dans du Planta Fin ^^ et le dev a même pensé à ajouter des toggles pour afficher ou masquer les orbites, les labels, les ceintures d’astéroïdes. Bref, vous pouvez littéralement personnaliser votre exploration spatiale pour vous la jouer Thomas Pesquet en culottes courtes.

C’est fou surtout de voir comment Three.js a évolué. Sur les forums spécialisés, le développeurs explique que créer ce genre de simulation était sa motivation principale pour apprendre cette technologie, et je trouve ça bien comment façon de faire. Et quand on voit le résultat, je me dit que les limites du web sont vraiment repoussées chaque jour un peu plus.

Techniquement, le projet utilise également Vite pour le build, ce qui explique pourquoi tout est si rapide à charger. Les modèles 3D sont optimisés, les animations d’orbites sont calculées en temps réel, et pourtant, aucun ralentissement. C’est accessible, performant, et surtout open source.

D’ailleurs, parlant d’open source, tout le code est disponible sur GitHub. Donc vous pouvez le cloner, le modifier, ajouter d’autres objets si ça vous chante (Ou faire basculer Pluton du côté des planètes…^^), ou pourquoi pas le franciser. Et pour apprendre Three.js, c’est également un excellent point de départ.

Et si vous voulez une ambiance plus immersive, vous pouvez même ajouter de la musique d’Interstellar. Bon, ok, c’est un peu gadget, mais ça fait son petit effet.

Pour les développeurs qui lisent ça, sachez que le projet utilise les GLTFLoader et OrbitControls de Three.js, avec un système de caméra perspective bien pensé. L’éclairage combine ambient et directional lights pour donner ce rendu réaliste aux planètes. C’est du travail propre, bien commenté, et facilement extensible.

Donc si vous cherchez une excuse pour procrastiner intelligemment aujourd’hui, foncez tester cette merveille. Et qui sait, peut-être que ça vous donnera envie de vous lancer dans le développement web 3D.

Source

NNO3D annonce sur le terrain des GPU haut de gamme les RTX 5090 et RTX 5080 iCHILL Frostbite Pro. Attention, ici pas de demi-mesure :

Cet article RTX 5090 et 5080 iCHILL Frostbite Pro : refroidissement liquide et design affûté a été publié en premier par GinjFo.

Les IA progressent dans tous les domaines et la modélisation 3D n'y fait pas exception. Tom's Basement nous fait découvrir Tripo3D qui permet de créer un modèle 3D à partir de 4 photos de votre objet :

Si nous sommes encore loin du résultat d'un véritable scanner 3D, le résultat est loin d'être honteux. Même s'il semble plus réussi avec des figurines qu'avec de véritables pièces paramétriques.

Je dois justement tester ça avec une pièce plastique sur mon vélo, la finition du garde-boue (il m'en reste une que je vais prendre en photo), je verrai si ça tient la route et vous tient au courant.

Malheureusement la fonctionnalité de cette IA ne semble plus disponible sans payer... espérons que d'autres voient le jour.

Vous n'aimez pas le RSS : abonnez-vous par email
Vous devriez me suivre sur Twitter : @xhark

---

Article original écrit par Mr Xhark publié sur Blogmotion le 18/04/2025 | Pas de commentaire |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Cet article [3D] Générer un STL à partir d’une photo 📦 provient de : on Blogmotion.