Zoom Out WebGL Shader

Concentric Circles

This page includes the GLSL shader source code to zoom out of an image mapped to a mesh. Concentric circles zoom out during animation which creates a dizzying tunnel effect.

Shader Effect WebGL Animation Shader Effect Zoom Out

Vertex Shader

The zoom out technique is implemented with the 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;
           
void main(void) {
 // Copy attribute.
 // Attributes can't be
 // modified.
 vec2 tex_coord = a_tex_coord0;

 if (tex_coord.s == 1.0){
  tex_coord.s -= uf_time;
 }
 else if (tex_coord.s == 0.0){
  tex_coord.s += uf_time;
 }
 
 if (tex_coord.t == 1.0){
  tex_coord.t -= uf_time;
 }
 else if (tex_coord.t == 0.0){
  tex_coord.t += uf_time;
 } 

 gl_Position = um4_pmatrix * um4_matrix *  a_position; 
 v_tex_coord0 =  tex_coord; 
   
}

Fragment Shader

precision mediump float;
uniform sampler2D u_sampler0;
varying vec2 v_tex_coord0;

void main(void) {
 gl_FragColor = texture2D(u_sampler0, v_tex_coord0); 
}

Texture Map

Summary

This example animates concentric circles which zoom out, creating a dizzying tunnel effect. The zoom out technique is implemented with the vertex shader.

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