Galactic: Building a 3D Solar System with HTML5

Last November, we released the Galactic test drive alongside IE9 Platform Preview 7. This test drive is a 3D simulation of our solar system and depicts planets orbiting around the sun. You can press the “V” key to toggle between a close up view centered on the sun and a zoomed out view showing more of the entire scene.

When I set out to build Galactic, I knew that I wanted to use HTML5 Canvas to render my scene in 3D, but I wasn’t quite sure how to go about it. After skimming a handful of 3D math texts, I realized it would take more than a weekend to learn all the concepts I’d need to build a 3D engine from scratch. So instead, I searched the Web and found several 3D JavaScript libraries.

After investigating a few of these libraries, I decided to use Mr. Doob’s excellent three.js library. This library supports a variety of browsers and rendering targets (including HTML5 Canvas), and lets you import 3D models from editors such as Blender. I played around with some of the samples to wrap my head around the library, and was soon ready to start building the Galactic demo. Cool!

My first step was to setup my scene. I knew the backdrop to the solar system should contain stars and look ‘cosmic’, so I decided to add a skybox to simulate the sky.

Second, I needed to find a cool image for my space material, and what better place to find photos of space than NASA? So I spent a while browsing the NASA Image Gallery and found a couple of great photos. I applied these images to the scene, which created the desired effect, shown to the right.

Third, I needed to draw the sun. I wanted it to appear fiery and glowing, so I decided to render it as a series of 2D planes, positioned on top of each other in 3D space. Back at NASA, I found a good sun image and inserted it into my code:

Now it was time to add the planets. I decided to implement them as simple 3D spheres. I created meshes for each planet using more images from NASA, and added them to my scene. I then setup a simple elliptical motion to make each planet ‘orbit’ the sun.

The solar system scene was really starting to come together now, but I felt the planets could use a glow effect. To accomplish this, I used a similar technique as with the sun to render a series of semitransparent ‘rings’ around each planet:

As a final touch, I added shooting stars which randomly shoot across the sky ever few seconds. The star was created using a plane and animating it across the skybox.

Finally, I set up a secondary camera view and rendered it in the lower right corner of the window. I wanted users to see the scene close up and zoomed out, simultaneously.

And I was done! The simulation may not be scientifically accurate, but I figured it wasn’t bad for a weekend of experimenting.

There are many interesting 3D visualizations you can create with the techniques and library I used for Galactic. Here are a few links to some other great 3D experiments developers have created using HTML5 canvas:

Internet Explorer 9 provides fully hardware accelerated rendering to the entire Web platform. This helps existing sites run faster and also enables fluid new experiences like these 3D simulations that developers can create today. I hope this write-up showed you how simple it is to get started having fun with 3D graphics and HTML5 Canvas. Special thanks to Mr. Doob and the other developers who are showing the world what’s possible with HTML5.

You should support WebGL instead of doing poor 3D graphics with canvas!!!

Johannes, i had to to it 😉

The truth is I don't care about IE not supporting webgl anymore. IE is irrelevant. It's speed won't make it otherwise. Microsoft is too mired in politics (how can we support webgl when we support DirectX) to be relevant. Like IE6/7/8, DirectX is enjoying it's heyday.

@Meni I am not sure , when your browser can target DirectX or some other API with the same semantics (No need to change the ocde the way we used to write), why would I target a new Api with javascript to create 3D Animation. I think this is a wrong approach to target a native API from your code, let browser to target it with the same sematics

@sunilmittal22 The problem with that approach is that prior to WebGL, there isn't any way to do real, standards compliant 3D rendering with javascript (without delving into the realm of plugins). No amount of native acceleration can get 2D canvas rendering to match the complete features of WebGL. Even if you're only concerned with the tiny subset of features you can approximately hack together in the canvas API, it's not going to perform nearly as well as a real 3D API.

I seem to remember that there was a standard for this kind of stuff about 12 years ago called VRML. I made solar system in that back then. Maybe not as pretty as this, and a need for plug-in but still…. not really impressed…

But then again, good that HTML5 is turning in such a rich standard, and that browsers are trying to adopt them as soon as possible.

Explain this then: Despite the claims that other browsers are much more innovative, how come that we see a lot of different, and incorrect implementations of the W3C standards on all the browsers that, when IE finally catches up, will bite developers.

Microsoft is leading the pack with in-depth test-suites to come to unified behaviour – none of the other browser vendors have taken up that responsibility in the years that Microsoft was absent. They were all too busy to partially implement specifications to get the 100% score on a synthetic test, that covers only a *very* small subset of the actual spec.

Seen in that light, the ACID3 test is one of the worst things that could have happened with the web, all the vendors rushing to the finish line, implementing as little as possible and still getting full marks.

The dotted, rounded border is a case in point (but there are others). Google releases a new browser every six weeks or so, yet fails to meet that standard (Chrome 12 beta). It also fails composition on a canvas element. (And who "owns" the webkit engine anyway? Who is responsible for that renderer?)

Yes, Microsoft is late to the game. Very, very late indeed. But it might become the new (W3C compliant) standard browser (or its test-cases) that we'll measure other browsers against in a few years time.

Hi Microsoft, I think you should take your time with this browser like you did IE9 and make IE10 faster then IE9…and make it support all html formats.. I mostly care about speed in a browser. If IE10 is slow I might switch to firefox

Been saying that forever, WebGL is a terrible idea. And running arbitrary shader code served up from a web page inside notoriously unstable and complex display drivers is so naive. Get rid of it, go back to the drawing board, and make a real 3D web standard this time.

1) WebGL is ignored. I suspect this is a higher management issue. I also feel the delay of IE, a few years late, was the work of higher management.

2) The platform is irrelevant. The web IS the platform. This statement might make you laugh or angry. If this is the case, i can label you a Microsoft fanboy. It seems that IE is marketed this way: If you want to enjoy the native web, get a Microsoft platform. FAIL.

The download UI in IE9 is horrible. Currently every browser except IE9 has an option to always ask the user where to save whereas IE9 has a very tiny "Save as" but half the time I keep hitting "Save and run". And for some stupid reason (by design?), it doesn't even open the download manager automatically but keeps downloading from the notification bar. All downloads should be shown in a SINGLE location by default, there is no need to show each download on each tab's notification bar and make us click "View downloads" every single time and close the notification bar on EACH tab after every download completes.