import lilGui from '//cdn.skypack.dev/lil-gui';

console.clear();

let camera, scene, renderer, controls, mesh, ground;

const GLSLUtils = `
    float lerp(float x, float y, float a) {
      return (1.0 - a) * x + a * y;
    }

    vec3 lerp(vec3 x, vec3 y, float a) {
      return (1.0 - a) * x + a * y;
    }

    vec4 lerp(vec4 x, vec4 y, float a) {
      return (1.0 - a) * x + a * y;
    }
`;

const GLSLToon2Lights = `
  struct Toon2Material {
    vec3 diffuseColor;
  };

  void RE_Direct(const in IncidentLight directLight, const in GeometricContext geometry, const in Toon2Material material, inout ReflectedLight reflectedLight) {
    float dotLight = dot(geometry.normal, directLight.direction);
    vec2 dotNormal = vec2(dotLight * 0.5 + 0.5, 0.0);

    reflectedLight.directDiffuse += dotNormal.x * (RECIPROCAL_PI * material.diffuseColor);
  }

  void RE_IndirectDiffuse(const in vec3 irradiance, const in GeometricContext geometry, const in Toon2Material material, inout ReflectedLight reflectedLight) {
    reflectedLight.indirectDiffuse += irradiance * (RECIPROCAL_PI * material.diffuseColor);
  }

  #define RE_Direct RE_Direct
  #define RE_IndirectDiffuse RE_IndirectDiffuse
`;

const createMaterial = () => {
  const material = new THREE.ShaderMaterial({
    uniforms: {
      ...THREE.UniformsLib.fog,
      ...THREE.UniformsLib.lights,
      fAlpha: {
        value: Math.PI
      },
      fBeta: {
        value: 0.0
      },
      vResolution: {
        value: new THREE.Vector2(window.innerWidth, window.innerHeight)
      },
      fMaskAlpha: {
        value: 10000.0
      },
      fMaskBeta: {
        value: 100.0
      },
      fMaskThreshold: {
        value: 50.0
      },
      fDebug: {
        value: 1.0
      },
      fDiffuseTexture: {
        value: new THREE.TextureLoader().load('//cdn.wtlstudio.com/sample.wtlstudio.com/49c8d4a8-1d2d-4013-a77e-f42cd50f1b10.png', texture => {
          texture.wrapT = THREE.RepeatWrapping;
          texture.wrapS = THREE.RepeatWrapping;
        })
      }
    },
    vertexShader: `
      #include <common>
      #include <shadowmap_pars_vertex>
      
      ${GLSLUtils}
    
      uniform float fAlpha;
      uniform float fDebug;
    
      varying vec3 vPosition;
      varying vec3 vNormal;
      varying vec2 vUv;
      varying vec3 vViewPosition;
      varying float fDelta;
      
      void main() {
        float fAngle = position.x * fAlpha;
        float fHalfAngle = fAngle * .5;
        float fElevationRadius = sin(PI * position.y);

        fDelta = fAlpha / PI;
        
        vec4 vPlanet = vec4(
          position.x,
          position.y,
          position.z,
          1.0
        );

        vPlanet.x = lerp(position.x, sin(fHalfAngle) * fElevationRadius, fDelta);
        vPlanet.z = lerp(position.z, cos(fHalfAngle) * fElevationRadius, fDelta);
        vPlanet.y = lerp(position.y, cos(PI * position.y), fDelta);
      
        vPosition = vPlanet.xyz;
        vNormal = lerp(vec3(0.0, 1.0, 0.0), normalize(vPlanet.xyz), fDelta);
        vec3 transformedNormal = vNormal;
        vec3 transformed = vPosition;

        vec4 mvPosition = modelViewMatrix * vPlanet;
        
        vViewPosition = -mvPosition.xyz;
        gl_Position = projectionMatrix * mvPosition;
        
        #include <worldpos_vertex>
        #include <shadowmap_vertex>
      }
    `,
    fragmentShader: `
      #include <common>
      #include <packing>
      #include <lights_pars_begin>
      #include <shadowmap_pars_fragment>

      uniform vec2 vResolution;
      uniform float fDebug;
      uniform sampler2D fDiffuseTexture;
    
      varying vec3 vPosition;
      varying vec3 vNormal;
      varying vec3 vViewPosition;
      varying float fDelta;
      varying vec2 vUv;

      ${GLSLUtils}
      ${GLSLToon2Lights}

      vec3 vFlatColor = vec3(0.49, 0.01, 0.05);
      vec3 vShadowColor = vec3(0.19, 0.01, 0.05);
      // vec3 vFlatColor = vec3(0.49, 0.56, 0.49);
      // vec3 vShadowColor = vec3(0.50, 0.45, 0.44);
      
      float fFresnelSharpness = .05;
      float fFresnelGlowSharpness = .05;

      void main() {
        ReflectedLight reflectedLight = ReflectedLight(vec3(0.0), vec3(0.0), vec3(0.0), vec3(0.0));

        vec2 viewCoord = vec2(gl_FragCoord.x / vResolution.x, gl_FragCoord.y / vResolution.y);

        vec3 normal = vNormal;
        vec3 vColor = vec3(0.0, 0.0, 0.0);
        float fDistance = length(vPosition.xy);
        
        vColor += vFlatColor;

        Toon2Material material;
        material.diffuseColor = vec3(1.0);

        #include <lights_fragment_begin>
        #include <lights_fragment_maps>
        #include <lights_fragment_end>
        
        vec3 vTotalIrradiance = saturate(reflectedLight.indirectDiffuse + reflectedLight.directDiffuse);

        float fShadowMask = length(reflectedLight.directDiffuse) < 0.5 ? 0.0 : 1.0;
        float fFresnelMask = dot(vNormal, normalize(cameraPosition - vPosition));
        float fInvertedFresnelMark = 1.0 - fFresnelMask;
        float fDirectMask = saturate(length(reflectedLight.directDiffuse / .01) - 75.);

        vec3 triplanarNormal = abs(vNormal);
        vec3 triplanarWeights = abs(vNormal) / (
          triplanarNormal.x + triplanarNormal.y + triplanarNormal.z
        );
        
        vec4 vDiffuseTextureXZ = texture2D(fDiffuseTexture, vPosition.xz);
        vec4 vDiffuseTextureXY = texture2D(fDiffuseTexture, vPosition.xy);
        vec4 vDiffuseTextureYZ = texture2D(fDiffuseTexture, vPosition.yz);
        vec4 vDiffuseTexture = (
          vDiffuseTextureXZ * triplanarWeights.x +
          vDiffuseTextureXY * triplanarWeights.y +
          vDiffuseTextureYZ * triplanarWeights.z
        );
        
        gl_FragColor = vDiffuseTexture;
        
        vec3 vMaskedIrradiance = vTotalIrradiance * vec3( saturate(fInvertedFresnelMark / fFresnelGlowSharpness - 12.));
        vMaskedIrradiance.xyz += vec3(fDirectMask);
        vMaskedIrradiance = saturate(vMaskedIrradiance);
        
        gl_FragColor.xyz *= saturate(fShadowMask) * 0.2 + 0.8;

        gl_FragColor.xyz += 1. * vTotalIrradiance * vMaskedIrradiance * RECIPROCAL_PI;
        
        gl_FragColor.xyz *= vec3(saturate(fFresnelMask / fFresnelSharpness - 4.0));

        gl_FragColor = lerp(vec4(vFlatColor, 1.0), gl_FragColor, fDelta);
      }
    `,
    side: THREE.DoubleSide,
    lights: true
  });
  
  const materialUi = new lilGui();
  materialUi.add(material.uniforms.fAlpha, 'value', 0.0, Math.PI).name('Alpha');
  materialUi.add(material.uniforms.fDebug, 'value', -2.0, 2.0).name('Debug');
  
  return material;
};

