Monday, February 07, 2011

Ripple effect in WebGL

There is really nothing special to the ripple effect, in essence it is just an evaluation of the sombrero function. This is just a 2D version of the sinc function.

Below is a graph of the sin function, followed by sinc.
Left: sin(x);   Right: sin(x) / x

Extending this to 2D we have:
r = sqrt (x*x + y*y);
z = sin (r) / r;

Plotting this as (x,y,z) we have the sombrero function:

To turn it into a ripple-like looking effect we just need to scale down the "height" of the function, and animate it by adding time into the sin term to generate a repeating pulse. The complete GLSL code is:

#ifdef GL_ES
precision highp float;

uniform float time;
uniform vec2 resolution;
uniform sampler2D tex;

void main(void) {
vec2 cPos = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
float cLength = length(cPos);

vec2 uv = gl_FragCoord.xy/resolution.xy+(cPos/cLength)*cos(cLength*12.0-time*4.0)*0.03;
vec3 col = texture2D(tex,uv).xyz;

gl_FragColor = vec4(col,1.0);

Your browser doesn't appear to support the HTML5 <canvas> element.


Simon Wittber said...

Awesome. I was inspired to recreate this in Unity. Thanks for these awesome posts!

Krish said...

Not working any more inChrome and Firefox. Here is the error:
Warning: WebGL: It is forbidden to load a WebGL texture from a cross-domain element. See
Source File:
Line: 626

But thanks for the explanation of the math. Looking forward to more.

Unknown said...

Problem seems to be new restrictions on cross site content.
If you but the image file to same place as the script, everything works nice and dandy :)

BTW. Thanks for excellent tutorials, this is the first place i have found, that you can start learning WebGL without any additional scripts that aren't explained.


Unknown said...

Thank you for your sample, it's so helpful.

barcode generator using

Blogger said...

YoBit lets you to claim FREE CRYPTO-COINS from over 100 different crypto-currencies, you complete a captcha once and claim as much as coins you need from the available offers.

After you make about 20-30 claims, you complete the captcha and keep claiming.

You can click on CLAIM as much as 30 times per one captcha.

The coins will stored in your account, and you can convert them to Bitcoins or USD.

Mystery box said...

well, thats a great blog. Really so much impressive and i love that type of post. thank you.

If you ssearching for a legit financial service .Check it out. Link below.
deep web money transfer
legit paypal transfer dark web
darknet paypal transferpa
dark web financial services .
Unclaimed Mystery Box
Please carry on and keep blogging . Thanks again