Journal
Du verre cannelé dans le navigateur : de Blender au WebGL
De mes premiers tests sous Blender jusqu'au shader WebGL temps réel et à la cohérence du mode sombre : retour d'atelier sur la matière visuelle du portfolio.
Pour ce portfolio, je voulais une matière centrale qui ait du caractère. Le « glassmorphism » classique avec un simple flou CSS est un peu partout sur le web depuis des années, et ça manque souvent de texture. Mon idée de départ était d'aller chercher du côté de l'architecture d'intérieur et des objets physiques : le verre cannelé (ou fluted glass). C'est graphique, ça déforme la lumière de façon très satisfaisante et ça donne tout de suite du relief.
Plutôt que de me lancer tête baissée dans du code WebGL sans savoir exactement ce que je cherchais, j'ai commencé par faire mes devoirs dans un logiciel 3D.
1. La phase d'expérimentation dans Blender
J'ai ouvert Blender avec un objectif simple : trouver les bonnes proportions pour les stries et observer comment la lumière réagit avec le verre. Quelle largeur de cannelure fonctionne le mieux ? Quel angle de courbure donne une réfraction marquée sans devenir illisible ? Et surtout, quel indice de réfraction (IOR) choisir pour garder une sensation de verre bien dense ?
En testant plusieurs éclairages et angles de caméra, j'ai pu figer l'esthétique exacte que je voulais retrouver plus tard dans le navigateur : des crêtes nettes, une dispersion subtile sur les bords et un flou optique qui donne de la profondeur.
2. Du rendu 3D au WebGL : alléger sans perdre l'effet
Une fois le rendu validé en 3D, le défi commence : comment reproduire cet effet dans le navigateur sans faire fondre la batterie des smartphones ? Un modèle 3D trop lourd ou un calcul de réfraction permanent à 60 FPS dans un canvas géant aurait été une fausse bonne idée.
Après pas mal de veille et d'essais sur les techniques de creative coding, j'ai adapté l'effet : une texture de normales très optimisée qui simule les cannelures, couplée à un fragment shader qui calcule la réfraction et une légère dispersion chromatique. Le shader est calibré pour être extrêmement léger et ne recalculer que ce qui est strictement nécessaire.
C'est ce qui fait tourner la section 2 de la page d'accueil : le bleu cobalt électrique signature vibre sous le verre avec une fluidité totale, même au scroll.
3. Le casse-tête du mode sombre
Sur fond bleu cobalt, le verre fonctionne presque tout seul : la couleur apporte de la lumière et fait ressortir les déformations. Mais dès que j'ai voulu créer le thème sombre (un noir minéral chaud #0e0e12), je me suis heurté à un problème classique en 3D : le verre dans le noir absolu est transparent, donc invisible.
Il a fallu faire une nouvelle passe complète sur les contrastes : ajouter une source lumineuse rasante très douce, faire ressortir un halo cobalt lointain pour donner de la matière au fond, et rehausser les reflets blancs spéculaires sur les bords biseautés. C'est ce travail d'équilibriste qui permet au verre de rester tangible sans casser l'ambiance feutrée du dark mode.
4. Déclinaison et cohérence graphique
Cette matière ne devait pas être un simple « gimmick » cantonné à un seul bloc de la homepage. Elle est devenue le fil conducteur visuel de tout le portfolio : sur les images de partage OpenGraph pour LinkedIn, sur le monogramme 3D, et sur les miniatures de ce journal.
Pour t'en rendre compte, tu peux remonter tout en haut de cet article : la couverture utilise cette même dalle Liquid Glass biseautée avec le verre cannelé en arrière-plan. Et si tu cliques sur le bouton de thème dans le menu en bas, tu verras la miniature basculer instantanément entre sa version cobalt et sa version sombre minérale.
C'est ce va-et-vient entre outil 3D, code de production et direction artistique globale qui m'amuse le plus : faire en sorte que chaque détail technique serve une identité visuelle claire.