FPS dropping when near water shader

Questions
, , ,
1

So, I’m importing the water example

import { Water } from ‘three/addons/objects/Water.js’;

and putting it into my game

const waterGeometry = new THREE.PlaneGeometry( 60, 60 );

const water = new Water(
				waterGeometry,
				{
					textureWidth: 256,
					textureHeight: 256,
					waterNormals: new THREE.TextureLoader().load( './Data/Textures/water_normals.jpg', function ( texture ) {
						texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
					} ),
					sunDirection: new THREE.Vector3(),
					sunColor: 0xffffff,
					waterColor: 0x0099ff,
					distortionScale: 1.0,
					fog: scene.fog !== undefined
				}
			);

			water.rotation.x = - Math.PI / 2;

      water.position.set(64.16569756202456, 7.080033980145223,-92.76554675397212)
      scene.add( water );

Everything is rendered okay, but my issue is, the FPS is dropping by the proximity of the player or the camera with the water.

image
image1306×631 47.7 KB

I thought this could be due to the water reflexion and all, but couldn’t find a way of turning it off. Can someone help me with this?

2

Water draw full scene again. Addd stats.js to see FPS and milliseconds