The Walking Raymarcher

Replaying mocap data with hand-tuned shape animation in a raymarching shader for Codevember 2016.Decrease the window size if too slow.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>The Walking Raymarcher</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="container"></div>
<script id="vertexShader" type="x-shader/x-vertex">

  void main() {
    gl_Position = vec4( position, 1.0 );
  }

</script>

<script id="fragmentShader" type="x-shader/x-fragment">

  uniform vec2 iResolution;
  uniform float iGlobalTime;
  uniform vec3 iMouse;

// I don't believe there's no better way to read an array with a non-constant index. Is there?
#define returnPos() vec3 p0, p1; for(int i=0; i<NUM_FRAMES-1; i++){ if(i==n) { p0=p[i]; p1=p[i+1]; break;}} return mix( p0, p1, f );

#define NUM_FRAMES 21

vec3 getSpine2( int n, float f )
{
	vec3 p[ NUM_FRAMES ];
	p[0] = vec3(0.0368,9.18,-0.389); p[1] = vec3(0.036,9.19,-0.386); p[2] = vec3(0.0326,9.19,-0.367); p[3] = vec3(0.0294,9.2,-0.347); p[4] = vec3(0.0272,9.2,-0.33); p[5] = vec3(0.0276,9.2,-0.334); p[6] = vec3(0.029,9.2,-0.345); p[7] = vec3(0.0307,9.19,-0.358); p[8] = vec3(0.0327,9.19,-0.371); p[9] = vec3(0.0346,9.19,-0.383); p[10] = vec3(0.0363,9.18,-0.389); p[11] = vec3(0.0377,9.19,-0.378); p[12] = vec3(0.0388,9.19,-0.357); p[13] = vec3(0.0395,9.2,-0.337); p[14] = vec3(0.0397,9.2,-0.33); p[15] = vec3(0.0396,9.2,-0.336); p[16] = vec3(0.0394,9.2,-0.347); p[17] = vec3(0.0391,9.19,-0.359); p[18] = vec3(0.0387,9.19,-0.371); p[19] = vec3(0.0381,9.19,-0.381); p[20] = vec3(0.0373,9.19,-0.388);
	returnPos();
}

vec3 getLWrist( int n, float f )
{
	vec3 p[ NUM_FRAMES ];
	p[0] = vec3(0.829,9.28,2.77); p[1] = vec3(0.817,9.29,2.74); p[2] = vec3(0.809,9.32,2.55); p[3] = vec3(0.972,9.31,2.36); p[4] = vec3(1.27,9.22,2.12); p[5] = vec3(1.62,9.05,1.83); p[6] = vec3(2,8.84,1.38); p[7] = vec3(2.32,8.63,0.77); p[8] = vec3(2.5,8.45,0.0625); p[9] = vec3(2.52,8.33,-0.505); p[10] = vec3(2.54,8.27,-0.816); p[11] = vec3(2.8,8.25,-0.958); p[12] = vec3(3.29,8.36,-0.936); p[13] = vec3(3.8,8.61,-0.774); p[14] = vec3(4.12,8.92,-0.361); p[15] = vec3(4.16,9.19,0.259); p[16] = vec3(3.88,9.24,1.01); p[17] = vec3(3.35,9.25,1.72); p[18] = vec3(2.67,9.28,2.27); p[19] = vec3(1.93,9.33,2.62); p[20] = vec3(1.21,9.33,2.77);
	returnPos();
}

vec3 getHead( int n, float f )
{
	vec3 p[ NUM_FRAMES ];
	p[0] = vec3(-0.181,12.1,-0.778); p[1] = vec3(-0.163,12.1,-0.763); p[2] = vec3(-0.0746,12.2,-0.687); p[3] = vec3(0.0121,12.2,-0.6); p[4] = vec3(0.0886,12.2,-0.514); p[5] = vec3(0.138,12.2,-0.444); p[6] = vec3(0.193,12.2,-0.425); p[7] = vec3(0.252,12.2,-0.467); p[8] = vec3(0.303,12.2,-0.564); p[9] = vec3(0.337,12.1,-0.667); p[10] = vec3(0.354,12.1,-0.727); p[11] = vec3(0.349,12.1,-0.647); p[12] = vec3(0.311,12.2,-0.484); p[13] = vec3(0.234,12.2,-0.361); p[14] = vec3(0.141,12.2,-0.317); p[15] = vec3(0.0452,12.2,-0.353); p[16] = vec3(-0.0365,12.2,-0.417); p[17] = vec3(-0.102,12.2,-0.504); p[18] = vec3(-0.149,12.2,-0.603); p[19] = vec3(-0.175,12.2,-0.696); p[20] = vec3(-0.183,12.1,-0.762);
	returnPos();
}

