5 ms·

Visualized user base using Three.js and WebGL

12 points by rauar 14y ago

rauar 14y ago
Position data is based on user-provided addresses (city and country only).
flexie 14y ago
It is beautiful. I really like this :-)
- rauar 14y ago
  Thank you. Appreciated ;)
  - mrdoob2 14y ago
    cough cough
    - rauar 14y ago
      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 ? :)
      - mrdoob2 14y ago
        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 :)
        rauar 14y ago
        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.
        mrdoob2 14y ago
        Yup. Working on that... also need to update WebGL Globe so you don't have to :)
        flexie 14y ago
        Credits to you too :-) For what it's worth I actually did find your site through the links on https://leansync.com/status https://leansync.com/status. Would be wonderful if IE supported WebGL so these features could find their way into more apps.
mcdee 14y ago
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.
- rauar 14y ago
  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/ 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.
  - mcdee 14y ago
    Interesting. Would be great to have something like that with interaction built out as a simple component. Hmm...
    - rauar 14y ago
      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 ...
  - gotrythis 14y ago
    This one I imagine: http://workshop.chromeexperiments.com/cloudglobe/ http://workshop.chromeexperiments.com/cloudglobe/
    - rauar 14y ago
      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.
yogti 14y ago
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.
- rauar 14y ago
  in progress ;) Plus real-time push visualization using node.js and websocket...
- todi 14y ago
  It all happens inside the DOM, whit all interaction the browser provides.
- rauar 14y ago
  Interaction is possible using the mouse: - left-button and mouse move = rotation - mouse wheel = zoom in/out
avodonosov 14y ago
Hm, lot of users are in the ocean (after I rotated the globe?)
- rauar 14y ago
  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 ?
davydka 14y ago
Adding touch events would be nice. Using Chrome beta for android and I can see the globe, but can't interact easily.
- rauar 14y ago
  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.
dsowers 14y ago
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.
- rauar 14y ago
  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.
  - dsowers 14y ago
    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.
    - rauar 14y ago
      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.

12 points by rauar 14y ago

rauar 14y ago

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

flexie 14y ago

It is beautiful. I really like this :-)

rauar 14y ago
Thank you. Appreciated ;)
- mrdoob2 14y ago
  cough cough
  - rauar 14y ago
    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 ? :)
    - mrdoob2 14y ago
      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 :)
      - rauar 14y ago
        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.
        mrdoob2 14y ago
        Yup. Working on that... also need to update WebGL Globe so you don't have to :)
      - flexie 14y ago
        Credits to you too :-) For what it's worth I actually did find your site through the links on https://leansync.com/status https://leansync.com/status. Would be wonderful if IE supported WebGL so these features could find their way into more apps.

mcdee 14y ago

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.

rauar 14y ago
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/ 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.
- mcdee 14y ago
  Interesting. Would be great to have something like that with interaction built out as a simple component. Hmm...
  - rauar 14y ago
    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 ...
- gotrythis 14y ago
  This one I imagine: http://workshop.chromeexperiments.com/cloudglobe/ http://workshop.chromeexperiments.com/cloudglobe/
  - rauar 14y ago
    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.

yogti 14y ago

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.

rauar 14y ago
in progress ;) Plus real-time push visualization using node.js and websocket...
todi 14y ago
It all happens inside the DOM, whit all interaction the browser provides.
rauar 14y ago
Interaction is possible using the mouse: - left-button and mouse move = rotation - mouse wheel = zoom in/out

avodonosov 14y ago

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

rauar 14y ago
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 ?

davydka 14y ago

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

rauar 14y ago
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.

dsowers 14y ago

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.

rauar 14y ago
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.
- dsowers 14y ago
  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.
  - rauar 14y ago
    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.