WebGL Simple Lighting Tutorial

Easiest Method

Simple Lighting Example Introduction Vertex Shader Fragment Shader Summary More WebGL Tutorials!

Introduction

This tutorial explains how to prepare very simple WebGL Lighting. In this example shaders apply lighting based on the X and Y vertex coordinates. This lesson covers the vertex and fragment shaders for the WebGL Simple Lighting on a Sphere example.

The Vertex Shader

The vertex shader calculates values of light and dark based on X and Y vertex coordinates. The varyings v_light and v_dark then pass those calculations to the fragment shader. The following listing includes the entire vertex shader.

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

// Multiply the current vertex
// by the transformation and
// perspective projection
// matrices.
vec4 v4_position = um4_pmatrix * um4_matrix * a_position;  

// Output the modified
// vertex position
gl_Position = v4_position; 

// Calculate lighting based
// on both X and Y coordinates.
v_light = 1.0 - (v4_position.y + 1.0) * 0.2;
v_light *= 1.0 - (v4_position.x + 1.0) * 0.2;

// Calculate dark based
// on just the X coordinate.
v_dark = (v4_position.x + 1.0) * 0.3;
  
// Map the current vertex position in gl_Position
// to the current texel.
v_tex_coord0 = a_tex_coord0;      
}
  

The Fragment Shader

The fragment shader simply subtracts from each color channel, the dark value received through varying v_dark. The shader uses the light value passed through varying v_light as the alpha value. For more complex and accurate examples please refer to other WebGL Examples. Especially refer to the point light and specular light projects. The following listing includes the entire fragment shader.

precision mediump float;
uniform sampler2D u_sampler0;

varying vec2 v_tex_coord0;
varying float v_light;
varying float v_dark;

void main(void) {

vec4 color0 = texture2D(
 u_sampler0, 
 v_tex_coord0
);

// Reduce red, green,
// and blue channels,
// by the dark value.
// Apply the light
// as alpha.
gl_FragColor = vec4(
 color0.r-v_dark,
 color0.g-v_dark,
 color0.b-v_dark, 
 v_light
); 
}

WebGL Sphere Preparation

The sphere was created in 3DS Max then translated for WebGL with Seven Thunder Software's JavaScript DAE file translator. Web browsers hang when attempting to process too much data with JavaScript. Therefore this example displays a a sphere with only 16 segments.

However the Glowing Earth example loads a smoother sphere translated with the Windows 3D DAE Translator. Seven Thunder Software plans to offer the first few versions of 3D DAE Translator free.

Summary

This tutorial explaineds how to prepare very simple WebGL Lighting. In this example shaders apply lighting based on the X and Y vertex coordinates. This lesson covered the vertex and fragment shaders for the WebGL Simple Lighting on a Sphere example.

More WebGL Examples

Copyright © 2015 Seven Thunder Software. All Rights Reserved.