vec3 getSpine1( int n, float f )
{
	vec3 p[ NUM_FRAMES ];
	p[0] = vec3(1.75e-08,8.01,-0.0366); p[1] = vec3(1.75e-08,8.01,-0.0366); p[2] = vec3(1.75e-08,8.01,-0.0366); p[3] = vec3(1.75e-08,8.01,-0.0366); p[4] = vec3(1.75e-08,8.01,-0.0366); p[5] = vec3(1.75e-08,8.01,-0.0366); p[6] = vec3(1.75e-08,8.01,-0.0366); p[7] = vec3(1.75e-08,8.01,-0.0366); p[8] = vec3(1.75e-08,8.01,-0.0366); p[9] = vec3(1.75e-08,8.01,-0.0366); p[10] = vec3(1.75e-08,8.01,-0.0366); p[11] = vec3(1.75e-08,8.01,-0.0366); p[12] = vec3(1.75e-08,8.01,-0.0366); p[13] = vec3(1.75e-08,8.01,-0.0366); p[14] = vec3(1.75e-08,8.01,-0.0366); p[15] = vec3(1.75e-08,8.01,-0.0366); p[16] = vec3(1.75e-08,8.01,-0.0366); p[17] = vec3(1.75e-08,8.01,-0.0366); p[18] = vec3(1.75e-08,8.01,-0.0366); p[19] = vec3(1.75e-08,8.01,-0.0366); p[20] = vec3(1.75e-08,8.01,-0.0366);
	returnPos();
}

vec3 getRElbow( int n, float f )
{
	vec3 p[ NUM_FRAMES ];
	p[0] = vec3(-1.13,9.51,-3.53); p[1] = vec3(-1.18,9.53,-3.52); p[2] = vec3(-1.46,9.69,-3.48); p[3] = vec3(-1.93,9.89,-3.3); p[4] = vec3(-2.52,10.1,-2.89); p[5] = vec3(-3.04,10.3,-2.25); p[6] = vec3(-3.35,10.3,-1.48); p[7] = vec3(-3.4,10.1,-0.669); p[8] = vec3(-3.14,9.84,0.164); p[9] = vec3(-2.68,9.58,0.756); p[10] = vec3(-2.26,9.38,1.03); p[11] = vec3(-2.09,9.17,1.04); p[12] = vec3(-2.13,8.94,0.857); p[13] = vec3(-2.22,8.71,0.521); p[14] = vec3(-2.31,8.53,0.0537); p[15] = vec3(-2.38,8.43,-0.531); p[16] = vec3(-2.43,8.47,-1.25); p[17] = vec3(-2.35,8.65,-2); p[18] = vec3(-2.12,8.93,-2.67); p[19] = vec3(-1.77,9.21,-3.16); p[20] = vec3(-1.36,9.43,-3.45);
	returnPos();
}

vec3 getLShoulder( int n, float f )
{
	vec3 p[ NUM_FRAMES ];
	p[0] = vec3(0.905,10.8,-0.53); p[1] = vec3(0.918,10.8,-0.517); p[2] = vec3(0.977,10.8,-0.456); p[3] = vec3(1.03,10.7,-0.407); p[4] = vec3(1.09,10.7,-0.385); p[5] = vec3(1.12,10.6,-0.407); p[6] = vec3(1.16,10.6,-0.472); p[7] = vec3(1.19,10.6,-0.574); p[8] = vec3(1.21,10.6,-0.698); p[9] = vec3(1.22,10.5,-0.807); p[10] = vec3(1.22,10.5,-0.869); p[11] = vec3(1.21,10.5,-0.83); p[12] = vec3(1.2,10.6,-0.723); p[13] = vec3(1.16,10.6,-0.623); p[14] = vec3(1.12,10.7,-0.557); p[15] = vec3(1.07,10.7,-0.529); p[16] = vec3(1.02,10.8,-0.513); p[17] = vec3(0.983,10.8,-0.508); p[18] = vec3(0.95,10.8,-0.514); p[19] = vec3(0.926,10.8,-0.525); p[20] = vec3(0.91,10.8,-0.532);
	returnPos();
}

