WebGL Stutter on Chrome

by dustinkerstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>

CSS

body {
  margin: 0;
  padding: 0;
}

JavaScript

// Based on https://github.com/mrdoob/three.js/blob/master/examples/misc_controls_orbit.html
// When testing on Safari, make sure to click into the result iFrame or rendering will be limited to 30fps (due to power saving code)
// See here for a video of what the stutter looks like in case you can't replicate - https://www.dropbox.com/s/xcsjtly06i76lt6/ChromeFPS.mov?dl=0 (make sure to download first)

var camera, scene, renderer, lon = 0, lat = 0, phi = 0, theta = 0;
        
init();
animate();

function init() {

  scene = new THREE.Scene();
  scene.background = new THREE.Color( 0xcccccc );
  scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
  camera.position.set( 400, 200, 0 );
	camera.target = new THREE.Vector3( 0, 0, 0 );
  // world

  var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
  var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );

  for ( var i = 0; i < 500; i ++ ) {

    var mesh = new THREE.Mesh( geometry, material );
    mesh.position.x = Math.random() * 1600 - 800;
    mesh.position.y = 0;
    mesh.position.z = Math.random() * 1600 - 800;
    mesh.updateMatrix();
    mesh.matrixAutoUpdate = false;
    scene.add( mesh );

  }

  // lights
  
  var light = new THREE.DirectionalLight( 0xffffff );
  light.position.set( 1, 1, 1 );
  scene.add( light );

  var light = new THREE.DirectionalLight( 0x002288 );
  light.position.set( - 1, - 1, - 1 );
  scene.add( light );

  var light = new THREE.AmbientLight( 0x222222 );
  scene.add( light );

  //

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

}

function onWindowResize() {

  camera.aspect = window.innerWidth /...