Наложение видеоэффектов с OpenGL ES 2.0 with Shaders, Максим Решетей
0 likes453 views
Максим Решетей, ведущий iOS разработчик Coub, рассматривает применение эффектов видео и обработки изображений с использованием OpenGL ES 2.0 и шейдеров, включая размытие по Гауссу. Он объясняет алгоритмы и матрицы свертки, а также приводит примеры простейших алгоритмов цифровой обработки. В заключение рассматриваются преимущества использования GPU для более быстрой реализацию алгоритмов.
![ШАГ 1 - Построение матрицы свертки A
- A[x,y] =
- Размер
матрицы 7x7
(3*2.5)
- Равномерное
распределение
0.0000 0.0000 0.0001 0.0003 0.0001 0.0000 0.0000
0.0000 0.0007 0.0065 0.0133 0.0065 0.0007 0.0000
0.0001 0.0065 0.0547 0.1109 0.0547 0.0065 0.0001
0.0003 0.0133 0.1109 0.2250 0.1109 0.0133 0.0003
0.0001 0.0065 0.0547 0.1109 0.0547 0.0065 0.0001
0.0000 0.0007 0.0065 0.0133 0.0065 0.0007 0.0000
0.0000 0.0000 0.0001 0.0003 0.0001 0.0000 0.0000
-3 0 3-2 -1 21
0
-1
-2
-3
1
2
3
1
2πσ 2
e
−
x2
+y2
2σ 2
16](https://image.slidesharecdn.com/dipstachka-150413110221-conversion-gate01/85/OpenGL-ES-2-0-with-Shaders-16-320.jpg)
![ШАГ 2 - Применение матрицы A к точкам
изображения I
′I [x,y] =
I[x + i,y + j]* A[i, j]
j=0
3σ
∑
i=0
3σ
∑
3σ *3σ
0 N
0
N
0.05 0.11 0.05
0.11 0.22 0.11
0.05 0.11 0.05
A
I I'
0 3𝞼
17](https://image.slidesharecdn.com/dipstachka-150413110221-conversion-gate01/85/OpenGL-ES-2-0-with-Shaders-17-320.jpg)
![Шейдер размытия по Гауссу
void main(void)
{
fragmentColor = texture2D(image, gl_FragCoord)*convolutionMatrix.mid
int kMatrixSize = 3sigma;
for (int i = 0; i < kMatrixSize; ++i)
{
for (int j = 0; j < kMatrixSize; ++j)
{
fragmentColor += texture2D(image, gl_FragCoord + vec2(i, j)) *
convolutionMatrix[i][j];
}
}
gl_FragColor = fragmentColor / (kMatrixSize*kMatrixSize)
}
26](https://image.slidesharecdn.com/dipstachka-150413110221-conversion-gate01/85/OpenGL-ES-2-0-with-Shaders-26-320.jpg)
Наложение видеоэффектов с OpenGL ES 2.0 with Shaders, Максим Решетей
- 1. Максим Решетей ведущий iOS разработчик Coub Наложение видеоэффектов с OpenGL ES 2.0 with Shaders 1
- 2. 2
- 3. Что такое Coub - Короткие зацикленные видео- ролики со звуком - Источники: камера, Youtube, Vimeo - Шеринг в социальные сети 3
- 4. Повседневные задачи - Гибкая архитектура - Обработка данных (download/upload) - Сложные интерфейсы - Видео/аудио обработка 4
- 6. Виды цифровой обработки 6 - Распознавание образов/текста - Задачи классификации - Нейронные сети - Геометрические преобразования - Цветовая коррекция - Наложение эффектов
- 7. Обработка изображения ДЛЯ каждой точки Color(x, y) = A(x, y) где A - выбранный алгоритм 0 N 0 N 7
- 8. 0 N 0 N Осветление ДЛЯ каждой точки RGB = R+С, G+С, B+С где С - константа 8
- 9. Ч/б фильтр ДЛЯ каждой точки RGB = (R+G+B)/3 0 N 0 N 9
- 10. Другие популярные фильтры Pixelation Posterization 10
- 11. Другие популярные фильтры HDR Blur 11
- 12. Блюр в Coub iOS 12
- 13. Размытие по Гауссу (блюр) где x, y - координаты точки изображения (пикселя) 𝞼 - стандартное отклонение распределения Гаусса (радиус блюра) G(x,y) = 1 2πσ 2 e − x2 +y2 2σ 2 13
- 14. Размытие по Гауссу - Вершина колокола - обрабатываемый пиксель - Значение пикселя - средне- взвешенное значение по окрестности - Учитываются только пиксели в районе 3𝞼 (правило трех сигм) 14
- 15. Размытие по Гауссу, общий алгоритм 1. Построение матрицы свертки размером 3𝞼 2. ДЛЯ каждой точки изображения Вычисляем средне-взвешенное значение цвета точки по окрестности, используя матрицу свертки. Note: На практике используют массив вместо матрицы, для достижения O(n) 15
- 16. ШАГ 1 - Построение матрицы свертки A - A[x,y] = - Размер матрицы 7x7 (3*2.5) - Равномерное распределение 0.0000 0.0000 0.0001 0.0003 0.0001 0.0000 0.0000 0.0000 0.0007 0.0065 0.0133 0.0065 0.0007 0.0000 0.0001 0.0065 0.0547 0.1109 0.0547 0.0065 0.0001 0.0003 0.0133 0.1109 0.2250 0.1109 0.0133 0.0003 0.0001 0.0065 0.0547 0.1109 0.0547 0.0065 0.0001 0.0000 0.0007 0.0065 0.0133 0.0065 0.0007 0.0000 0.0000 0.0000 0.0001 0.0003 0.0001 0.0000 0.0000 -3 0 3-2 -1 21 0 -1 -2 -3 1 2 3 1 2πσ 2 e − x2 +y2 2σ 2 16
- 17. ШАГ 2 - Применение матрицы A к точкам изображения I ′I [x,y] = I[x + i,y + j]* A[i, j] j=0 3σ ∑ i=0 3σ ∑ 3σ *3σ 0 N 0 N 0.05 0.11 0.05 0.11 0.22 0.11 0.05 0.11 0.05 A I I' 0 3𝞼 17
- 18. Размытие по Гауссу, эффективность на CPU Картинка 640x480 Радиус блюра 5 = 640x480x15x15 = 70 million operations Видео 640x480 Радиус блюра 5 = 70*30 = 2 billion operations 18
- 19. Что делать? Hints: - Полный последовательный перебор всех пикселей - Вычисления ортогональны, независимы друг от друга 19
- 20. CPU vs GPU 1 2 3 4 Core CPU GPU 20
- 21. GPU - Много параллельных процессоров - Векторные операции нативно - Сравнимая с CPU частота - Сверх-быстрая видео память *iPhone6’s GPU GX6450 - 300 Giga FLOPS 21
- 22. OpenGL ES 2.0 - Простой интерфейс - Прямой доступ к GPU - Поддержка шейдеров - Широкое распространение 22
- 23. Шейдер - GLSL, C-like language - Вертексные - для вершин объектов сцены - Пиксельные - для точек изображения - Встроенные команды для векторных типов и операций, like vec3 color = vec3(1.0, 1.0, 1.0)*0.5 - Не нужно думать как параллелить выполнение 23
- 24. Простейший шейдер void main(void) { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } 24
- 25. Размытие по Гауссу на GPU Вычисляем средне-взвешенное значение для пикселя, используя матрицу свертки Шаг 1 - CPU Строим матрицу свертки (единичный набор операций) Шаг 2 - GPU (шейдер) 25
- 26. Шейдер размытия по Гауссу void main(void) { fragmentColor = texture2D(image, gl_FragCoord)*convolutionMatrix.mid int kMatrixSize = 3sigma; for (int i = 0; i < kMatrixSize; ++i) { for (int j = 0; j < kMatrixSize; ++j) { fragmentColor += texture2D(image, gl_FragCoord + vec2(i, j)) * convolutionMatrix[i][j]; } } gl_FragColor = fragmentColor / (kMatrixSize*kMatrixSize) } 26
- 27. Итоги - Рассмотрели теорию цифровой обработки видео и изображений - Разобрали примеры простейших алгоритмов - Подробно изучили как работает размытие по Гауссу - Узнали о способе быстрой реализации алгоритма на GPU с помощью шейдеров 27
- 28. coub.com 28