# WebGL Tutorial: Simple Lighting

## Introduction

This tutorial might demonstrate 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 includes the entire vertex and fragment shaders.

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 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
v_tex_coord0 = a_tex_coord0;
```

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
varying float v_light;

// The amount of dark
// per fragment.
// Processed previously
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.

See more WebGL lighting examples. Have fun and love learning!