三js補間js性能滯後於許多同時補間

長時間第一次和所有 - 我是Three.js和Tween.js的新手，並希望看到是否有可能同時補間200k Three.js頂點一個到另一個的位置。請原諒我可以互換使用單詞像素和頂點。三js補間js性能滯後於許多同時補間

我想在網格中顯示200k像素。用戶可以決定以多種方式對這些200k像素進行排序，使它們在網格中重新排列。我希望所有像素能夠在它們的初始位置和最終位置之間同時補間。目前，我的頂點同時和補間一起移動，但是一旦動畫接近完成，我就會遇到嚴重的性能問題。我希望有人能幫幫忙！

對於每一個200K的頂點我與他們生活在這個列表相關聯在補對象，我在現場繪製頂點後創建的，

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

使用D3（正是我所熟悉的與用於處理點擊事件），我提供一個新的XY位置的每個補間移動到

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

我再更新充斥同時渲染，

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

動畫將用於運行正常〜補間的75％，然後它來研磨，口吃，0 FPS，在30秒左右戛然而止一旦頂點接近其最終位置。我試圖看看動畫時間線，看起來所有這些時間都被轉移到更新補間。

我在某種程度上使用我的d3.select方法提供冗餘補間更新嗎？（JavaScript是否註冊一次點擊爲10並嘗試更新補間10x？）或者tween.js不能同時平穩補間200k個職位？非常感謝你的幫助！

來源

2016-11-15 M How

我從零開始的做法是爲頂點使用循環。當然，解決方案並不是最終的真相。

計劃：設置持續時間和動畫的當前時間，

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

記住一個頂點的端部位置，設置一個隨機開始位置爲它，找到這些位置之間的矢量（方向），

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

然後在動畫循環添加的結果矢量，乘以的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;

012比例

jsfiddle例如250K點。

來源

2016-11-15 10:35:57 prisoner849

如果它符合您的任務，您也可以將答案標記爲已接受。 – prisoner849

非常感謝你！你是一個絕對的生命保護者。我曾懷疑補間可能是矯枉過正的，可能會有更少的CPU密集型方式。我無法感謝你的幫助！ –

現在我已經做出了相同的250K點，但是使用'THREE.BufferGeometry（）'和'THREE.ShaderMaterial（）'。性能提高令人難以置信。如果你對它感興趣，我可以把它作爲另一個答案。 – prisoner849

三js補間js性能滯後於許多同時補間

回答

相關問題