Maxime Heckel passou vários meses construindo seu site pessoal do zero, incorporando trabalhos em 3D para mostrar suas habilidades com shaders e WebGL. No processo, ele percebeu o quanto o pós-processamento é fundamental para que uma cena fique bonita. O pós-processamento personalizado lhe ofereceu uma saída criativa, e ele desenvolveu uma afinidade especial por efeitos retrô como dithering, quantização de cores, pixelização e as células RGB de telas CRT. Esses detalhes sutis criam um contraste agradável entre a web moderna e uma era da tecnologia que muitos nascidos nos anos 90 e no início dos anos 2000 ainda sentem falta.
O dithering começou como uma técnica gráfica antiga que enganava o cérebro do espectador para que percebesse mais cor ou suavidade em gradientes e sombras do que o hardware era capaz de produzir, adicionando ruído de propósito a uma imagem ou renderização. As paletas eram muito limitadas, e por isso os designers de jogos dependiam dessa técnica. O resultado foi um visual característico, ligado ao período em que os computadores se tornaram onipresentes, mas os gráficos avançados ainda não eram possíveis. Hoje, o dithering é mais uma escolha artística do que um recurso improvisado, usado por artistas e designers de jogos para evocar aquela época ou para trabalhar dentro de limites de cor autoimpostos. Exemplos incluem o Basement Chronicle, jogo point-and-click da Basement Studio, a arte de @loackme e a fotografia experimental de @aweusmeuh feita com uma câmera Game Boy original.
Heckel se concentra em aplicar o dithering a projetos de React Three Fiber e Three.js para dar a eles um estilo único. A abordagem gira em torno do pós-processamento, que aplica um shader a uma cena já renderizada, de forma parecida com um filtro de imagem em uma foto. Para criar um efeito personalizado, ele declara uma classe que estende Effect, define um fragment shader chamado pelo construtor pai, declara os uniforms necessários e envolve a classe com wrapEffect para que ela possa ser usada como componente JSX dentro do EffectComposer.
A primeira parte da série explica como funciona a técnica de dithering, a implementa como shader e constrói uma versão inicial de um efeito de pós-processamento com dithering que pode ser aplicado a qualquer cena 3D.
Fonte: Hacker News · Resumido por HeadlinesBriefing