Springy Interactive Displacement
WebGL Details
Swipe Up, Down, Left or Right
Overview
Swipe over the shape. The springy interactive example uses a displacement map and user motion to change appearance. Shaders move vertices in response to user interaction. The model rotates in response to horizontal swipes. The example creates a bump which bounces back after a certain amount of stretch in response to vertical swipes. The shape stretches and shrinks along the Y axis.
This short tutorial includes the vertex shader, fragment shader, texture map, and displacement map. Some brief explanation covers the shaders and displacement map.
Vertex Shader
The vertex shader does most of the work for the
springy interactive displacement example.
The shader samples the displacement map with the following
short listing. The line samples the map with a swizzle.
Both RGB and XYZ swizzles return
the same values. The sampler returns a vec3
with RGB values from the displacement map.
vec3 v3_displacement = texture2D( u_sampler1, a_tex_coord0).xyz;
The position is calculated.
Multiply the perspective matrix by
the transformation matrix and current
vertex attribute. Assign the product
to vec4 v4_position.
vec4 v4_position = um4_pmatrix * um4_matrix * a_position;
Determine an average value with the blue channel only. This shader would be a little faster if only the blue channel was sampled previously.
float f_avg = v3_displacement.b/5.0;
Multiply the position by the blue channel average
and uniform uf_time.
JavaScript uploads a value to
uf_time for each interactive frame.
v4_position.y *= f_avg * uf_time;
Assign the modified position to
the built in vector gl_Position.
Vector gl_Position
contains the coordinates for the
current vertex in the shader.
gl_Position = v4_position;
The entire vertex shader follows.
attribute vec4 a_position;
attribute vec2 a_tex_coord0;
varying vec2 v_tex_coord0;
varying vec4 v_position;
uniform mat4 um4_matrix;
uniform mat4 um4_pmatrix;
uniform sampler2D u_sampler1;
uniform float uf_time;
void main(void) {
// Displacement map.
vec3 v3_displacement = texture2D(
u_sampler1,
a_tex_coord0).xyz;
vec4 v4_position = um4_pmatrix
* um4_matrix
* a_position;
float f_avg = v3_displacement.b/5.0;
v4_position.y *= f_avg * uf_time;
gl_Position = v4_position;
v_tex_coord0 = a_tex_coord0;
}
Fragment Shader
This particular fragment shader is used for most WebGL examples
at 7Thunders.biz. The shader simply samples the
texture map and assigns the sampled color to
built in vector gl_FragColor.
Vector gl_FragColor contains color for display to the viewport.
precision mediump float;
uniform sampler2D u_sampler0;
varying vec2 v_tex_coord0;
varying vec4 v_position;
void main(void) {
gl_FragColor = texture2D(
u_sampler0,
v_tex_coord0
);
}
Graphics
Texture Map
The texture map is a pretty rainbow spectrum of colors.
Displacement Map
The circular displacement map provides the circular shape along the Z axis of the springy interactive displacement example. The map also contributes to the curve shape during interaction.
Tips
Seven Thunder Software usually tests with WebGL enabled iPhone, Android, Windows PC browsers, and Windows Phone. If a vertex shader samples a texture, it usually won't run within Windows Phone 8.1. However, this particular example hasn't been tested with Windows Phone.
Try different textures, displacement maps, and models for a wide variety of effects with displacement and WebGL.
Summary
Swipe over the shape. The springy interactive example uses a displacement map and user motion to change appearance. Shaders move vertices in response to user interaction. The model rotates in response to horizontal swipes. The example creates a bump which bounces back after a certain amount of stretch in response to vertical swipes. The shape stretches and shrinks along the Y axis.
This short tutorial included the vertex shader, fragment shader, texture map, and displacement map. Some brief explanation covered the shaders and displacement map.
