Best way of achieving iOS/OSX-like transparency-dependent blur?

[bac9]

I'm wondering if there is a good way to achieve the effect depicted below without resorting to huge atlases with manually blurred screenshots. I know iOS/OSX do the effect by applying real blur to their render textures - maybe there is a way to alter UIPanel code and NGUI shaders to achieve the same thing? Like allowing a UIPanel to contain a blur value that is used by a shader to blur the texture.

[BeShifty]

I don't have time to write all the code out, but if you're covering a lot of the screen with blurred, my approach would be to, every frame:

- Pipe your camera output to a RenderTexture
- Run a blur post-processing effect on it to get a predetermined amount of blur (not varying levels)
- Use a custom shader+material on your UIAtlas that reads the blurred texture "under" it (ComputeScreenPos) and uses that as its color

You could still control blur amount in your shader and lerp between the sharp and blurred textures if you wanted.

Alternately, if it's just being used in select places, you could skip the first 2 steps and just use GrabPass[] in your custom shader, and take the hit on doing 4+ texture reads per pixel to blur it on-the-fly.

[ArenMook]

If you look at the sci-fi UI atlas example you will notice that it is see-through, and it happens to distort the colors of the background (check out the draggable window example). This is done by sampling the existing color buffer and warping it using the shader. You would do something very similar. Simply create a UITexture and give it a shader that will sample the existing screen buffer and will simply blur the result. It's not NGUI-specific at all here -- just a regular Unity shader.

[bac9]

BeShifty, thanks for the advice!

If you look at the sci-fi UI atlas example you will notice that it is see-through, and it happens to distort the colors of the background (check out the draggable window example). This is done by sampling the existing color buffer and warping it using the shader. You would do something very similar. Simply create a UITexture and give it a shader that will sample the existing screen buffer and will simply blur the result. It's not NGUI-specific at all here -- just a regular Unity shader.

Sci-fi atlas is using standard Unlit/Transparent Colored shader, so there is no distortion to speak of. If you're talking about the Refractive shader, then I don't think it works anymore, for some reason. Maybe Unity 4.5 broke something? I don't remember it looking like that half a year ago.

[ArenMook]

Yup, that's the one. If it looks like that for you then you have shaders disabled, or are using Unity Free.

[bac9]

Yup, that's the one. If it looks like that for you then you have shaders disabled, or are using Unity Free.

Not sure what you mean by "shaders disabled" and nope, I'm using Unity Pro.
As I said, I'm under impression something was broken by Unity 4.5 because I recall this example looking different, with lighting and transparency properly displayed on the UI. Reimporting the project to 4.3 right now to check if that's the case.

Update: Nope, seems to look the same in 4.3. Something was changed in the shader or scene then.

[ltethe]

That example works fine for me bac9. For me it was a simple matter of setting my quality settings high enough to view the refraction. I am however on 4.3 still, so you might be onto something.

I'm chasing the same problem you are as far as blurred panels go, I went and created a frosted texture by using a refractive map to distort the background, but it's a poor substitution for what I actually want, so the suggestions by others in this thread are well appreciated.

[ltethe]

bac9, you inspired me to do some heavier digging, I found this out of the box solution. http://www.ana-todor.ro/blur-shader-for-unity3d/08/01/2013/

It's not perfect, but it's damn close, and super easy, and free, and relatively light on the processor. Give it a whirl.

Thankyou for your problem, for in expressing yours, you have inspired my solution, hope it works for you as well.

[bac9]

bac9, you inspired me to do some heavier digging, I found this out of the box solution. http://www.ana-todor.ro/blur-shader-for-unity3d/08/01/2013/

It's not perfect, but it's damn close, and super easy, and free, and relatively light on the processor. Give it a whirl.

Thankyou for your problem, for in expressing yours, you have inspired my solution, hope it works for you as well.

Thanks. I have modified the shader to use NGUI-controlled vertex colors as inputs (dropped color support, left R as brightness, used G for blur radius and B for lerping between standard sprite rendering and blur overlay rendering), named GrabPass texture to reduce performance hit from multiple elements using the shader at once and did some other tweaks, and it works pretty great for me. Nowhere close to iOS blur quality, unfortunately (they have insane radius and smoothness, that can't be achieved with 12 or 16 samples register limit allows), but it's passable enough.

[Nicki]

Just to add a little to this: http://damir.me/ios7-blurring-techniques

Basically, they're not doing real time blurring - they're screenshotting and blurring the screenshot. That's quite a bit lighter than doing it in a shader, assuming you can save your texture easily. Unity is a little heavy on saving new Textures at run time, but I'm sure there's tricks to do it.