Cloud Depth GLSL

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.

Vertex Shader Fragment Shader Texture Summary

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

Clouds

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. See more WebGL shader (GLSL) examples.

Learn 3D Programming with Screen Shots Learn 3D Programming with Screen Shots
Copyright © 2015 Seven Thunder Software. All Rights Reserved.