WebGL Tutorial: Simple Lighting

Learn a Very Simple Method to Apply WebGL Light on a 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 the WebGL e-book series.
However information in this tutorial should apply to other WebGL projects, such as those that use
Unity or three.js, as well.

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.

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.