Logo with Light Maps
Tap for Visual Effects
Tap the logo to change visual effects. Swipe to view in 3D.
Swipe to Rotate. Tap for Colors
Visual Effects
Swipe to view the logo. Tap the logo or buttons. This example mixes textures for unique effects. A light map renders unique visual effects. A highlight and shadow texture map adds a sense of depth.
Images on the buttons load and stretch across the canvas, providing a background light map. The light map remains stationary while the logo rotates.
Highlight and shadow continue to provide dimension to the shape as you swipe. Highlight and shadow rotate with the shape.
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
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;
}
