merge - 使用 WebWorker 合并几何图形？

Question

任何人都知道是否可以在 Web Worker 中合并一组立方体几何图形并将其传递回主线程？认为这可以减少合并大量立方体时的延迟。

Three.JS 在 Web Worker 中是否可以正常工作，如果可以，是否可以(并且更快)执行此操作？不确定将几何体传回是否与正常合并一样长。

目前我正在使用定时 for 循环来减少延迟:

// 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 不能在 web worker 中工作，但是你可以复制那些你需要在主线程和 web worker 中工作的库部分。

您的第一个问题将是您无法将几何对象本身发送回主线程。

由于网络 worker onmessage 变量传递仅通过发送 JSON 副本(不是 javascript 对象)或对 ArrayBuffers 的引用来工作，因此您必须将几何图形解码为每个浮点数，将其打包在 ArrayBuffer 中，然后将引用发送回主线程。

请注意，这些被称为可转移对象，一旦发送，它们将在它们来自的 webworker/主线程中被清除。

请参阅此处了解更多详情:

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

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

以下是将位置顶点打包到物理类型系统数组中的示例:

//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]);

我在我的网络 worker 中复制了 THREE.JS 向量类，并删除了我不需要的所有方法以保持它的美观和精简。

仅供引用，它并不慢，对于像 n 体碰撞这样的事情，它运行良好。

主线程向 Web Worker 发送一个命令，告诉它运行更新，然后监听响应。有点像常规线程中的生产者消费者模型。