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.

Shader Effect WebGL Animation Fade Colors WebGL Example

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.

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