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

Question

有人知道是否可以在网络 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。

合并的立方体以 block 的形式构成地形，目前(由于滞后)每个 block 只有 1 层。

任何提示，我们将不胜感激!谢谢。

Answer 1

THREE.JS 无法在 Web Worker 中工作，但是您可以复制库中需要在主线程和 Web Worker 中工作的部分。

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

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

请注意，这些被称为可传输对象，一旦发送，它们就会在它们来自的网络工作线程/主线程中被清除。

请参阅此处了解更多详细信息:

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 向量类，并删除了所有不需要的方法以保持它的美观和精简。

仅供引用，它并不慢，对于多体碰撞之类的事情它效果很好。

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