Conception d’un shader de feuille métallique holographique

Une surface à l’aspect de feuille métallique sans textures d’image

Le shader de feuille métallique holographique est un exemple officiel OpenDesign construit autour d’une composition WebGL occupant toute la fenêtre. La surface visible associe des zones magenta, bleu sarcelle, vertes, violettes et jaunes à de fins reflets semblables à des courbes de niveau, produisant l’apparence d’une feuille métallique froissée plutôt que celle d’un champ de couleur uniforme.

La composition est explicitement présentée comme « Thin-film interference over a crushed-foil surface », tandis que la palette évolue avec l’angle de vue. Cette formulation décrit le modèle visuel recherché ; les captures confirment l’apparence rendue et l’invite d’interaction associée, mais pas la précision optique ni les performances du GPU.

Contextes adaptés à cette création

Cet artefact est surtout utile comme référence visuelle pour les visuels hero interactifs de pages de destination, les études d’art génératif et les démonstrations de programmation créative. Son principal enseignement concerne la composition : un arrière-plan richement animé peut créer une atmosphère, tandis qu’une superposition sobre fournit des repères.

Le libellé visible « OPENDESIGN · WEBGL PREVIEW » indique le contexte de l’exemple, et « REAL-TIME · GPU » signale l’approche de rendu prévue. Ces libellés aident le public à situer l’œuvre, mais ils ne doivent pas être interprétés comme un test de performances ni comme la preuve d’un déploiement en production.

Mouvement de la composition

L’ordre de lecture reste cohérent dans les trois états fournis : le petit libellé d’aperçu OpenDesign se trouve en haut à gauche, l’état du GPU en haut à droite, le grand titre « HOLOGRAPHIC FOIL » occupe la zone inférieure gauche et « TILT THE FILM ↗ » apparaît près du coin inférieur droit. Cette superposition stable permet à l’arrière-plan de changer sans donner l’impression que l’interface affiche un autre écran.

Le titre utilise une première ligne en capitales et en graisse forte, suivie d’une seconde ligne plus légère. Ce contraste confère immédiatement du poids à « HOLOGRAPHIC » tout en laissant « FOIL » visuellement ouvert sur la surface en mouvement. En contrepartie, l’arrière-plan peut entrer en concurrence avec les formes de lettres plus fines ; le contraste et le placement du texte doivent donc être vérifiés chaque fois que la palette du shader change.

Le shader construit un champ d’épaisseur déformé à partir de six couches de bruit, estime son gradient, puis associe une phase fondée sur l’épaisseur et l’inclinaison à une palette de couleurs cosinus. Des termes distincts de crête et de scintillement ajoutent des éclats évoquant une feuille métallique. La position du pointeur sur les deux axes fournit l’approximation de l’inclinaison, tandis que le temps écoulé modifie le champ. Ces calculs créent les îlots colorés semblables à des courbes de niveau sans texture d’image ni maillage de scène ; il s’agit d’une approximation visuelle de matériau et non d’une optique de couche mince mesurée.

Limites fonctionnelles

La source crée un canevas WebGL2 local et détecte les mouvements du pointeur, en faisant progressivement converger les deux coordonnées vers leurs valeurs cibles à chaque image. Elle utilise ces coordonnées comme approximation de l’angle de vue, et non comme orientation physique de l’appareil ni comme commande d’une caméra 3D. « TILT THE FILM » est une instruction statique, pas un bouton. Les captures montrent des états temporels d’un même visuel hero et n’établissent ni l’existence de services connectés ou de données stockées, ni la précision optique, les performances mesurées ou un processus historique de génération.