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.

Two walls of the skybox (no textures applied)

// front wall

walls.push(new Wall(5000, 3000, new THREE.Vector3(0, 0, -3000), new THREE.Vector3(0, 0, 0), Materials.Space.Material));

// back wall

walls.push(new Wall(5000, 3000, new THREE.Vector3(0, 0, 1000), new THREE.Vector3(0, 180 * Math.PI / 180, 0), Materials.Space.Material));

// left wall

walls.push(new Wall(4500, 4000, new THREE.Vector3(-3000, 0, -1000), new THREE.Vector3(0, 90 * Math.PI / 180, 0), Materials.Space.Material));

// right wall

walls.push(new Wall(4500, 4000, new THREE.Vector3(3000, 0, -1000), new THREE.Vector3(0, -90 * Math.PI / 180, 0), Materials.Space.Material));

Two walls of the skybox (textures applied) 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:

Sun rendered as a series of planes

// the sun

for (var i = 0; i < 15; i++) {

var ring = new THREE.Mesh(new Plane(200, 200, 1, 1), Materials.Ring1.Material);

ring.position = gGalaxy.CenterPoint;

ring.rotation = new THREE.Vector3(i * 15, i * 15, 0);

ring.doubleSided = true;

AddToLayer(ring, 3);

}

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.

Planets orbiting the sun

var mesh = new THREE.Mesh(new Sphere(radius, _detail.x, _detail.y, true), material);

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:

Glow effect around planet Earth

// earth glow

for (var i = 0; i < 4; i++) {

var ring = new THREE.Mesh(new Plane(60, 60, 1, 1), Materials.EarthGlow.Material);

ring.position.x = gEarth.Position.x + i * 10;

ring.position.y = gEarth.Position.y + i * 10;

ring.position.z = gEarth.Position.z + i * 10;

ring.rotation = new THREE.Vector3(i * 20, i * 20, i * 20);

ring.doubleSided = true;

ring.i = i;

gEarthGlow.push(ring);

AddToLayer(ring, 5);

}

A shooting star 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.

The final 3D Solar System scene rendered in IE9

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.

—Seth McLaughlin, Program Manager, Internet Explorer Performance

Comments (41)

  1. Christian says:

    Demo Available?

  2. Tom says:

    It would be interesting if the renderer of THREE.js could be changed, then the performance of the different types of renderings (Canvas, SVG, WebGL) could be compared.

  3. IE9Fan says:

    How about releasing Galactic as a screensaver? I HATE that Windows 7 doesn't have a lot of screensavers :-(

  4. Kevin Roast says:

    Thanks for linking in my 3D demos (the HTML5 logo and the geometric shapes) – I have noticed they run *very* smooth in IE9 on my desktop PC which has a decent graphics card.

    Also using the same canvas 3D library is this game demo: http://www.kevs3d.co.uk/…/arena5 – the enemies and player in the games are all rendered in glowing 3D vectors.

  5. Yoga says:

    I like the idee of the screensaver.

  6. Johannes says:

    I guess this post is just a time bomb waiting to explode.

    Let's wait how long it'll be until someone cries »You should support WebGL instead of doing poor 3D graphics with canvas!«.

  7. meni says:

    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.

  8. meni says:

    it's => its [twice]

  9. @meni says:

    Man, you are freaking boring. Your comments have never provided any new information for months. Please leave or die.

  10. smithy says:

    great, you create a new internet explore that can do some totally useless crap but it cannot bloody work on simple standard sodding sites… great work guys!

  11. sunil mittal says:

    @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

  12. mike says:

    I see that IE10 still cannot handle const declaration in Javascript.

    Is this feature too hard to implement for Microsoft engineers?

  13. Numb Still says:

    @mike –

    "const" is non standard, it is not specified within ECMAScript.

  14. pdehaan says:

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

  15. Vossekop says:

    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.

  16. Aethec says:

    @pdehaan: A 3D JS API would be nice. An implementation-specific API is not good at all.

    People used to laugh at Microsoft's -ms-filter because they were IE-specific, and now WebGL is the best thing since sliced bread?

  17. Stifu says:

    @Aethec: it's not really comparable to -ms-filter. There *is* a spec.

    Also, as the Chrome and Firefox implementations show, it doesn't have to be implemented directly on top of OpenGL. You can make a DirectX-only implementation if you want to.

  18. Aethec says:

    (it looks like my previous comment was ignored, I'll re-post it *sigh*)

    @Stifu: Firefox doesn't have a DirectX WebGL implementation, the only workaround for non-OpenGL-compatible hardware is a slow software OpenGL emulation library, available separately.

  19. yellowstone says:

    .jxr, .hdp JPEG XR Filename extension support!!!

  20. yellowstone says:

    .jxr, .hdp  – Filename extension(JPEG XR) support!!!

  21. Harry Richter says:

    Those few that cry for WebGL support should read: http://www.h-online.com/…/WebGL-as-a-security-problem-1240567.html

    The most important quote from this article:

    "In the researchers' opinion, WebGL is simply not yet ready for primetime. They advise users and IT administrators to think seriously about deactivating WebGL support in their browsers."

    So, Microsoft: please do not support WebGL, and if you do, please make it optional so that I can immediately disable it!

    Harry

  22. flamethrower - Off topic rant (apologies) says:

    @meni:IE irrelevant?

    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.

  23. Mario says:

    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

  24. Raffi says:

    @Harry

    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.  

  25. Timo says:

    Firefox and Google have given their response to the WebGL 3D exploits through Khronos which is the organisation behind WebGL. http://www.khronos.org/…/webgl-security

  26. Harry Richter says:

    @ Timo

    And what do they say: we are aware that there are problems, but up to today we did little to address this problem. We are considering a cover-up. We dont do anything to address the real issue.

    Harry

  27. meni says:

    "The dotted, rounded border is a case in point" I kinda see the point, that standards should be implemented, but this is really a waste of everyone's bandwidth.

  28. meni says:

    "(And who "owns" the webkit engine anyway? Who is responsible for that renderer?)"

    Ah, you are? 😉

  29. meni says:

    flamethrower, IE is irrelevant IMO because of two things:

    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.

  30. Stifu says:

    Did my post also get eaten? Hmm.

    @Aethec: Firefox used to have an OpenGL implementation, but moved to Google's ANGLE (ie: DirectX on Windows) a little while before releasing Firefox 4.0.

    PS: guys, stop feeding meni.

  31. jose qntonio delfin says:

    q fuerte esta esoooo..

  32. Mario says:

    3D is the future webGL is so like old now xD

  33. hAl says:

    @meni

    Get a chrome os laptop and do not bother us any further

  34. tuxplorer says:

    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.

  35. Still says:

    Full anti-aliasing only IE9!!! Beautiful!!!

    http://chrome.angrybirds.com/

  36. Mike the Tike says:

    This would have been useful to know before I built Star Putt. http://www.starputt.com

  37. kostas says:

    Chrome like faster in some things

    but HTML5 is faster in IE9

    I <3 IE9!!!