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.

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.