4 ms·
Show HN: Weekend project - a WebGL Orrery
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.
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.
- rvkennedy 15y agoThis 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 http://www.dynamicdiagrams.com/wp-content/uploads/2011/04/or..., 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 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 15y agoLooks 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 15y agoThanks! 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!