Zoom In WebGL Shader

Lighthouse Photograph

This page includes the GLSL shader source code to zoom in. The example zooms into a photograph of a lighthouse.

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;
void main(void) {

 vec2 tex_coord = a_tex_coord0;
 // Adjust the amount
 // of zoom per frame.
 float f_time = uf_time * 0.75;
 if (tex_coord.s == 1.0){
  tex_coord.s -= f_time;
 else {
  tex_coord.s += f_time;
 if (tex_coord.t == 1.0){
  tex_coord.t -= f_time;
 else {
  tex_coord.t += f_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

Lighthouse Texture Map


This example applies WebGL shaders to zoom into a photograph of a lighthouse. 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.