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

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

callum.com

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 .

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?

OpenGL experience.

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.

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..)

The data probably comes from here:

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/stor...

The process likely involved reading an XML or CSV file from one or several datastets and generating that file.

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.

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.

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.

Very nice. Do people have links to good basic WebGL tutorials?

I'd love to be able to draw some shapes and stuff...

http://learningwebgl.com/blog/?page_id=1217 is a good starting point.

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/ and other tutorial sites like this: 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.

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

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.

That would be a great feature - good work!

Sexy as hell. Great job.

Thank you!

Reply on news.ycombinator.com