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.

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.