// from nik lever's class
const vshader = `
// add from three js renders, shaders, shader chunk using #include for lighting
// https://github.com/mrdoob/three.js/tree/dev/src/renderers/shaders/ShaderChunk
 #include <common>
 #include <lights_pars_begin>
#include <noise>

uniform float u_time;
uniform float u_radius;
uniform vec3 u_color;

varying vec2 vUv;
varying vec3 vPosition;
varying vec3 vLightIntensity;
varying float vNoise;

void main() {
  vUv = uv;
  vec3 pos = position;
  vec3 vLightFront;
  // delta drives the amount to transform the input vertices by, set 0-1 initially
  float speed = 2.0;
  float delta = (sin(u_time * speed) + 1.0) / 2.0;
  vec3 objectNormal = delta * normal + (1.0 - delta) * normalize(position);
  
  // chunks for lighting
   #include <defaultnormal_vertex>
   #include <begin_vertex>
   #include <project_vertex>
   #include <lights_lambert_vertex>
  
  vLightIntensity = vLightFront + ambientLightColor;
  vPosition = position;
  
    
  vec3 v = normalize(position) * u_radius * 2.;
  pos = mix(position, v, delta);
  //pos = delta * position + (1.0 - delta) * v;
  
  
  //noise
  vNoise = 10.0 * -0.1 * turbulence(0.5 * normal + u_time * 0.3);
  float b = 5.0 * pnoise(0.05 * position, vec3(100.0));
  float displacement = b - 10.0 * vNoise;
  vec3 posNoise = position + normal * displacement;
  

  //gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );
  gl_Position = projectionMatrix * modelViewMatrix * vec4( posNoise + pos*0.33, 1.0 );
}
`
const fshader = `
  uniform vec2 u_mouse;
  uniform vec2 u_resolution;
  uniform vec3 u_color;
  uniform sampler2D u_tex;
  
  varying vec2 vUv;
  varying vec3 vPosition;
  // lighting calculations added from threejs to vertex shader then passed to frag shader with varying
  varying vec3 vLightIntensity;
  varying float vNoise;
  
  //	<https://www.shadertoy.com/view/4dS3Wd>
  //	By Morgan McGuire @morgan3d, http://graphicscodex.com
  //https://www.clicktorelease.com/blog/vertex-displacement-noise-3d-webgl-glsl-three-js/

  float random( vec3 pt, float seed ){
    vec3 scale = vec3( 12.9898, 78.233, 151.7182 );
    return fract( sin( dot( pt + seed, scale ) ) * 43758.5453 + seed ) ;
  }

void main()
{
  vec3 color = vec3(0.5);
  
  //gl_FragColor = vec4(color, 1.0);
  // add lights to fragment shader
  //gl_FragColor = vec4(vLightIntensity * color, 1.0);
  
  // using material2 with u_color
  //gl_FragColor = vec4(vLightIntensity * u_color, 1.0);
  
  // using noise from vertex shader
  //color = vec3(vUv * (1.0 - 2.0 * vNoise), 0.0);
  //gl_FragColor = vec4(vLightIntensity * color, 1.0);
  
  // using 3d random function to offset fragcoord and apply texture which is a gradient strip
  // lights are still on, disable all dependencies to turn off
  float r = 0.01 * random(gl_FragCoord.xyz, 0.0);
  vec2 uvNoise = vec2(0.0, 1.3 * vNoise + r);
  color = texture2D(u_tex, uvNoise).rgb;
  //gl_FragColor = texture2D(u_tex, vUv);
  gl_FragColor = vec4(vLightIntensity * color, 1.0);
}
`






const scene = new THREE.Scene();
// 3d, fov of screen, aspect ratio, near value, far value (clipping) world coordinates
const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
camera.position.z = 100;

const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const clock = new THREE.Clock();

// add lighting
// hemisphere like ambient but changes light depending on if the geometry faces the sky/ground. It is efficient. Parameters are sky color, ground color, light intensity
const ambient = new THREE.HemisphereLight(0x444444, 0x111111, 1);
// directional light can cast shadows, hemisphere cant
const light = new THREE.DirectionalLight(0xcccccc, 0.8);
light.position.set(0, 6, 2);
scene.add(ambient);
scene.add(light);
//scene.background = new THREE.Color(0xffffff);





// can use 3 parameters if height, width, depth
// or 6 with 4-6 being number of segments in x,y,z
// so 100 quads on each side (aka 200 triangles)
const geometry = new THREE.BoxGeometry( 30, 30, 30, 10, 10, 10 );
// add icosahedron
const geometry1 = new THREE.IcosahedronGeometry( 20, 4);



// add uniforms for lights
  const uniforms = THREE.UniformsUtils.merge([
    THREE.UniformsLib['common'],
    THREE.UniformsLib['lights']
  ]);
//const uniforms = {};
uniforms.u_time = { value: 0.0 };
uniforms.u_mouse = { value:{ x:0.0, y:0.0 }};
uniforms.u_resolution = { value:{ x:0, y:0 }};
uniforms.u_radius = { value: 20.0 };
uniforms.u_color = { value: new THREE.Color(0xb7ff00) };
uniforms.u_tex = { value: new THREE.TextureLoader().load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2666677/explosion.png")};

// add lights to material
const material = new THREE.ShaderMaterial( {
  uniforms: uniforms,
  vertexShader: vshader,
  fragmentShader: fshader,
  wireframe: false,
  lights: true
} );
//default material for three
const material1 = new THREE.MeshStandardMaterial({
  color: 0xb7ff00,
  wireframe: true
});
// material for icosahedron
const material2 = new THREE.ShaderMaterial( {
  uniforms: uniforms,
  vertexShader: vshader,
  fragmentShader: fshader,
  wireframe: false,
  lights: true
} );

const ball = new THREE.Mesh( geometry1, material2 );
scene.add( ball );

const controls = new THREE.OrbitControls(camera, renderer.domElement);

onWindowResize();
if ('ontouchstart' in window){
  document.addEventListener('touchmove', move);
}else{
  window.addEventListener( 'resize', onWindowResize, false );
  document.addEventListener('mousemove', move);
}

function move(evt){
  uniforms.u_mouse.value.x = (evt.touches) ? evt.touches[0].clientX : evt.clientX;
  uniforms.u_mouse.value.y = (evt.touches) ? evt.touches[0].clientY : evt.clientY;
}

animate();

function onWindowResize( event ) {
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
  uniforms.u_resolution.value.x = window.innerWidth;
  uniforms.u_resolution.value.y = window.innerHeight;
}

function animate() {
  requestAnimationFrame( animate );
  uniforms.u_time.value += clock.getDelta();
  renderer.render( scene, camera );
}