vec3 getLKnee( int n, float f )
{
	vec3 p[ NUM_FRAMES ];
	p[0] = vec3(0.785,3.85,-0.624); p[1] = vec3(0.943,3.84,-0.57); p[2] = vec3(1.27,3.83,0.0486); p[3] = vec3(1.71,4.02,0.562); p[4] = vec3(2.12,4.33,0.882); p[5] = vec3(2.29,4.51,1.01); p[6] = vec3(2.37,4.79,1.31); p[7] = vec3(2.36,5.21,1.7); p[8] = vec3(2.09,5.31,1.97); p[9] = vec3(1.51,5.01,2.09); p[10] = vec3(0.769,4.38,1.67); p[11] = vec3(0.454,4.24,1.45); p[12] = vec3(0.446,4.23,1.41); p[13] = vec3(0.504,3.96,0.814); p[14] = vec3(0.562,3.87,0.356); p[15] = vec3(0.598,3.87,0.156); p[16] = vec3(0.623,3.87,-0.0922); p[17] = vec3(0.654,3.89,-0.36); p[18] = vec3(0.702,3.91,-0.605); p[19] = vec3(0.767,3.9,-0.661); p[20] = vec3(0.819,3.86,-0.619);
	returnPos();
}

vec3 getLElbow( int n, float f )
{
	vec3 p[ NUM_FRAMES ];
	p[0] = vec3(2.32,9.16,1.03); p[1] = vec3(2.32,9.11,1.01); p[2] = vec3(2.33,8.88,0.885); p[3] = vec3(2.36,8.66,0.652); p[4] = vec3(2.42,8.46,0.287); p[5] = vec3(2.5,8.37,-0.181); p[6] = vec3(2.53,8.35,-0.795); p[7] = vec3(2.43,8.41,-1.51); p[8] = vec3(2.13,8.54,-2.2); p[9] = vec3(1.78,8.67,-2.65); p[10] = vec3(1.64,8.78,-2.87); p[11] = vec3(1.87,9,-2.92); p[12] = vec3(2.34,9.33,-2.79); p[13] = vec3(2.73,9.63,-2.53); p[14] = vec3(3.05,9.82,-2.18); p[15] = vec3(3.27,9.84,-1.75); p[16] = vec3(3.38,9.68,-1.18); p[17] = vec3(3.33,9.49,-0.559); p[18] = vec3(3.14,9.35,0.0245); p[19] = vec3(2.85,9.27,0.518); p[20] = vec3(2.52,9.21,0.885);
	returnPos();
}

vec3 getRHip( int n, float f )
{
	vec3 p[ NUM_FRAMES ];
	p[0] = vec3(-0.847,6.35,-0.0933); p[1] = vec3(-0.847,6.35,-0.0938); p[2] = vec3(-0.85,6.35,-0.0979); p[3] = vec3(-0.856,6.36,-0.109); p[4] = vec3(-0.863,6.37,-0.127); p[5] = vec3(-0.87,6.38,-0.149); p[6] = vec3(-0.877,6.38,-0.173); p[7] = vec3(-0.882,6.38,-0.198); p[8] = vec3(-0.886,6.38,-0.222); p[9] = vec3(-0.889,6.37,-0.246); p[10] = vec3(-0.89,6.36,-0.266); p[11] = vec3(-0.89,6.35,-0.277); p[12] = vec3(-0.887,6.34,-0.277); p[13] = vec3(-0.882,6.33,-0.262); p[14] = vec3(-0.875,6.31,-0.24); p[15] = vec3(-0.867,6.3,-0.214); p[16] = vec3(-0.858,6.29,-0.185); p[17] = vec3(-0.851,6.29,-0.157); p[18] = vec3(-0.847,6.3,-0.131); p[19] = vec3(-0.845,6.31,-0.11); p[20] = vec3(-0.846,6.33,-0.0968);
	returnPos();
}

