Leveraging web workers and IndexedDB to enhance the loading process in Three.js

I am attempting to utilize dracoLoader from threeJS in a multi-threaded environment. To achieve this, I decided to use Webworker and IndexedDB. Although I have successfully obtained the correct Geometry in the web worker, I am facing an issue when passing the data to the main thread using IndexedDB. The transferred geometry is being transformed into a normal JS object instead of remaining as a ThreeJS Geometry. As a result, the geometry loses its functions and some essential information.

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

Is it possible to transfer a correct geometry to the main thread? Are there alternative tools that could be used in place of IndexedDB? What about utilizing different multi-threading tools aside from Webworker?

Answer №1

When storing data in IndexedDB or sending messages to and from WebWorkers using postMessage, a mechanism known as Structured Cloning is utilized. This method does not allow for the duplication of functions, making it impossible to transfer complete objects with their methods. Instead, it offers an improved alternative to JSON.stringify/parse, particularly effective at handling cyclic dependencies.

From what I understand, popular web browser multi-threading mechanisms like WebWorker, SharedWorker, and ServiceWorker all employ the actor-based message sending approach.

However, by utilizing a Transferable object when transferring data from a WebWorker to the main thread through Worker.postMessage, one can send specific data, such as a vertex array from a THREE.Geometry, as a Transferable object. This is especially useful when working with a THREE.BufferGeometry within a WebWorker.

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

This method is efficient as it changes ownership of the data without requiring duplicate copies.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Storing data locally in Angular applications within the client-side environment

As I delve into Angular and TypeScript, I've encountered a perplexing issue. Let's say I have two classes - Employee and Department. On the server-side, I've established a Many-To-One relationship between these entities using Sequelize: db. ...

Why is "undefined" being used to alert an ajax call response?

I am encountering an issue with a returned value from an AJAX request. The web method being referenced returns a boolean value of true or false. However, when attempting to access this value outside the AJAX method, I am receiving an "undefined" message :? ...

What are some techniques for locating an element in Selenium when it has no tags?

I'm facing a challenge in my code where I need to ensure that the message "Product successfully added to your shopping cart" appears after adding an item to the cart. Here, there is no specific tag enclosing the text, making it tricky to target for ve ...

I encountered an error stating "delta is not defined" while using the

I am testing the use of FirstPersonControls in three.js. However, when I try to copy examples to understand how it works, I always encounter the same error in the console: "delta is not defined." Can someone provide an explanation? <!-- Include librari ...

How to retrieve input value without the need to click a button or submit the form in PHP

I have an HTML code that includes a hidden input storing a value. I need to retrieve this value and assign it to a PHP variable without requiring any user interaction such as clicking a button. The intended purpose is to use this value for obtaining data f ...

transforming a cylindrical shape into a curved pipe

Utilizing the capabilities of three.js, I have successfully engineered a captivating scene featuring a textured and meshed cylinder along with a grid boasting lines and vertices. By manipulating the mouse to the left or right, the cylinder elegantly spins ...

Tips for utilizing ng-checked and ng-disabled in conjunction with ng-repeat

I encountered a challenge with ng-repeat while incorporating ng-checked and ng-disable alongside it. <div ng-repeat="module in modulelist"> <input id="switch{{$index}}" ng-init="setState($index);" type="checkbox" ng-checked="switch.checked" ng-di ...

Encountered an AfterAll hook error where 'this' is not pointing to the correct world constructor in cucumber-js and selenium integration

When I try to close my browser at the end of my tests using cucumber-js and selenium, I keep getting an error message saying 'AfterAll hook errored'. The issue seems to be with 'this' not referring to world as it should in my step.js fi ...

How to save data to a JSON file using the filesystem module in Node.js

After coming across this helpful guide at , I was intrigued by the creation of a point system in discord.js. The use of let points = JSON.parse(fs.readFileSync("./points.json", "utf8")); to read the file piqued my interest, leading me to explore how to bui ...

Store the result of the previous AJAX call in a jQuery variable and combine it with the data from the next AJAX response

I am working on a program where I retrieve price values using ajax. My goal is to add the previous price value to the current price value when it is retrieved again. The issue I am facing is that each time I get a new price value, it overrides the previou ...

What are the steps to showcase the content of a Typescript file on an HTML webpage?

We are looking to create a sample gallery with source code examples. Including typescript, html, and HTML files to showcase similar to the Angular.io component samples pages. Is there a way to extract the source code from a typescript file within our pro ...

What is the best way to utilize node packages?

Apologies for the novice question. I am just starting out with coding and have spent several hours searching online for instructions on how to run code from node modules, but unfortunately, haven't made much progress. My goal is to create an editable ...

Correct the initial error in the column by retroactively applying the source map

Whenever our Selenium tests run on our web application, we always have access to the console logs in case there is a javascript crash. The typical error message usually appears like this: 09:27:09.540 [main] ERROR gui.rule.ScreenshotRule - Chrome console: ...

AngularJS and CSS: A Guide to Effortlessly Toggle Sliding List Elements

I am in the process of developing a drop-down menu that can be clicked. Using my custom AngularJS directive, I have successfully implemented functionality to load menu items dynamically. While I have made significant progress, I have encountered a small i ...

How to correctly extract object values using .map method in React

I am currently using React to read and display elements from a JSON file, which is working well. However, I am trying to display text in a label of a checkbox that can also contain links without turning the entire label into a link. To achieve this, I have ...

Exclude the UL hierarchy from removing a class in jQuery

Check out this fiddle to see the code snippet: http://jsfiddle.net/3mpire/yTzGA/1/ I am using jQuery and I need to figure out how to remove the "active" class from all LIs except for the one that is deepest within the hierarchy. <div class="navpole"&g ...

Using ng-repeat with deeply nested objects

I am facing an issue with rendering an object that contains comments along with replies objects that have nested replies objects. I attempted to use a solution from here, but it resulted in my replies object being undefined. For example, I tried the follow ...

Minimizing the Canvas html code for AngularJS chart displays

Utilizing the module angular-chart.js to showcase charts in my Angular app. The app requires two types of charts: bar-chart and line-chart. Currently, the charts are separately defined in the HTML view. Below is the current code snippet: <canvas id="b ...

Storing a div in Javascript/HTML and concealing its descendants for later use

I have a div that I can select var selectedCell = null; $(".selectableBox").on('click', function (event) { selectedCell = $(this); } Later on, I need to hide one of the children inside selectableCell called selectableCe ...

Using Regular Expressions in JavaScript for Filtering with Angular.js

I am looking to create a custom filter in Angular.js. When an object has a name == null, and I add "u" to the filter->, it results in the return of the object where name == null because re.test(null)=true. However, other characters are returning false. ...