Implémentation d’un effet d’autocollant foil

 (4rknova.com)
5 points par GN⁺ 2025-09-02 | 1 commentaires | Partager sur WhatsApp
  • Code source de shader implémentant un effet d’autocollant foil, avec une simulation réaliste des reflets et des scintillements de surface
  • Réglage fin possible de diverses caractéristiques comme la métallisation, la rugosité et les reflets irisés
  • L’élément clé est le rendu de l’effet de micro-particules (flakes) sur la surface foil et des couleurs irisées qui changent selon l’angle
  • Exploite diverses techniques de graphisme à base physique comme l’échantillonnage de carte d’environnement, l’effet de Fresnel, les ombres AO et l’alpha cutoff
  • Une implémentation avancée de shader pouvant être utilisée pour un rendu d’autocollants foil haute qualité dans des environnements 2D/3D réels

Vue d’ensemble

Ce contenu présente un code de shader GLSL permettant de reproduire un effet visuel scintillant de type autocollant foil. L’objectif est de créer une texture visuelle de haute qualité en combinant métallisation, iridescence, effet de micro-particules de surface et reflets d’environnement. Il génère un effet foil réaliste à l’aide de textures 2D, de cartes d’environnement et de divers paramètres de réglage.

Variables et constantes principales

  • L’effet peut être ajusté via diverses variables uniform
    • Ex. : uFlakeSize (taille des flakes), uRoughness (rugosité), uMetalness (métallisation), uIridescence (iridescence), etc.
  • Prise en charge des textures, des cartes d’environnement et des informations du repère en coordonnées monde

Structure des fonctions principales

Fonction de hash (hash)

  • Utilisée pour générer des valeurs aléatoires nécessaires à l’effet de micro-particules (flakes)

Conversion des coordonnées de carte d’environnement (dirToEquirectUv), échantillonnage de carte d’environnement (sampleEnvRough)

  • Permet un échantillonnage de la carte d’environnement en fonction de la direction
  • Applique le niveau de mip approprié selon la rugosité (lod)

Effet irisé (iridescenceColor)

  • Génère dynamiquement la couleur selon l’angle et l’épaisseur de surface
  • La couleur change selon l’angle de vue, comme sur une véritable surface foil

Luminance (luminance)

  • Calcule les informations de luminosité de la couleur pour les réinjecter dans le post-traitement, entre autres

Logique principale du shader

Alpha cutoff et traitement face avant / face arrière

  • La survie du pixel est déterminée par la valeur alpha de la texture de base
  • Selon qu’il s’agit de la face avant ou arrière, ajuste l’intensité de l’AO, le traitement de pelage (peeled) et la couleur

Gestion des reflets, des flakes, de l’iridescence et de la métallisation

  • Calcule la normale de surface (normal), le vecteur de vue, le vecteur de réflexion et les reflets d’environnement
  • Pour l’effet flakes, applique un hash par position et un décalage angulaire aléatoire
  • Contrôle fin de la luminosité, du masquage, du boost, etc. des flakes
  • Utilise perturbedNormal pour refléter la perturbation de surface des flakes
  • Mélange les flakes et la couleur environnante avec une couleur irisée

Combinaison de la carte d’environnement et calcul de la couleur finale

  • Fait varier dynamiquement la rugosité selon l’intensité des flakes
  • Renforce le réalisme grâce au masquage métal/normal/réflexion et au calcul de Fresnel
  • Produit la couleur finale en mélangeant les composantes diffuse (diffusion) et spec (réflexion spéculaire)
  • Sort la couleur finale avec l’alpha de base

Points à retenir

Ce shader est bien adapté à la reproduction réaliste des effets visuels complexes propres aux matériaux foil (forte réflexion, micro-particules, iridescence, etc.). Les nombreux paramètres permettent un réglage précis de l’effet, offrant une personnalisation souple et un rendu d’autocollants foil très visible. Il présente de grands avantages pour des usages variés en 3D, sur le web 2D, dans les jeux ou les interfaces interactives.

À lire aussi

1 commentaires

 
GN⁺ 2025-09-02
Commentaires sur Hacker News

  • Quand je développais des jeux mobiles il y a quelque temps, j’avais ajouté sur de jolies cartes un effet où la « brillance » changeait selon l’inclinaison du téléphone, comme s’il s’agissait d’un véritable objet 3D. Je trouve fascinant qu’iOS prenne désormais en charge ce type d’effet de sticker nativement

  • Un site de marketplace de cartes Magic applique un effet CSS simple aux cartes foil. Mais je me demande toujours comment reproduire de façon plus réaliste les différents effets foil que l’on voit sur les vraies cartes Magic, sans dégrader les performances et en restant adapté à une UX CRUD en Svelte

  • La technologie des shaders est vraiment fascinante. On peut essayer soi-même différents shaders sur le site Shadertoy

  • Tim Oliver a déjà fait une excellente présentation sur son expérience de création de l’effet holographique foil appliqué au « golden ticket » de Threads. La vidéo peut être vue ici

  • Je trouve cet effet vraiment superbe et visuellement impressionnant, mais en réalité je n’aime pas tant que ça l’effet foil scintillant en lui-même. On le voit aussi sur des stickers ou des cartes, mais je trouve plus élégant quand une brillance métallique douce n’est utilisée que comme accent. J’ai l’impression d’être seul à penser ça, mais vu la popularité de cet effet, cela reste probablement un goût minoritaire

  • C’est vraiment un très bel effet. Cela me rappelle le shader de réseau de diffraction qu’Alan Zucconi avait créé pour le rendu d’un CD. On peut en lire plus ici

  • Le résultat est encore plus impressionnant que je ne l’attendais. C’était amusant d’ajuster les paramètres tout en observant l’image réfléchie de toute la pièce

    • Moi aussi, je me suis demandé quelle était la map de réflexion. Il s’avère que la pièce en question est le palais de Jedlinka, situé en Pologne. L’image de texture réelle peut être vue ici

  • Sur iOS, il existe un effet de sticker « shiny » qui réagit quand on incline le téléphone. La première fois que je l’ai vu, j’ai été vraiment impressionné

  • C’est un peu hors sujet, mais en lisant ce billet, je me suis dit que l’IA pourrait à l’avenir apprendre aussi ce genre de techniques d’implémentation. D’un autre côté, je ressens une forme de libération à l’idée que l’IA puisse devenir le bookmark ultime, au point qu’on n’ait plus besoin d’accumuler des signets. Mais il y a aussi quelque chose d’un peu triste et amer dans l’idée que ce genre de superbes posts ne soit peut-être pas vraiment reconnu par l’IA

    • Je pense qu’il vaut mieux continuer à conserver ses bookmarks. Déjà aujourd’hui, beaucoup d’informations se perdent rien qu’avec la recherche Google, et à l’ère de l’IA encore plus de choses risquent de disparaître facilement
    • Au final, l’IA finira aussi par écrire ce genre de posts, puis apprendra à son tour à partir d’autres IA. À force, je me demande si les programmeurs ou experts dotés de sens artistique ne finiront pas par disparaître, ne laissant plus que des métiers ordinaires consistant à assembler des solutions business générées automatiquement par des ordinateurs

  • Je suis vraiment heureux de pouvoir tomber sur ce genre de billets intéressants et inattendus