Максим Хекель несколько месяцев создавал свой личный сайт с нуля, включив в него 3D-работы, чтобы продемонстрировать навыки в шейдерах и WebGL. По ходу дела он понял, насколько важна постобработка для того, чтобы сцена выглядела хорошо. Пользовательская постобработка стала для него творческим выходом, и он особенно полюбил ретро-эффекты, такие как дизеринг, квантование цвета, пикселизацию и RGB-ячейки ЭЛТ-мониторов. Эти тонкие детали создают приятный контраст между современным вебом и эпохой технологий, по которой до сих пор тоскуют многие люди, выросшие в 90-х и начале 2000-х.
Дизеринг возник как ранняя графическая техника, которая обманывала мозг зрителя, заставляя его воспринимать больше цвета или плавности в градиентах и тенях, чем могло выдать железо, за счёт намеренного добавления шума в изображение или рендер. Палитры были очень ограничены, поэтому разработчики игр полагались на эту технику. Результатом стал характерный облик, связанный с периодом, когда компьютеры становились повсеместными, но продвинутая графика ещё не была возможна. Сегодня дизеринг скорее художественный выбор, чем обходной путь: художники и геймдизайнеры используют его, чтобы вызвать ту эпоху или работать в рамках добровольно заданных ограничений по цвету. Примеры включают point-and-click игру Basement Chronicle от Basement Studio, работы @loackme и экспериментальную фотографию @aweusmeuh, снятую на оригинальную камеру Game Boy.
Хекель сосредоточен на применении дизеринга к проектам на React Three Fiber и Three.js, чтобы придать им уникальный стиль. Подход основан на постобработке, которая применяет шейдер к уже отрендеренной сцене, подобно фильтру изображения для фотографии. Чтобы создать пользовательский эффект, он объявляет класс, наследующий Effect, определяет фрагментный шейдер, который вызывается через конструктор родителя, объявляет необходимые uniform-переменные и оборачивает класс функцией wrapEffect, чтобы его можно было использовать как JSX-компонент внутри EffectComposer.
Первая часть серии объясняет, как работает техника дизеринга, реализует её в виде шейдера и создаёт начальную версию эффекта постобработки с дизерингом, который можно применить к любой 3D-сцене.
Источник: Hacker News · Сводку подготовил HeadlinesBriefing