Home › Blogs › Crystalin's blog

2D Shock-wave on texture with shader

Mon, 10/26/2009 - 16:29 — Crystalin

The new shader example is about how to simulate a shock-wave over a texture.
It is really useful for my explosion. The result is pretty cool. It looks like a transparent shock-wave, and I think I could use it for water wave. If you can make a better version of it, I'll appreciate to get it :)

I could have used 2 textures (the real texture + a normal-like map) to implement it. However I'm not sure if the multi-texture is part of all the almost recent devices, I use a distance algorithm.
Video from YouTube to show the effect of the shockwaves :

How it works

The goal is to make like a circle around a point and to get the texture displaced at this point (and around). Instead of using the whole map texture which would limit the number of explosion to 1 (or to loop inside the shader which is, I think not a good idea), I create a square of the size of the shock-wave for each explosion with the map texture applied on it.

- For each of those explosions, I get the distance of the pixel (in the pixel shader) from the center of the explosion.
- I compare is the distance is ~ equal to time ( an increasing value from 0 to the size of the shock-wave ) and I apply a algorithm to generate a displacement (This one needs to be improved)

This is all.
To get a good result, don't hesitate to try different values/algorithms. I wrote different ones before choosing one.

The values used are for a shock-wave with a size of 3 units... Adapt the values depending of your scale (1 unit = the size of a case in my map)

The Pixel, or Fragment, Shader

It is really a simple one.

uniform sampler2D tex;
uniform float posX;
uniform float posY;
uniform float time;

uniform sampler2D tex;
uniform vec2 center;
uniform float time;

void main (void)
{
  float distance = distance(gl_TexCoord[0].st,center);
  if (distance <= time + 0.025 && distance >= time - 0.025) {
 
    float ecart = (distance - time); // value between -0.02 & 0.02
   
    float powEcart = 1.0-pow(abs(ecart*40.0),0.4); // value between -1 & 1 (because 0.02 * 50 = 1)
   
    float ecartTime = ecart  * powEcart; // value between -0.02 & 0.02
   
    vec2 diff = normalize(gl_TexCoord[0].st - center); // get the direction
   
    vec2 newTexCoord = gl_TexCoord[0].st + (diff * ecartTime);
   
    gl_FragColor = texture2D(tex, newTexCoord.st) * gl_Color;
  } else {
    discard; //gl_FragColor = texture2D(tex, gl_TexCoord[0].st) * gl_Color;
  }
}

The simple vertex shader

Just the basic one

uniform vec2 center;
uniform float time;

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

Conclusion

This was just a example of how to generate a shock-wave, you can easily improve it.
I upload an image with a grid to see the shockwave but to see the real result, look at the video.

Shock-wave