Drei js Tween js Performance Verzögerung mit vielen simultanen Tweens

Question

Lange Zeit zum ersten Mal und all das - Ich bin neu bei Three.js und Tween.js und hoffte zu sehen, ob es möglich ist, gleichzeitig zwischen Tweet 200k Three.js zu tween eine Position zum anderen. Bitte entschuldigen Sie meine austauschbare Verwendung der Wörter Pixel und Vertices.

Ich möchte 200k Pixel in einem Raster anzeigen. Ein Benutzer kann entscheiden, diese 200.000 Pixel auf verschiedene Arten zu sortieren, wodurch sie im Raster neu angeordnet werden. Ich möchte, dass alle Pixel gleichzeitig zwischen ihrer ursprünglichen Position und ihrer endgültigen Position schwanken. Momentan bewegen sich die Scheitelpunkte gleichzeitig mit Tweens, aber ich habe schwerwiegende Leistungsprobleme, sobald die Animation abgeschlossen ist. Ich hoffe, dass jemand helfen kann!

---

Für jede der 200k Eckpunkte ich mit ihnen in dieser Liste ein Tween-Objekt zugeordnet haben leben, die ich nach dem Ziehen Eckpunkte in der Szene zu erstellen,

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

Mit D3 (genau das, was ich war vertraut mit für Klick Behandlung von Ereignissen), biete ich jeden Tween mit einer neuen XY-Position zu bewegen, um

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(); 
    } 

ich die Tweens aktualisiere dann beim Rendern,

Die Animation scheint für ~ 75% des Tweens gut zu laufen und dann kommt es zu einem schleifenden, stotternden, 0 FPS, quietschenden Halt für ungefähr 30 Sekunden, sobald die Scheitelpunkte nahe ihren endgültigen Positionen sind. Ich habe versucht, die Animationszeitachse zu betrachten und es scheint, dass die ganze Zeit damit verbracht wird, die Tweens zu aktualisieren.

Gibt es irgendwie redundante Tween-Updates mit meiner d3.select-Methode? (Registriert Javascript einen Klick als 10 und versucht, den Tween 10x zu aktualisieren?) Oder kann Tween.js nicht nahtlos zwischen 200k-Positionen gleichzeitig tweenen? Vielen Dank für jede Hilfe!

Answer 1

Meine Vorgehensweise von Grund auf besteht darin, Schleifen für Vertices zu verwenden. Die Lösung ist natürlich nicht die ultimative Wahrheit.

Der Plan: set Dauer und die aktuelle Uhrzeit der Animation,

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

die Endposition einer Ecke erinnern, stellen eine zufällige Startposition für sie, den Vektor zwischen diesen Positionen finden (Richtung),

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); 
});  

dann in Animationsschleife den Ergebnisvektor hinzuzufügen, multipliziert mit Anteil von 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 Beispiel mit 250K Punkten.