Interactive Cloud Travel

WebGL Shader

This Web page includes the GLSL source code. Cloud animation with WebGL shaders provides a sense of depth. Display clouds which appear to move toward the view screen. Learn to simulate the effect of moving through the clouds with mist, motion, and perspective.

The vertex shader modifies vertex Z coordinates and texel coordinates during animation.

Shader Effect WebGL Animation Clouds with Depth WebGL Example

Vertex Shader

 
 attribute vec4 a_position;   
 attribute vec2 a_tex_coord0;
 varying vec2 v_tex_coord0;
 varying vec2 v_tex_coord1;
 
 uniform float uf_time;          
 uniform mat4 um4_matrix;
 uniform mat4 um4_pmatrix;
 
 const float f_depth = 6.0;   
 
void main(void) {

 vec2 v2_tex_coord1 = a_tex_coord0;
 
 vec4 v4_pos = a_position;

 float f_s = a_tex_coord0.s;
 float f_t = a_tex_coord0.t;
 
 float f_dist = distance(
  a_position, 
  vec4(0.0,0.0,0.0,1.0)
 );
 
  // When uf_time represents
  // 45 degrees cos()
  // and sin() return the
  // same value.
  // Generates diagonal
  // streaks.
  float fc_time = cos(uf_time);
  float fs_time = sin(uf_time);
  
  if (f_s == 1.0){
   v2_tex_coord1.s -= fc_time;
  }
  else if (f_s == 0.0){
   v2_tex_coord1.s = fc_time;
  }
 
  if (f_t == 1.0){
   v2_tex_coord1.t -= fs_time;
  }
  else if (f_t == 0.0){
   v2_tex_coord1.t = fs_time;
  }  

 v4_pos.z = f_dist * f_depth * uf_time;
 
  // Unmodified texel for
 // the first graphic.
 v_tex_coord0 = a_tex_coord0;
 
 // Modified texel for 
 // the second graphic.
 v_tex_coord1 =  v2_tex_coord1;    

 gl_Position = um4_pmatrix * um4_matrix * v4_pos;  
}

Fragment Shader

precision mediump float;

 uniform sampler2D u_sampler0;
 uniform sampler2D u_sampler1;
 varying vec2 v_tex_coord0;
 varying vec2 v_tex_coord1;
  
 void main(void) {    
  vec4 color0 = texture2D(u_sampler0, v_tex_coord0); 
  vec4 color1 = texture2D(u_sampler1, v_tex_coord1);   
  gl_FragColor =  color1 * color0;   
 }

Texture Map

Summary

Create cloud animation with WebGL shaders which provide a sense of depth. Display clouds which appear to move toward the view screen. Simulates the effect of moving through the clouds with mist, motion, and perspective.

The vertex shader modifies vertex Z coordinates and texel coordinates during animation.

Simple Shaders: Learn WebGL Book 4

Simple Shaders explains how to prepare basic WebGL GLSL shaders. This new Kindle book includes detailed instruction and links to many interesting WebGL shader examples online. Learn to program WebGL shaders. Harness the power of the Graphics Processing Unit (GPU).

Simple Shaders: Learn WebGL Book 4