2

I'm developing a personal website to combine Three.js and ScrollMagic with OO Javascript. As the user scrolls the 3d Objects transform. This all works well but there is a slight performance issue. To improve this I want to move some loop/for functions that calculate positions to a web worker (whenever I call a loop function the scrolling lags).

The problem is I'm trying to pass an array (512) of class instances (THREE.PointCloud) to the web worker. I can't seem to get any meaning full properties from these instances in the web worker.

Firstly, I just tried to pass the array to the worker and got this error 'Uncaught DataCloneError: Failed to execute 'postMessage' on 'Worker': An object could not be cloned.'

Then I realised I couldn't do this so then I used JSON.stringify() and JSON.Parse(). I could get the length of the array. However, I couldn't get the properties for each instance.

I think I need to use an ArrayBuffer? But I have no idea how to convert my array of instances to an ArrayBuffer. Anyone? or is there an easier way to improve the performance?

Help would be really appreciated.

Thanks.

ewan
  • 454
  • 1
  • 4
  • 9

1 Answers1

1

I think you are probably right that you needs an ArrayBuffer (or similar). Using the postMessage() won't really get you what you want I think. Because the json (de)serialisation process is a fairly time consuming one in some cases.

But what you are probably looking for is "transferable objects". Instead of cloning the object(s) it changes the owner so there is no copying required.

There are quite a few places that talk about transfer objects online so google will be your friend here. But here is one https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage

Hope that helps.

Jero
  • 193
  • 1
  • 1
  • 7