Shrinking Octagon

WebGL GLSL Shader

This page includes the GLSL shader source code. WebGL shaders fill an octagon with a cloud texture. The vertex shader determines color location. The fragment shader prepares color for display.

The animated octagon vertex shader processes circle coordinates from the current vertex coordinates. The Animated Spotlight fragment shader processes circle coordinates from the current texture coordinates. Compare the difference in granularity between the two shaders. The fragment shader processes more often with more detail.

Shader Effect WebGL Animation Shrinking Octagon WebGL Example

Vertex Shader

 
 attribute vec4 a_position;   
 attribute vec2 a_tex_coord0;
 varying vec2 v_tex_coord0;
 
 uniform float uf_time;          
 uniform mat4 um4_matrix;
 uniform mat4 um4_pmatrix;
 varying float v_dist;

      
void main(void) {

 // Copy attribute.
 // Attributes can't be
 // modified.
 vec4 pos = a_position;
 
 // Distance this vertex is
 // from the center.
 v_dist = distance(
  a_position, 
  vec4(0.0,0.0,0.0,1.0)
 ); 
 
 // Multiply by frame time.
 v_dist *= uf_time;
 pos.z = v_dist;
 
 gl_Position = um4_pmatrix * um4_matrix * pos; 
 
 v_tex_coord0 =  a_tex_coord0;  
 
 v_dist = (1.0 - v_dist);   
}

Fragment Shader

precision mediump float;

uniform sampler2D u_sampler0;
varying vec2 v_tex_coord0;
varying float v_dist;

const float circle_radius = 0.65;
 
void main(void) {  
   
 vec4 color =  texture2D(u_sampler0, v_tex_coord0);
   
 if (v_dist < circle_radius){
  color = vec4(1.0,1.0,1.0,1.0) * v_dist;   
 }

 gl_FragColor = color;
 
}

Texture Map

Summary

WebGL shaders fill an octagon with a cloud texture. The vertex shader determines color location. The fragment shader prepares color for display.

The animated octagon vertex shader processes circle coordinates from the current vertex coordinates. The Animated Spotlight fragment shader processes circle coordinates from the current texture coordinates. Compare the difference in granularity between the two shaders. The fragment shader processes more often with more detail.

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