Journal
Du logo 2D au monogramme 3D
De la recherche vectorielle dans Affinity Designer à un objet en verre interactif dans le navigateur avec Three.js : coulisses et arbitrages techniques.
Quand j'ai commencé à poser les bases de ce portfolio, je voulais un symbole fort et compact. Pas juste un logo posé en haut à gauche d'une page, mais un véritable objet d'artisanat numérique capable d'incarner l'identité du site, du badge de navigation jusqu'aux scènes 3D interactives.
1. L'étincelle 2D : mixer Citadium et Awwwards dans Affinity
Pour la forme globale, je suis parti de deux influences très nettes. D'un côté, le logo rond de Citadium, avec sa rondeur urbaine, compacte et bien calée. De l'autre, la typographie du "W." repérée sur Awwwards, avec son empattement moderne et son point final bien affirmé.
J'ai ouvert Affinity Designer pour tracer le logo en vectoriel pur. L'enjeu était de trouver le parfait équilibre entre les courbes du cercle extérieur et les fûts du "W" : il fallait que le symbole reste parfaitement lisible en tout petit (dans une favicon ou une pilule de nav) tout en ayant assez de matière pour supporter une extrusion 3D plus tard.
Une fois le SVG calé, j'ai testé son contraste sur fond bleu cobalt électrique et en mode sombre, notamment pour générer l'OpenGraph image du site.
2. Le premier jet dans Blender… et le rétropédalage
Une fois le tracé vectoriel validé, direction Blender pour extruder la forme et lui donner du volume. C'est là que les choses se sont compliquées.
Sur mon tout premier rendu, j'avais essayé d'appliquer un shader de verre teinté dans la masse avec un léger relief en surface. Résultat ? Une catastrophe : la texture avait un effet "peau d'orange" granuleux très disgracieux, et la translucidité teintée de cobalt étouffait la lumière au lieu de la sublimer. Le monogramme ressemblait à un morceau de résine plastique opaque plutôt qu'à une pièce d'orfèvrerie en verre.
Retour à la case départ. En fouillant dans des ressources et nodes procéduraux partagés par la communauté Blender, j'ai bifurqué vers une approche "Dispersed Glass". L'idée : un verre pur, quasi limpide, mais qui décompose la lumière sur les arêtes biseautées grâce à une dispersion chromatique (séparation des composantes RVB comme à travers un prisme).
3. Du modèle 3D au WebGL : Three.js et tilt interactif
Obtenir une belle image fixe sous Blender Cycles avec des millions de rayons calculés, c'est valorisant, mais le vrai objectif était d'avoir un monogramme vivant directement dans le navigateur.
J'ai exporté la géométrie optimisée et écrit un shader Three.js sur mesure. Le shader reconstitue la réfraction et la dispersion chromatique en temps réel en échantillonnant l'environnement lumineux. Sur la page À propos, j'ai couplé l'objet à un effet de tilt interactif : lorsque tu déplaces la souris, le monogramme s'oriente doucement dans l'espace et les reflets spéculaires glissent sur les biseaux de verre.
4. Le dilemme mobile et la cohérence de marque
En créant des expériences 3D pour le web, on a vite tendance à vouloir tout pousser partout. Mais faire tourner une boucle de rendu WebGL à 60 FPS sur un smartphone dans un métro, ça veut dire vider la batterie et faire chauffer l'appareil sans réel bénéfice d'usage (le tilt au doigt étant bien moins naturel qu'au curseur).
Le bon compromis : détecter la capacité de l'appareil et basculer sur un fallback WebP pré-rendu en haute fidélité sur mobile. Le chargement est instantané, le poids est minuscule (quelques dizaines de kilo-octets) et le rendu visuel reste impeccable.
Aujourd'hui, ce monogramme est devenu le totem graphique du site : on le retrouve dans la pilule de navigation avec l'anneau de progression de lecture, sur mon profil LinkedIn, et sur toutes les couvertures de ce journal.
Ce petit projet résume bien ce qui m'anime au quotidien : partir d'un dessin 2D simple, expérimenter en 3D, accepter de jeter un premier essai raté, puis coder une solution technique équilibrée entre performance et impact visuel.