vec3 getRShoulder( int n, float f )
{
	vec3 p[ NUM_FRAMES ];
	p[0] = vec3(-1.03,10.5,-1.06); p[1] = vec3(-1.02,10.5,-1.05); p[2] = vec3(-0.963,10.6,-1.02); p[3] = vec3(-0.912,10.7,-0.96); p[4] = vec3(-0.873,10.7,-0.88); p[5] = vec3(-0.856,10.8,-0.789); p[6] = vec3(-0.839,10.8,-0.714); p[7] = vec3(-0.818,10.8,-0.668); p[8] = vec3(-0.798,10.8,-0.656); p[9] = vec3(-0.783,10.8,-0.662); p[10] = vec3(-0.775,10.8,-0.666); p[11] = vec3(-0.781,10.8,-0.612); p[12] = vec3(-0.806,10.8,-0.531); p[13] = vec3(-0.852,10.8,-0.485); p[14] = vec3(-0.902,10.7,-0.501); p[15] = vec3(-0.95,10.7,-0.573); p[16] = vec3(-0.988,10.6,-0.664); p[17] = vec3(-1.01,10.6,-0.767); p[18] = vec3(-1.03,10.6,-0.873); p[19] = vec3(-1.04,10.5,-0.967); p[20] = vec3(-1.03,10.5,-1.04);
	returnPos();
}

vec3 getRWrist( int n, float f )
{
	vec3 p[ NUM_FRAMES ];
	p[0] = vec3(-1.6,8.04,-1.82); p[1] = vec3(-1.65,8.05,-1.84); p[2] = vec3(-1.99,8.08,-1.94); p[3] = vec3(-2.54,8.13,-1.96); p[4] = vec3(-3.3,8.3,-1.75); p[5] = vec3(-3.96,8.55,-1.12); p[6] = vec3(-4.18,8.71,-0.0801); p[7] = vec3(-3.77,8.73,1.11); p[8] = vec3(-2.76,8.78,2.16); p[9] = vec3(-1.57,8.95,2.67); p[10] = vec3(-0.714,9.18,2.71); p[11] = vec3(-0.359,9.3,2.55); p[12] = vec3(-0.396,9.31,2.32); p[13] = vec3(-0.576,9.29,2.02); p[14] = vec3(-0.845,9.19,1.69); p[15] = vec3(-1.15,9,1.32); p[16] = vec3(-1.47,8.65,0.829); p[17] = vec3(-1.72,8.32,0.182); p[18] = vec3(-1.82,8.12,-0.545); p[19] = vec3(-1.78,8.03,-1.19); p[20] = vec3(-1.66,8.03,-1.65);
	returnPos();
}

vec3 getRAnkle( int n, float f )
{
	vec3 p[ NUM_FRAMES ];
	p[0] = vec3(-0.994,1.24,2.41); p[1] = vec3(-0.587,1.02,2.41); p[2] = vec3(-0.478,0.89,1.7); p[3] = vec3(-0.466,0.664,0.998); p[4] = vec3(-0.4,0.473,0.322); p[5] = vec3(-0.354,0.463,-0.229); p[6] = vec3(-0.338,0.502,-0.778); p[7] = vec3(-0.343,0.586,-1.36); p[8] = vec3(-0.374,0.715,-1.93); p[9] = vec3(-0.412,0.938,-2.51); p[10] = vec3(-0.464,1.33,-3.08); p[11] = vec3(-0.46,1.96,-3.65); p[12] = vec3(-0.48,2.61,-3.87); p[13] = vec3(-0.531,2.99,-3.45); p[14] = vec3(-0.503,2.98,-2.8); p[15] = vec3(-0.587,2.74,-2.06); p[16] = vec3(-0.745,2.89,-1.29); p[17] = vec3(-0.861,2.99,-0.664); p[18] = vec3(-0.918,2.69,-0.0864); p[19] = vec3(-0.881,1.83,0.69); p[20] = vec3(-0.72,1.2,1.79);
	returnPos();
}

