Ripple shader

[cr_az]

Hi guys,

I`m working on ripple effect shader, want to simulate rain drop.
I merged together livewallpaper and RadiusBlur samples and trying to implement my own shader.

If I understand correctly, RadiusBlur shader sample works as following:
1. One sprite is created (512x512)
2. Our screen is bigger/smaller than display, so texture coordinates should be mapped to actual screen coordinates:
1) we use vertex shader for mapping
2) basically vertex function should looks something like this -

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using cpp Syntax Highlighting

1. gl_Position = projection_matrix * modelview_matrix * vec4(vertex, 1.0);

Parsed in 0.004 seconds, using GeSHi 1.0.8.4

3) RadiusBlur sample implements following vertex shader:

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using cpp Syntax Highlighting

1. public static final String VERTEXSHADER =
2.                         "uniform mat4 " + ShaderProgramConstants.UNIFORM_MODELVIEWPROJECTIONMATRIX + ";\n" +
3.                         "attribute vec4 " + ShaderProgramConstants.ATTRIBUTE_POSITION + ";\n" +
4.                         "attribute vec2 " + ShaderProgramConstants.ATTRIBUTE_TEXTURECOORDINATES + ";\n" +
5.                         "varying vec2 " + ShaderProgramConstants.VARYING_TEXTURECOORDINATES + ";\n" +
6.                         "void main() {\n" +
7.                         "       " + ShaderProgramConstants.VARYING_TEXTURECOORDINATES + " = " + ShaderProgramConstants.ATTRIBUTE_TEXTURECOORDINATES + ";\n" +
8.                         "       gl_Position = " + ShaderProgramConstants.UNIFORM_MODELVIEWPROJECTIONMATRIX + " * " + ShaderProgramConstants.ATTRIBUTE_POSITION + ";\n" +
9.                         "}";

Parsed in 0.007 seconds, using GeSHi 1.0.8.4

gl_Position is a coordinates of vertex and calculated like projection*modelView * coordinates of texture vertex(one of boarders?).
4)My pixel shader code is based on this guide and listed below:

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using cpp Syntax Highlighting

1. "precision mediump float;\n" +
2.  
3.                         "uniform sampler2D " + ShaderProgramConstants.UNIFORM_TEXTURE_0 + ";\n" +
4.                         "varying mediump vec2 " + ShaderProgramConstants.VARYING_TEXTURECOORDINATES + ";\n" +
5.                        
6.                         "uniform vec2 " + RadialBlurShaderProgram.UNIFORM_RESOLUTION + ";\n" +
7.                         "uniform vec2 " + RadialBlurShaderProgram.UNIFORM_TIME + ";\n" +
8.  
9.                         "void main() {\n" +
10.                         /* The actual (unburred) sample. */
11.  
12.                         /*ripple effect shader*/
13.                         "       vec2 cPos = -1.0 + 2.0 * " + RadialBlurShaderProgram.VARYING_TEXTURECOORDINATES + " / " + RadialBlurShaderProgram.UNIFORM_RESOLUTION + ".xy;\n" +
14.                         "       float cLength = length(cPos);\n" +
15.                         "       vec2 uv = gl_FragCoord.xy/" + RadialBlurShaderProgram.UNIFORM_RESOLUTION + ".xy" + "+(cPos/cLength)*cos(cLength*12.0-" + RadialBlurShaderProgram.UNIFORM_TIME + "*4.0)*0.03;\n" +
16.                         "       vec3 col = texture2D(" + ShaderProgramConstants.UNIFORM_TEXTURE_0 + ",uv).xyz;\n" +
17.                         "       gl_FragColor = vec4(col,1.0); \n" + // color
18.  
19.                         "}";

Parsed in 0.008 seconds, using GeSHi 1.0.8.4

UNIFORM_TIME is changing with every frame and causes ripple effect fall off.

Main issue - following fragment shader does not do anything, it does not affect texture. If I change vec2 cPos = -1.0 + 2.0 to some other values - it adds some distortion to texture, but it does not change texture on frame update as it should. I do believe I messed up something with coordinates (texture coordinates/frament/scene), but can`t figure what. I implemented this framgent shader using clear Android OpenGL API and it works (used another shader sample), but can`t manage to do the same with AndEngine. If someone encountered something like this before - I would appreciate any help.

Thanks in advance.

[cr_az]

Finally, I solved it.
Working version of ripple fragment shader is listed below, hope it will be useful to someone:

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using cpp Syntax Highlighting

1. public static final String FRAGMENTSHADER =
2.         "precision mediump float;\n" +
3.  
4.         "uniform sampler2D " + ShaderProgramConstants.UNIFORM_TEXTURE_0 + ";\n" +
5.         "varying mediump vec2 " + ShaderProgramConstants.VARYING_TEXTURECOORDINATES + ";\n" +
6.         "uniform vec4 " + RadialBlurShaderProgram.UNIFORM_RESOLUTION + ";\n" +
7.         "uniform float " + RadialBlurShaderProgram.UNIFORM_TIME + ";\n" +
8.  
9.         "void main() {\n" +
10.         /* The actual (unburred) sample. */
11.         //"     vec4 color = texture2D(" + ShaderProgramConstants.UNIFORM_TEXTURE_0 + ", " + RadialBlurShaderProgram.VARYING_TEXTURECOORDINATES + ");\n" +
12.  
13.                        
14.         /*ripple effect shader* */
15.         "       vec2 cPos = -1.0 + 2.0 * gl_FragCoord.xy / " + RadialBlurShaderProgram.UNIFORM_RESOLUTION + ".xy;\n" +
16.         "       float cLength = length(cPos);\n" +
17.         "       vec2 uv = gl_FragCoord.xy/" + RadialBlurShaderProgram.UNIFORM_RESOLUTION + ".xy" + "+(cPos/cLength)*cos(cLength*12.0-" + RadialBlurShaderProgram.UNIFORM_TIME + "*4.0)*0.03;\n" +
18.         "       vec3 col = texture2D(" + ShaderProgramConstants.UNIFORM_TEXTURE_0 + ",uv).xyz;\n" +
19.         "       gl_FragColor = vec4(col,1.0); \n" + // color
20.  
21.         "}";

Parsed in 0.008 seconds, using GeSHi 1.0.8.4

[Nicolas Gramlich]

Hi,

sounds good. Can you attach a screenshot of the ripple effect

Thanks,
Nicolas

[cr_az]

I`m not sure that screenshots are able to present how shader works (I use non-default settings now, phase, etc), I`ve attached one reference picture too.

[Nicolas Gramlich]

I`m not sure that screenshots are able to present how shader works (I use non-default settings now, phase, etc), I`ve attached one reference picture too.

True The reference pick makes it obvious

[radeczka]

Hi,
I can't make it work ;( For now my texture just disapear. Can you share litlle bit more working sources ? to play with it. Thanks

[MatteBlacke]

HI Cr_az,

I would also be very interested in seeing a bit more code and if possible an implementation. Or can you point in the right direction on how to implement (tutorials etc)

thanks

{UPDATE}

It is actually the RadialBlurExample that is referred to, see below

https://github.com/nicolasgramlich/AndE ... ample.java

This should give a good start

[cr_az]

Guys,

I used RadialBlur sample as a starting point. Idea of ripple effect described here.

Required skills: some Java knowledge, OpenGL ES SL (shader language) knowledge (uniforms, varying, etc).

How to change uniforms (from RadialBlur sample):

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1. protected void preDraw(final GLState pGLState, final Camera pCamera) {
2.                                                 if(RadialBlurExample.this.mRadialBlurring) {
3.                                                         this.setShaderProgram(RadialBlurShaderProgram.getInstance());
4.                                                 } else {
5.                                                         this.setShaderProgram(PositionTextureCoordinatesShaderProgram.getInstance());
6.                                                 }
7.                                                 super.preDraw(pGLState, pCamera);
8. //Here we set uniform value
9.                                                 GLES20.glUniform2f(RadialBlurShaderProgram.sUniformRadialBlurCenterLocation, RadialBlurExample.this.mRadialBlurCenterX, 1 - RadialBlurExample.this.mRadialBlurCenterY);
10.                                         }

Parsed in 0.033 seconds, using GeSHi 1.0.8.4

Hope it helps.

[roz]

It seems to be a very nice effect !
I was just wondering how to set the constants RadialBlurShaderProgram.UNIFORM_RESOLUTION and RadialBlurShaderProgram.UNIFORM_TIME defined on:

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1. "uniform vec4 " + RadialBlurShaderProgram.UNIFORM_RESOLUTION + ";\n" +
2.  "uniform float " + RadialBlurShaderProgram.UNIFORM_TIME + ";\n" +
3.  

Parsed in 0.033 seconds, using GeSHi 1.0.8.4

Thanks and Regards,

[cr_az]

I got a set of questions about this sample code. IMO, it would be better to share code with you guys.

Here is a archive with sources - https://www.dropbox.com/s/kl5ih45sf7f8nrm/LW_ripple.zip
Code is not for production (code style and related thing are far away from being perfect), I wrote it as a part of shader investigation - just to check how to use shaders with AndEngine.

Enjoy.