3D Logo

Change Light Maps

Tap the logo to change visual effects. Swipe to rotate. View in three dimensions with different light maps.

Swipe to View. Tap for Graphics

Light Map Buttons. Tap to Change Maps.

Visual Effects

Swipe to view the logo. Tap the logo, or buttons, to change light maps.

This example mixes textures in the GLSL fragment shader for unique effects. Individual light maps display on the light map buttons. Tap a button to see the light map on the logo.

Images on the buttons load and stretch across the canvas, providing colors for the logo. The light map remains stationary while you swipe to rotate the logo. For example notice the wolf always looks out toward you even while the logo's rotated away from the viewport. Yet highlight and shadow continue to provide dimension to the shape.

Light & Shadow

A highlight and shadow texture map provides a sense of depth to the symbol. The highlight and shadow texture map was prepared with 3ds Max's render to texture feature.

Preparaton

The symbol was modeled with 3ds Max and ported to WebGL with my 3D Translator. 3D Translator's freely available on the Microsoft Store.

Fragment Shader

The fragment shader's implemented in the C language. This shader mixes two textures. The first texture, in u_sampler0, provides light and shadow to the symbol. The second texture, in u_sampler1, stretches across the canvas and mixes with the light and shadow map to provide color on the logo.

precision mediump float;
uniform sampler2D u_sampler0;
uniform sampler2D u_sampler1;
varying vec2 v_tex_coord0;
uniform float u_dim;

void main(void) {

// Canvas width and height:
vec2 v2_resolution = vec2(
u_dim,
u_dim
);

// Sample the light map.
// The light map stretches 
// across the canvas.
vec4 v4_color1 = texture2D(
u_sampler1, 
(gl_FragCoord.xy/v2_resolution.xy)
);

// Sample the highlight
// shadow map.
vec4 v4_color0 = texture2D(
u_sampler0, 
v_tex_coord0
);

// Mix the maps 
// 50% each.
vec4 v4_mix    = mix(
v4_color0,
v4_color1,
0.5
);

// Color the canvas.
gl_FragColor  = v4_mix;

}