UI Acrylic Glass/Postprocessing blur on CanvasGroups + images

i miss this version of the menu more every day :smiling_face_with_tear:

2 Likes

Funniest part is that this was from 2020, and despite what was said in 2019 it was added somewhat.

1 Like

oh mb didn’t notice that

yeah that should be a feature as well

Just use bloxstrap, it lets you customize the hell out of your roblox client. Including changing menu versions.

I use Linux so I don’t have that level of customization for Roblox sadly

Ah i gotchu, but all bloxstrap does to change the menu version is modify a FFlag, so if you can do that, you can use the old menu too even on linux

2 Likes

wait no its the internal blur, see it also blurred the ui!

I also think that having an effect like this would be extremely nice to have. I’d opt for it being an effect instance similar to UICorner, this pattern is much better than properties in my opinion and seems to be the direction that Roblox has been taking with most things of this nature.

I think even if the blur isn’t customizable at all and is fixed to some hard coded set of parameters it would still be a super nice effect to have even then, and I could see it resulting in a paradigm shift in UI design (for better or for worse)

Bloxstrap just sets a variety of fast flags. If you check the Bloxstrap source you can find the fast flags that it sets and set them identically within Sober for the same exact results, which can be done in the files in the same way as with the Roblox client or Studio.

Most fast flags function identically, but because Sober is based on the Android version of Roblox there are still hardcoded differences in some cases (and the client will be slightly older). Primarily I’ve only really seen differences with graphics related stuff though.

3 Likes

bump.
i need this so bad
making the blur work with ui gradient to decrease blur based on transparency would also be very useful, maybe asking too much though.

3 Likes

windows 7 had this. an os from 2009. come on, roblox

4 Likes

bump

we really need this especially for uis

it’s gonna be 2028 before we get “maybe in a few years once mobile is ready to support this feature :sweat_smile:” at the minimum sadly…

1 Like

its all about optimizing mobile smh

just drop support for old mobile devices then we can get so many features such as this and increased light ranges

:sob:

2 Likes

literally 6 years ago: (wow)

technology has upgraded so much since then

3 Likes

Roblox has an internal blur that will affect everything, not just the viewport.


This is EXTREMELY needed among UI Designers. Backblurs/Acrylic glass effects are very pretty and relatively easy to use. Dropshadows are similarly needed.

5 Likes

ngl I’m annoyed by these 2 missing instances that would 100% make UI designing better

  • More Gradients (Linear, Radial, …)
  • UI Blur
    they would change everything about UI designing, and all the cool stuff we could do.
    they always have the same excuse: “performance”, I don’t know much about engines, but I’m pretty sure that it’s because Roblox’s engine is years behind any modern game engine
3 Likes

edit: please see savio’s & oreo’s reply


they would change everything about UI designing, and all the cool stuff we could do.
they always have the same excuse: “performance”, I don’t know much about engines, but I’m pretty sure that it’s because Roblox’s engine is years behind any modern game engine

iirc, their ui blur implementation was done by fetching neighboring pixels which had a harsh performance penalty on memory constrained devices.

essentially this is happening per pixel:

// snippet by https://godotshaders.com/shader/web-safe-darkened-gaussian-blur/
vec3 gaussianblur(sampler2D sampler, vec2 pos, vec2 pixel_size, float sigmaUsed, int radius){
    vec3 blurredPixel = vec3(0.0);
    float total_weight = 0.0;
	// Loop over the radius (tecnically its a square)
    for(int i = -radius ; i <= radius; i++){ 
        for(int j = -radius; j <= radius; j++){
			// Calculate the offset from the current pixel
			vec2 offset = vec2(float(i), float(j))*pixel_size;
			vec2 changedPos = pos + offset;        
			
			// Calculate the weight based on the Gaussian distribution multiplying both dimentions (how far are X and Y form the center (pos))
			float weight = gaussianDistribution(float(i), sigmaUsed)*gaussianDistribution(float(j), sigmaUsed);
			// Add the weighted color value to the blurred pixel
			blurredPixel += texture(SCREEN_TEXTURE, changedPos).rgb * weight;
			total_weight += weight;
        }
    }
	// Normalize the blurred pixel color by the total weight
	blurredPixel/=total_weight;
    return blurredPixel;
}

the cheaper way is to get a mipmapped version of the viewport, the blur is handled by the gpu filtering the texture:

//snippet by https://godotshaders.com/shader/simple-blur-godot-4-1/
shader_type canvas_item;

uniform float blur_amount : hint_range(-2.0, 10.0);
uniform float mix_amount : hint_range(0.0, 1.0);
uniform vec4 color_over : source_color;
uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;

void fragment() {
   vec4 blurred = textureLod(SCREEN_TEXTURE, SCREEN_UV, blur_amount);
   blurred.a = 255.0;
   vec4 fin = mix(blurred, color_over, mix_amount);
   COLOR = fin;
}

– at least how i do it in godot engine. i’m not sure if there’s any circumstance that prohibits this from happening, but this is probably the most performant way of getting ui blur afaik

4 Likes

Roblox’s version isn’t that unoptimized. They downscale the viewport by a certain factor (no continous downscaling like how Roblox’s bloom works, just once). They then do a 2 pass guassian blur (O(N) instead of O(N^2), very significant difference).

4 Likes

I don’t believe this is accurate. Of course, I can only factually prove this if it was still 2016, but I don’t think they would have made their blur way slower over the years:

3 Likes

this was extremely buried down in the search, so thanks for bringing that up

will make appropriate modifications

2 Likes