(Shader Library) 2D Shockwave Post Processing Filter (GLSL)

Shader Library - 2D Shockwave PostFX


Geeks3D’s shader library is available in HERE.

This new shader shows a 2D shockwave post processing effect. In the GeeXLab demo, just hit the [K] key to create a shockwave at the mouse position. I found the original shader here.

You can download the demo here:
[download#110#image]
This demo requires GeeXLab and does not use Python so you can use the version of GeeXLab without Python. This demo has been tested with GeeXLab 0.1.14.

Unzip the source code somewhere, start GeeXLab and drop the 2D_Shockwave_Demo.xml file in GeeXLab.

Here is a video of the effect in action (the 2d grid has been added to better visualize the shockwave effect):


[youtube 8emVKwiWbOY]

Shader desription

Language: OpenGL 2 – GLSL

Type: Post processing filter.

Inputs

  • sceneTex (sampler2D): the final scene image.
  • center (vec2): mouse position (in texture coord space: [0 ; 1]).
  • time (float): shockwave elapsed time in second.
  • shockParams (vec3): shockwave parameters

Ouputs: color buffer

[Vertex_Shader]
void main(void)
{
  gl_Position = ftransform();
  gl_TexCoord[0] = gl_MultiTexCoord0;
}

[Pixel_Shader]
uniform sampler2D sceneTex; // 0
uniform vec2 center; // Mouse position
uniform float time; // effect elapsed time
uniform vec3 shockParams; // 10.0, 0.8, 0.1
void main() 
{ 
  vec2 uv = gl_TexCoord[0].xy;
  vec2 texCoord = uv;
  float distance = distance(uv, center);
  if ( (distance <= (time + shockParams.z)) && 
       (distance >= (time - shockParams.z)) ) 
  {
    float diff = (distance - time); 
    float powDiff = 1.0 - pow(abs(diff*shockParams.x), 
                                shockParams.y); 
    float diffTime = diff  * powDiff; 
    vec2 diffUV = normalize(uv - center); 
    texCoord = uv + (diffUV * diffTime);
  } 
  gl_FragColor = texture2D(sceneTex, texCoord);
}

Related posts:

  1. [Shader Library] Dream Vision Post Processing Filter (GLSL)
  2. (Shader Library) Gaussian Blur Post Processing Filter in GLSL
  3. [Shader Library] Frosted Glass Post Processing Shader (GLSL)
  4. (Shader Library) Swirl Post Processing Filter in GLSL
  5. (Shader Library) Cross Stitching Post Processing Filter in GLSL

2 thoughts on “(Shader Library) 2D Shockwave Post Processing Filter (GLSL)”

  2. Koren

    Thanks !
    It was realy usefull to me. There is the HLSL version I made from your code:

    texture myTexture;
    sampler2D samplerState = sampler_state {
    Texture = ;
    MinFilter = Point;
    MagFilter = Point;
    MipFilter = Linear;
    AddressU = CLAMP;
    AddressV = CLAMP;
    };

    float xcenter;
    float ycenter;
    float magnitude;
    float width;

    struct VS_OUTPUT
    {
    float4 Position : POSITION;
    float2 TexCoords : TEXCOORD0;
    };

    float4 shockwave (VS_OUTPUT Input) : COLOR0
    {

    float4 colour;
    float xdif = Input.TexCoords.x – xcenter;
    float ydif = Input.TexCoords.y – ycenter;
    float2 center;
    center.x = xdif;
    center.y = ydif;
    float distance = sqrt(xdif * xdif + ydif * ydif);

    if((distance = magnitude – width)){
    float diff = (distance – magnitude);
    float powDiff = 1.0 – pow(abs(diff*10.0), 1.5);
    float diffTime = diff * powDiff;
    float2 diffUV = normalize(Input.TexCoords – center);
    Input.TexCoords = Input.TexCoords + (diffUV * diffTime);
    }

    colour = tex2D(samplerState, Input.TexCoords);

    return colour;
    }

    technique Main {
    pass P0{
    PixelShader = compile ps_2_0 shockwave();
    }
    }

Comments are closed.