Ripple shader

  ... discussions regarding GLES2 ShaderPrograms (VertexShaders and FragmentShaders).

Ripple shader

Postby cr_az » Sun Dec 25, 2011 8:39 pm

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 ]
Using cpp Syntax Highlighting
  1. gl_Position = projection_matrix * modelview_matrix * vec4(vertex, 1.0);
Parsed in 0.005 seconds, using GeSHi 1.0.8.4

3) RadiusBlur sample implements following vertex shader:
Syntax: [ Download ] [ Hide ]
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 ]
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
 
Posts: 17
Joined: Sat Dec 24, 2011 8:03 pm
Location: Ukraine

Re: Ripple shader

Postby cr_az » Mon Dec 26, 2011 12:40 pm

Finally, I solved it.
Working version of ripple fragment shader is listed below, hope it will be useful to someone:
Syntax: [ Download ] [ Hide ]
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
cr_az
 
Posts: 17
Joined: Sat Dec 24, 2011 8:03 pm
Location: Ukraine

Re: Ripple shader

Postby Nicolas Gramlich » Mon Dec 26, 2011 6:14 pm

Hi,

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

Thanks,
Nicolas
Nicolas Gramlich
Site Admin
 
Posts: 1734
Joined: Mon Jun 07, 2010 6:20 pm
Location: Schriesheim, Germany

Re: Ripple shader

Postby cr_az » Tue Dec 27, 2011 12:34 am

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.
Image
Image
Image
Image
cr_az
 
Posts: 17
Joined: Sat Dec 24, 2011 8:03 pm
Location: Ukraine

Re: Ripple shader

Postby Nicolas Gramlich » Tue Dec 27, 2011 1:35 pm

cr_az wrote: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 :D The reference pick makes it obvious :)
Nicolas Gramlich
Site Admin
 
Posts: 1734
Joined: Mon Jun 07, 2010 6:20 pm
Location: Schriesheim, Germany

Re: Ripple shader

Postby radeczka » Wed Dec 28, 2011 11:07 am

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
radeczka
 
Posts: 2
Joined: Tue Jun 21, 2011 9:47 am

Re: Ripple shader

Postby MatteBlacke » Tue Jan 03, 2012 5:18 pm

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
MatteBlacke
 
Posts: 28
Joined: Wed Aug 04, 2010 10:03 pm

Re: Ripple shader

Postby cr_az » Wed Jan 04, 2012 3:58 pm

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 ]
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.032 seconds, using GeSHi 1.0.8.4


Hope it helps.
cr_az
 
Posts: 17
Joined: Sat Dec 24, 2011 8:03 pm
Location: Ukraine

Re: Ripple shader

Postby roz » Wed Mar 14, 2012 9:42 pm

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 ]
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,
roz
 
Posts: 18
Joined: Fri Jun 24, 2011 4:33 pm

Re: Ripple shader

Postby cr_az » Wed Nov 07, 2012 12:11 pm

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.
cr_az
 
Posts: 17
Joined: Sat Dec 24, 2011 8:03 pm
Location: Ukraine

Next

Return to ShaderPrograms

Who is online

Users browsing this forum: No registered users and 1 guest