在 Three.js 中从 Web Worker 加载纹理

Question

当在很长一段时间内将大型纹理图像应用于 Mesh 时，Three.js 会锁定浏览器的主线程。让我们考虑以下示例：

var texLoader = new THREE.TextureLoader();

texLoader.load('someLargeTexture.jpg', function(texture) {
    var geometry = new THREE.SphereGeometry(10, 32, 32);
    var material = new THREE.MeshBasicMaterial({map: texture});
    var sphere = new THREE.Mesh(geometry, material);

    // adding the object to the scene will lock up the browser's main thread
    scene.add(sphere);
});

我还注意到以下几点：

• 如果新对象未添加到场景中，则不会发生线程锁定
• 更改对象的几何形状不会导致锁定
• 如果使用从现有对象（已在场景中）借用的材质创建新对象，将不会导致锁定
• 将新材质分配给现有对象（已在场景中）将导致锁定

我的结论是 Three.js 对添加到场景中的材质进行了一些处理。结果是缓存后重新使用。

问题是这项工作是否可以通过某种方式卸载到 web worker 上，这样主线程就不会被锁定？

工人可能看起来像这样：

var texLoader = new THREE.TextureLoader();

texLoader.load('someLargeTexture.jpg', function(texture) {
    var material = new THREE.MeshBasicMaterial({map: texture});

    // ... long-running work goes here ...

    // adding the object to the scene will lock up the browser's main thread
    self.postMessage({
        msg: 'objectCreated',
        material: material.toJson(), // converting material to JSON
    });
});

然后在主线程中我们可以这样做：

var worker = new Worker('worker.js');

worker.addEventListener('message', function(ev) {
    var geometry = new THREE.SphereGeometry(10, 32, 32);

    // converting JSON back to material object
    var material = MaterialLoader.prototype.parse( ev.data.material );

    // this should't lock-up the main thread
    var sphere = new THREE.Mesh(geometry, material);

    scene.add(sphere);
});

这样的事情可以做吗？

Answer 1

在尝试与工作线程并行加载纹理时遇到了这个问题。主要障碍似乎是 THREE.Texture 包含对 （DOM 元素）的引用，而后者又包含实际的图像数据。不知道序列化 的方法，还有webgl accepts <img> as texture data。所以没有必要让三个人去碰它。

一种解决方案可能是使用 THREE.DataTexture，但这涉及将可能压缩的图像转换为未压缩的 RGB。不幸的是，通过 drawImage() + getImageData() 绕道是不可能的，因为工人无法处理 DOM 元素。

最终我决定并行纹理加载必须等待the-offscreen-canvas-interface。