vec3 getLHip( int n, float f )
{
	vec3 p[ NUM_FRAMES ];
	p[0] = vec3(0.892,6.35,-0.129); p[1] = vec3(0.892,6.35,-0.129); p[2] = vec3(0.889,6.34,-0.125); p[3] = vec3(0.883,6.33,-0.114); p[4] = vec3(0.876,6.32,-0.0966); p[5] = vec3(0.867,6.31,-0.0752); p[6] = vec3(0.857,6.31,-0.0521); p[7] = vec3(0.848,6.31,-0.0284); p[8] = vec3(0.839,6.32,-0.00525); p[9] = vec3(0.83,6.32,0.0163); p[10] = vec3(0.823,6.33,0.0347); p[11] = vec3(0.819,6.34,0.0452); p[12] = vec3(0.822,6.35,0.0448); p[13] = vec3(0.832,6.37,0.0323); p[14] = vec3(0.845,6.38,0.0128); p[15] = vec3(0.858,6.39,-0.0113); p[16] = vec3(0.871,6.4,-0.0381); p[17] = vec3(0.882,6.41,-0.0654); p[18] = vec3(0.89,6.4,-0.0911); p[19] = vec3(0.893,6.38,-0.112); p[20] = vec3(0.893,6.36,-0.126);
	returnPos();
}

vec3 getRKnee( int n, float f )
{
	vec3 p[ NUM_FRAMES ];
	p[0] = vec3(-1.22,4.58,1.71); p[1] = vec3(-0.858,4.26,1.37); p[2] = vec3(-0.798,4.27,1.37); p[3] = vec3(-0.742,4.07,0.989); p[4] = vec3(-0.691,3.88,0.358); p[5] = vec3(-0.675,3.85,0.0894); p[6] = vec3(-0.676,3.84,-0.139); p[7] = vec3(-0.683,3.85,-0.405); p[8] = vec3(-0.702,3.88,-0.674); p[9] = vec3(-0.736,3.9,-0.837); p[10] = vec3(-0.799,3.89,-0.849); p[11] = vec3(-0.891,3.88,-0.876); p[12] = vec3(-1.11,3.86,-0.778); p[13] = vec3(-1.54,3.87,-0.371); p[14] = vec3(-1.86,3.98,0.0739); p[15] = vec3(-2.03,4.17,0.562); p[16] = vec3(-2.14,4.56,1.18); p[17] = vec3(-2.13,4.98,1.61); p[18] = vec3(-1.97,5.14,1.84); p[19] = vec3(-1.58,4.88,1.86); p[20] = vec3(-1.2,4.57,1.7);
	returnPos();
}

vec3 getLAnkle( int n, float f )
{
	vec3 p[ NUM_FRAMES ];
	p[0] = vec3(0.645,1.27,-2.85); p[1] = vec3(0.941,1.62,-3.15); p[2] = vec3(1.01,2.52,-3.04); p[3] = vec3(1.03,3.06,-2.54); p[4] = vec3(1.13,3.11,-2.02); p[5] = vec3(1.25,2.87,-1.66); p[6] = vec3(1.35,2.77,-1.08); p[7] = vec3(1.32,2.86,-0.344); p[8] = vec3(1.02,2.5,0.608); p[9] = vec3(0.784,1.73,1.76); p[10] = vec3(0.342,1.1,2.54); p[11] = vec3(-0.128,0.972,2.24); p[12] = vec3(0.0519,0.846,1.48); p[13] = vec3(0.129,0.568,0.847); p[14] = vec3(0.204,0.475,0.281); p[15] = vec3(0.266,0.485,-0.211); p[16] = vec3(0.301,0.534,-0.758); p[17] = vec3(0.355,0.618,-1.31); p[18] = vec3(0.454,0.738,-1.85); p[19] = vec3(0.602,0.952,-2.39); p[20] = vec3(0.721,1.22,-2.78);
	returnPos();
}

