WebWorker를 사용하여 형상을 병합 하시겠습니까?

Question

웹 작업자의 큐브 지오메트리 집합을 병합하고 주 스레드로 다시 전달할 수 있는지 아는 사람은 누구입니까? 다량의 큐브를 병합 할 때 이것이 지연을 줄일 수 있다고 생각 했었습니다.

웹 작업자는 Three.JS가 정상적으로 작동하나요, 그렇다면 그렇게 할 수 있습니까? 지오 메 트리를 다시 전달하는 것이 정상적으로 병합하는 것처럼 오래 걸릴지 확신하지 못합니다. 순간

나는 지연을 줄이기 위해 초과 에 대한 루프를 사용하고 있습니다 :

// This array is populated by the server and contains the chunk position and data (which I do nothing with yet). 
var sectionData = data.secData; 

var section = 0; 
var tick = function() { 
    var start = new Date().getTime(); 
    for (; section < sectionData.length && (new Date().getTime()) - start < 1; section++) { 
     var sectionXPos = sectionData[section][0] * 10; 
     var sectionZPos = sectionData[section][1] * 10; 
     var combinedGeometry = new THREE.Geometry(); 

     for (var layer = 0; layer < 1; layer++) { // Only 1 layer because of the lag... 
      for (var x = 0; x < 10; x++) { 
       for (var z = 0; z < 10; z++) { 
        blockMesh.position.set(x-4.5, layer-.5, z-4.5); 
        blockMesh.updateMatrix(); 
        THREE.GeometryUtils.merge(combinedGeometry, blockMesh); 
       } 
      } 
     } 

     var sectionMesh = new THREE.Mesh(combinedGeometry, grassBlockMat); 
     sectionMesh.position.set(sectionXPos, 0, sectionZPos); 
     sectionMesh.matrixAutoUpdate = false; 
     sectionMesh.updateMatrix(); 
     scene.add(sectionMesh); 
    } 
    if (section < sectionData.length) { 
     setTimeout(tick, 25); 
    } 
}; 
setTimeout(tick, 25); 

three.js를에게 rev59-dev에 사용.

합병 된 큐브는 지형을 구성하며, (지연으로 인해) 각 청크에는 1 개의 레이어 만 있습니다.

팁을 보내 주시면 감사하겠습니다. 감사.

Answer 1

THREE.JS는 웹 작업자에게는 작동하지 않지만 메인 스레드와 웹 작업자 모두에서 작업해야하는 라이브러리의 해당 부분을 복사 할 수 있습니다.

첫 번째 문제는 기하학 개체 자체를 주 스레드로 다시 보낼 수 없다는 것입니다.

웹 작업자 onmessage 변수 전달은 JSON (javascript 객체가 아닌) 또는 ArrayBuffers에 대한 참조 만 전송하므로 각 플로트로 형상을 디코딩 한 다음 ArrayBuffer에 압축하고 참조를 보내야합니다 메인 스레드로 돌아갑니다.

전송 가능 객체라고하며 전송되면 webworker/main 스레드에서 삭제됩니다.

더 자세한 내용은 여기를 참조하십시오 : 나는 복사

//length * 3 axes * 4 bytes per vertex 
var posBuffer = new Float32Array(new ArrayBuffer(len * 3 * 4)); 

//in a loop 

//... do hard work 

posBuffer[i * 3] = pos.x; //pos is a threejs vector 
posBuffer[i * 3 + 1] = pos.y; 
posBuffer[i * 3 + 2] = pos.z; 

//after loop send buffer to main thread 
self.postMessage({posBuffer:posBuffer}, [posBuffer.buffer]); 

:

http://www.html5rocks.com/en/tutorials/workers/basics/

다음

https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers

는 물리 형 시스템 배열로 위치 정점을 포장의 예입니다 내 웹 작업자 내에서 THREE.JS 벡터 클래스를 사용하고 멋지게 유지할 필요가없는 모든 메소드를 잘라 냈습니다. an.

FYI 느린 것은 아니며 n 몸체 충돌과 같은 경우 잘 작동합니다.

메인 스레드는 웹 작업자에게 업데이트를 실행하라는 명령을 보낸 다음 응답을 수신 대기합니다. 일반 스레딩에서 생산자 소비자 모델과 비슷합니다.