const createWorld = () => {
  mesh = new THREE.Mesh(
    new THREE.PlaneBufferGeometry(2.0, 2.0, 100.0, 100.0),
    createMaterial()
  );
  mesh.castShadow = true;
  
  scene.add(mesh);
  
  camera.lookAt(mesh.position);
  
  ground = new THREE.Mesh(
    new THREE.CylinderGeometry(15.0, 15.0, 0.1, 32),
    new THREE.MeshPhongMaterial({ color: 0x333322 })
  );
  ground.position.y = -2.0;
  ground.receiveShadow = true;
  scene.add(ground);
};

const init = () => {
  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000.0);
  camera.position.set(-5, 5, 7);

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x151122);

  scene.add(new THREE.HemisphereLight(0xffffcc, 0x000033, 1.0));
  
  const light1 = new THREE.PointLight(0x0000ff, 1.0);
  light1.position.set(2.0, 2.0, 2.0);
  light1.castShadow = true;
  scene.add(light1);
  
  const light2 = new THREE.DirectionalLight(0xff0000, 0.5);
  light2.position.set(-2.0, 2.0, -2.0);
  light1.castShadow = true;
  scene.add(light2);

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;

  document.body.appendChild(renderer.domElement);
  
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.maxPolarAngle = Math.PI / 2.0;
  
  createWorld();
}

const animate = () => {
  requestAnimationFrame(animate);
  
  controls.update();

  renderer.render(scene, camera); 
}

init();
animate();