vec3 head, spine1, spine2;
vec3 lHip, lKnee, lAnkle, lShoulder, lElbow, lWrist;
vec3 rHip, rKnee, rAnkle, rShoulder, rElbow, rWrist;

float smin( float a, float b )
{
    const float k = 2.9;
    float h = clamp( 0.5+0.5*(b-a)/k, 0.0, 1.0 );
    return mix( b, a, h ) - k*h*(1.0-h);
}

float tRidgeStrength = 0.2;
float tRidgeFreq = 10.0;
vec3 tLatticeRadii = vec3( 0.0 );
float tR = 1.2;

vec2 map( vec3 p )
{
    float plane = abs( p.y + 0.9 );

    vec3 q = mod( p, 1.0 ) - 0.5;
    float lattice = min( length( q.xy ) - tLatticeRadii.x,
                    min( length( q.yz ) - tLatticeRadii.y,
                         length( q.xz ) - tLatticeRadii.z ) );
    
    p.y -= tRidgeStrength * ( 2.0 - p.y * 0.1 ) * ( 1.0 +  sin( p.y * tRidgeFreq ) );

    float d = length( p - head ) - tR;
    d = smin( d, length( p - spine1 ) - tR );
    d = smin( d, length( p - spine2 ) - tR );
    d = smin( d, length( p - lHip ) - tR );
    d = smin( d, length( p - lKnee ) - tR );
    d = smin( d, length( p - lAnkle ) - 1.5 * tR );
    d = smin( d, length( p - lShoulder ) - tR );
    d = smin( d, length( p - lElbow ) - 0.8 * tR );
    d = smin( d, length( p - lWrist ) - 0.7 * tR );
    
    d = smin( d, length( p - rHip ) - tR );
    d = smin( d, length( p - rKnee ) - tR );
    d = smin( d, length( p - rAnkle ) - 1.5 * tR );
    d = smin( d, length( p - rShoulder ) - tR );
    d = smin( d, length( p - rElbow ) - 0.8 * tR );
    d = smin( d, length( p - rWrist ) - 0.7 * tR );
    
    d = max( d, -lattice );
    return ( d < plane ) ? vec2( d, 1.0 ) : vec2( plane, 2.0 );
}

float calcShadow( vec3 ro, vec3 rd, float mint, float maxt )
{
    float t = mint;
    float res = 1.0;
    for ( int i = 0; i < 10; i++ )
    {
        float h = map( ro + rd * t ).x;
        res = min( res, 1.1 * h / t );
        t += h;
        if ( ( h < 0.001 ) || ( t > maxt ) )
        {
            break;
        }
    }
    return clamp( res, 0.0, 1.0 );
}

vec2 trace( vec3 ro, vec3 rd )
{
    const float kTMin = 0.01;
    const float kTMax = 200.0;
    const float kEps = 0.001;

    float t = kTMin;
    vec2 res;
    for ( int i = 0; i < 70; i++ )
    {
        vec3 pos = ro + rd * t;
        res = map( pos );
        if ( ( res.x < kEps ) || ( t > kTMax ) )
        {
            break;
        }
        t += res.x * 0.5;
    }

    if ( t < kTMax )
    {
        return vec2( t, res.y );
    }
    else
    {
        return vec2( -1.0 );
    }
}

vec3 calcNormal( vec3 p )
{
    const vec2 e = vec2( 0.005, 0 );
    float dp = map( p ).x;
    return normalize( vec3( dp - map( p - e.xyy ).x,
                            dp - map( p - e.yxy ).x,
                            dp - map( p - e.yyx ).x ) );
}

mat3 calcCamera( vec3 eye, vec3 target )
{
    vec3 cw = normalize( target - eye );
    vec3 cu = cross( cw, vec3( 0, 1, 0 ) );
    vec3 cv = cross( cu, cw );
    return mat3( cu, cv, cw );
}

