Thursday, May 05, 2011

Visualizing geographic data with the WebGL Globe


By Doug Fritz of the Google Data Arts Team

Today we're sharing a new Chrome Experiment called the WebGL Globe. It’s a simple, open visualization platform for geographic data that runs in WebGL-enabled browsers like Google Chrome. The globe below shows world population, and we’ve created another globe showing Google search traffic.


The primary challenge of this project was figuring out how to draw several thousand 3D data spikes as quickly and smoothly as possible. To do this, we turned to Three.js, a JavaScript library for building lightweight 3D graphics. For each data point, we generate a cube with five faces – the bottom face, which touches the globe, is removed to improve performance. We then stretch the cube relative to the data value and position it based on latitude and longitude. Finally, we merge all of the cubes into a single geometry to make it more efficient to draw.

The second challenge of the project was animating the globe – we wanted it to be fun for the user to manipulate. Thanks to WebGL, we’re able to display thousands of moving points at high frame rates by using the user’s graphics processing unit (GPU) for 3D computations. Each state of the globe has its own geometry and we morph between them with a vertex shader, saving precious CPU resources. Additionally, to make the globe look nice, we took advantage of the possibilities of GLSL and created two fragment shaders, one to simulate the atmosphere and another to simulate frontal illumination of the planet.

Now that we’ve released the globe, we’re hoping that developers like you will create your own. What data will you show on it? If you’re feeling inclined, you can learn more about the data format (represented in JSON) and get the code here. If you create your own globe, please also consider sharing a link with us -- at some point in the future, we hope to post a list of interesting globes that have been submitted.

UPDATE 6:16 PM: Fixed link to the code in last paragraph.


Doug Fritz is a creative programmer in Google's San Francisco office. Doug says he likes "simplifying the complex and complexifing the simple, because in reality it's all somewhere in the middle".

Posted by Scott Knaster, Editor

38 comments:

  1. Doesn't work for me. Says my browser doesn't support WebGL and that I should use Chrome, etc. But I *AM* using Chrome - version 11.0.696.60.

    ReplyDelete
  2. Awesome! When I grow up, I want to be able to do what the google team members can do! :D

    ReplyDelete
  3. Doesn't work.

    "Sorry, your browser doesn't support WebGL" in Chrome 11

    "Sorry, your graphics card doesn't support WebGL" in FF4

    ReplyDelete
  4. Same issue to me
    "Sorry, your browser doesn't support WebGL"


    Google Chrome 11.0.696.60 (Official Build 83294) unknown
    WebKit 534.24 (branches/chromium/696@84661)
    V8 3.1.8.12
    User Agent Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.60 Safari/534.24

    ReplyDelete
  5. Chrome has an hardware black list that will block 3D graphics to a lot of users.
    Launch Chrome with the --ignore-gpu-blacklist extra parameter to skip the blacklist.

    ReplyDelete
  6. Very nice.. you need a converter for KML to this JSON format. :) Or at least a nice XSLT. Granted.. it looks like it would only work for point data at this time.

    How hard would it be to give the various JSON elements a clickable link. Is that supported well in WebGL?

    ReplyDelete
  7. The data format in the JSON example file doesn't match the format desribed in the readme on github.

    ReplyDelete
  8. 2011 macbook - chrome 11.0.696.57 - message: Graphics card not supported

    ReplyDelete
  9. Works for me 11.0.696.57 OS X

    Kudos guys for this. A visually interactive way for users to engage and understand about search on a global scale

    ReplyDelete
  10. FIX - for "graphics card does not support webgl" - go to about:flags, look for "GPU accelerated compositing", enable it, hit relaunch button at bottom of screen.

    ReplyDelete
  11. Might have to update graphic driver to render webgl. Shame no activity in uk its pretty cool :)

    ReplyDelete
  12. What Dyea said!!! Thanks, that worked.

    ReplyDelete
  13. I take that back... Dyea's suggestion got me one page further, then I dead-ended on the same error message after I hit the "launch experiment" button.

    ReplyDelete
  14. What I find odd is that the Arcade Fire experiment works fine.

    ReplyDelete
  15. I am just getting the spinning circle for ever. Tried on every browser I have and even tweaked the settings on Chrome as suggested. I sure wish I could see something.

    ReplyDelete
  16. has anyone been to the akamai office in cambridge, ma? this reminds me of the globe they have in their control center :-)

    ReplyDelete
  17. Here's another: http://goo.gl/kBk4C

    ReplyDelete
  18. Not particularly useful. The search density merely highlights where the major population centres are, given the internet and google are ubiquitous.
    Now if the google searches were normalised against the population density, that might tell you something.

    But then what does the 3D representation add anyway?

    ReplyDelete
  19. doesn't work for me either. am using chrome as well

    ReplyDelete
  20. If you want a proof on how our world is divided between the have and have not just take a look at Africa. I give you a hint they don't use Bing either!

    ReplyDelete
  21. isn't there any workaround without using 3d graphic cards?

    ReplyDelete
  22. Doesn't work. Chrome 11.0.696.65 on Windows

    ReplyDelete
  23. This is so cool! Who ever put this thing together was a genius!

    ReplyDelete
  24. adding extra parameter in startup (--ignore-gpu-blacklist) doesn't seem to work either. actually its not even taking that parameter.

    ReplyDelete
  25. I am also just getting the spinning circle for ever.
    No error message.
    Tried dozens of times.
    Using Chome 12.0.742.60 beta-m

    ReplyDelete
  26. Very nice. I now use it to plot the last x-number of visitors...

    http://0bar.nl/globe/visitors.html

    ReplyDelete
  27. I now use Analytics to create a json data file to show the last x-number of visitors.

    Here is how I did it: http://0bar.nl/en/tech/show-visitors-on-webgl-globe-with-the-usage-of-analytics

    Robert

    ReplyDelete
  28. This looks like a colorful, high-res version of what I demoed at the MIT Media Lab back in April:

    http://woj.com/newsglobe/

    ReplyDelete
  29. Trying to run this code hosted on Windows 2008 server. The WebGL part does not show. I tried a lot of WebGL stuff and they all worked before, but the Globe just doesn't. Any clue?

    Thank you

    ReplyDelete
  30. sorry does not work.Message telling me my Browser does not support web GL.
    It works in Firefox.ALL my drivers are up to date and I´m using Chrome 13

    ReplyDelete
  31. Does anyone have any documentation for recording in JSON format?

    ReplyDelete
  32. Works like a charm in Chrome 12

    ReplyDelete
  33. hi Doug how many people participate in this experiment? and i if we can known, how long were you working in it?

    ReplyDelete