live blur with Corona - is it possible?

Solar2D Advanced Graphics
#1

Hi.

I am starting a new app that will require to have a tab bar with a blur background. Behind the tab bar I would have a scrollview.

So is it possible to have that “live blur” effect using Corona?  

It would be like this example here (first example at time 00m08s): http://www.youtube.com/watch?v=zvLLxEzGgSc  

Another way to see that live blur effect on your iOS7+ device is to open your Camera App and then open the Control Center panel (just swipe up from the bottom of the device). You will see that the Control Panel background has a blur effect that is the live image from the camera.

One app that uses that feature (which has a amazing design by the way, highly recommend you to see it) is the TodayTix app.

#2

Subscribed!

#3

The current solution that I found (below) is to create a new blur on every frame. As expected, that solution presents a horrible performance specially on Android devices. If anyone has a better way, please share here.

local function onFrame() display.remove(t) groupTabBar.alpha = 0 t = display.captureBounds(tabBarBackground.contentBounds) t.x = CENTER\_X t.y= tabBarBackground.y groupTabBar:insert(1, t) t.fill.effect = "filter.blurGaussian" t.fill.effect.horizontal.blurSize = 20 t.fill.effect.horizontal.sigma = 140 t.fill.effect.vertical.blurSize = 20 t.fill.effect.vertical.sigma = 140 groupTabBar.alpha = 1 end Runtime:addEventListener ("enterFrame", onFrame)
#4

Subscribed!

#5

The current solution that I found (below) is to create a new blur on every frame. As expected, that solution presents a horrible performance specially on Android devices. If anyone has a better way, please share here.

local function onFrame() display.remove(t) groupTabBar.alpha = 0 t = display.captureBounds(tabBarBackground.contentBounds) t.x = CENTER\_X t.y= tabBarBackground.y groupTabBar:insert(1, t) t.fill.effect = "filter.blurGaussian" t.fill.effect.horizontal.blurSize = 20 t.fill.effect.horizontal.sigma = 140 t.fill.effect.vertical.blurSize = 20 t.fill.effect.vertical.sigma = 140 groupTabBar.alpha = 1 end Runtime:addEventListener ("enterFrame", onFrame)
#6

Just ff we can write shader directly for the OpenGL…

#7

I wrote two small modules to **simulate** a blur effect. You can find it on Bitbucket:

https://bitbucket.org/reneaye/corona-sdk-blur/overview

I also opened a thread for the modules:

http://forums.coronalabs.com/topic/53578-realtime-blur-effect/

And a little example video of the results:

http://youtu.be/0A-cZ1PaAac

Maybe this is useful for you.

Best

René

#8

Just ff we can write shader directly for the OpenGL…

#9

nice! stumbled upon your blur and am using it to blur out a background before I overlay a transparent menu. Nice work…

#10

You are welcome. Nice to know someone uses this :slight_smile:

#11

I wrote two small modules to **simulate** a blur effect. You can find it on Bitbucket:

https://bitbucket.org/reneaye/corona-sdk-blur/overview

I also opened a thread for the modules:

http://forums.coronalabs.com/topic/53578-realtime-blur-effect/

And a little example video of the results:

http://youtu.be/0A-cZ1PaAac

Maybe this is useful for you.

Best

René

#12

nice! stumbled upon your blur and am using it to blur out a background before I overlay a transparent menu. Nice work…

#13

You are welcome. Nice to know someone uses this :slight_smile: