*
{
    margin: 0;
    padding: 0;
}

html,
body
{
    overflow: hidden;
    margin: 0;
    padding: 0;
}
 

import * as THREE from "//yalicesi.oss-cn-hangzhou.aliyuncs.com/threejs/build/three.module.js";
    import { OrbitControls } from '//yalicesi.oss-cn-hangzhou.aliyuncs.com/threejs/jsm/controls/OrbitControls.js';
    // Canvas
    const canvas = document.querySelector('canvas.webgl')


    // Scene
    const scene = new THREE.Scene()
    /**
     * Lights
     */
    const directionalLight = new THREE.DirectionalLight('#ffffff', 3)
    directionalLight.castShadow = true
    directionalLight.shadow.mapSize.set(1024, 1024)
    directionalLight.shadow.camera.far = 15
    directionalLight.shadow.normalBias = 0.05
    directionalLight.position.set(0.25, 3, -2.25)
    scene.add(directionalLight)

    /**
     * Sizes
     */
    const sizes = {
      width: window.innerWidth,
      height: window.innerHeight
    }

    window.addEventListener('resize', () => {
      // Update sizes
      sizes.width = window.innerWidth
      sizes.height = window.innerHeight

      // Update camera
      camera.aspect = sizes.width / sizes.height
      camera.updateProjectionMatrix()

      // Update renderer
      renderer.setSize(sizes.width, sizes.height)
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    })

    /**
     * Camera
     */
    // Base camera
    const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height, 0.1, 10000)
    camera.position.set(0, 30, 0)
    scene.add(camera)

    // Controls
    const controls = new OrbitControls(camera, canvas)
    controls.enableDamping = true

    /**
     * Renderer
     */
    const renderer = new THREE.WebGLRenderer({
      canvas: canvas,
      antialias: true
    })
    renderer.shadowMap.enabled = true
    renderer.shadowMap.type = THREE.PCFShadowMap
    renderer.physicallyCorrectLights = true
    renderer.outputEncoding = THREE.sRGBEncoding
    renderer.toneMapping = THREE.ReinhardToneMapping
    renderer.toneMappingExposure = 1.5
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))


    const vertexShader = `
    
		varying vec3 vPosition;
		varying vec2 vUv;
		void main() { 
			vUv = uv; 
			vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
			gl_Position = projectionMatrix * mvPosition;
		}
		`;
    const fragmentShader = `
    uniform float iTime;
    uniform vec2 iResolution;
    uniform sampler2D iChannel0;
    vec2 iMouse = vec2(0.0, 0.0);
    
    
    const int NUM_STEPS = 8;
    const float PI\t \t= 3.141592;
    const float EPSILON\t= 1e-3;
    #define EPSILON_NRM (0.1 / iResolution.x)
    
    // sea
    const int ITER_GEOMETRY = 3;
    const int ITER_FRAGMENT = 5;
    const float SEA_HEIGHT = 0.6;
    const float SEA_CHOPPY = 4.0;
    const float SEA_SPEED = 0.8;
    const float SEA_FREQ = 0.16;
    const vec3 SEA_BASE = vec3(0.1,0.19,0.22);
    const vec3 SEA_WATER_COLOR = vec3(0.8,0.9,0.6);
    #define SEA_TIME (1.0 + iTime * SEA_SPEED)
    const mat2 octave_m = mat2(1.6,1.2,-1.2,1.6);
    
    // math
    mat3 fromEuler(vec3 ang) {
      vec2 a1 = vec2(sin(ang.x),cos(ang.x));
      vec2 a2 = vec2(sin(ang.y),cos(ang.y));
      vec2 a3 = vec2(sin(ang.z),cos(ang.z));
      mat3 m;
      m[0] = vec3(a1.y*a3.y+a1.x*a2.x*a3.x,a1.y*a2.x*a3.x+a3.y*a1.x,-a2.y*a3.x);
      m[1] = vec3(-a2.y*a1.x,a1.y*a2.y,a2.x);
      m[2] = vec3(a3.y*a1.x*a2.x+a1.y*a3.x,a1.x*a3.x-a1.y*a3.y*a2.x,a2.y*a3.y);
      return m;
    }
    float hash( vec2 p ) {
      float h = dot(p,vec2(127.1,311.7));
      return fract(sin(h)*43758.5453123);
    }
    float noise( in vec2 p ) {
      vec2 i = floor( p );
      vec2 f = fract( p );
      vec2 u = f*f*(3.0-2.0*f);
      return -1.0+2.0*mix( mix( hash( i + vec2(0.0,0.0) ),
                hash( i + vec2(1.0,0.0) ), u.x),
                mix( hash( i + vec2(0.0,1.0) ),
                hash( i + vec2(1.0,1.0) ), u.x), u.y);
    }
   
    // lighting
    float diffuse(vec3 n,vec3 l,float p) {
      return pow(dot(n,l) * 0.4 + 0.6,p);
    }
    float specular(vec3 n,vec3 l,vec3 e,float s) {
      float nrm = (s + 8.0) / (PI * 8.0);
      return pow(max(dot(reflect(e,n),l),0.0),s) * nrm;
    }
   
    // sky
    vec3 getSkyColor(vec3 e) {
      e.y = max(e.y,0.0);
      return vec3(pow(1.0-e.y,2.0), 1.0-e.y, 0.6+(1.0-e.y)*0.4);
    }
   
    // sea
    float sea_octave(vec2 uv, float choppy) {
      uv += noise(uv);
      vec2 wv = 1.0-abs(sin(uv));
      vec2 swv = abs(cos(uv));
      wv = mix(wv,swv,wv);
      return pow(1.0-pow(wv.x * wv.y,0.65),choppy);
    }
   
    float map(vec3 p) {
    float freq = SEA_FREQ;
    float amp = SEA_HEIGHT;
    float choppy = SEA_CHOPPY;
    vec2 uv = p.xz; uv.x *= 0.75;

    float d, h = 0.0;
    for(int i = 0; i < ITER_GEOMETRY; i++) {
        d = sea_octave((uv+SEA_TIME)*freq,choppy);
      d += sea_octave((uv-SEA_TIME)*freq,choppy);
        h += d * amp;
      uv *= octave_m; freq *= 1.9; amp *= 0.22;
        choppy = mix(choppy,1.0,0.2);
    }
    return p.y - h;
    }
   
    float map_detailed(vec3 p) {
      float freq = SEA_FREQ;
      float amp = SEA_HEIGHT;
      float choppy = SEA_CHOPPY;
      vec2 uv = p.xz; uv.x *= 0.75;

      float d, h = 0.0;
      for(int i = 0; i < ITER_FRAGMENT; i++) {
        d = sea_octave((uv+SEA_TIME)*freq,choppy);
      d += sea_octave((uv-SEA_TIME)*freq,choppy);
        h += d * amp;
      uv *= octave_m; freq *= 1.9; amp *= 0.22;
        choppy = mix(choppy,1.0,0.2);
      }
      return p.y - h;
    }
   
    vec3 getSeaColor(vec3 p, vec3 n, vec3 l, vec3 eye, vec3 dist) {
      float fresnel = clamp(1.0 - dot(n,-eye), 0.0, 1.0);
      fresnel = pow(fresnel,3.0) * 0.65;

      vec3 reflected = getSkyColor(reflect(eye,n));
      vec3 refracted = SEA_BASE + diffuse(n,l,80.0) * SEA_WATER_COLOR * 0.12;

      vec3 color = mix(refracted,reflected,fresnel);

      float atten = max(1.0 - dot(dist,dist) * 0.001, 0.0);
      color += SEA_WATER_COLOR * (p.y - SEA_HEIGHT) * 0.18 * atten;

      color += vec3(specular(n,l,eye,60.0));

      return color;
    }
   
    // tracing
    vec3 getNormal(vec3 p, float eps) {
      vec3 n;
      n.y = map_detailed(p);
      n.x = map_detailed(vec3(p.x+eps,p.y,p.z)) - n.y;
      n.z = map_detailed(vec3(p.x,p.y,p.z+eps)) - n.y;
      n.y = eps;
      return normalize(n);
    }
   
    float heightMapTracing(vec3 ori, vec3 dir, out vec3 p) {
      float tm = 0.0;
      float tx = 1000.0;
      float hx = map(ori + dir * tx);
      if(hx > 0.0){
        p = ori + dir * tx;
        return tx;
      }
      float hm = map(ori + dir * tm);
      float tmid = 0.0;
      for(int i = 0; i < NUM_STEPS; i++) {
          tmid = mix(tm,tx, hm/(hm-hx));
        p = ori + dir * tmid;
      float hmid = map(p);
      if(hmid < 0.0) {
          tx = tmid;
            hx = hmid;
        } else {
              tm = tmid;
            hm = hmid;
        }
      }
      return tmid;
    }
   
    // main
    void main() {
      float time = iTime * 0.1 + iMouse.x*0.01;
      vec2 uv = gl_FragCoord.xy / iResolution.xy;
      uv = uv * 2.0 - 1.0;
      uv.x *= iResolution.x / iResolution.y;

      // ray
      vec3 ang = vec3(sin(time*3.0)*0.1,sin(time)*0.2+0.3,time);
      vec3 ori = vec3(0.0,3.5,time*5.0);
      vec3 dir = normalize(vec3(uv.xy,-2.0)); dir.z += length(uv) * 0.15;
      dir = normalize(dir) * fromEuler(ang);

      // tracing
      vec3 p;
      heightMapTracing(ori,dir,p);
      vec3 dist = p - ori;
      vec3 n = getNormal(p, dot(dist,dist) * EPSILON_NRM);
      vec3 light = normalize(vec3(0.0,1.0,0.8));

      // color
      vec3 color = mix(
          getSkyColor(dir),
          getSeaColor(p,n,light,dir,dist),
          pow(smoothstep(0.0,-0.05,dir.y),0.3));

      // post
      gl_FragColor = vec4(pow(color,vec3(0.75)), 1.0);
    }
   

		`;
    const geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight);
    const material = new THREE.ShaderMaterial({
      uniforms: {
        iTime: {
          value: 0
        },
        iResolution: {
          value: new THREE.Vector2(1900, 1900)
        },
      },
      side: 2,
      depthWrite: false,
      transparent: true,
      vertexShader: vertexShader,
      fragmentShader: fragmentShader
    })
    const plane = new THREE.Mesh(geometry, material);
    plane.rotation.x = -Math.PI / 2;
    scene.add(plane);


    /**
     * Animate
     */
    const clock = new THREE.Clock()

    const tick = () => {
      const elapsedTime = clock.getElapsedTime()

      // Update passes
      scene.traverse((child) => {
        if (child.material) child.material.uniforms.iTime.value = elapsedTime
      })

      // Update controls
      controls.update()


      // Render
      renderer.render(scene, camera)
      // Call tick again on the next frame
      window.requestAnimationFrame(tick)
    }

    tick()