# WebGL Simple Lighting Tutorial

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

A number of details were left out, to focus on the main topic. However, most free WebGL tutorials at SevenThunderSoftware.com use the base JavaScript and WebGL explained in the free eBook, WebGL Textures & Vertices: Beginner's Guide.

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 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. See more WebGL lighting examples.