Greetings to all, I am new to the world of Three.js and Tween.js and I have a question regarding the possibility of simultaneously tweening 200k vertices from one position to another using Three.js. Apologies in advance if I use the terms pixels and vertices interchangeably.
My goal is to showcase 200k pixels arranged in a grid that can be sorted by the user in various ways, causing them to rearrange accordingly. I want all these pixels to smoothly transition from their initial positions to the final ones simultaneously. Currently, I'm facing performance issues as the animation nears completion despite having the vertices moving with tweens. Any assistance would be greatly appreciated!
For every vertex among those 200k, I have associated a tween object which resides in a list created after drawing the vertices on 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 for handling click events (simply because it's what I was familiar with), I assign each tween a new XY position to move towards,
d3.select("#key").on("click", function() {
for (i = 0; i < dataSetLen; i ++){
var newX = desiredXPostionList[i]; //get new X from a presorted list
var newY = desiredYPositionList[i]; //get new Y from a presorted list
tweenList[i].to( {
x: newX,
y: newY
}, 2500)
.start();
}
The tweens are then updated during rendering,
function render() {
scene.children[0].geometry.verticesNeedUpdate = true;
TWEEN.update();
renderer.render( scene, camera );
}
The animation runs smoothly up until about 75% completion, at which point it slows down significantly, almost freezing for around 30 seconds when the vertices are close to their final positions. Upon inspecting the animation timeline, it seems that most of the time is spent updating the tweens. Could I potentially be triggering unnecessary tween updates through my d3.select method? (Is JavaScript registering one click as multiple updates?) Or is it simply too challenging for tween.js to handle 200k simultaneous tweens? Thank you in advance for any guidance!