Water shader jaggering / glitching

Questions
, , ,
1

As soon I boot up my project my water shader(straight from the threeJS examples) starts flickering and glitching. I haven’t touched the shader code, I’ve only manipulated some parameters in my main script.

// WATER CODE //

  const waterGeometry = new THREE.PlaneGeometry(10000, 10000);
  let movementSpeed = -1;
  //console.log(waterGeometry);
  water = new Water(waterGeometry, {
    color: "#525c60",
    scale: params.scale,
    flowDirection: new THREE.Vector2(params.flowX, params.flowY),
    textureWidth: 512,
    textureHeight: 512,
    side: THREE.FrontSide
  });

  water.position.y = 0.2;
  water.rotation.x = Math.PI * -0.5;
  //water.scale.y = 5;
  water.material.fog = false;
  scene.add(water);

  water2 = new Water(waterGeometry, {
    color: params.color,
    scale: params.scale,
    flowDirection: new THREE.Vector2(params.flowX, params.flowY * -1),
    textureWidth: 512,
    textureHeight: 512,
    clipBias: 0.07,
    side: THREE.FrontSide
  });

  water2.position.y = 0.15;
  water2.rotation.x = Math.PI * 0.5;
  scene.add(water2);

  // WATER END //

But that is all. Nothing over the top.

This is what the issue looks like

Is this a camera clipping issue? Or is it some weird type of z-fighting?
As soon as I adjust the camera(move it around with the orbitController) it stops jaggering/glitching. It only happens when I load up the site and it keeps glitching unless I move the camera.

How do I get rid of this annoying behaviour?

Thanks in advance for any insights