3D Lighting Tutorial

Details: Short Tutorial

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

Introduction

This short tutorial includes some explanation, the GLSL shaders and both 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

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.

// 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;
}

Flashlight Light Map

Light Map for Flashlight

Flashlight Texture Map

Texture Map for Flashlight

Summary

This short tutorial included some explanation, the GLSL shaders and both 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.

Tags

learn to code, Web GL, 3D Programming, 3D Development, 3D Media, 3D Web, 3 D Websites, 3D Development, 3D Web Design, 3D Web Development, Web Development, free tutorials, online learning, learn coding, create 3D website, 3D Media, JavaScript, html5, html 5, Web GL, 3D rendering software, GLSL, 3D Graphics Engine, 3D rendering software, html tutorial, how to code, programming websites, learn computer programming, learn to code for free, learning coding, stem, 3D images, webgl simple example, webgl basics,
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.