Draku Design

Swipe - Up & Down: Colors Change

Shaders process color animation for the logo's texture map, as you rotate the logo. I modeled the 3D logo with 3ds Max. Prepared WebGL GLSL shaders and 3D rendering software.

WebGL GLSL Shader

The fragment shader samples a full color texture to obtain a value representing RGBA color values. Code modifies color channels based on the uploaded uniform uf_time. JavaScript modifies uniform uf_time as you swipe. Therefore colors change as you swipe.

This model renders light and shadow with a baked texture map. Yet other models, on this site, render light and shadow with GLSL shaders.

precision mediump float;
uniform sampler2D u_sampler0;
varying vec2 v_tex_coord0;
const float F_MIX = 0.3;
const float F_RED = 0.95;
uniform float uf_time;  
    	
void main(void) {

 // Sample the color texture:
 vec4 v4_color0 = texture2D(
  u_sampler0, 
  v_tex_coord0
 );
 
 // Sample the baked texture:
 vec4 v4_color1 = texture2D(
  u_sampler1, 
  v_tex_coord0
 );

 // Modify the color
 // based on uniform upload:
 float f_cRange = 1.0 - uf_time;  
 v4_color0.g   *= f_cRange;
 v4_color0.b   *= uf_time;

 // Render the color.
 // Display 70% of the
 // full color texture map,
 // with 30% of the
 // backed light-shadow map.
 gl_FragColor = mix(
 v4_color0,
 v4_color1,
 F_MIX
 );
}