Lamp On & Off

Light Maps

Introduction Texture Maps Fragment Shader Vertex Shader Summary

Introduction

This tutorial provides a few details regarding implementation of the 3D Lamp: On & Off example, with light maps. The lamp rotates and light dims while users swipe. The On or Off buttons instantly switch the light on or off. The Dimmer Switch button returns to interactive control of the light.

Seven Thunder Software modified a third party model with 3ds Max for this featherweight Web example. The 8 bit indexed texture map includes solid blocks of color. The image was prepared with 3ds Max render to texture, then simplified with Photoshop. The lamp was greatly simplified. A number of vertices were removed to load quicker online.

Texture Maps

The image for the light map was generated with Photoshop's lighting effects filter, using Photoshop menus Filter > Render > Lighting Effects > Omni

Dimmer Switch Light Map

Lamp Texture Map

Fragment Shader

The amount of light applied from the light map is controlled with a uniform in the fragment shader as follows. Multiply uniform, uf_time, times values sampled from the light map, v4_light times a sample from the lamp's texture. A varying from the light map, contains this color fragment's light, v4_tex.

precision mediump float;
uniform sampler2D u_sampler0;
uniform sampler2D u_sampler1;
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;

void main(void) {
 vec2 v2_resolution = vec2(u_width,u_height);
 
 // Obtain the light map value.
 vec4 v4_light = texture2D(
 u_sampler1, 
 (gl_FragCoord.xy/v2_resolution.xy)
 );
 
 // Sample the light map shader.
 vec4 v4_tex = texture2D(u_sampler0, v_tex_coord0);
 
 // mix the light map value by 
 // lamp texture and the uniform.
 // The uniform represents the amount of light
 // to display.
 gl_FragColor = v4_light * v4_tex * uf_time; 
}

JavaScript

When the user taps the Off button, upload uniform uf_time with JavaScript, as follows. Constant LIGHT_MIN equals the amount of light to render when the scene is dark.

gl.uniform1f(
 glDemo.ufTime,
 glDemo.LIGHT_MIN
);

When the user taps the On button, upload a value to uf_time, with JavaScript, as follows. Constant LIGHT_MAX equals the amount of light to render. In this case LIGHT_MAX equals 1.0, representing full light.

gl.uniform1f(
 glDemo.ufTime,
 glDemo.LIGHT_MAX
);

Vertex Shader

The vertex shader's a default that modifies location of vertices and passes texel coordinates to the fragment shader.

attribute vec4 a_position;   
attribute vec2 a_tex_coord0;
varying vec2 v_tex_coord0;
           
uniform mat4 um4_matrix;
uniform mat4 um4_pmatrix; 
           
void main(void) {
gl_Position = um4_pmatrix * um4_matrix * a_position; 
}

Summary

This tutorial provided a few details regarding implementation of the 3D Lamp: On & Off example.

The lamp rotates and light dims while users swipe. The On or Off buttons instantly switch the light on or off. The Dimmer Switch button returns to interactive control of the light.

Seven Thunder Software modified a prepared model with 3DS Max for this featherweight Web example. The 8 bit indexed texture map includes solid blocks of color. The image was prepared with 3DS Max render to texture, then simplified with Photoshop.