<div class="wrapper" id="wrapper">
</div>

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

//
// Description : Array and textureless GLSL 2D/3D/4D simplex
//               noise functions.
//      Author : Ian McEwan, Ashima Arts.
//  Maintainer : ijm
//     Lastmod : 20110822 (ijm)
//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
//               Distributed under the MIT License. See LICENSE file.
//               https://github.com/ashima/webgl-noise
//

vec3 mod289(vec3 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 permute(vec4 x) {
  return mod289(((x*34.0)+1.0)*x);
}

vec4 taylorInvSqrt(vec4 r){
  return 1.79284291400159 - 0.85373472095314 * r;
}

float snoise(vec3 v) {

  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);

  // First corner
  vec3 i  = floor(v + dot(v, C.yyy) );
  vec3 x0 =   v - i + dot(i, C.xxx) ;

  // Other corners
  vec3 g = step(x0.yzx, x0.xyz);
  vec3 l = 1.0 - g;
  vec3 i1 = min( g.xyz, l.zxy );
  vec3 i2 = max( g.xyz, l.zxy );

  //   x0 = x0 - 0.0 + 0.0 * C.xxx;
  //   x1 = x0 - i1  + 1.0 * C.xxx;
  //   x2 = x0 - i2  + 2.0 * C.xxx;
  //   x3 = x0 - 1.0 + 3.0 * C.xxx;
  vec3 x1 = x0 - i1 + C.xxx;
  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y

  // Permutations
  i = mod289(i);
  vec4 p = permute( permute( permute(
      i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
    + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
    + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));

  // Gradients: 7x7 points over a square, mapped onto an octahedron.
  // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
  float n_ = 0.142857142857; // 1.0/7.0
  vec3  ns = n_ * D.wyz - D.xzx;

  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)

  vec4 x_ = floor(j * ns.z);
  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)

  vec4 x = x_ *ns.x + ns.yyyy;
  vec4 y = y_ *ns.x + ns.yyyy;
  vec4 h = 1.0 - abs(x) - abs(y);

  vec4 b0 = vec4( x.xy, y.xy );
  vec4 b1 = vec4( x.zw, y.zw );

  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
  vec4 s0 = floor(b0)*2.0 + 1.0;
  vec4 s1 = floor(b1)*2.0 + 1.0;
  vec4 sh = -step(h, vec4(0.0));

  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;

  vec3 p0 = vec3(a0.xy,h.x);
  vec3 p1 = vec3(a0.zw,h.y);
  vec3 p2 = vec3(a1.xy,h.z);
  vec3 p3 = vec3(a1.zw,h.w);

  //Normalise gradients
  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
  p0 *= norm.x;
  p1 *= norm.y;
  p2 *= norm.z;
  p3 *= norm.w;

  // Mix final noise value
  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
  m = m * m;
  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );

}


// via: https://petewerner.blogspot.jp/2015/02/intro-to-curl-noise.html
vec3 curlNoise( vec3 p ){

  const float e = 0.1;

  float  n1 = snoise(vec3(p.x, p.y + e, p.z));
  float  n2 = snoise(vec3(p.x, p.y - e, p.z));
  float  n3 = snoise(vec3(p.x, p.y, p.z + e));
  float  n4 = snoise(vec3(p.x, p.y, p.z - e));
  float  n5 = snoise(vec3(p.x + e, p.y, p.z));
  float  n6 = snoise(vec3(p.x - e, p.y, p.z));

  float x = n2 - n1 - n4 + n3;
  float y = n4 - n3 - n6 + n5;
  float z = n6 - n5 - n2 + n1;


  const float divisor = 1.0 / ( 2.0 * e );
  return normalize( vec3( x , y , z ) * divisor );
}


uniform float timer;
uniform float delta;
uniform float speed;
uniform float factor;
uniform float evolution;
uniform float radius;


void main() {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  vec4 c = texture2D( posTex, uv );
  vec4 oldVel = texture2D( velTex, uv );

  vec3 pos = c.xyz;
  float life = oldVel.a;

  float s = life / 100.0;
  float speedInc = 1.0;

  vec3 v = factor * speedInc * delta * speed * ( curlNoise( .2 * pos) );

  pos += v;
  life -= 0.3;

  if( life <= 0.0) {

    pos = texture2D( defTex, uv ).xyz;
    life = 100.0;

  }


  gl_FragColor = vec4( pos - c.xyz, life );
}


</script>

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

void main() {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  vec4 tmpPos = texture2D( posTex, uv );
  vec3 pos = tmpPos.xyz;
  vec4 tmpVel = texture2D( velTex, uv );

  vec3 vel = tmpVel.xyz;

  pos += vel;
  gl_FragColor = vec4( pos, 0.0 );
}
</script>

