6 ms·

Show HN: First WebGL app. Uses NOAA data to visualize storm paths back to 1848.

55 points by callumprentice 14y ago

roh26it 14y ago
Nice! Can you please share where you got the data etc. for the visualization? More info on how you did this would be great too (if you can..)
- oscilloscope 14y ago
  The data probably comes from here: http://www.nhc.noaa.gov/pastall.shtml http://www.nhc.noaa.gov/pastall.shtml The final step was transforming into this JavaScript file: http://callum.com/sandbox/webglex/storm_tracks_webgl/js/storms.js http://callum.com/sandbox/webglex/storm_tracks_webgl/js/stor... The process likely involved reading an XML or CSV file from one or several datastets and generating that file.
- callumprentice 14y ago
  Thank you. Oscilloscope is right - most of the data is from the NOAA - CSV files in my case that I process with a script into the large .js array. They don't have any data for this year though and I felt like I had to have Sandy in there so I had to scratch around a few places for that.
lexandstuff 14y ago
Sexy as hell. Great job.
- callumprentice 14y ago
  Thank you!
borplk 14y ago
Very nice. Do people have links to good basic WebGL tutorials? I'd love to be able to draw some shapes and stuff...
- yogrish 14y ago
  http://learningwebgl.com/blog/?page_id=1217 http://learningwebgl.com/blog/?page_id=1217 is a good starting point.
- callumprentice 14y ago
  Thank you. Yogrish's link is good. There are lots of examples out there including many at the three.js site here: http://mrdoob.github.com/three.js/ http://mrdoob.github.com/three.js/ and other tutorial sites like this: http://www.html5rocks.com/en/features/graphics http://www.html5rocks.com/en/features/graphics. The #three.js IRC channel on FreeNode is also full of friendly, helpful people - works best if you have a specific question though.
BonoboBoner 14y ago
I would love to understand more about the concepts of threejs. I went through the source of this example and identified this code as responsible for drawing the texture onto the sphere: http://pastebin.com/FLPaKppr http://pastebin.com/FLPaKppr . I have problems however to understand the details of the API. Let us see an excerpt of the code as an example. this.geometry = new THREE.SphereGeometry(this.planet_radius, this.planet_geom_segments, this.planet_geom_rings); this.geometry.computeTangents(); I have no clue why for example he calls "computeTangents" right after he builds this "Sphere"-object. What are "Tangents" and why do they need to be computed now? The entire script is like that to me. Statements that make the library do the right thing, but the intention on why they are necessary at this step of the way are left out. I have no idea how I can get a hold of that knowledge. Does anybody know where I can learn that? Because if you look at the code, you have no idea WHY it is done that way, which is a barrier to creating things like that myself. TL;DR: What theoretical background knowledge is necessary to build apps like that?
- frozenport 14y ago
  OpenGL experience.
- deleted 14y ago
  [deleted]
  - BonoboBoner 14y ago
    That is awesome. Adding you to Skype you as I am typing this.
- callumprentice 14y ago
  You're right - there should be more comments. I apologize. There are a number of three.js specific tutorials out there - Google will find them for you - that will give you a simple app to play with and then it's just a case of experimenting, asking targeted questions and having fun :) For me, the beauty of this approach is that all I need is my browser and an editor - make a change and hit reload and you see the results vs the more traditional edit/compile/link/run that I'm used to.
yogrish 14y ago
Awesome app. Sorry if I am asking some basic question. I have one observation about storms here, why Equatorial regions seems to have massive storms and that too above equator but not below.
- callumprentice 14y ago
  Thank you and no, not a basic question at all. One of the cool things I noticed too is how the equator seems to be a barrier that cannot be crossed. I think it's connected to the Coriolis Force that is required to form the low pressure trough and form/keep the storm going. That force gets to zero at the equator I think.
elliottcarlson 14y ago
Very nice - would love to be able to see the names of storms though.
- callumprentice 14y ago
  Thank you Elliott - that is one of the things I'm working on. Hover over or pick perhaps. I imagine I'll need to turn off that feature when the number of tracks crosses a pretty low threshold or it won't be clear which one is selected. I'd also like to rotate/zoom to the right location is a single storm is selected - Katrina or Sandy for example.
  - elliottcarlson 14y ago
    That would be a great feature - good work!

