Maxime Heckel dedicó varios meses a construir su sitio web personal desde cero, incorporando trabajos en 3D para mostrar sus habilidades en shaders y WebGL. En el proceso, comprendió lo crucial que es el postprocesado para que una escena se vea bien. El postprocesado personalizado le ofreció una salida creativa, y desarrolló una predilección especial por efectos retro como el dithering, la cuantización de color y la pixelización o las celdas RGB de los monitores CRT. Estos detalles sutiles crean un agradable contraste entre la web moderna y una era de la tecnología que muchos niños de los 90 y principios de los 2000 todavía añoran.
El dithering nació como una técnica temprana de gráficos que engañaba al cerebro del espectador para percibir más color o suavidad en degradados y sombras de los que el hardware podía generar, añadiendo deliberadamente ruido a una imagen o render. Las paletas eran muy limitadas, así que los diseñadores de videojuegos dependían de ella. El resultado fue un aspecto distintivo ligado a la época en que los ordenadores se volvieron omnipresentes pero los gráficos avanzados aún no eran posibles. Hoy, el dithering es más una elección artística que un recurso alternativo, utilizado por artistas y diseñadores de juegos para evocar esa era o para trabajar dentro de límites de color autoimpuestos. Entre los ejemplos están Basement Chronicle, el juego point-and-click de Basement Studio, la obra de @loackme y la fotografía experimental de @aweusmeuh con una cámara Game Boy original.
Heckel se centra en aplicar el dithering a proyectos de React Three Fiber y Three.js para darles un estilo único. El enfoque gira en torno al postprocesado, que aplica un shader a una escena ya renderizada, de forma muy similar a un filtro de imagen en una fotografía. Para crear un efecto personalizado, declara una clase que extiende Effect, define un fragment shader invocado a través del constructor padre, declara los uniforms necesarios y envuelve la clase con wrapEffect para poder usarla como componente JSX dentro de EffectComposer.
La primera parte de la serie explica cómo funciona la técnica de dithering, la implementa como shader y construye una primera versión de un efecto de postprocesado de dithering que puede aplicarse a cualquier escena 3D.
Fuente: Hacker News · Resumido por HeadlinesBriefing