3D Lighting Tutorial

RTT & Shader Lighting

Introduction Vertex Shader Fragment Shader Flashlight Light Map Flashlight Texture Map Summary

Introduction

The 3D Flashlight & Lighting example applies GLSL shaders, a light map and render to texture (RTT), baked texture maps. This short tutorial includes some explanation, the GLSL shaders, RTT and light maps applied to the 3D Flashlight & Lighting example.

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.

Texture Maps

I applied gold and silver 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 was modified 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.

// Attribute X,Y,Z
// coordinates:
attribute vec4 a_position;

// Attribute S, T
// texels.
attribute vec2 a_tex_coord0;

// Varying for texels.
varying vec2 v_tex_coord0;

// Transformation matrix:
uniform mat4 um4_matrix;

// Perspective matrix:
uniform mat4 um4_pmatrix; 

void main() {
   
gl_Position =  um4_pmatrix 
 * um4_matrix 
 * a_position;
 
v_tex_coord0 = a_tex_coord0;
}

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.

precision mediump float;

// Sample flashlight texture:
uniform sampler2D u_sampler0;

// Sample light map:
uniform sampler2D u_sampler1;

// Texture coordinates S,T:
varying vec2 v_tex_coord0;

// If you need width 
// and height in the
// shader, GLResponsive
// uploads new canvas width
// after resizing.
// GLResponsive saves
// these uniforms.
uniform float u_width;
uniform float u_height;
uniform float uf_time;

// Ambient color
const float cf_ambient = 0.05;

void main(void) {

vec2 v2_resolution = vec2(
 u_width,
 u_height
);

vec4 v4_light = texture2D(
 u_sampler1, 
 (gl_FragCoord.xy/v2_resolution.xy))
 * uf_time;
 
vec4 v4_tex = texture2D(
 u_sampler0, 
 v_tex_coord0
); 

gl_FragColor = v4_light 
 * v4_tex 
 * uf_time + cf_ambient;
}