Search Unity

Are There Any 2D Blur Effect That Run Smooth on Mobile Devices ?

Discussion in 'Image Effects' started by 1ht1baron, Feb 4, 2018.

  1. 1ht1baron

    1ht1baron

    Joined:
    Aug 15, 2017
    Posts:
    65
    I tried many blur effects on mobile devices (Samsung Galayx j7 prime). Game runs 60 fps but when blur effect is active, fps drops to 15-20. I have been looking blur effect that run 60 fps on mobile devices but i did not find. Also, I want to export ios build. I need to find an iOS compatible blur effect.
     
  2. Kumo-Kairo

    Kumo-Kairo

    Joined:
    Sep 2, 2013
    Posts:
    333
    Why do you mean by "2D blur effect"? Is it per-sprite or whole-screen blur? Can you show an example?
     
  3. 1ht1baron

    1ht1baron

    Joined:
    Aug 15, 2017
    Posts:
    65
    My game is 2d :)
    Yes, i want full screen blur.
     
  4. Kumo-Kairo

    Kumo-Kairo

    Joined:
    Sep 2, 2013
    Posts:
    333
    For the background under the UI menu? What is the application of this blur? Do you have a reference?

    Fullscreen blur is totally doable on devices, I can even create a small example for you (since I'm making this thing anyway). I just need a few references of what you have in mind
     
  5. 1ht1baron

    1ht1baron

    Joined:
    Aug 15, 2017
    Posts:
    65
    I added BlurOptimized.cs to main camera.
    https://www.assetstore.unity3d.com/en/#!/content/83913
    I want to blur effect like Alto's Adventure:

     
  6. Kumo-Kairo

    Kumo-Kairo

    Joined:
    Sep 2, 2013
    Posts:
    333
    Oh yeah, got it.

    Had some time to look at it today, here's how it works in Alto's adventure:
    1. Render the scene (mountains, player, sun flare) normally, mostly as semi-transparent objects at full res.
    2. Copy this "main texture" to a temp texture with an identity shader (I bet it's done by Unity by default when using OnRenderImage),
    3. Copy it in a smaller temporary texture (exactly 1/8th of the screen size), with the same identity shader. In my case original size is 1280x736, downscaled texture is 160x92
    4. Apply simple vertical Gaussian blur with 6 taps
    5. Apply simple horizontal Gaussian blur with 6 taps (fragment shaders are the same - UV calculations in vertex shaders are different)
    6. Apply simple vertical Gaussian blur with 6 taps once more
    7. Apply simple horizontal Gaussian blur with 6 taps once more
    8. Apply simple vertical Gaussian blur with 6 taps once more
    9. Apply simple horizontal Gaussian blur with 6 taps once more
    10. Copy final blurred texture (total of 6 passes of separable Gaussian blur) into the full-size texture (upscale 8 times), again with an identity shader
    11. Render the UI on top (most likely - uGUI with the Screen Space - Overlay)
    Now this is quite far from optimal, here's why:
    1. We can omit the first temp copy from main render to the temp full size texture if we render directly to the render texture (win around 5.6 million GPU clock cycles on my Asus tablet)
    2. Reduce cost of render target switching from 6 to 3 if we use something like Kawase blur or Dual-filter blur instead. Blurring itself is cheap as hell, it's the cost of render target switch that kills all of the performance (it drops from 50 to ~20 fps on my tablet).
    3. They also store calculated UVs for blurring in .zw coordinates of TEXCOORD semantics, so sampling textures with uv.zw is considered a dependent texture read on OpenGL ES 2.0. Depends on hardware, but it's the case on PowerVR GPUs - all old iOS devices. They store UVs in three TEXCOORD interpolators, but it's advised to store them in 6 in this case, it will cap nicely to 8 interpolators total (minimum supported by OpenGL ES 2.0 specs)
    5. They continue rendering the whole scene behind of the blurred background even when nothing is happening. This blurring is a great way to increase performance by storing this cached blur and rendering it as a one-pass texture. It will also allow to increase battery life of the device (no need to recalculate and re-render things that don't change anyway)
    6. Downscaling is based on screen size will result in different blur. Higher screen resolution will blur less. This is not crucial though as in this case because the final blur is enormous.

    To recap - Alto's adventure approach works, it's more optimal than built-in blurs like PostProcessing stack v2, but far from being objectively-optimal as there are trivial ways to make it faster.

    I haven't looked at "Optimized legacy blur" yet, but I'll take a look and tell if it's feasible to use it or how to make it more performant
     
    Last edited: Feb 12, 2018
    1ht1baron likes this.
  7. 1ht1baron

    1ht1baron

    Joined:
    Aug 15, 2017
    Posts:
    65
    Thank you so much for your reply. But, i am beginner. I tried to do something, but I could not. I am looking for a sample project. :)
     
  8. 1ht1baron

    1ht1baron

    Joined:
    Aug 15, 2017
    Posts:
    65
    Up...
    I don't still find anything about blur effect that run smooth on mobile devices.
     
  9. goldenbeerus

    goldenbeerus

    Joined:
    Nov 28, 2017
    Posts:
    3
    lol cant understand any of this lol