WebGL Tutorial: Simple Lighting

Learn a Very Simple Method to Apply WebGL Light on a Model

WebGL Simple Lighting on the Earth Example Introduction Vertex Shader Fragment Shader Summary WebGL Earth Map and Model

Introduction

This tutorial might demonstrate the simplest WebGL shaders for lighting. Vertex Y coordinates provide the amount of highlight. Vertex X coordinates provide the amount of alpha. Low alpha values on a black background with black WebGL clear color, provide shading. The lower the alpha, the more black shows through the texture. This tutorial includes the entire vertex and fragment shaders.

A number of initialization details were left out, to focus on the main topic. Most WebGL projects initialize as described in Seven Thunder Software's Learn WebGL Series. However information in this tutorial should apply to other WebGL projects, such as those that use Unity or Three.js, as well.

The free WebGL Earth Model & Texture, outlines array organization for each model.

The Vertex Shader

The following vertex shader prepares the amount of light to apply, based on the Y coordinate, and the amount of dark to apply, based on the X coordinate.

Attribute a_position contains X,Y, and Z coordinates per vertex. Attribute a_tex_coord0 contains S and T texel values.

The vertex shader calculates the amount of light and dark to apply per fragment. Then the vertex shader passes those values through to the fragment shader with varyings v_light and v_dark. Varying v_light eventually contains the amount of light to apply per fragment. Varying v_dark eventually contains the amount of dark to apply per fragment. The entire vertex shader follows.

attribute vec4 a_position;   
attribute vec2 a_tex_coord0;
varying vec2 v_tex_coord0;
varying float v_light;
varying float v_dark;
           
uniform mat4 um4_matrix;
uniform mat4 um4_pmatrix; 
   
      
void main(void) {
 // Calculate the modified position
 // of the current vertex.
 vec4 v4_position  = um4_pmatrix * um4_matrix * a_position;
 
 // Pass the position as ouput.
 gl_Position = v4_position; 
 
 // Generate the light value based
 // on the Y coordinate of the current
 // modified vertex.
 v_light = 1.0 - (v4_position.y + 1.0) * 0.02;
 
 // Generate the dark value based on 
 // the X coordinate of the current
 // modified vertex.
 v_dark = (v4_position.x + 1.0) * 0.2;
  

 // Pass the texel which is
 // associated with the current
 // vertex, out to the GPU
 // and then onto the fragment
 // shader.
 v_tex_coord0 = a_tex_coord0;

The Fragment Shader

The alpha value allows more of the black background to show through the Earth model. The red, green, and blue channels vary slightly based on the value retrieved from the X coordinate. The entire fragment shader follows.

precision mediump float;
uniform sampler2D u_sampler0;

varying vec2 v_tex_coord0;

// The amount of light
// per fragment.
// Processed previously
// in the vertex shader.
varying float v_light;

// The amount of dark
// per fragment.
// Processed previously 
// in the vertex shader.
varying float v_dark;

void main(void) {

// Sample the texture
// at the current texel.
vec4 color0 = texture2D(
 u_sampler0, 
 v_tex_coord0
);

// Modify the red, green,
// blue, and alpha channels
// of the fragment color.
// Subtract varying v_dark
// from the red, green,
// and blue channels.
// Apply varying v_light
// directly as the alpha
// value.
gl_FragColor = vec4(
 color0.r-v_dark,
 color0.g-v_dark,
 color0.b-v_dark, 
 v_light
);

Summary

This tutorial demonstrated perhaps the simplest lighting shaders available. Vertex Y coordinates provide the amount of highlight. Vertex X coordinates provide the amount of alpha. Low alpha values on a black background with black WebGL clear color, provide shading. The lower the alpha, the more black shows through the texture.

This tutorial included the entire vertex and fragment shaders.