Уроки OpenGL + C#.

Создание графических фильтров для обработки изображений.



1. Общие сведения

Как известно, существует множество способов изменения и редактирования изображений, с помощью цифровых методов. Результат обработки изображений при этом зависит от того, какие операции вы можете произвести с изображением, после того, как оно попало на ваш компьютер: вы можете редактировать RGB компоненты цветов, с целью получения наилучшего цветового баланса. Вы можете увеличить или уменьшить яркость изображения, редактировать его резкость или размывать отдельные элементы с помощью различных графических фильтров. Мы рассмотрим крайне популярные эффекты, повсеместно используемые в компьютерной графике:

  • Инверсия цветов
  • Размытие
  • Увеличение резкости
  • Тиснение
  • Акварельный эффект

Так, при размытии изображения графическим фильтром его границы размываются, становясь более мягкими. В случае же с фильтром резкости – наоборот: разница между цветами становится, подчеркнута, тем самым выделяя какие-либо детали изображения. Акварельный эффект изменяет изображение таким образом, что оно как будто нарисовано акварелью.

2. Матрица – ядро свертки

Если мы рассмотрим данные эффекты с алгоритмической точки зрения, то не увидим ничего сложного: данные эффекты создаются с помощью матрицы чисел. Эта матрица называется ядром свертки.
Данная матрица (3х3) содержит три строки по три числа. Для преобразования пикселя изображения он умножается на значение в центре ядра, а значения пикселей, находящихся вокруг данного, умножаются на соответствующие им коэффициенты ядра, после чего все значения суммируются и мы получаем новое значение для изменяемого пикселя. Данный процесс должен быть последовательно выполнен с каждым пикселем редактируемого изображения.

От коэффициентов ядра зависит то, как изменится редактируемое изображение. Для достижения некоторых эффектов необходимо последовательно применить к изображению не одну, а несколько матриц.

3. Инверсия цветов

Это наиболее простой способ редактирования изображения: нам даже не постребуется матрица. Нам всего лишь достаточно изменить составляющие цвета на противоположенные (подробнее - при реализации фильтра в следующей части главы).

4. Алгоритм размывания

Для того, чтобы размыть изображение нам потребуется считать в память значения RGB составляющих цвета каждого пикселя. После чего ядро размывания будет применено ко всем составляющим компонентам цвета всех пикселей редактируемого изображения:

Матрица для фильтра размытие.

Для того чтобы определить цвет пикселя, находящегося под центром ядра, необходимо провести умножение весовых коэффициентов ядра с соответствующими значениями цвета редактируемого изображения. После этого результаты суммируются.

Полученное изображение «размыто» по сравнению с оригинальным, так как цвет каждого обработанного пикселя «распространился» среди соседних пикселей.
Чтобы увеличить ядро размытия, вы можете:

  • использовать ядро большего размера (таким образом цвет будет распределяться среди большего количества соседних пикселей)
  • изменять коэффициенты таким образом, чтобы уменьшить влияние центрального коэффициента
  • выполнить фильтрация изображения не однократно

5. Алгоритм увеличения резкости

Создавая эффект увеличения резкости, мы выполняем все тот же алгоритм, но используем другое ядро, так как теперь нашей целью является увеличение резкости изображения.
Ядро G для увеличения резкости:

Матрица для фильтра, увеличивающего резкость.

Как и в предыдущем случае, мы по отдельности обрабатываем RGB составляющие, после чего формируем значения цвета обрабатываемого пикселя.
Для увеличения контраста между центральным пикселем и соседями, мы используем отрицательные весовые коэффициенты.

Таким образом, результирующее изображение стало более четким, чем оригинал. По сути, дополнительные детали возникли из ничего -  это просто увеличенный контраст между цветами пикселей.

6. Алгоритм тиснения

Тиснение выполняется аналогично, но в данном случае мы используем не одну матрицу, а несколько.

Фильтр тиснения.

В то время как ядра размытия и резкости имели сумму коэффициентов равную единице, то в данном случае сумма весов в ядре тиснения равна нулю.
Если сумма коэффициентов не будет равна 0, то мы получим отклонение к какому либо конкретному цвету.

Полученное значение цвета будет дополнительно обработано (усреднено) и приведено к диапазону 0-255 (подробнее вы сможете увидеть при реализации данного фильтра).
Меняя значения позиций 1 и -1 мы можем получить измененное направление подсветки.

Фильтр тиснения - часть 2.

7. Алгоритм акварелизации

Название акварельного фильтра говорит само за себя: результирующее изображение будет выглядеть так, как будто его нарисовали акварелью.
На первом этапе применения данного фильтра мы сгладим цвета редактируемого изображения.

Алгоритм акварелизации.

На следующем этапе мы увеличим резкость переходов, для завершения создания эффекта акварели.

Акварелизация - второй шаг.

Вот и все. Немного подкорректировав параметры матрицы, мы можем получать как более резкий, так и более плавный эффект акварелизации.
На данном примере мы продемонстрировали возможность применения двух различных фильтров, для последующего получения нового интересного эффекта.


Обсуждение данного урока: OpenGL - создание и применение графических фильтров. Введение.
Далее: 7.2 Реализация фильтра «Инверсия цветов», «Размытие», «Резкость», «Теснение», «Акварелизация».