Why is three.js low FPS?

Question

JavaScript

Hello, I started to learn webGL in particular three.js and ran into a problem!
When adding LensFlares, fps immediately drops to 30, how can I fix this?
Here is a link to the demo
smaple.ru/earth
The entire script is in the main.js file.
If there are knowledgeable people, please help)
I also attach the code from main.js here

(function () {

  // INIT CONTAINER
  var webglEl = document.getElementById('container');
  // 

  // DETECT webGL
  if (!Detector.webgl) {
    Detector.addGetWebGLMessage(webglEl);
    return;
  }
  // 

  // vars
  var width = window.innerWidth,
    height = window.innerHeight,
    mouseX = 0, mouseY = 0,
    windowHalfX = window.innerWidth / 2,
    windowHalfY = window.innerHeight / 2,
    width  = window.innerWidth,
    height = window.innerHeight,
    radius   = 0.5,
    segments = 32,
    rotation = 6,
    stats;
  
  // Var Scene
  var scene = new THREE.Scene();
  //

  // 

  // STATS
  stats = new Stats();
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.bottom = '0px';
  stats.domElement.style.zIndex = 100;
  container.appendChild( stats.domElement );
  
  // RESIZE FUNCTION
  function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    webglRenderer.setSize( window.innerWidth, window.innerHeight );
  }

  window.addEventListener( 'resize', onWindowResize, false );
  // 


  // Var Camera
  var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
  camera.position.z = 2;
  // 

  // Var Render
  webglRenderer = new THREE.WebGLRenderer({antialias: true, alpha: true });
  webglRenderer.setSize(width, height);
  webglRenderer.domElement.style.position = "relative";
  webglRenderer.setClearColor( 0x000000 );
  webglEl.appendChild(webglRenderer.domElement);
  // 

  // Ambient Light
  scene.add(new THREE.AmbientLight(0x070707));
  // 

  // DirectionalLight
  var light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(120,10,80);
  light.shadowCameraVisible = true;
  scene.add(light);
  // 

  // Earth Sphere
    var sphere = createSphere(radius, segments);
  sphere.rotation.y = rotation; 
  scene.add(sphere);
  // 

  // scene.add(sun);
  var transparentmaterial = new THREE.MeshLambertMaterial( {
    color: 0xfff,
    shading: THREE.SmoothShading,
    opacity: .6, transparent: true } );
  transparentmaterial.depthWrite = false;
  var sphereGeo = new THREE.SphereGeometry( 1, 5, 5 );
  var sun = new THREE.Mesh( sphereGeo,transparentmaterial);
  sun.position.x = 65; 
  sun.position.z = 50; 
  sun.position.y = 0; 
  scene.add(sun);
  // 

  // Clouds Sphere
    var clouds = createClouds(radius, segments);
  clouds.rotation.y = rotation;
  scene.add(clouds);
  // 

  // Stars BG
  var stars = createStars(90, 64);
  scene.add(stars);
  // 

  // OrbitControls
  var controls = new THREE.OrbitControls(camera);
  controls.enableDamping = true;
  controls.dampingFactor = 0.25;
  controls.enableZoom = true;
  controls.enablePan = false;
  controls.rotateSpeed = 0.1;
  controls.zoomSpeed = 0.3;
    controls.panSpeed = 0.4;
  controls.minDistance = 1.3;
  controls.maxDistance = 2;
  // 

  // lens flares
  var textureLoader = new THREE.TextureLoader();
  var textureFlare0 = textureLoader.load(	"flare1.jpg" );
  var textureFlare2 = textureLoader.load( "flare2.jpg" );
  var textureFlare3 = textureLoader.load( "flare3.jpg" );
  var textureFlare4 = textureLoader.load( "flare4.jpg" );
  var textureFlare5 = textureLoader.load( "flare5.jpg" );
  addLight( 22, 0.9, 0.5, 5000, 0, -5000 );
  addLight( 22, 0.8, 0.5,    0, 0, -5000 );
  addLight( 22, 0.5, 0.9, 5000, 5000, -5000 );
  function addLight( h, s, l, x, y, z ) {
    var light = new THREE.PointLight( 0xffffff, 0.5, 1000 );
    light.color.setHSL( h, s, l );
    light.position.set( x, y, z );
    scene.add( light );
    var flareColor = new THREE.Color( 0xffffff );
    flareColor.setHSL( h, s, l + 0.5 );
    var lensFlare = new THREE.LensFlare( textureFlare0, 240, 0.0, THREE.AdditiveBlending, flareColor );
    lensFlare.add( textureFlare2, 20, 0, THREE.AdditiveBlending );
    lensFlare.add( textureFlare5, 312, 0, THREE.AdditiveBlending );
    // lensFlare.add( textureFlare3, 22, 0.0, THREE.AdditiveBlending );
    lensFlare.add( textureFlare3, 160, 0.6, THREE.AdditiveBlending );
    lensFlare.add( textureFlare4, 270, 0.3, THREE.AdditiveBlending );
    // lensFlare.add( textureFlare3, 120, 0.7, THREE.AdditiveBlending );
    // lensFlare.add( textureFlare2, 870, 0.9, THREE.AdditiveBlending );
    lensFlare.customUpdateCallback = lensFlareUpdateCallback;
    lensFlare.position.copy( sun.position );
    scene.add( lensFlare );
  }

  // RENDERER

  render();

  function render() {
    requestAnimationFrame(render);
    controls.update();
    stats.update();
    sphere.rotation.y += 0.0003;
    clouds.rotation.y += 0.0005;
    // clouds.rotation.z += 0.0005;	
    webglRenderer.render(scene, camera);
  }

  // FlareUpdate
  function lensFlareUpdateCallback( object ) {
    var f, fl = object.lensFlares.length;
    var flare;
    var vecX = -object.positionScreen.x * 2;
    var vecY = -object.positionScreen.y * 2;
    for( f = 0; f < fl; f++ ) {
      flare = object.lensFlares[ f ];
      flare.x = object.positionScreen.x + vecX * flare.distance;
      flare.y = object.positionScreen.y + vecY * flare.distance;
      flare.rotation = 0;
    }
    object.lensFlares[ 2 ].y += 0.025;
    object.lensFlares[ 3 ].rotation = object.positionScreen.x * 0.5 + THREE.Math.degToRad( 45 );
  }
  //

  var loader = new THREE.TextureLoader();

  // Creating Functions
  function createSphere(radius, segments) {
    return new THREE.Mesh(
      new THREE.SphereGeometry(radius, segments, segments),
      new THREE.MeshPhongMaterial({
        map:         THREE.ImageUtils.loadTexture('earth.jpg'),
        bumpMap:     THREE.ImageUtils.loadTexture('bump.jpg'),
        bumpScale:   0.001,
        specularMap: THREE.ImageUtils.loadTexture('specular.jpg'),
        specular:    new THREE.Color('#343434'),				
      })
    );
  }

  function createSun(radius, segments) {
    return new THREE.Mesh(
      new THREE.SphereGeometry(5, segments, segments),
      new THREE.MeshPhongMaterial({
        map:         THREE.ImageUtils.loadTexture('sun.png'),
        emissive: 0xffffff,
        transparent: false,		
      })
    );
  }
  
  function createClouds(radius, segments) {
    return new THREE.Mesh(
      new THREE.SphereGeometry(radius + 0.003, segments, segments),			
      new THREE.MeshPhongMaterial({
        map:         THREE.ImageUtils.loadTexture('clouds.png'),
        transparent: true
      })
    );		
  }

  function createStars(radius, segments) {
    return new THREE.Mesh(
      new THREE.SphereGeometry(radius, segments, segments), 
      new THREE.MeshBasicMaterial({
        map:  THREE.ImageUtils.loadTexture('galaxy_starfield.png'), 
        side: THREE.BackSide,
        transparent: true,
        opacity: 0.3
      })
    );
  }
  // 

  
}());

Answer 1

Judging by the chrome profiler, most likely the application is intensively using the video card, perhaps the problem is in the unoptimized LensFlares shader.