Начать программирование шейдеров я решил с переноса на камеру одного из своих фильтров для фотошопа. Фильтр назывался Windy Pixel. Его алгоритм брал каждый пиксель изображения, измерял его цвет, и в зависимости от цвета сдвигал этот пиксель со своего места. В фотошопе изображение рассыпалось по экрану, словно сухой песок на ветру, а в случае с шейдером эффект менялся и напоминал прибрежный песок, размываемый волнами.
Подобные техники сдвига пикселей называют общим словом Displacement. Часто они используются для искажения одного изображения через другое. В этом случае одна картинка становится своего рода цифровой линзой для другой картинки, рассеивает ее пиксели в нужном направлении, создает дисторсию. В случае Windy Pixel сигнал из камеры, накладывался сам на себя.
// сдвиг положения пикселя
pixelPosition.x += pixelColor.r;
pixelPosition.y += pixelColor.g;
Визуальные возможности displacement-техник казались мне очень широкими. Я работал с ними в фотошопе и мечтал о том, чтобы однажды начать снимать прямо через такой эффект. Приложения для обработки сигнала из камеры уже существовали, но они предлагали только готовые наборы эффектов, а мне хотелось снимать через свой собственный фильтр.
Отдельным препятствием для меня была сложность приложений с эффектами, я не знал как подступиться к их коду и заменить готовые пресеты на свои. В случае с p5.js все приложение и фильтр для съемки умещались в несколько десятков строк кода, и этот код был простым, понятным и гибким.
▹ Windy Pixel v2b1 — ранняя версия приложения с простым дисплейсментом.
▹ Redline — пример использования фильтра Windy Pixel в фотошопе.