Nice! Can you please share where you got the data etc. for the visualization? More info on how you did this would be great too (if you can..)

oscilloscope 14y ago
The data probably comes from here: http://www.nhc.noaa.gov/pastall.shtml http://www.nhc.noaa.gov/pastall.shtml The final step was transforming into this JavaScript file: http://callum.com/sandbox/webglex/storm_tracks_webgl/js/storms.js http://callum.com/sandbox/webglex/storm_tracks_webgl/js/stor... The process likely involved reading an XML or CSV file from one or several datastets and generating that file.
callumprentice 14y ago
Thank you. Oscilloscope is right - most of the data is from the NOAA - CSV files in my case that I process with a script into the large .js array. They don't have any data for this year though and I felt like I had to have Sandy in there so I had to scratch around a few places for that.

lexandstuff 14y ago

Sexy as hell. Great job.

callumprentice 14y ago
Thank you!

borplk 14y ago

Very nice. Do people have links to good basic WebGL tutorials? I'd love to be able to draw some shapes and stuff...

yogrish 14y ago
http://learningwebgl.com/blog/?page_id=1217 http://learningwebgl.com/blog/?page_id=1217 is a good starting point.
callumprentice 14y ago
Thank you. Yogrish's link is good. There are lots of examples out there including many at the three.js site here: http://mrdoob.github.com/three.js/ http://mrdoob.github.com/three.js/ and other tutorial sites like this: http://www.html5rocks.com/en/features/graphics http://www.html5rocks.com/en/features/graphics. The #three.js IRC channel on FreeNode is also full of friendly, helpful people - works best if you have a specific question though.

BonoboBoner 14y ago

I would love to understand more about the concepts of threejs. I went through the source of this example and identified this code as responsible for drawing the texture onto the sphere: http://pastebin.com/FLPaKppr http://pastebin.com/FLPaKppr . I have problems however to understand the details of the API. Let us see an excerpt of the code as an example. this.geometry = new THREE.SphereGeometry(this.planet_radius, this.planet_geom_segments, this.planet_geom_rings); this.geometry.computeTangents(); I have no clue why for example he calls "computeTangents" right after he builds this "Sphere"-object. What are "Tangents" and why do they need to be computed now? The entire script is like that to me. Statements that make the library do the right thing, but the intention on why they are necessary at this step of the way are left out. I have no idea how I can get a hold of that knowledge. Does anybody know where I can learn that? Because if you look at the code, you have no idea WHY it is done that way, which is a barrier to creating things like that myself. TL;DR: What theoretical background knowledge is necessary to build apps like that?

frozenport 14y ago
OpenGL experience.
deleted 14y ago
[deleted]
- BonoboBoner 14y ago
  That is awesome. Adding you to Skype you as I am typing this.
callumprentice 14y ago
You're right - there should be more comments. I apologize. There are a number of three.js specific tutorials out there - Google will find them for you - that will give you a simple app to play with and then it's just a case of experimenting, asking targeted questions and having fun :) For me, the beauty of this approach is that all I need is my browser and an editor - make a change and hit reload and you see the results vs the more traditional edit/compile/link/run that I'm used to.

yogrish 14y ago

Awesome app. Sorry if I am asking some basic question. I have one observation about storms here, why Equatorial regions seems to have massive storms and that too above equator but not below.

callumprentice 14y ago
Thank you and no, not a basic question at all. One of the cool things I noticed too is how the equator seems to be a barrier that cannot be crossed. I think it's connected to the Coriolis Force that is required to form the low pressure trough and form/keep the storm going. That force gets to zero at the equator I think.

elliottcarlson 14y ago

Very nice - would love to be able to see the names of storms though.

callumprentice 14y ago
Thank you Elliott - that is one of the things I'm working on. Hover over or pick perhaps. I imagine I'll need to turn off that feature when the number of tracks crosses a pretty low threshold or it won't be clear which one is selected. I'd also like to rotate/zoom to the right location is a single storm is selected - Katrina or Sandy for example.
- elliottcarlson 14y ago
  That would be a great feature - good work!