Visualized user base using Three.js and WebGL | Hacker News Reader

Visualized user base using Three.js and WebGL

leansync.com

12 pointsrauar29 comments

Anyone interested in building something based on this should think twice. I just started building my own version of the globe and it has crashed my computer twice already. (brand new macbook pro retina using chrome). Something related to chrome and this webgl isn't playing nice together. Force quit doesn't even save it. Needs a hard reboot.

Macbook Pro 2012 here. I only experienced one issue which is somehow similar and caused by resuming from sleep when the webgl tab is still the active one. Then Chrome and everything else from MacOS will hang for 1 minute until Chrome figures out that WebGL crashed. But I do not have to hard reset for recovery. Just wait a minute....

I always close the tab before closing the lid.

For me it happened when I have it in a background tab. If I switch away for a while and then click back on the tab it will freeze.

Just happened to me as well a few seconds ago (I actually had even 3 instances open in the background and no sleep/hibernation involved). But again just waiting for about 1 min finally led to a responsive system again.

Is there a possibility of interaction with the provided data on the globe?

Also I would really like to see the "address network", e.g. lines between the dots.

It all happens inside the DOM, whit all interaction the browser provides.

Interaction is possible using the mouse:

- left-button and mouse move = rotation

- mouse wheel = zoom in/out

in progress ;)

Plus real-time push visualization using node.js and websocket...

So how much of this is open source and available? I can see lots of uses for something that looks this good and to which you can overlay your own information.

To be fair: I took one of the Google Chrome Experiments (can't find the exact demo right now but here's where they are hosted: http://www.chromeexperiments.com/webgl/), stripped it down, customized it (using particles instead of animated lines) and pump the geo data into the globe.

So I'd say with Three.js, Google's code for the Globe it's in the end just a couple of Javascript lines for the page and the customization of the globe. I'd say 98% is open source from a technical perspective.

This one I imagine: http://workshop.chromeexperiments.com/cloudglobe/

It's a similar one but not exactly the one I started off. I used the one which shows the world population for 3 predefined years.

http://www.chromeexperiments.com/globe

Yes, that's it.

Interesting. Would be great to have something like that with interaction built out as a simple component. Hmm...

Hmm. I think a component would be possible but then it would be rather "static". Customizing it to your needs would most probably mean changing code in most cases ...

Adding touch events would be nice. Using Chrome beta for android and I can see the globe, but can't interact easily.

Absolutely. I had the same thought when checking with my Nexus S. Not sure how easy/difficult it is to implement though as touch events are always a bit different than mouse controls.

Position data is based on user-provided addresses (city and country only).

Hm, lot of users are in the ocean (after I rotated the globe?)

Seriously ? Let's hope they can swim :)

It happened to me one or two times that I thought the same because the dark color of the sea looks somehow more solid than the continents.

If it's really a rendering bug could you share a screenshot ?

It is beautiful. I really like this :-)

Thank you. Appreciated ;)

cough cough

Anything I did wrong ? I think I gave your library all the credits it deserves by naming it in the title and providing details where the used parts came from in the comments below.

Or is it that I used the most trivial particle rendering ? :)

I did the original WebGL Globe (texture, atmosphere shader, interaction, ...). Just sounded like you were taking credit for the overall aesthetics. As far as I can see, aesthetic-wise the difference is that you didn't pass the height for the cubes.

I don't really mind though, the whole point was to get people to use the platform. Just found it funny :)

I see. Well quite some work went into upgrading the globe.js to Three.js rev 56 (API changes and debugging related errors) and the integration stuff (creating the geo data) under the hood. Plus using particles instead of the cubes (which was rather easy). So although it still has definitely a lot from your version (globe and three.js) it's definitely not just a cheap and quick copy for ripping off credits ;) That's why I appreciated the comment. Consider a big part of the credit as yours :)

Just a side-node: the API docs were the biggest obstacle in the whole process. W.r.t to platform usage I think this would be one of the top prio things to get even more people using Three.js.

Yup. Working on that... also need to update WebGL Globe so you don't have to :)

Credits to you too :-) For what it's worth I actually did find your site through the links on https://leansync.com/status.

Would be wonderful if IE supported WebGL so these features could find their way into more apps.

Reply on news.ycombinator.com