<script id="simulation_def" type="x-shader/x-fragment">
void main() {
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  vec4 tmpPos = texture2D( defTex, uv );
  gl_FragColor = vec4( tmpPos.rgb, 0.0 );
}
</script>


<script id="vs-particles" type="x-shader/x-vertex">

attribute float aNum;
attribute float aRandom;
// attribute vec2 aPosUv

attribute vec3 aColor;


uniform sampler2D posMap;
uniform sampler2D velMap;

uniform float size;

uniform float timer;
uniform vec3 boxScale;
uniform float meshScale;

uniform mat4 shadowMatrix;

varying vec3 vPosition;
varying vec3 vColor;

varying vec4 vShadowCoord;


mat3 calcLookAtMatrix(vec3 vector, float roll) {
  vec3 rr = vec3(sin(roll), cos(roll), 0.0);
  vec3 ww = normalize(vector);
  vec3 uu = normalize(cross(ww, rr));
  vec3 vv = normalize(cross(uu, ww));

  return mat3(uu, ww, vv);
}

void main() {
  vec2 posUv;
  posUv.x = mod(aNum, (size - 1.0));
  posUv.y = float(aNum / (size - 1.0));
  posUv /= vec2(size);
  vec4 cubePosition = texture2D( posMap, posUv );
  vec4 cubeVelocity = texture2D( velMap, posUv );
  float alpha = cubeVelocity.a / 100.0;
  float scale = 0.025 * 4.0 * (1.0 - alpha) * alpha;

  mat4 localRotationMat = mat4( calcLookAtMatrix( cubeVelocity.xyz, 0.0 ) );

  vec3 modifiedVertex =  (localRotationMat * vec4( position * scale * aRandom * (vec3(1.0))  * boxScale * meshScale, 1.0 ) ).xyz;
  vec3 modifiedPosition = modifiedVertex + cubePosition.xyz;

  gl_Position = projectionMatrix * modelViewMatrix * vec4( modifiedPosition, 1.0 );
  vPosition = modifiedPosition;

  // via: line 7 in https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/shadowmap_vertex.glsl
  vShadowCoord = shadowMatrix * modelMatrix * vec4( modifiedPosition, 1.0 );

  vColor = aColor;
}

</script>

<script id="fs-particles" type="x-shader/x-fragment">
varying vec3 vPosition;
varying vec3 vColor;

varying vec4 vShadowCoord;
uniform sampler2D shadowMap;
uniform vec2 shadowMapSize;
uniform float shadowBias;
uniform float shadowRadius;

// uniform sampler2D projector;

uniform vec3 lightPosition;

uniform vec2 resolution;

float bias;


// via: https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/packing.glsl
const float UnpackDownscale = 255. / 256.; // 0..1 -> fraction (excluding 1)
const vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256.,  256. );
const vec4 UnpackFactors = UnpackDownscale / vec4( PackFactors, 1. );

float unpackRGBAToDepth( const in vec4 v ) {
  return dot( v, UnpackFactors );
}

  
// via:
// https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/shadowmap_pars_fragment.glsl#L32
float texture2DCompare( sampler2D depths, vec2 uv, float compare ) {
  return step( compare, unpackRGBAToDepth( texture2D( depths, uv ) ) );
}

  
// via:
// https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/shadowmap_pars_fragment.glsl#L60
float getShadow( sampler2D shadowMap, vec2 shadowMapSize, float shadowBias, float shadowRadius, vec4 shadowCoord ) {

  float shadow = 1.0;

  shadowCoord.xyz /= shadowCoord.w;
  shadowCoord.z += shadowBias;

  // if ( something && something ) breaks ATI OpenGL shader compiler
  // if ( all( something, something ) ) using this instead

  bvec4 inFrustumVec = bvec4 ( shadowCoord.x >= 0.0, shadowCoord.x <= 1.0, shadowCoord.y >= 0.0, shadowCoord.y <= 1.0 );
  bool inFrustum = all( inFrustumVec );

  bvec2 frustumTestVec = bvec2( inFrustum, shadowCoord.z <= 1.0 );
  bool frustumTest = all( frustumTestVec );

  if ( frustumTest ) {

    vec2 texelSize = vec2( 1.0 ) / shadowMapSize;

    float dx0 = - texelSize.x * shadowRadius;
    float dy0 = - texelSize.y * shadowRadius;
    float dx1 = + texelSize.x * shadowRadius;
    float dy1 = + texelSize.y * shadowRadius;

    shadow = (
      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy0 ), shadowCoord.z ) +
      texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy0 ), shadowCoord.z ) +
      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy0 ), shadowCoord.z ) +
      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, 0.0 ), shadowCoord.z ) +
      texture2DCompare( shadowMap, shadowCoord.xy, shadowCoord.z ) +
      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, 0.0 ), shadowCoord.z ) +
      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx0, dy1 ), shadowCoord.z ) +
      texture2DCompare( shadowMap, shadowCoord.xy + vec2( 0.0, dy1 ), shadowCoord.z ) +
      texture2DCompare( shadowMap, shadowCoord.xy + vec2( dx1, dy1 ), shadowCoord.z )
    ) * ( 1.0 / 9.0 );
  }

  return shadow;
}

