Blur effect behind image

Help & Support
1

I need to cover my UI with one big image, set transparency to 30%, and blur everything behind that image.
How could I achieve the blur effect, any hit about this problem?

Example:

image
image540×516 19 KB

2

Hi @Dava! Why you can’t just set a background image with the blur effect behind or on top of the other image element? Or is the example below more what you are looking for?

http://playcanvas.github.io/#/graphics/grab-pass.html

2 Likes
3

Blockquote with the blur effect behind or on top of the other image element?

  • What do you mean by this? Is there is image blur effect available for PlayCanvas ?
    I could do it manually in photoshop, blur every sprite, but that would be overkill for optimization, extra space memory and I would need to change sprites all the time.

The link you sent me would not be useful because I have UI elements (sprites) on 2D Screen, and they are not moving (except for some animated buttons)

4

Can you explain why this is not working for you? Does this not give the effect you try to achieve?

5

If you set transparency to 30%, you can still see clearly everything behind it.
I need to blur everything, and that’s my client wishes

6

You need to use a custom shader/pass much like the example @Albertos shared above to blur that surface. Not sure if it’s trivial to add it on a UI element though, I haven’t tried that myself.

2 Likes