0

Is it just me or does this WebGL animation: http://samnorris.co.nz/work/portfoliowip/ result in particularly poor performance? It's mostly fine when testing it on my computer at home in Firefox and Chrome and runs reasonably smoothly, but on my computer at work (in Chrome, only browser I can test here) the animation is very laggy and seems to be causing generally poor browser performance..

Work PC is Intel i5 3470, with 12gb ram installed - which I would have thought should handle this animation without too much difficulty? Graphics card appears to be some kind of crappy integrated Intel one though... could that be the problem?

Here is the entire WebGL code if anyone might be able to spot anything that is unoptimized/could be leading to poor performance?

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);
FuManchuNZ
  • 185
  • 2
  • 16
  • Even a cheap graphics card will often give far better performance than Intel graphics. They newer ones are a bit better, but ultimately WebGL is designed to take advantage of the power of a dedicated GPU. – Jack Guy Aug 31 '15 at 23:37
  • It's also possible that ThreeJS might be falling back to Canvas which will likely result in a pretty big performance hit. – Jack Guy Aug 31 '15 at 23:39
  • J4G: Could you elaborate upon what you mean by this? Is that something this might fix/help with: http://stackoverflow.com/questions/9899807/three-js-detect-webgl-support-and-fallback-to-regular-canvas – FuManchuNZ Sep 01 '15 at 00:07
  • Runs at 60 fps on my Intel HD 4000 integrated graphics, the quite outdated Intel HD 2500 on your CPU is just too slow, if its even utilized/supported. – LJᛃ Sep 01 '15 at 02:58

0 Answers0