mat2 rotationMatrix( float a ) {
  return mat2( cos( a ), sin( a ),
          -sin( a ), cos( a ) );
}


vec3 calcIrradiance_hemi(vec3 newNormal, vec3 lightPos, vec3 grd, vec3 sky){
  float dotNL = dot(newNormal, normalize(lightPos));
  float hemiDiffuseWeight = 0.5 * dotNL + 0.5;

  return mix(grd, sky, hemiDiffuseWeight);
}

vec3 calcIrradiance_dir(vec3 newNormal, vec3 lightPos, vec3 light){
  float dotNL = dot(newNormal, normalize(lightPos));

  return light * max(0.0, dotNL);
}


const float PI = 3.14159265358979323846264;

// hemisphere ground color
const vec3 hemiLight_g = vec3(256.0, 246.0, 191.0) / vec3(256.0);

// hemisphere sky color
const vec3 hemiLight_s_1 = vec3(0.5882352941176471,0.8274509803921568,0.8823529411764706);
const vec3 hemiLight_s_2 = vec3(0.9686274509803922,0.8509803921568627,0.6666666666666666);
const vec3 hemiLight_s_3 = vec3(0.8784313725490196,0.5882352941176471,0.7647058823529411);

// directional light color
const vec3 dirLight = vec3(0.4);
const vec3 dirLight_2 = vec3(0.1);





const vec3 hemiLightPos_1 = vec3(1.0, 1.0, -1.0);
const vec3 hemiLightPos_2 = vec3(-1.0, -1.0, 1.0);
const vec3 hemiLightPos_3 = vec3(-1.0, 1.0, 1.0);

void main() {
  vec3 fdx = dFdx( vPosition );
  vec3 fdy = dFdy( vPosition );
  vec3 n = normalize(cross(fdx, fdy));

  float diffuse = max(0.0, dot(n, normalize(lightPosition)));

  float theta = clamp( -diffuse, 0., 1. );
  bias = 0.005 * tan( acos( theta ) );
  bias = clamp( bias, 0., 0.01 );

  // shadow gradient
  // float mask = sqrt(pow((vShadowCoord.x - 0.5) * 2.0, 2.0) + pow((vShadowCoord.y - 0.5) * 2.0, 2.0));

  // mask = 1.0 - smoothstep(0.5, 1.0, mask);

  vec3 hemiColor = vec3(0.0);
  hemiColor += calcIrradiance_hemi(n, hemiLightPos_1, hemiLight_g, hemiLight_s_1) * 0.43;
  hemiColor += calcIrradiance_hemi(n, hemiLightPos_2, hemiLight_g, hemiLight_s_2) * 0.33;
  hemiColor += calcIrradiance_hemi(n, hemiLightPos_3, hemiLight_g, hemiLight_s_3) * 0.38;
  
  vec3 dirColor = vec3(0.0);
  dirColor += calcIrradiance_dir(n, lightPosition, dirLight);

  vec3 dirLightPos2 = vec3(-lightPosition.x, -lightPosition.y, -lightPosition.z);
  dirColor += calcIrradiance_dir(n, dirLightPos2, dirLight_2);
  

  float shadow = 1.0;
  shadow *= getShadow(shadowMap, shadowMapSize, bias, shadowRadius, vShadowCoord);

  vec3 color = vColor * hemiColor;
  color += dirColor * shadow;


  gl_FragColor = vec4(color, 0.0);
}

</script>

<script id="fs-particles-shadow" type="x-shader/x-fragment">

// via: https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/packing.glsl

const float PackUpscale = 256. / 255.; // fraction -> 0..1 (including 1)
const vec3 PackFactors = vec3( 256. * 256. * 256., 256. * 256.,  256. );
const float ShiftRight8 = 1. / 256.;

vec4 packDepthToRGBA( const in float v ) {
  vec4 r = vec4( fract( v * PackFactors ), v );
  r.yzw -= r.xyz * ShiftRight8; // tidy overflow
  return r * PackUpscale;
}

void main() {

  gl_FragColor = packDepthToRGBA( gl_FragCoord.z );

}

</script>