Three js tween js performance lag with many simultaneous tweens

Question

Long time first time and all that - I'm new to Three.js and Tween.js and was hoping to see if it's possible to simultaneously tween 200k Three.js vertices from one position to another. Please excuse my interchangeable use of the words pixels and vertices.

I would like to display 200k pixels in a grid. A user can decide to sort these 200k pixels in a number of ways causing them to rearrange in the grid. I would like all pixels to simultaneously tween between their initial position and final position. Currently, I have the vertices simultaneously moving with tweens but I'm having severe performance issues once the animation nears completion. I hope someone can help!

For each of the 200k vertices I have a tween object associated with them living in this list that I create after drawing vertices in the scene,

var scPartVerts = scene.children[0].geometry.vertices;
var dataSetLen = 200000;
tweenList = []
for (i=0; i<dataSetLen; i ++){
    tweenList.push(new TWEEN.Tween(scPartVerts[i]))
}

Using D3 (just what I was familiar with for handling click events), I provide each tween with a new XY position to move to

d3.select("#key").on("click", function() {
    for (i = 0; i < dataSetLen; i ++){
        var newX = desiredXPostionList[i];      //grab the new X from presorted list
        var newY = desiredYPositionList[i];     //grab the new Y from presorted list
        tweenList[i].to( {
                x: newX,
                y: newY
            }, 2500)
            .start();
    }

I then update the tweens while rendering,

function render() {
    scene.children[0].geometry.verticesNeedUpdate = true;
    TWEEN.update();
    renderer.render( scene, camera );
}

The animation appears to run fine for ~75% of the tween and then it comes to a grinding, stuttering, 0 FPS, screeching halt for around 30 seconds once the vertices are close to their final positions. I tried to look at the animation timeline and it appears that all of that time is being dumped into updating the tweens.

Am I somehow supplying redundant tween updates using my d3.select method? (Does javascript register one click as 10 and try to update the tween 10x?) Or can tween.js not smoothly tween 200k positions simultaneously? Thank you so much for any help!

prisoner849 prisoner849 · Accepted Answer · 2016-11-15T10:35:57

My approach from scratch is to use loops for vertices. The solution is not the ultimate truth, of course.

The plan: set duration and current time of animation,

var duration = 10; // seconds
var currentTime = 10;
var clock = new THREE.Clock();

remember the end position of a vertex, set a random start position for it, find the vector between those positions (direction),

fieldGeom = new THREE.PlaneGeometry(500, 500, 500, 500);
fieldGeom.vertices.forEach(function(vertex){
    vertex.startPosition = new THREE.Vector3(THREE.Math.randInt(-500,500),THREE.Math.randInt(-500,500),THREE.Math.randInt(-500,500));
    vertex.endPosition = vertex.clone();
    vertex.direction = vertex.startPosition.clone().sub(vertex.endPosition);
    vertex.copy(vertex.startPosition);
});

then in animation loop add the result vector, multiplied with proportion of currentTime / duration

  var delta = clock.getDelta();
  currentTime -= delta;
  if (currentTime < 0) currentTime = 0;

  fieldGeom.vertices.forEach(function(vertex){
    vertex.addVectors(vertex.endPosition,vertex.direction.clone().multiplyScalar(currentTime / duration));
  });
  fieldGeom.verticesNeedUpdate = true;

jsfiddle example with 250K points.

Three js tween js performance lag with many simultaneous tweens

1 Answers