void main()
{
    float walkTime = mod( 10.0 * iGlobalTime, float( NUM_FRAMES - 1 ) );
    int iTime = int( floor( walkTime ) );
    float fTime = fract( walkTime );
    head = getHead( iTime, fTime );
    spine1 = getSpine1( iTime, fTime );
    spine2 = getSpine2( iTime, fTime );
    lHip = getLHip( iTime, fTime );
    lKnee = getLKnee( iTime, fTime );
    lAnkle = getLAnkle( iTime, fTime );
    lShoulder = getLShoulder( iTime, fTime );
	lElbow = getLElbow( iTime, fTime );
	lWrist = getLWrist( iTime, fTime );
    rHip = getRHip( iTime, fTime );
	rKnee = getRKnee( iTime, fTime );
    rAnkle = getRAnkle( iTime, fTime );
	rShoulder = getRShoulder( iTime, fTime );
	rElbow = getRElbow( iTime, fTime );
	rWrist = getRWrist( iTime, fTime );
    
    float trTime = mod( iGlobalTime, 140.0 );
    
    tRidgeStrength = 0.2;
	tRidgeFreq = 0.0;
    tLatticeRadii = vec3( 0.0 );
    tR = 1.2;
    
    if ( trTime < 5.0 )
    {
        tRidgeStrength = 0.2;
				tRidgeFreq = 0.0;
				tLatticeRadii = vec3( 0.0 ); 
    }
    else
    if ( trTime < 10.0 )
    {
        tRidgeFreq = 10.0 * smoothstep( 5.0, 10.0, trTime );  
    }
    else
    if ( trTime < 20.0 )
    {
        tRidgeFreq = 10.0;
    }
    else
    if ( trTime < 40.0 )
    {
        tRidgeFreq = 10.0;
        tLatticeRadii = mix( vec3( 0.0 ), vec3( 0.3, 0.0, 0.0 ),
                       		 smoothstep( 20.0, 40.0, trTime ) );
    }
    else
    if ( trTime < 60.0 )
    {
        tRidgeFreq = 10.0;
        tLatticeRadii  = mix( vec3( 0.3, 0.0, 0.0 ), vec3( 0.0, 0.0, 0.6 ),
                              smoothstep( 40.0, 60.0, trTime ) );
    }
    else
    if ( trTime < 70.0 )
    {
        float t = smoothstep( 60.0, 70.0, trTime );
        tRidgeFreq = 10.0 - 10.0 * t;
        tLatticeRadii = mix( vec3( 0.0, 0.0, 0.6 ), vec3( 0.0 ), t );
        tR = mix( 1.2, 2.25, t ); 
    }
    else
    if ( trTime < 90.0 )
    {
        float t = smoothstep( 70.0, 90.0, trTime );
        tRidgeFreq = 10.0;
        tLatticeRadii = vec3( 0.0 );
        tR = 2.25;
        tRidgeStrength = 0.2 * t;
    }
    else
    if ( trTime < 100.0 )
    {
        float t = smoothstep( 90.0, 100.0, trTime );
        tRidgeFreq = 10.0;
        tLatticeRadii = mix( vec3( 0.0 ), vec3( 0.5 ), t );
        tR = 2.25;
    }
    else
    if ( trTime < 120.0 )
    {
        float t = smoothstep( 100.0, 120.0, trTime );
        tRidgeFreq = 10.0;
        tLatticeRadii = vec3( 0.5 );
        tR = mix( 2.25, 1.2, t );
    }
    else
    if ( trTime < 140.0 )
    {
        float t = smoothstep( 120.0, 140.0, trTime );
        tRidgeFreq = 10.0 - 10.0 * t;
        tLatticeRadii = mix( vec3( 0.5 ), vec3( 0.0 ), t );
    }

    vec2 mo = vec2( 0.95, -0.2 );
    if ( iMouse.z > 0.5 )
    {
        mo = 2.0 * iMouse.xy / iResolution.xy - 1.0;
        mo.y = 1.0 - mo.y;
        mo *= 3.14159 * vec2( 0.4, 0.1 );
    }
    mo += 3.14159 * 0.5;

    vec3 eye = vec3( 40.0 * cos( mo.x ), 30.0 + 20.0 * cos( mo.y ), 40.0 * sin( mo.x ) );
    vec3 target = vec3( 0.0, 6.0, 0.0 );
    
    mat3 cam = calcCamera( eye, target );

 	vec2 uv = ( gl_FragCoord.xy - 0.5 * iResolution.xy ) / iResolution.y;
    vec3 rd = cam * normalize( vec3( uv, 2.0 ) );

    vec3 col = vec3( 1.0 );
    
    vec2 res = trace( eye, rd );
    if ( res.x > 0.0 )
    {
        vec3 pos = eye + rd * res.x;
        vec3 nor = calcNormal( pos );
        vec3 ldir = normalize( vec3( -10.5, 20.8, 24.0 ) );
        
        if ( res.y < 1.5 )
        {
        	col = 0.5 + 0.5 * nor;
            float dif = max( dot( nor, ldir ), 0.0 );
            vec3 ref = reflect( rd, nor );
            float spe = pow( clamp( dot( ref, ldir ), 0.0, 1.0 ), 15.0 );

            col *= ( 0.3 + 0.7 * dif );
            float edge = pow( 1.0 - dot( -rd, nor ), 1.1 );
        	col += 0.8 * edge + spe;
        }
      
        float sh = calcShadow( pos, ldir, 0.1, 30.0 );
        col *= ( 0.5 + sh );
    }
    
	gl_FragColor = vec4( col, 1.0 );
}

