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.
// 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));
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:
// 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.
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:
// 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);
}
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:
- 3D rendering of the HTML5 logo
- 3D sky panorama
- Cool 3D Tetris game
- Terrain simulation
- 3D geometric shapes
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
Anonymous
May 06, 2011
Demo Available?Anonymous
May 06, 2011
The very first link. ie.microsoft.com/.../Default.htmlAnonymous
May 06, 2011
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.Anonymous
May 06, 2011
How about releasing Galactic as a screensaver? I HATE that Windows 7 doesn't have a lot of screensavers :-(Anonymous
May 06, 2011
The comment has been removedAnonymous
May 06, 2011
I like the idee of the screensaver.Anonymous
May 06, 2011
The comment has been removedAnonymous
May 06, 2011
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.Anonymous
May 06, 2011
it's => its [twice]Anonymous
May 06, 2011
The comment has been removedAnonymous
May 06, 2011
The comment has been removedAnonymous
May 07, 2011
@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 sematicsAnonymous
May 07, 2011
I see that IE10 still cannot handle const declaration in Javascript. Is this feature too hard to implement for Microsoft engineers?Anonymous
May 07, 2011
@mike - "const" is non standard, it is not specified within ECMAScript.Anonymous
May 08, 2011
The comment has been removedAnonymous
May 08, 2011
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.Anonymous
May 08, 2011
@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?Anonymous
May 08, 2011
@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.Anonymous
May 09, 2011
(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.Anonymous
May 09, 2011
.jxr, .hdp JPEG XR Filename extension support!!!Anonymous
May 09, 2011
.jxr, .hdp - Filename extension(JPEG XR) support!!!Anonymous
May 10, 2011
Those few that cry for WebGL support should read: 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! HarryAnonymous
May 10, 2011
The comment has been removedAnonymous
May 10, 2011
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 firefoxAnonymous
May 10, 2011
@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.Anonymous
May 10, 2011
Firefox and Google have given their response to the WebGL 3D exploits through Khronos which is the organisation behind WebGL. www.khronos.org/.../webgl-securityAnonymous
May 10, 2011
@ 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. HarryAnonymous
May 10, 2011
"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.Anonymous
May 10, 2011
"(And who "owns" the webkit engine anyway? Who is responsible for that renderer?)" Ah, you are? ;-)Anonymous
May 10, 2011
flamethrower, IE is irrelevant IMO because of two things:
- 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.
- 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.
Anonymous
May 10, 2011
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.Anonymous
May 10, 2011
www.contextis.com/.../webglAnonymous
May 10, 2011
WebGL? No, thanks! cvs.khronos.org/.../lots-of-polys-example.htmlAnonymous
May 11, 2011
q fuerte esta esoooo..Anonymous
May 11, 2011
3D is the future webGL is so like old now xDAnonymous
May 11, 2011
@meni Get a chrome os laptop and do not bother us any furtherAnonymous
May 11, 2011
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.Anonymous
May 12, 2011
Full anti-aliasing only IE9!!! Beautiful!!! http://chrome.angrybirds.com/Anonymous
May 13, 2011
WEBGL fail cvs.khronos.org/.../lots-of-polys-example.htmlAnonymous
May 13, 2011
This would have been useful to know before I built Star Putt. http://www.starputt.comAnonymous
May 16, 2011
Chrome like faster in some things but HTML5 is faster in IE9 I <3 IE9!!!