使用webworker和IndexedDB为三个j的加载器

Question

我想在多线程中使用threeJS的dracoLoader,然后我选择了Webworker和IndexedDB.我在webworker中获得了正确的Geometry,但是,当我使用IndexedDB将数据传递给主线程时,几何体将更改为普通的JS对象而不是ThreeJS Geometry.几何失去了它的功能和一些信息.

webworker.js

self.saveDrcToIndexedDB = function (drcfinal) {

  var db;
  var request = indexedDB.open("drcDB");

  drcfinal.indexName = self.randomStr();

  request.onupgradeneeded = function(event) {

    console.log('successfully upgraded db');  

    db = event.target.result;
    var objectStore = db.createObjectStore("drcfinal", { keyPath: "indexName"});
  };

  request.onsuccess = function(event) {

    console.log('successfully opened db');

    db = event.target.result;
    var transaction = db.transaction(["drcfinal"], "readwrite");

    var objectStore = transaction.objectStore("drcfinal");
    objectStore.add(drcfinal).onsuccess = function(event) {
      self.postMessage(drcfinal.indexName);
    };
  } 
}

main.js

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

worker.addEventListener('message', function(e) {

  indexedDB.open("drcDB").onsuccess = function(event) {

    let db = event.target.result;   
    let objectStore = db.transaction(["drcfinal"]).objectStore("drcfinal");

    objectStore.get(e.data).onsuccess = function(event) {
      console.log(event.target.result);
    };
  }

}, false);

worker.postMessage(somedata);

我可以将正确的几何体转移到主线程吗？或者使用其他工具而不是IndexedDB？或者使用其他多线程工具而不是webworker？

Answer 1

在IndexedDB中存储数据时使用称为结构化克隆的机制.同样适用于通过WebWorkers发送消息和从WebWorkers发送消息postMessage.这种方法不可能复制函数.因此,您无法传输包括其方法在内的完整对象.简而言之,这是一种更好的JSON.stringify/parse方法,因为结构化克隆可以例如处理循环依赖性.

AFAIK所有Web浏览器可用的多线程机制,如WebWorker,SharedWorker和ServiceWorker都使用这种基于actor的消息发送方法.

但是,您可以使用Transferable对象使用Worker.postMessage将数据从WebWorker传输到主线程.这样,您可以将THREE.Geometry顶点数组作为一个发送Transferable.例如,THREE.BufferGeometry在WebWorker中使用时.

const myVertexData = bufferGeometry.getAttribute('position').array.buffer;
self.postMessage({myVertices: myVertexData}, [myVertexData]);

这非常快,因为不会复制数据,只会更改其所有权.