GLSL Spotlight

WebGL Shader Effect

This page includes the GLSL shader source code to generate a spotlight effect on a texture.

Vertex Shader Fragment Shader Texture Summary

Vertex Shader

 
attribute vec4 a_position;   
attribute vec2 a_tex_coord0;
varying vec2 v_tex_coord0;
           
uniform mat4 um4_matrix;
uniform mat4 um4_pmatrix; 
           
void main(void) {

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

Fragment Shader

precision mediump float;
uniform sampler2D u_sampler0;
varying vec2 v_tex_coord0;
uniform vec2 uf_time;  
const float cf_radius = 0.25;
const float cf_bright = 2.0;
     
void main(void) { 
 
 float f_dist = distance(v_tex_coord0,uf_time); 
 
 vec4 v4_color =  texture2D(u_sampler0, v_tex_coord0);
 
 if (f_dist < cf_radius){
   v4_color.rgb *= cf_bright;  
 }
     
 gl_FragColor = v4_color;     
}

Texture Map

Spotlight Texture Map

Summary

The WebGL shaders demonstrate how to generate a spotlight effect on a texture. 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.