<p>I have a 2D texture, without any depth maps, which I'd like to blur to achieve a bokeh effect. The catch, however, is that I want the effect to be custom bitmaps/shapes (e.g. a heart). Here's a part of the shader I'm using to achieve the blur:</p>
<pre><code>const float vertices = 5.0; // For a pentagonal bokeh

vec4 gamma_fun(vec4 vector, float gamma)
{
    return vec4(pow(vector.rgb, vec3(gamma)), vector.w);
}

void main()
{
    float maxradius = 10.;
    vec2 texelSize = 1.0 / resolution.xy;
    vec2 texcoord = textureCoordinate.xy;
    
    vec4 color = vec4(0.0);
    for (float x = -maxradius; x &lt;= maxradius; x += 1.0)
    {
        for (float y = -maxradius; y &lt;= maxradius; y += 1.0)
        {
            vec2 offset = vec2(x, y);
            float angle = atan(y, x);
            float radius = sqrt(dot(offset, offset));

            float paraPoly = cos(angle - (2.0 * PI * floor((PI + vertices * angle) / (2.0 * PI))) / vertices) / cos(PI / vertices);
            float sdfPoly = paraPoly * radius - maxradius;
            float egdeFalloff = smoothstep(0.0, -1.0, sdfPoly);

            vec4 tap = texture2D(inputImageTexture, textureCoordinate.xy  + texelSize.xy * offset.xy);

            tap = gamma_fun(tap, 4.0);
            color += tap * egdeFalloff;
        }
    }

    color.rgb /= color.www;
    color = gamma_fun(color, 1.0 / 4.0);
    gl_FragColor = vec4(color.rgb, 1.0);
}
</code></pre>
<p>Instead of the polygonal bokeh (achieved by setting the value of <code>vertices</code>), I'd like a custom bitmap, such as a heart, to be displayed.</p>

CC BY-SA 4.0
2021-12-30T09:33:02.890Z
Perform convolution with an arbitrary blurring kernel (some image).
lightxbulb
CC BY-SA 4.0
2021-12-30T09:41:06.047Z
@lightxbulb Pardon my ignorance but, after I've calculated the color in the nested for loop, do I just multiply it with the custom bokeh texture's color at that coord?
Parker Queen
CC BY-SA 4.0
2021-12-30T12:15:36.687Z
See this: https://en.m.wikipedia.org/wiki/Multidimensional_discrete_convolution
I suggest using reflecting boundary conditions (use a mirrored texture wrapping).
lightxbulb
<glsl><opengl-es><blur>
Achieving bokeh blur with custom shapes
Parker Queen
# Achieving bokeh blur with custom shapes

(Asked by: username_0 on 2021-12-30)

I have a 2D texture, without any depth maps, which I'd like to blur to achieve a bokeh effect. The catch, however, is that I want the effect to be custom bitmaps/shapes (e.g. a heart). Here's a part of the shader I'm using to achieve the blur:

```
const float vertices = 5.0; // For a pentagonal bokeh

vec4 gamma_fun(vec4 vector, float gamma)
{
    return vec4(pow(vector.rgb, vec3(gamma)), vector.w);
}

void main()
{
    float maxradius = 10.;
    vec2 texelSize = 1.0 / resolution.xy;
    vec2 texcoord = textureCoordinate.xy;
    
    vec4 color = vec4(0.0);
    for (float x = -maxradius; x <= maxradius; x += 1.0)
    {
        for (float y = -maxradius; y <= maxradius; y += 1.0)
        {
            vec2 offset = vec2(x, y);
            float angle = atan(y, x);
            float radius = sqrt(dot(offset, offset));

            float paraPoly = cos(angle - (2.0 * PI * floor((PI + vertices * angle) / (2.0 * PI))) / vertices) / cos(PI / vertices);
            float sdfPoly = paraPoly * radius - maxradius;
            float egdeFalloff = smoothstep(0.0, -1.0, sdfPoly);

            vec4 tap = texture2D(inputImageTexture, textureCoordinate.xy  + texelSize.xy * offset.xy);

            tap = gamma_fun(tap, 4.0);
            color += tap * egdeFalloff;
        }
    }

    color.rgb /= color.www;
    color = gamma_fun(color, 1.0 / 4.0);
    gl_FragColor = vec4(color.rgb, 1.0);
}

```

Instead of the polygonal bokeh (achieved by setting the value of `vertices`), I'd like a custom bitmap, such as a heart, to be displayed.

**Tags:** glsl, opengl-es, blur

> **Comments:**
> **username_1**: Perform convolution with an arbitrary blurring kernel (some image).  
> **username_0**: @username_1 Pardon my ignorance but, after I've calculated the color in the nested for loop, do I just multiply it with the custom bokeh texture's color at that coord?  
> **username_1**: See this: https://en.m.wikipedia.org/wiki/Multidimensional_discrete_convolution I suggest using reflecting boundary conditions (use a mirrored texture wrapping).  

---

## 0 answers

