Cube Color Animation

WebGL Shader

This Web page includes the GLSL shader source code. The shaders render animated vertex colors on a cube, for this example. Colors range from bright and saturated to subdued and dark. The vertex shader modifies colors over time.

Vertex Shader Fragment Shader Texture Summary

Vertex Shader

 
attribute vec4 a_position;   
attribute vec4 a_tex_coord0;
varying vec4 v_tex_coord0;

// Using default uniform
// for the first entity
// in the list.
uniform float uf_time;        
uniform mat4 um4_matrix; 
uniform mat4 um4_pmatrix;
          
void main(void) {
  gl_Position = um4_pmatrix * um4_matrix * a_position;
  // sine and cosine
  // opposites of each other.
  float f_sRange = (sin(uf_time) + 1.0)/2.0;
  float f_cRange = (cos(uf_time) + 1.0)/2.0;
  float f_average = (f_sRange + f_cRange ) * 0.5;
  
  vec4 v4_color = a_tex_coord0;  
  v4_color.b *= f_average;
  v4_color.g *=  f_cRange;
  v4_color.r *=  f_sRange;
  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 WebGL Cube Color Animation loads and applies individual colors per vertex, instead of a texture map.

Summary

The rotating cube displays animated vertex colors. Colors range from bright and saturated to subdued and dark. The vertex shader modifies colors over time.

Tags
WebGL shaders, WebGL shader, WebGL examples, Web GL, HTML5, 3D Web, OpenGL ES, gpu, shader programming, shader tutorial, 3D graphics, opengl shading language, vertex shader, webgl shader language, vertex shader tutorial, javascript, html5, learn webgl, webgl samples, html5 canvas tutorial,
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.