Javascript WebGL动画中的性能不佳

仅仅是我还是这个WebGL动画：导致了特别差的性能？在家里用Firefox和Chrome在我的电脑上测试时，它基本上是好的，运行相当平稳，但在我用Chrome工作的电脑上，我只能在这里测试的浏览器上，动画非常滞后，似乎导致浏览器性能普遍较差

工作PC是Intel i5 3470，安装了12gb ram——我认为它应该可以轻松处理这个动画？图形卡似乎是某种蹩脚的集成英特尔一，虽然。。。这可能是问题所在吗

如果有人能够发现任何未优化/可能导致性能不佳的内容，请参阅完整的WebGL代码

var container, stats;

var camera, scene, renderer, composer;

var mesh, group1, group2, group3, light, sphere, lightMesh, quaternion, ring, ring2;

var mouseX = 0, mouseY = 0;

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

function init(){

    gl.colorMask(true, true, true, true);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.colorMask(true, true, true, false);

    scene = new THREE.Scene();

    //camera
    camera = new THREE.PerspectiveCamera( 20, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 8000 );
    camera.position.z = 2000;

    //light
    light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( .5, .5, .5 );
    scene.add( light );
    scene.fog = new THREE.Fog( 0x000000, 100, 1 );


    sphere = new THREE.SphereGeometry( 10, 16, 8, 1 );
    lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { transparent: true, color: 0x000000, opacity: 0.8 } ) );
    scene.add( lightMesh );


    var faceIndices = [ 'a', 'b', 'c', 'd' ];
    var color, f, p, n, vertexIndex,
        radius = 100,
        geometry  = new THREE.IcosahedronGeometry( radius, 3 );

    var materials = [
        new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } )

    ];

    group1 = THREE.SceneUtils.createMultiMaterialObject( geometry, materials );
    group1.position.x = 0;
    scene.add( group1 );


    ring = new THREE.TorusGeometry( 210, 1, 100, 50 );
    var ringMaterial = new THREE.MeshLambertMaterial( {transparent: true, color: 0xffffff, shading: THREE.SmoothShading, vertexColors: THREE.VertexColors, side: THREE.DoubleSide, opacity: 1.0 } );
    group2 = new THREE.Mesh( ring, ringMaterial );
    scene.add( group2 );

    ring2 = new THREE.TorusGeometry( 210, 1, 100, 50 );
    var ringMaterial = new THREE.MeshLambertMaterial( {transparent: true, color: 0xffffff, shading: THREE.SmoothShading, vertexColors: THREE.VertexColors, side: THREE.DoubleSide, opacity: 1.0 } );
    group3 = new THREE.Mesh( ring, ringMaterial );
    scene.add( group3 );

/*    ring3 = new THREE.TorusGeometry( 210, 1, 100, 50 );
    var ringMaterial = new THREE.MeshLambertMaterial( {transparent: true, color: 0xffffff, shading: THREE.SmoothShading, vertexColors: THREE.VertexColors, side: THREE.DoubleSide, opacity: 1.0} );
    group4 = new THREE.Mesh( ring, ringMaterial );
    scene.add( group4 );*/

    renderer = new THREE.WebGLRenderer( { antialias: true, alpha: false } );
    renderer.setClearColor( 0x000000, 0);
    var r = 1;
    var g = 0;
    var b = 0;
    var a = 0;
    gl.clearColor(r * a, g * a, b * a, a);
    gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ZERO, gl.ONE);
        renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio / 2);
    $('.glitch').append( renderer.domElement );

    // postprocessing

    composer = new THREE.EffectComposer( renderer );
    composer.addPass( new THREE.RenderPass( scene, camera ) );

    var effect = new THREE.ShaderPass( THREE.DotScreenShader );
    effect.uniforms[ 'scale' ].value = 150;
    composer.addPass( effect );

    var effect = new THREE.ShaderPass( THREE.RGBShiftShader );
    effect.uniforms[ 'amount' ].value = 0.05;
    effect.renderToScreen = true;

    composer.addPass( effect );
    composer.addPass( effect );

    var glitch = new THREE.GlitchPass(5000);
    glitch.renderToScreen = true;
    composer.addPass(glitch);

    //

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

    //

}

function render() {


    var timer = Date.now() * 0.0010;
    camera.lookAt( scene.position );

    /*group1.rotation.x = timer;*/
    /*group1.rotation.y = timer / 2;*/
    group1.rotation.z = (timer / 2) + 45;

    group2.rotation.x = timer;
    group2.rotation.y = 25;

    group3.rotation.y = timer;
    group3.rotation.x = 45;

/*    group4.rotation.y = timer;
    group4.rotation.x = 175;*/

/*
    group3.rotation.x = timer;
    group3.rotation.y = 25;
*/

    composer.render();

;


    /*  renderer.render( scene, camera );*/
}


function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

    requestAnimationFrame( animate );
    render();

}

init();
animate();

gl.colorMask(true, true, true, true);

---

即使是便宜的显卡也往往比英特尔显卡的性能好得多。新的有点好，但最终WebGL是为了利用专用GPU的强大功能而设计的。ThreeJS也有可能会退回到Canvas，这可能会导致相当大的性能损失。J4G：你能详细说明一下这是什么意思吗？这是否可以修复/帮助：在我的Intel HD 4000集成图形上以60 fps的速度运行，如果使用/支持的话，CPU上非常过时的Intel HD 2500速度太慢了。