Three js tween js performance lag with many simultaneous tweens
<p>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.</p>

<p>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!</p>

<hr>

<p>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,</p>

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

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

<pre><code>d3.select("#key").on("click", function() {
    for (i = 0; i &lt; 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();
    }
</code></pre>

<p>I then update the tweens while rendering,</p>

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

<p>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.</p>

<p>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!</p>