Use Noise effect like in Photoshop

cocos2d-x
#1

Hello,

I need to apply a noise shader to a LayerColor and/or Sprite, just like you can do in Photoshop.
Is there any way this can be done? I’ve found some examples, but none seems to work with LayerColor.

Is this possible to be done?

Thank you!

#2

I don’t how this looks or works in Photoshop since I never worked with Photoshop. So I don’t really know what you expect it to look like, but here is how I would do it:

Create a GLProgram using the following vertex and fragment shader.

Vertex Shader:

attribute vec4 a_position;
attribute vec4 a_color;

varying vec4 v_color;
varying vec2 v_randPos;

void main()
{
    gl_Position = CC_PMatrix * a_position;
    v_color = a_color;
    // use v_randPos = a_position.xy; if you dont want the noise to change every frame
    v_randPos = a_position.xy * CC_Random01.x;
}

Fragment shader:

precision highp float;

varying vec4 v_color;
varying vec2 v_randPos;

float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

void main() {
    gl_FragColor = vec4(v_color.rgb * rand(v_randPos), v_color.a);
}

Initialize it like this:

GLProgram* prog = GLProgram::createWithFilenames("test.vert", "test.frag");
prog->retain();
GLProgramState* state = GLProgramState::create(prog);
state->retain();

And then use it like this:

LayerColor* color = LayerColor::create(Color4B::WHITE);
color->setGLProgramState(state);
addChild(color);

This implementation however relies on the fragment shader having access to high precision floats. If this is not the case you will see weird artifacts and the noise isn’t displayed right.

Learning and using OpenGL Shader?