Blur at pause works very slow

cocos2d-x C++
#43

Thanks a lot! :thumbsup: For static downsampled image it works very fast and looks perfect!
Now I should try it at runtime for an active sceneā€¦ very very interesting.

#44

Hey @Joseph39 after a long time I rethought all thisā€¦ and also found some game(made with unity) on the App Store, which has exactly that blur effect at pause I need for my game:

So itā€™s nice fadeIn-fadeOut blur effect. How I can achieve this?
The problem of downsampled image like to 24 times - is that when any animation runs it will be noticeable ugly looking. Specially if art in that animation of thin. On image bellow itā€™s not downsampled, because moving hand looks very niceā€¦ if you try to downscale it will look badlyā€¦

Currently, stackblur works well and cool even for downsampled images, but I canā€™t use small resolution image for it when doing fade for blur image, because it will look very bad.
So, blur should be applied gradually for example from 0 to 50 for full size(1136x640 ) scene image that are dynamic, notice that hand behind blur is moving and been blurred correctly.
Any ideas how to achieve this with cocos2d-x?

There are already some throughs about this How to efficiently blur Scene Background [C++] [Shader] and How can I add a post process shader?(with example of full code for FrameBuffer).
By the way @zhangxm is that FrameBuffer is really experimental? Can we use it for production games?

#46

Also, Iā€™ve found these games with kind of blur: Badland 2(which written in cocos2d-x? first version for sure) and King of thieves uses blur in their games. I tested on really slow iOS and android devices - it works very fast and nice.
Here is recorded screen from devices:

Thereā€™s definitely some tricks usedā€¦ like downsamplingā€¦ but I think with start small radius of blur it firstly uses full image and then if blur radius becomes large - image start downsampling. Because if you use downsample 24times image with start and small blur radius - it will looks like pixel art. @zhangxm By the way, how I can dynamically get different rendered images from render texture? Re-created rendered texture each time with new sizes in loop sounds not really goodā€¦

However these blurs are not live, as I see it applied only for static image, but I need it for animation like shown in my previous post in this topic. So animation runs under blur.

#47

The idea is to downsample the image and the apply the blur shader on it.
This will make the fragment do less work and thus be faster.
I did it in my game ā€œRun Cow Runā€ and it have a great blur performance.

#48

Hey, can you post code or project example? So I can test performance and quality. Thanks.

#49

It is also implemented in my game, Slots Surprise if you want to see a how it performs.
Hereā€™s the code for the fragment shader:

const char* ccPositionTextureColor_BgfragBlur =
"\n\
#ifdef GL_ES \n\
precision mediump float; \n\
#endif \n\
\n\
varying vec4 v_fragmentColor; \n\
varying vec2 v_texCoord; \n\
\n\
uniform vec2 resolution; \n\
\n\
vec4 blur(vec2); \n\
\n\
void main(void) \n\
{ \n\
vec4 col = blur(v_texCoord); //* v_fragmentColor.rgb; \n\
gl_FragColor = vec4(col) * v_fragmentColor; \n\
} \n\
\n\
vec4 blur(vec2 p) \n\
{ \n\
vec4 col = vec4(0); \n\
vec2 unit = 1.0 / resolution.xy; \n\
\n\
float count = 0.0; \n\
\n\
for (float x = -8.0; x <= 8.0; x += 1.0) \n\
{ \n\
for (float y = -8.0; y <= 8.0; y += 1.0) \n\
{ \n\
float weight = (8.0 - abs(x)) * (8.0 - abs(y)); \n\
col += texture2D(CC_Texture0, p + vec2(x * unit.x, y * unit.y)) * weight; \n\
count += weight; \n\
} \n\
} \n\
\n\
return col / count; \n\
}";
#50

Also, make sure to apply it on scaled version of the image, Iā€™m using downscale factor of 8 and get good results and fast performance.

#51

How to apply this to a Sprite, my knowledge of shaders are very limited. Also, I have iOS only devices.

#52

Take a look at the Shader test on Cocos2d-x tests source code, the are many example there on how to apply a shader to a Sprite.

#53

Okay, Iā€™ve used this shader and quality is far away from whatā€™s needed.

Also, if you follow Blur at pause works very slow I described on this post my needā€¦ as well as how other games did this.

#54

Did you apply downscaling to get a better performance? Did you see the performance of my game with it?

#55

Yes, but I didnā€™t said anything about performance. Repeat - I have only iOS devices.