need to make a transparency for all waves noise deformation gradients, so it can look as a real transparent reflectorious wave of an ocean.: <html>

<head>
  <style>
    body {
      margin: 0;
    }

    canvas {
      display: block;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.152.2/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js"></script>
</head>

<body>
  <script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    const width = 500;
    const height = 100;
    const widthSegments = 32;
    const heightSegments = 16;
    const geometry = new THREE.PlaneBufferGeometry(width, height, widthSegments, heightSegments);
    const positions = geometry.getAttribute("position").array;
    const simplex = new SimplexNoise(Math.random());

    function colorGradient(height) {
      const deepWaterColor = new THREE.Color(0x4169E1);
      const shallowWaterColor = new THREE.Color(0x003366);
      const color = deepWaterColor.lerp(shallowWaterColor, Math.min(height / 5, 1));
      color.lerp(new THREE.Color(0x00008B), Math.max(0, (height - 0.1) / 3));
      return color;
    }

    function generateTerrain(positions, scale = 0.1, elevation = 0.1) {
      const colors = new Float32Array(positions.length);
      geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
      for (let i = 0; i < positions.length; i += 3) {
        const nx = positions[i] * scale;
        const ny = positions[i + 1] * scale;
        const height = (simplex.noise2D(nx, ny) + 1) * 0.1 * elevation;
        positions[i + 2] = height;
        const vertexColor = colorGradient(height);
        colors[i] = vertexColor.r;
        colors[i + 1] = vertexColor.g;
        colors[i + 2] = vertexColor.b;
      }
      geometry.computeVertexNormals();
    }
    generateTerrain(positions);
    const material = new THREE.MeshPhongMaterial({
      vertexColors: false,
      side: THREE.DoubleSide,
      transparent: true,
      opacity: 0.8,
    });
    const terrain = new THREE.Mesh(geometry, material);
    terrain.rotation.x = Math.PI / 2;
    scene.add(terrain);
    const light = new THREE.DirectionalLight(0x788B9B, 1);
    light.position.set(1, 1, 1);
    scene.add(light);
    const ambientLight = new THREE.AmbientLight(0x008ECC);
    scene.add(ambientLight);
    camera.position.z = 50;
    camera.position.y = 5;
    camera.rotation.x = -Math.PI / 10;
    let clock = new THREE.Clock();

    function updatePositions() {
      const elapsedTime = clock.getElapsedTime();
      const colors = geometry.getAttribute("color").array;
      for (let i = 0; i < positions.length; i += 3) {
        const nx = positions[i] * 0.1 + elapsedTime * 0.1;
        const ny = positions[i + 1] * 0.1 + elapsedTime * 0.1;
        const height = (simplex.noise2D(nx, ny) + 1) * 0.5 * 5;
        positions[i + 2] = height;
        const vertexColor = colorGradient(height);
        colors[i] = vertexColor.r;
        colors[i + 1] = vertexColor.g;
        colors[i + 2] = vertexColor.b;
      }
      geometry.attributes.position.needsUpdate = true;
      geometry.attributes.color.needsUpdate = true;
      geometry.computeVertexNormals();
    }
    const skyColor = new THREE.Color(0xffffff);

function createSkyGradient() {
  const skyGeometry = new THREE.SphereBufferGeometry(250, 128, 128);

  const skyMaterial = new THREE.MeshBasicMaterial({
    vertexColors: true,
    side: THREE.BackSide,
  });

  const cloudColorTop = new THREE.Color(0x000000);
  const cloudColorBottom = new THREE.Color(0xffffff);

  const colors = [];

  for (let i = 0; i < skyGeometry.attributes.position.count; i++) {
    const color = new THREE.Color(0xffffff);

    const point = new THREE.Vector3();
    point.fromBufferAttribute(skyGeometry.attributes.position, i);

    const distance = point.distanceTo(new THREE.Vector3(0, 0, 0));
    const percent = distance / (skyGeometry.parameters.radius * 1.2);

    color.lerpColors(skyColor, skyColor, percent);

    // Interpolate cloud color based on distance from center of sphere
    const cloudColor = new THREE.Color(0xffffff);
    const cloudPercent = distance / skyGeometry.parameters.radius;
    cloudColor.lerpColors(cloudColorBottom, cloudColorTop, cloudPercent);

    // Add randomized noise to cloud color to make it more organic
    const noise = (Math.random() * 0.1) - 0.5;
    cloudColor.offsetHSL(0, 0, noise);

    // Apply cloud color to sky color based on randomized alpha value
    const alpha = Math.random() * 0.06;
    const finalColor = new THREE.Color();
    finalColor.lerpColors(color, cloudColor, alpha);

    colors.push(finalColor.r, finalColor.g, finalColor.b);
  }

  skyGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

  const skyMesh = new THREE.Mesh(skyGeometry, skyMaterial);
  scene.add(skyMesh);

  return skyMesh;
}

const sky = createSkyGradient();
scene.add(sky);
    const sunSphere = new THREE.SphereGeometry(128, 16, 16);
const sunMaterial = new THREE.MeshBasicMaterial({
    color: 0xeeffaa,
    transparent: false,
    opacity: 0.999,
    blending: THREE.CustomBlending, // Add this line
    blendSrc: THREE.SrcAlphaFactor,
    blendDst: THREE.OneMinusSrcColorFactor,
    depthTest: true,
});
    const sun = new THREE.Mesh(sunSphere, sunMaterial);

function setSunPosition(dayProgress) {
  const x = 0;
  const y = 300 - (dayProgress * 500);
  const z = -500;
  sun.position.set(x, y, z);
}
    const sunLight = new THREE.PointLight(0xffdd00, 1);

    function addSunToScene(state) {
      if (state) {
        scene.add(sun);
        scene.add(sunLight);
      } else {
        scene.remove(sun);
        scene.remove(sunLight);
      }
    }
    let sunVisible = true;
    addSunToScene(true);

    function updateSun() {
      const elapsedTime = clock.getElapsedTime();
      const dayProgress = elapsedTime % 10 / 10;
      setSunPosition(dayProgress);
      sunLight.position.copy(sun.position);
    }

    function animate() {
      requestAnimationFrame(animate);
      updatePositions();
      updateSun();
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>

</html>