

Show HN: Weekend project - a WebGL Orrery - rvkennedy
http://www.solar-system-explorer.com
This was my recent weekend project, aimed at teaching me JavaScript, a bit of HTML5, and (mostly) WebGL. The orbital data are from NASA JPL. I was inspired in part by this Flash app: http://www.dynamicdiagrams.com/wp-content/uploads/2011/04/orrery_2011_bce.swf, but wanted to do something in 3D.<p>Coming from the games-dev world, this is my first introduction to web coding. The UI is jquery. I mostly used http://learningwebgl.com/blog for the 3D stuff. Being WebGL, it will work mostly on Chrome, Firefox 4 Beta. Forget about IE.<p>I needed to figure out how to render text to the WebGL canvas - I won't say I have the perfect solution, but the general approach is to use a conventional HTML5 canvas, then copy it once per frame into a WebGL texture. There's something funky going on in this process - the textures get corrupted, and resizing the window leads to slowdown.<p>For the future I'd like to make the planets clickable and zoomable, maybe put in a search box to zoom to objects of interest. I'd like to build it up to a full catalogue of the Solar System - comets, the larger asteroids, dwarf planets - and maybe add the capability to put in known space mission trajectories.
======
rvkennedy
This was my recent weekend project, aimed at teaching me JavaScript, a bit of
HTML5, and (mostly) WebGL. The orbital data are from NASA JPL. I was inspired
in part by this Flash app: [http://www.dynamicdiagrams.com/wp-
content/uploads/2011/04/or...](http://www.dynamicdiagrams.com/wp-
content/uploads/2011/04/orrery_2011_bce.swf), but wanted to do something in
3D.

Coming from the games-dev world, this is my first introduction to web coding.
The UI is jquery. I mostly used <http://learningwebgl.com/blog> for the 3D
stuff. Being WebGL, it will work mostly on Chrome, Firefox 4 Beta. Forget
about IE.

I needed to figure out how to render text to the WebGL canvas - I won't say I
have the perfect solution, but the general approach is to use a conventional
HTML5 canvas, then copy it once per frame into a WebGL texture. There's
something funky going on in this process - the textures get corrupted, and
resizing the window leads to slowdown.

For the future I'd like to make the planets clickable and zoomable, maybe put
in a search box to zoom to objects of interest. I'd like to build it up to a
full catalogue of the Solar System - comets, the larger asteroids, dwarf
planets - and maybe add the capability to put in known space mission
trajectories.

------
thristian
Looks pretty great, well done!

In Firefox 6, the knob of the speed slider appears at the top of the page,
instead of inside the slider track. It looks like this is caused by having
"display: inline-table" on the #time_slider element. That seems a strange
choice, given that there's no child-elements with "display: table-row" or
"display: table-cell". If I change #time_slider to be "display: inline-block"
instead, the knob appears in the right place and works as expected.

~~~
rvkennedy
Thanks! This improves it a bit though for me the slider is now above its track
on Firefox. I'll keep at it - my GL skills are a bit ahead of my CSS at this
stage!

