CodePlexProject Hosting for Open Source Software

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(gl_Vertex.xyz,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; position=position+vec4(drift,0); gl_Position = gl_ModelViewProjectionMatrix * position; gl_FrontColor = gl_Color; gl_TexCoord[0] = gl_MultiTexCoord0; }<!--EndFragment--> |

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