nowfound

Dev tools · June 13, 2011

WP

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…

Visit solar-system-explorer.com ↗Alternativestop 16% of June 2011

What it does

In the maker’s words, at launch

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.

Does the same job

all alternatives →
  • MA
    made a html5 game, polished it many many times2011 · hotbazooka.com · ▲211

    hi all, I've always wanted to make my own game, but couldn't afford a thousand-dollar adobe (flash+photoshop) license. I'm not a talented programmer, have no degree in CS. But I understand some elements of design. So I got me a copy of ImpactJS, and after about 5 months of steep learning curve (at least for me), I managed to come up with a game. I also integrated it with a highscore and badge system, similar to what you get at Kongregate. You need to login with Google/OpenID to earn badges/scores. link is: http://www.hotbazooka.com/privatejoe hope to hear some feedback/questions from you guys!

  • MW
    my weekend project Html5Snippets.com2011 · ▲29

    A place to learn and share html5/css3/js snippets. Its on a alpha/mvp stage right now. Let me know what you think. Http://html5snippets.com

  • AS
    A simple infinite world in WebGL2016 · erkaman.github.io · ▲181
  • MW
    My weekend project Parallax.js2012 · stolksdorf.github.com · ▲108
  • gravity.js - Beta2016 · ▲112

    Gravity WebGL experiment in the Solar System

  • WP
    Weekend project - HTML5 Game Engines: which is right for you?2013 · html5gameengine.com · ▲75

More dev tools this month

the category →
  • Dograh▲592

    The open source VAPI alternative

    Dev tools · 25d ago · dograh.com

  • Meridian▲530

    Don't let your work go unnoticed. Get promoted!

    Dev tools · 20d ago · meridiona.com

  • x1▲516

    Lovable for iPhone apps go from idea to App Store

    Dev tools · 11d ago · x1.new

  • The GTM Co-Founder▲402

    Open-source GTM skills for technical founders

    Dev tools · 29d ago · gtmcofounder.com

  • Open-Source eInk Bike Computer▲389

    OpenTrailPaper is open-source bike computer firmware for the LilyGO T5S3 4.7" E-Paper PRO. It supports offline maps, GPX routes, FIT recording and Bluetooth sensors.

    Dev tools · 1d ago · opentrailpaper.com

  • Nuphos▲380

    The AI-Native DevOps Workspace.

    Dev tools · 24d ago · nuphos.ai

Launched alongside, June 2011

the whole month →