Такой разный Blur

[Everlier]

Автору спасибо за красивости. Очередной толчок к изучению WebGL :)

[timurminulin]

А почему не Лена?

[Torvald3d]

Во-первых на изображении леса и травы с проблесками света эффект смотрится лучше, во-вторых это hdr формат изображения, соответственно боке выглядит натуральнее и в-третьих — это уже готовый проект с несколькими кубмапами, о нем я напишу в следующих статьях.
Хотя, если честно, про Лену я почему-то даже не вспомнил(

[Chaos_Optima]

Ещё неплохо было бы сказать что у такого dof есть косяк на границах ближних объектов, когда они начинают размываться, их границы остаются резкими. Для решения проблемы dof нужно разделить на 2 текстуры 1 — ближние объекты 2 — объекты в фокусе и дальше фокуса. Размываем их по dof (размытие первой текстуры будет слегка отличатся) и потом смешиваем.

[Torvald3d]

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

[Moskus]

Еще вокруг объекта в этом примере наблюдается некий светлый ореол снизу. Его лучше видно, если перевести изображение в градации серого. К слову, хорошее средство тестирования результатов — разложение их в GIMP на частотные планы (плагин Wavelet Decomposition) — на высокочастотных (1,2,4) оставшиеся резкие артефакты в областях, где все должно быть размыто, легко увидеть.

[SHVV]

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

[Torvald3d]

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

[SHVV]

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

[Torvald3d]

Вы имеете ввиду как вычисляется индекс в буфере по которому записываются координаты? Для этого есть атомарный счетчик, как только нашли достаточно контрастное место — увеличиваем счетчик и по нему вычисляем индекс в буфере
Вот кусок шейдера из той книги:

if(( lumCenter - lumNeighs) > LumThreshold && cocCenter > CoCThreshold)
{
int current = int(atomicCounterIncrement(BokehCounter));
imageStore(BokehPositionTex , current ,vec4(gl_FragCoord.x, gl_FragCoord.y, depth , ←
cocCenter));
imageStore(BokehColorTex , current , vec4(colorCenter , 1));
}

[SHVV]

Спасибо. К сожалению, это пока относительно новая фича (OpenGL 4.2), чтобы использовать её в продакшене. Но как опция — неплохо.

[daspisch]

Хотелось бы оставить здесь эту песочнице для GLSL.

[sol_linux]

Довольно годная и простая реализация боке. Я как-то просматривал OpenGL Insights, но там вроде смысл был в поиске контрастных мест на изображении и отрисовывание в местах с локальным максимумом яркости спрайтов с боке. Для отрисоки боке использовались новые возможности из OGL4, поэтому я особо рассматривать не стал.
У вас довольно приятные результат с малыми силами — спасибо за статью!

[sol_linux]

Внимательно прочитал статью — увидел что вы упомянули про это)

[egormerkushev]

Делал blur для Cocos2d-x на C++ так как не смог добиться нормальной работы шейдера… Игра для мобильных устройств — надо попробовать ваши варианты…
Вы проводили какие-либо тесты на вашем оборудовании?

[Darthman]

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