3D Graphics Run with WebGL! Read the E-Book

WebGL Scenes: Responsive Web Design

Springy Interactive Displacement

WebGL Details

Swipe Up, Down, Left or Right

Springy Displacement Example Overview Vertex Shader Fragment Shader Texture Map Displacement Map Tips Summary

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 SevenThunderSoftware.com. 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
 ); 
}

Texture Map

The texture map is a pretty rainbow spectrum of colors.

Rainbow Spectrum

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.

Displacement Map

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.

See more displacement map examples. See the displacement map and texture map graphics.

3D Graphics Display Here with WebGL

Read WebGL E-Books

Copyright © 2015 Seven Thunder Software. All Rights Reserved.