Hexagonal Bokeh Blur Revisited – Part 4: Rhombi Overlap

This post is from a multi-part series titled “Hexagonal Bokeh Blur Revisited”. Want to jump directly to the index? If so, click here.

Another common artifact is the Y-shaped pattern of overlapping rhombi:

YShape.pngY-shaped Artifact

From the first post in this series, you might remember our blur function:

float4 BlurTexture(sampler2D tex, float2 uv, float2 direction)
    float4 finalColor = 0.0f;
    float blurAmount = 0.0f;
    // This offset is important. Will explain later. ;)
    uv += direction * 0.5f;
    for (int i = 0; i < NUM_SAMPLES; ++i)
        float4 color = tex2D(tex, uv + direction * i);
        color *= color.a;
        blurAmount += color.a; 
        finalColor += color;
    return (finalColor / blurAmount);

The half sample offset highlighted in bold shows how to prevent this issue.

BokehY.pngRhombi Overlap (Left) vs Proper Alignment (Right)

Steve Hill reminded me that this was actually mentioned in the notes on slide 15:

We also apply a half sample offset to stop overlapping rhombi. Otherwise you’ll end up with a double brightening artifact in an upside Y shape.

As you can see, it’s easily solvable! 😀

2 thoughts on “Hexagonal Bokeh Blur Revisited – Part 4: Rhombi Overlap

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s