Fade Colors GLSL

WebGL Shader

This Web page includes the GLSL shader source code. The example project displays a square mesh with animated vertex colors. The vertex shader causes colors to fade out and back in, during animation. Change the background color of the Web page to verify the alpha channel applies a full fade or invisible value. The mesh displays the full background color when alpha values equal 0.0. The mesh displays full vertex colors when alpha values equal 1.0.

Vertex Shader Fragment Shader Texture Summary

Vertex Shader

 
attribute vec4 a_position;   
attribute vec4 a_tex_coord0;
varying vec4 v_tex_coord0;
 
uniform float uf_time;          
uniform mat4 um4_matrix; 
uniform mat4 um4_pmatrix; 
         
void main(void) {
  gl_Position = um4_pmatrix * um4_matrix * a_position; 
  // Fades all white then back again.
  // To modify just the alpha channel
  // select v_tex_coord0.a.
  // This affects red, green, blue,
  // and alpha channels.
  // Change the background
  // to see the mesh fade.
  
  // sin() range or output {-1.0 to +1.0}.
  // color channels {0.0 to 1.0}
  // convert {-1.0 to +1.0} -> {0.0 to 1.0}
  // with (n+1)/2
  // Float output. 
  float f_range = (sin(uf_time) + 1.0)/2.0;
  vec4 v4_color = a_tex_coord0;
  v4_color =  a_tex_coord0 * f_range;
  v_tex_coord0 = v4_color;      
 }

Fragment Shader

 precision mediump float;

 varying vec4 v_tex_coord0;
    	
 void main(void) {  
   gl_FragColor = v_tex_coord0;
 }

Texture Map

The Fade Colors example loads and applies individual colors per vertex, instead of a texture map.

Summary

Display a square mesh with animated vertex colors. The vertex shader causes colors to fade out and back in, during animation. Change the background color of the Web page to verify the alpha channel applies a full fade or invisible value. The mesh displays the full background color when alpha values equal 0.0. The mesh displays full vertex colors when alpha values equal 1.0. 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.