As a Roblox developer it is currently impossible to include UI elements in a blur effect. Basically, I think you should be able to optionally include UI elements of a certain ZIndex or lower to be included in the blur, allowing me as a developer to have “pop up alerts” that will always stand out clearly against any UI the player has open in the background.
Currently:
With Hypothetical Blur:
While it actually is possible to put GUIs into 3D space, allowing blur to affect them, it is somewhat tricky.
You need to convert your ScreenGui into a BillboardGui (or SurfaceGui), maintaining the same dimensions as the dimensions of the ScreenGui version, and have it show just in front of the player’s camera.
A simple-to-make version would put the adornee block just in front of the camera, and put the BillboardGui.Size to the AbsoluteSize of the ScreenGui (Vector2 -> UDim2)
If there aren’t sudden implications such as a blow to the amount of shaders needed, I could see the feature request working - but suddenly bringing post-processing effects into UI level could bring implications, I can imagine.
Well, as an alternative option that may be easier, would be maybe adding a UIBlurElement object that just blurs the frame and all of it’s children. I mean, I couldn’t imagine it would be that hard, I’ve coded blurring effects before using the programming language processing, it’s not that complicated of math
I really wish there was more control over blurs
Bumping this, this would be extremely useful and blur is strongly lacking on Roblox at the moment.
Hello, while it is not possible to use BillboardGUIs for this because of their inability to be visible upclose and scaling with pixels… the solution might very much be to take a screenshot of the UI you want blurred > Crop it out > make the background transparent > Blur it using some editing magic inside GIMP Editor and then import to Roblox.
This is the most common problem solving issue as long as your side panel has correct scaling for all device screens, you should consider disabling visibility for it whilst blurred is active.
If you’re having trouble understanding what I mean:
This was simply done. If your issue has been solved please mark this as the answer because I spent 5 minutes of my life just to help you.
I have solved your issue however, the reason Roblox didn’t add this feature yet is because it is too performance demanding, websites might use this feature as well but only high end devices can fully support it at an average performance rate.
Even games such as BeamNG.Drive struggle to properly run blur in menus.
Please mark my previous reply as the answer, it is the most efficient solution that keeps your UI in 2D PlayerGUI.
It can’t be any more performance demanding than blurring 3D objects.
Roblox already has internal mechanisms to blur UI objects when you’re kicked/disconnected
Please read this message sent by a Roblox admin, it explains a bit why this feature is unlikely to be added:
Unfortunate, having to manually blur UI objects isn’t ideal
Ok but right now almost every single devices (including low-end phones) can support blur UI with a decent framerate, and they could just lower blurring quality and refresh rate at low graphics (yes it is possible)
Hello, while it is not possible to use BillboardGUIs for this because of their inability to be visible upclose and scaling with pixels… the solution might very much be to take a screenshot of the UI you want blurred > Crop it out > make the background transparent > Blur it using some editing magic inside GIMP Editor and then import to Roblox.
This is the most common problem solving issue as long as your side panel has correct scaling for all device screens, you should consider disabling visibility for it whilst blurred is active.
If you’re having trouble understanding what I mean:
Blurring the entire screen camera is an entirely different thing but blurring UI elements is another, the reason is that each UI element is rendered differently instead of it being an entire screenshot like the one I edited.
Only high end devices may run it perfectly without performance drops, like stated before each element is rendered independently, there’s a reason why games such as Forza, NFS and even Call of Duty games refrain from using it at the slightest is just that.
Blurring UI elements is similar to using filter: blur(64px); inside CSS for web development… blurring elements is heavily GPU dependant which is a problem when older computers and mobile devices don’t have newer cards to run this.
Another quick explanation is why do you think that not all browsers support blur for web development? Many because they’re too hard to render for every individual UI element, blurring a camera is much simpler than blurring one area of the screen.
