Cocos2d blur with shaders

Question

Currently I am toying with Cocos2D. I want to be able to blur the entire scene when there is a notification overlay displaying.

I thought I could do this with shaders (I am quite an OpenGL noob). From what I found is that there are "fsh" files which contain an algoritm for the shader. I found one for "gausian blurring" but how can I add such a shader to an CCScene of Cocos2D?

I can't seem to figure this out.

Answer 1

I have just started to play a little bit with shaders myself. There's a lot of material on the web to read and try out. I'll point you in the direction of some urls I found useful to get to understand how/what they do.. that might get you started.

Simple tutorial to achieve a greyscale effect with shaders (Cocos2D)

http://www.shaderdev.com/2013/09/16/full-scene-shader-effects-how-to-create-a-grayscale-pause-screen-using-ccrendertexture/

Coding experiments blogpost: great looking shader effect. This is the shader I share for cocos2D below...

http://coding-experiments.blogspot.com/2010/06/frosted-glass.html

With those you are surely on your way. Feel free to use the shaders below too if you find them useful, these were taken from the second url.

vertex shader

attribute vec4 a_position;
attirbute vec4 a_color;
attribute vec2 a_texCoord;

uniform mat4 u_MVPMatrix;
varying lowp vec2 v_fragmentColor;
varying lowp vec2 v_texCoord;

void main()
{
    gl_Position = CC_MVPMatrix * a_position;
    v_fragmentColor = a_color;
    v_texCoord = a_texCoord;
}

fragment shader

varying lowp vec4 v_fragmentColor;
varying lowp vec2 v_texCoord;
uniform sampler2D u_texture;

float rand(vec2 co)
{
    return fract(sin(dot(co.xy ,vec2(92.,80.))) +
                 cos(dot(co.xy ,vec2(41.,62.))) * 5.1);
}

void main()
{
    vec2 rnd = vec2(0.0);
    rnd = vec2(rand(v_texCoord),rand(v_texCoord));
    glFragColor = texture2D(u_texture, v_texCoord+rnd*0.05);
}