Title says it all.
For example, if I use a blur shader on my UI panel to blur the background, is it a good idea?
Is using shaders on UI a good idea in general?
Many thanks 
It’s a good idea if it improves your game. 
Though a full screen blur isn’t cheap. And you wouldn’t really do it on the ui, it would be a camera or render texture.
Using custom shaders in the actual ui isn’t really a problem if you are careful.
I use a shader to blur the background of UI panels. I think it was on the wiki. It bugs out pretty bad in the editor but works fine in builds. I guess there are other approaches, but for PC I don’t see there being any performance issues.
Sure, why not. Just don’t go overboard with it.
I used several shaders on some UI screens in my latest game. Works fine.
But does it perform on mobile devices well?
It’ll perform as well as it would on similar non-UI objects. There’s nothing special about stuff just because it appears in the UI. The workflow is different for us. To the GPU it’s all just triangles.
On that note, your UI already “uses shaders” because those triangles are drawn using the same graphics pipeline as every other triangle in your game. They’re just relatively simple shaders by default. With that in mind, if you want to get some effect on your UI then depending on the performance characteristics of your game it could be that using a shader to achieve them is in fact the best/most efficient way to do it.
A classic example is TextMesh Pro. It’s a replacement text shader that allows an alternate text rendering method and, in turn, a bunch of effects applied to rendered text.
As for a blur in particular, what are you planning to use it for? Same considerations apply here as would apply for blurring anything else. If it’s for something that won’t be moving then it’d be worth considering either applying the blur once in a render texture, or just putting it in a texture to begin with.
2 Likes
Are you applying the shader to a ui element, or stuff behind it? If an element, is it compound?
We use mostly custom shaders in our ui (mostly just stripped down or for certain types of masking.). Blurring shouldn’t be a problem, but you’ll want to use an efficient algorithm for mobile. But it really depends on when and how it is used.
True, but with ui it could break batching and significantly increase draw calls depending on how your layout is structured. But, that might not actually impact performance.
1 Like
I am applying blur to a UI shader.
Blur effect is just an example.
I am making a UI panel that is rendered on top of other UI components. And, using shaders, I want select UI components to be rendered on top of it and others behind it. So you could say, I am highlighting UI componets by blurring other UI (including game).
I am targeting on mobile, and was wondering if this would have severe effects on performance.
It may. It will be hard to say for sure until you test it really because there are a lot of factors.
If you want to blur the game, you will need to either add a blur effect to the camera or create a renderer texture from the game camera and display it on card (or image in ui) with a blur shader on that. (Which is how we do it). That can be expensive depending on what is going on in your game. (And can be a problem on some android devices ). One option is to use the render technique but create an image once instead of every frame. That works well if you don’t need to see the game playing.
For the ui, I would probably do a similar approach, but having each panel (the layered ones at least) on a separate canvas. That should help keep the performance in check.
It is very likely that you’re using shader on mobile devices even in default configuration.
If you’re concerned about performance, profile them.
Sounds needlessly overcomplicated.
You will probably kill performance if you perform real-time gaussian blur with large radius. Box blur could be fine.
However, it will be easier to just prepare pre-rendered blurred panel, and blurred sprites for the buttons.
1 Like