Shrinking Octagon GLSL

WebGL 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.

Vertex Shader Fragment Shader Texture Summary

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

Clouds

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. 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.