In this page, we will try to implement a ripple effects with the built-in function sin().

A ripple is a kind of wave, should controlled by several factors, center point, normal Vector, amplitude, attenuation factor,wavelength and frequency.

Center point is the source of ripple, all circles of a ripple should has the same center point.

Normal  Vector defines the wave plane, along with the center point.

Amplitude, the amplitude defines how big the was is. The range of sin(x) is [-1,1], so, the height of ripple should be amplitude*sin(x). The x is the distance between current point and the center point, will be discussed next.

Attenuation factor, the power of a wave will weak down as it travels, the attenuation factor defines how fast the wave will weak down.

Wavelength is how far the adjacent two points of the same height is.

Frequency is how fast the ripple waves, this is used for animation.


Below is a sample code of ripple, the ripple effects are implemented in vertex shader.

<!--StartFragment-->// Ripple vertex shader

uniform vec3 CenterPoint;

uniform vec3 NormalVector;

uniform float Amplitude;

uniform float Attenuation;

uniform float Wavelength;

uniform float WaveFrequency;


void main()


vec4 position=gl_Vertex;


// Get distance between current vector and the center point

float dist = distance(,CenterPoint);


// Calculate the wave height of current point;

float waveHeight=Amplitude*sin(dist/Wavelength)*pow(Attenuation,dist);


// Move current vertex along the normal vector

vec3 drift=normalize(NormalVector)*waveHeight;


gl_Position = gl_ModelViewProjectionMatrix * position;

gl_FrontColor = gl_Color;

gl_TexCoord[0] = gl_MultiTexCoord0;




Last edited May 27, 2013 at 10:27 AM by younthu, version 3


No comments yet.