Web workers with OO Javascript, ThreeJS and ScrollMagic - javascript

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.

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.

Related

Persistant data, pure functions and RAM

I'm currently reading Eloquent JavaScript, and I don't really understand the interest of using persistent data structures like indicated in this paragraph.
If I get it right, we are using pure functions (methods?) in this example, as the this.move method returns a new VillageState object without affecting the state of the original VillageState.
This way all the objects created until the problem gets solved are stored somewhere in the RAM stack, right? Then, should this extra data storage slow down the program too?
I don't really understand how it might be simpler to understand than using mutable data in this case. So I'd be glad if some of you could clarify this out for me, thanks.
And please correct me if I'm wrong somewhere!

Using OrderedMap.merge to translate Objects to OrderedMaps instead of Maps?

I'm trying to use OrderedMap.merge to store application state using reflux (specifically reflux-immutable), but I noticed this does not translate Objects into OrderedMaps, but regular Maps, which do not guarantee order when iterated over. There are several parts of my application where I need order to be retained, so I was wondering if there was a way to accomplish this using OrderedMap.merge or something like merge. I came up with this, but it's super ugly and relies on ripping source code out of Immutable.js, which I'm not comfortable with.
Does anyone have any other ideas? Thanks in advance.
I decided to solve this problem a different way, namely by explicitly converting the objects I needed to be ordered maps prior to invoking OrderedMap.merge on the entire store's state. This works because the definition of merge essentially ignores objects that are already immutable, so there's no risk of duplicate work and merge's functionality is retained without having to do all the silly hacked together stuff I was doing.

Destroying Polymer-element and re-create new one with other attributes...or?

I'm wondering what's the best approach to do the following: I have a Polymer-element (PubNub (which handled Realtime Messaging)) which is "instantiated" with a some attribute values (the elements properties (more precisely, which channel to listen to/join)). And since the user should be able to switch chat rooms (/channels), I'm not sure if it's such a great idea to "instantiate" 5 PubNub-elements and in turn have 5 active chats going on in the background (receiving messages), if nothing else it would drain more battery power(?).
So, should I instantiate one PubNub-element and then remove and replace it when a user swaps channel? And how is this done best in Polymer?
Or is there some other approach one should take when dealing with this kind of problem?
You are right, the current pubnub-element is very basic and lacks many functionalities, as you have already noticed.
As Craig said, I don't generally recommend to create a bunch of instances either, however, the polymer element lacks the way you can modify all properties on the fly- you may be able to change the channel name as publishing, but it doesn't work the way for subscribing...
Instead of making some workaround using Polymer elements, I suggest to just use our vanilla JavaScript APIs. It maybe so much easier for your scenario.
And please do not hesitate to send us a pull requests or two :-)

Mobile-Web-App: keeping huge data in json-string vs. object vs. localstorage

I currently think about an architecture for one-page mobile-web-apps, let them work offline with a lot of data.
My concern is that loading and keeping all data loaded in objects is wasting too much memory. I think about older android phones, iphones etc.
Would it be a good idea to start with variables initialized whith json-strings of data-model-objects, which i load/parse into an object when i need them?
i could free the loaded object as soon as the use of the model changes (of course only if its unlikely that the object is needed in the near future)
or are those string-variables hold in memory anyway, so i dont save memory?
What is the difference in memory consumption between a javascript object and its (stringyfied JSON-)String?
UPDATE:
i found the answer to the question in this article about javascript object size.
so comparing a json-string and its corresponding loaded object shows that the string is smaller. Thats what i expected.
Would it be better to retreive the strings via ajax and put them into localStorage? After the anonymous ajax callback finishes the GC could do its job...
is this even the right direction? what is the best approach keeping data like that?
I know all this is very vague, so any help is highly appreciated!
localStorage is stored on the real disk,so every time you read the data will not as quick as in a Object. localStorage is good for offline.if a large data don't require to offline and don't read too much often,just store it in an hidden will better.

Detect and apply restriction to objects/ paths using Intersection library

All,
Further to my post here,
#Phrogz suggested we look into Kevin Lindsey's library for our needs of identifying the borders and applying restrictions. Has anyone got any experience of using this library?
THE PROBLEM:
In our web application we have an object made of SVG paths. We are trying to implement the functionality of drag and drop of other objects inside this object, with restrictions needing to be in place that the objects cannot be dropped outside the this SVG object.
Upon Phrogz recommendation, we looked into this but are struggling to make sense of how to pass the object. Do we pass the objects as path string or as SVG object.
ERROR:
At this moment, we are not getting any output, not even sure if its accepting the objects we pass through.
This is quite an open question and Im particularly keen on hearing from individuals who might know a thing or two about Kevin's library/ how it works/ functionality.
Cheers
I'm not sure how performant this will be for you. I wrote this library more as a proof-of-concept and to educate myself on intersections for higher order curves. That being said, I assume you are trying to instantiate instances of Path from the library? If so, have a look at loadShapes from the the following utility:
https://github.com/thelonious/js-intersections/blob/master/samples/IntersectionUtilities.js
That gets called on start when processing, say, this file:
https://github.com/thelonious/js-intersections/blob/master/samples/intersect_bezier3_rect.svg
Note that I'm tagging items to be process with a custom gui:edit attribute. That's neat and all, but I wrote this many many years ago (8+) and I'm sure the state of the art has better techniques, but I digress. The main thing is that you need to instantiate each shape type using the class for its node type. Each time you want to check for an intersection, you'll need to call Intersection.intersectShapes(node1, node2). That will return an object with a status attribute which will let you know if there was an intersection or note. I'm sure all of this can be improved. The code is up on github for those who wish to fork, fix, and improve :)
https://github.com/thelonious/js-intersections
https://github.com/thelonious/svg-2d
HTH,
Kevin

Categories

Resources