Maxime Heckel a passé plusieurs mois à construire son site personnel à partir de zéro, en y intégrant des travaux en 3D pour mettre en valeur ses compétences en shaders et en WebGL. Au fil de ce travail, il a compris à quel point le post-traitement est essentiel pour qu'une scène soit réussie. Le post-traitement personnalisé lui a offert un exutoire créatif, et il a développé une attirance particulière pour les effets rétro, comme le dithering, la quantification des couleurs, la pixellisation ou les cellules RGB des écrans CRT. Ces détails subtils créent un contraste agréable entre le web moderne et une époque technologique que beaucoup d'enfants des années 90 et du début des années 2000 regrettent encore.
Le dithering est né comme une technique graphique ancienne qui trompait le cerveau du spectateur pour lui faire percevoir plus de couleurs ou de douceur dans les dégradés et les ombres que le matériel ne pouvait en produire, en ajoutant volontairement du bruit à une image ou à un rendu. Les palettes étaient très limitées, et les créateurs de jeux vidéo en dépendaient. Le résultat était un rendu distinctif, lié à une période où les ordinateurs se répandaient alors que les graphismes avancés n'étaient pas encore possibles. Aujourd'hui, le dithering relève davantage du choix artistique que de la solution de contournement : artistes et game designers l'utilisent pour évoquer cette époque ou pour travailler dans des limites de couleurs qu'ils s'imposent. Parmi les exemples figurent Basement Chronicle, le jeu point-and-click de Basement Studio, les œuvres de @loackme, et la photographie expérimentale de @aweusmeuh réalisée avec un appareil Game Boy d'origine.
Heckel s'attache à appliquer le dithering aux projets React Three Fiber et Three.js pour leur donner un style unique. La méthode repose sur le post-traitement, qui applique un shader à une scène déjà rendue, un peu comme un filtre d'image sur une photo. Pour créer un effet personnalisé, il déclare une classe qui étend Effect, définit un fragment shader appelé via le constructeur parent, déclare les uniforms nécessaires, puis enveloppe la classe avec wrapEffect afin de pouvoir l'utiliser comme composant JSX au sein d'EffectComposer.
La première partie de la série explique le fonctionnement de la technique du dithering, l'implémente sous forme de shader et construit une première version d'un effet de post-traitement par dithering applicable à n'importe quelle scène 3D.
Source: Hacker News · Résumé par HeadlinesBriefing