GLSL Animated Radiating Colors

WebGL Shader Effect

This Web page includes the GLSL shader source code. This WebGL shader displays animated radiating colors. The WebGL vertex and fragment shaders work with vertex colors to generate a series of blended colorful circular areas.

Vertex Shader Fragment Shader Texture Summary

Vertex Shader

 
attribute vec4 a_position;   
attribute vec4 a_tex_coord0;
varying vec4 v_tex_coord0;
        
uniform mat4 um4_matrix; 
uniform mat4 um4_pmatrix;  

uniform float uf_time;   
    
void main(void) {
   
 gl_Position = um4_pmatrix * um4_matrix *  a_position;
  
 float f_dist = distance(
  a_position, 
  vec4(0.0,0.0,0.0,1.0)
 );
  
 vec4 v4_color = a_tex_coord0; 
 v4_color.rb = v4_color.rb * f_dist / uf_time;
 v_tex_coord0 = v4_color; 
}

Fragment Shader

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

Texture

The Animated Radiating Colors example applies vertex colors rather than a texture. Vertex colors allow rendering color per vertex.

Summary

This WebGL shader displays animated radiating colors. The WebGL vertex and fragment shaders work with vertex colors to generate a series of blended colorful circular areas.

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.