Introduction

The flashlight rotates as you swipe left to right.
A light map provides the illusion of light from the flashlight.
See the most light when the flashlight faces the viewport.
See very little light when the flashlight faces away from the viewport.

Seven Thunder Software
applied reflection maps to the flashlight, then rendered to texture.
The texture map uses 8 bit 256 color graphics, for faster download time.
The original flashlight model is from a third party.

The image for the light map
was generated with Photoshop gradients.
The
fragment shader controls the amount of light applied per frame.
JavaScript uploads a floating point uniform for each frame.

Vertex Shader

First the vertex shader multiplies the perspective matrix, transformation matrix, and current vertex.
Built in vector gl_Position receives the product.
Second attribute a_tex_coord0 contains the current S,T texels.
The vertex shader assigns a_tex_coord0 to the varying
v_tex_coord0 for processing in the fragment shader.
The
fragment shader handles most of the processing
which displays lighting. The entire vertex shader follows.

Fragment Shader

The fragment shader processes the amount of light
based on the flashlight's rotation.
For each interactive rendered frame, JavaScript uploads a value to uniform uf_time.
Uniform uf_time
along with constant cf_ambient control
the amount of light rendered.
The entire fragment shader follows.

Flashlight Light Map

Flashlight Texture Map

Summary

The flashlight rotates as you swipe left to right.
A light map provides the illusion of light from the flashlight.
See the most light when the flashlight faces the viewport.
See very little light when the flashlight faces away from the viewport.

Seven Thunder Software
applied reflection maps to the flashlight, then rendered to texture.
The texture map uses 8 bit 256 color graphics, for faster download time.
The original flashlight model is from a third party.

The image for the light map
was generated with Photoshop gradients.
The
fragment shader controls the amount of light applied per frame.
JavaScript uploads a floating point uniform for each frame.