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


The WebGL shaders demonstrate how to generate a spotlight effect on a texture.

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.