많은 동시 트윈이 포함 된 세 개의 js 트윈 js 성능 지연

Question

처음으로 오랜 시간이 걸렸습니다. Three.js와 Tween.js에 익숙하지 않고, 동시에 200k Three.js 버텍스를 트위닝 할 수 있는지 알고 싶습니다. 한 위치에서 다른 위치로. 제 픽셀과 꼭지점이라는 단어를 서로 바꾸어 쓸 수는 없습니다.

그리드에 200k 픽셀을 표시하고 싶습니다. 사용자는 여러 가지 방법으로이 200k 픽셀을 정렬하여 그리드에서 다시 정렬하도록 결정할 수 있습니다. 모든 픽셀이 초기 위치와 최종 위치 사이에서 동시에 트위닝되고 싶습니다. 현재는 정점이 트윈으로 동시에 움직이지만 애니메이션이 완성되면 심각한 성능 문제가 발생합니다. 누군가가 도울 수 있기를 바랍니다. D3 (나는 잘 알고 있었다 단지 무엇을 사용 나는 장면에서 정점을 그린 후 생성 내가 트윈 객체들이이 목록에서 생활과 관련된 한 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.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(); 
    } 

에 새로운 XY 위치에 각각 트윈, 이동 제공

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

애니메이션은 ~에 대한 트윈의 75 %를 잘 실행 나타나고 그것은 정점이 최종 위치에 근접하면 약 30 초 동안 정지를 긁히는 소리 연삭, 말더듬, 0 FPS, 온다. 애니메이션 타임 라인을 살펴 보았는데, 그 모든 시간이 트윈을 업데이트하는 것으로 버려진 것처럼 보입니다.

d3.select 메서드를 사용하여 여분의 트윈 업데이트를 어떻게 든 제공합니까? (자바 스크립트는 한 번의 클릭을 10으로 등록하고 트윈 10x를 업데이트하려고합니까?) 또는 tween.js가 동시에 200k 위치를 트위닝 할 수 없습니까? 어떤 도움을 주셔서 감사합니다!

Answer 1

처음부터 접근 방식은 정점에 루프를 사용하는 것입니다. 물론 해결책은 궁극적 인 진리가 아닙니다.

계획 : 설정 기간 및 애니메이션의 현재 시간

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 포인트