Blur Effects for UI Elements

[TheCarbyneUniverse (Carbyne)]

As a Roblox developer, it is currently impossible to be able to blur images (UI related) and to use UI elements that blur anything that is behind it.

---

Elaboration

Allow me to elaborate on what I mean. I am asking for two features: Image Blur and UI Blur. I strongly believe UIs need more attention. They need to be able to create things that CSS elements can. Right now, there is no way to blur an image that is part of the UI.

This is currently not possible.

It is also not possible to create something like this in Roblox:

Notice how the rounded rectangle at the bottom right blurs everything behind it.

---

Potential Creations (Use Cases)

If this issue is addressed, it would improve my development experience because it would allow me to create significantly better UIs. For example, if there is text on top of an image, it might not be readable unless the image is manipulated:

As you can see, being able to blur an image can make UIs a lot better.

Even with the same transparency, the “UI” to the right is a lot more readable and is a lot more professional.

Additionally, adding two properties (simply called “Image Blur” and “UI Blur”) which can be customized would also be great! (i.e. developers can set how strong the blur is).

If the UI blurring is tampering with performance, that can simply be handled via graphics settings (almost like how the sun rays effect does not render until the quality is set to almost max). Mobile devices especially can simply choose to not render this.

---

Operating Systems That Use This Effect

You can find examples down here.

---

Conclusion

I am requesting two features: Image Blur and UI Blur. Both, if added, can pave way for a brand new style of UIs that are both simple and readable. Not only would this improve UX (user experience), but UI artists have a broader palette of choices.

I truly hope that this gets added to our UIs.
Thank you.

[TheCarbyneUniverse (Carbyne)]

If anyone has more use cases, feel free to share!

[cxmeels]

I tried to replicate this blur effect using the old Module3D and glass material, but I just can’t figure out how to scale and position the parts properly behind frames, etc. to get the desired effect. Not quite the same as blurring UI elements, but the intention was to achieve some sort of distortion effect on the game selectively (like Windows 10 does with acrylic).

Windows Terminal

Thought it would look nice to have behind windows, notifications, menus, etc.

[cxmeels]

no, no. I’m saying this is a use case of enhanced UI effects. This is the sort of thing we could create if we could selectively choose how to blur the viewport. The workaround to make something like this work would be to position a part behind the UI elements with a material such as glass; however, I’m not good at the maths lol

[nooneisback]

It would also look different on different settings.

[sparker22]

iOS uses the bluring mechanic a lot doesn’t it? Its a pretty good example on how blurring can create tasteful interfaces.

[Tiffblocks]

This is something we’d really like to ship but it’s complex because UI is laid overtop of the game content which is changing at 60 FPS. As well, we generally prefer UI features that you can animate at 60 FPS without tanking performance. The big issue here is that on low end phones, doing a blur is quite expensive, and having a “low quality” version isn’t simple because a blur is essentially a low-pass filter on the image, which removes noisy parts that can make text overlaid on top harder to read.

The blur effect we have that you can parent to Lighting simply doesn’t enable if you’re on a low end device, and that’s built on the assumption that not having the blur won’t make the game unplayable. But it could pretty easily make text unreadable.

In the mean time, some of the examples posted in this thread are possible if you upload a second version of your image asset that has a blur applied to it. This is a fairly easy case to support as a modifier, and this may be the first instance of UI blur we’ll ship, as it only needs to be computed once-ish.

Hopefully we’ll be able to ship this in some form in the future though.

[bigcrazycarboy]

Yes please - this would be insanely useful for UI rain effects like this

This would have some serious potential for future and current projects.

[TheCarbyneUniverse (Carbyne)]

By the way, here are some examples of UI blurring the background. These are similar to what I am describing in the topic above.

Chrome OS:

Windows OS:

There are many more operating systems, websites, and apps that use or are going to use this effect.

I understand that these would be very hard on the engine that we have currently, as @Tiffblocks describes, but these would be amazing if they can be added.

[nooneisback]

@bigcrazycarboy
Your use-case doesn’t require blur. There is no reason to apply an expensive effect to something that is already rendered.

As for the actual feature request, applying blur to an OS’s UI is not the same as doing it in games. In fact, OSs have this very same issue, though it’s much less noticeable because much less has to be rendered. Remember the whole thunderstorm of complaints that happened when Windows Aero was released? 4 cores were a privilege back then and single core CPUs a common appearance.

Back to games, how exactly would this be applied? Most games don’t have a dedicated class in their engines and instead write their own shaders with almost cheaty workarounds, mostly downscaling the original massively before applying the effect. As we know, Roblox doesn’t allow per-pixel manipulation, so a class/property would have to be added, but that also means we cannot apply the effect selectively. For example, you wouldn’t have to apply blur to light blue pixels of a sky or black bars on the edges of your screen, but the engine doesn’t and can’t know that.

[Fire540Games (FireForge)]

I think a good solution to that would be to have a read-only property that represents whether UI blur effects are enabled or not. On low graphics settings and lower-end mobile devices, UI blur could be disabled, but it could be enabled on higher graphics settings and more powerful devices.

Developers could account for this by setting the transparency of UI objects using that property. This could be done by connecting to the GetPropertyChangedSignal of the new property, and changing transparency for each of the UI elements.

Here is an example of how this would work:

local playerGui = game:GetService("Players").PlayerGui
local blurFrames = {} -- add all of the frames with UI blur in here

local function onBlurEnabledChanged()
	local enabled = playerGui.UIBlurEnabled
	local transparency = enabled and 0.5 or 0
	-- if blur is enabled, make background transparent so blur can be seen
	-- if disabled, make background solid so that text is legible

	for i, v in pairs(blurFrames) do
		v.BackgroundTransparency = transparency
	end
end

onBlurEnabledChanged() -- setup
playerGui:GetPropertyChangedSignal("UIBlurEnabled"):Connect(onBlurEnabledChanged)

This is fairly simple for scripters to do, but would solve the problem of the game being unplayable without UI blur.