Blur shader for Godot 4.x?

CryptoMares

I'd like to create a frosted glass UI effect, similar to MacOS, Forza Horizon and others:

I can't find any shaders that work well. The best I could find was this, which is far from what I want:

shader_type canvas_item;

uniform sampler2D screen_texture : hint_screen_texture, repeat_disable, filter_linear_mipmap;

const int samples = 32;
const int LOD = 2;          // gaussian done on MIPmap at scale LOD
const int sLOD = 1 << LOD;  // tile size = 2^LOD
const float sigma = float(samples) * 0.25;

float gaussian(vec2 i) {
    return exp(-0.5 * dot(i/sigma, i/sigma)) / (6.28 * sigma * sigma);
}

vec4 blur(sampler2D sp, vec2 uv, vec2 scale) {
    vec4 color = vec4(0.0);
    float total_weight = 0.0;
    int s = samples/sLOD;
    
    for (int i = 0; i < s*s; i++) {
        vec2 d = vec2(float(i%s), float(i/s)) * float(sLOD) - float(samples)/2.0;
        float weight = gaussian(d);
        color += textureLod(sp, uv + scale * d, float(LOD)) * weight;
        total_weight += weight;
    }
    
    // Normalize by total weight instead of alpha
    return color / total_weight;
}

void fragment() {
    vec2 uv = SCREEN_UV;
    vec2 texture_pixel_size = 1.0/vec2(textureSize(screen_texture, 0));
    
    COLOR = blur(screen_texture, uv, texture_pixel_size);
}

It shifts the blurred image and it does not blur the environment skybox.

Can anyone help?

xyz

CryptoMares it does not blur the environment skybox

It should. Post a screenshot and your scene setup.

CryptoMares

xyz It's a debug panel inside of my character controller:

Also as you can see, the blurred image is misaligned slightly:

xyz

CryptoMares Misalignment likely just a trivial issue of uv transformation. I'm more interested in environment not being affected, although that's not really visible in the screenshots.

Where did you get that shader code?

CryptoMares

xyz On Shadertoy.

This is the result of a few attempts to convert it for Godot 4 with AI. This is the original code:

const int samples = 32,
          LOD = 2,         // gaussian done on MIPmap at scale LOD
          sLOD = 1 << LOD; // tile size = 2^LOD
const float sigma = float(samples) * 0.25;
float gaussian(vec2 i) {
    return exp( -.5* dot(i/=sigma,i) ) / ( 6.28 * sigma*sigma );
}
vec4 blur(sampler2D sp, vec2 U, vec2 scale) {
    vec4 O = vec4(0);  
    int s = samples/sLOD;
    
    for ( int i = 0; i < s*s; i++ ) {
        vec2 d = vec2(i%s, i/s)*float(sLOD) - float(samples)/2.;
        O += gaussian(d) * textureLod( sp, U + scale * d , float(LOD) );
    }
    
    return O / O.a;
}
void mainImage(out vec4 O, vec2 U) {
    O = blur( iChannel0, U/iResolution.xy, 1./iChannelResolution[0].xy );
}

xyz

CryptoMares If this is for backgrounds, you may even not need to do any gaussian averaging. Just sample a small mipmap and let the bilinear filtering do the blur. Might be good enough.

xyz

CryptoMares

shader_type canvas_item; uniform sampler2D t: hint_screen_texture, filter_linear_mipmap;
void fragment(){COLOR.rgb *= textureLod(t, SCREEN_UV, 4.0).rgb;}