GLSL Spotlight

WebGL Shader, Map

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

Summary

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

Simple Shaders: Learn WebGL Book 4

Learn the basics of WebGL shader programming with Simple Shaders: Learn WebGL Book 4. This book covers seven projects with unique shaders, in detail, providing an overview of GLSL (OpenGL Shading Language), which is the shader language used for WebGL. See the following projects online Spotlight Across Text, Radiating Colors, Cube Vertex Colors, Color Filters, Zoom Shader, Spotted Balloon Bursts and Colors Fade. Most shaders activate as you swipe over the canvas. See various visual effects including color animation, zooming, color filters, a traveling spotlight and expanding mesh.

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).

GLSL Spotlight

WebGL Shader, Map

Vertex Shader

Fragment Shader

Texture Map

Summary

Simple Shaders: Learn WebGL Book 4

Simple Shaders: Learn WebGL Book 4

Ads >