</script>
  <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/three.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/fft.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
* {
  padding: 0;
  margin: 0;
}

body {
	overflow: hidden;
}
/* Downloaded from https://www.codeseek.co/ */
// Created by XORXOR, 2016
// Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
// https://www.shadertoy.com/view/Mt3XWH
//
// Replaying mocap data with hand-tuned shape animation for Codevember 2016.
// Inspired by Universal Everything's Walking City
// https://vimeo.com/85596568
// and makio64's Codevember sketches
// https://makiopolis.com/codevember/
//
// Soundtrack by Simon Pyke
// https://soundcloud.com/freefarm/walking-city

var container;
var camera, scene, renderer;
var uniforms;
var startTime;

var fft = new Fft();
window.addEventListener("load", function() {
      initSound();                            });
 
function initSound() {
  fft.initfft("https://s3-us-west-2.amazonaws.com/s.cdpn.io/896175/freefarm-walking_city-120.mp3",32)  
}

init();
animate();

function init() {

  
  container = document.getElementById( 'container' );

  startTime = Date.now();
  camera = new THREE.Camera();
  camera.position.z = 1;

  scene = new THREE.Scene();

  var geometry = new THREE.PlaneBufferGeometry( 4, 3 );
  
                     
  uniforms = {
      iGlobalTime: { type: "f", value: 1.0 },
      iResolution: { type: "v2", value: new THREE.Vector2() },
      iMouse: { type: "v3", value: new THREE.Vector3() }
    };

  var material = new THREE.ShaderMaterial( {

    uniforms: uniforms,
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent

  } );

  var mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  renderer = new THREE.WebGLRenderer();
  container.appendChild( renderer.domElement );

  onWindowResize();

  window.addEventListener( 'resize', onWindowResize, false );
  window.addEventListener( 'mousedown', mouseDown );
  window.addEventListener( 'mouseup', mouseUp );
  window.addEventListener( 'mousemove', mouseMove );
}

function onWindowResize( event ) {

  uniforms.iResolution.value.x = window.innerWidth;
  uniforms.iResolution.value.y = window.innerHeight;

  renderer.setSize( window.innerWidth, window.innerHeight );

}

function mouseDown( event ) {
  uniforms.iMouse.value.x = event.clientX;
  uniforms.iMouse.value.y = event.clientY;
  uniforms.iMouse.value.z = 1.0;
}

function mouseMove( event ) {
  uniforms.iMouse.value.x = event.clientX;
  uniforms.iMouse.value.y = event.clientY;
}

function mouseUp( event ) {
  uniforms.iMouse.value.x = event.clientX;
  uniforms.iMouse.value.y = event.clientY;
  uniforms.iMouse.value.z = 0.0;
}

function animate() {

  requestAnimationFrame( animate );
  render();

}

function render() {

  var currentTime = Date.now();
  uniforms.iGlobalTime.value = (currentTime - startTime) * 0.001;
  renderer.render( scene, camera );

}

This awesome code ( The Walking Raymarcher ) is write by XORXOR, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © XORXOR