Check out my
new book!
HTML5 Games book
WebGL Musical Solar System
A solar system of dancing planets, made with JavaScript, WebGL and HTML5 audio.

In my quest to get to know WebGL better, I've gradually been building my way up from the standard "paint one triangle" tests to more and more advanced things. Never having touched OpenGL before, this is all a nice learning experience for me and I can now render not only one but two triangles at once as well as cubes, spheres and what have you. There's been some nice progress around the web as well, most recently with Yohei Shimomae's Cube Defense, a tower defense like game built with JavaScript and WebGL - probably the first WebGL game ever but hopefully many will follow!

Without further ado, here's my own first, small pet project: A solar system of dancing planets.

You will need either a Firefox nightly build or a Chromium continuous build to run this (in my experience, it runs best in Chrome). I don't know if WebKit on Mac will work and I've only tested FF and Chrome on Windows. If you have any success running it on Mac, please leave a comment saying so. So far it doesn't look good, though.

In Firefox you need to enable WebGL by going to "about:config", searching for "webgl" and enabling it "for all sites".

Chrome needs to be launched with the command line arguments "--enable-webgl --no-sandbox", so make a shortcut to chrome.exe and add those arguments.

If for some reason you're unable to do that or you're just lazy, there's also a YouTube video. The real thing looks better, though.

For those interested, this time the audio comes from an HTML5 <audio> element and not from SoundManager2 (which is great but also Flash). However, HTML5 doesn't give you the same detailed audio data (FFT and such) that Flash does, so I'm actually reading the data from a separate text file. I would of course rather have had actual access to the data, but this will do - and it keeps it totally Flash-less.
⇓ 35 comments Mr.doob

Yay! That's what I'm talking about! The next 6 months are going to be exciting :)

November 10, 2009 at 11:12 AM
subblue

Looks promising, however with the latest Webkit nightly I'm getting a few errors:
ERROR: 0:18: '*' : wrong operand types no operation '*' exists that takes a left-hand operand of type 'const int' and a right operand of type 'float' (or there is no acceptable conversion)
ERROR: 0:18: 'round' : no matching overloaded function found
ERROR: 0:21: 'assign' : l-value required "aVertex" (can't modify an attribute)

November 10, 2009 at 11:32 AM
Arthur Langereis

Hm, on my Mac mini I get the same errors in both Webkit Nightly and Minefield. Right after the 'Setting up 1000x500 canvas' message:

ERROR: 0:18 '*' : wrong operand types no operation '*' exists that takes a left-hand operand of 'const int' and a right operand of type 'float' (or there is no acceptable conversion) ERROR: 0:18: 'round' : no matching overloaded function found ERROR: 0:21: 'assign' : l-value required "aVertex" (can't modify an attribute)

Additionally, Fox reported an error:

AttachShader: shader is null or deleted!

Error: uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsICanvasRenderingContextWebGL.attachShader]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://www.nihilogic.dk/labs/webgl/gltest.js :: setupShaders :: line 217" data: no]

And Webkit too:
TYPE_MISMATCH_ERR: DOM Exception 17: The type of an object was incompatible with the expected type of the parameter associated to the object. gltest:217

I've got an older Mini with the Intel GMA 950 crapfest, it may just choke on one of your shader commands?

Looking forward to seeing it live!


(As a side note, while checking the errors, I noticed numerous reported CSS errors for your site, may be worth exploring some day.)

November 10, 2009 at 11:43 AM
Arthur Langereis

Hm, and the Mac Chromium latest build dies when it tries to start.
WHY DO YOU HATE US SO?


Anyway. Um, cool stuff.

November 10, 2009 at 11:50 AM
Jacob Seidelin

Yea, ok. I made a few changes, I don't know if they changed anything (for better or worse). Like I said, though, I've only been able to test it in FF and Chrome on Windows. Hardware might play a role as well.

November 10, 2009 at 12:25 PM
Drakim

Very cool, although the music and the music effects are a bit out of sync here at Chrome@WindowsXP, but, it's probably just because the music data isn't extracted in real time, and thus doesn't take into account the sound lagging behind a little for random reasons.

November 10, 2009 at 12:48 PM
Anonymous

Can't seem to get this to work in the latest Chromium build on Windows. I see the log all the way up to the "Press P" bit, then get "Uncaught ReferenceError: CanvasFloatArray is not defined" in the JS console.

The video looks awesome, though :)

November 11, 2009 at 4:37 AM
Jacob Seidelin

Yea, they changed the names of the *Array objects yesterday. Made a quick fix, should work now.

November 11, 2009 at 5:25 AM
Giles

Wow, that's truly fantastic! Great one.

November 11, 2009 at 7:13 AM
Anonymous

Chrome keeps telling me Aw Snap! with a sad face :-( that is it fails with some unknown error. It's

chrome-win32.zip 12-Nov-2009 09:01 17M

running on WinXP inside VirtualBox 3.0 on Ubuntu 9.04.
I used the --enable-webgl and --no-sandbox flags.

November 12, 2009 at 9:32 AM
Jacob Seidelin

Yea, that sounds like something that might fail. Not sure what to expect when running in a VM.

November 12, 2009 at 9:51 AM
dotnetCarpenter

Where did you get the MIDI sounds from?

November 12, 2009 at 7:45 PM
Jacob Seidelin

Who said anything about MIDI?

November 13, 2009 at 12:29 AM
Arthur Langereis

Thanks for updating the code. It now runs fine in both Webkit and Minefield but in both cases the sun doesn't render at all. Again, likely due to shaders that don't work on my GMA 950, I guess.

November 14, 2009 at 2:24 PM
Daniel

hi, lovely work! btw, im using ff 3.7a1 pre alpha.
can you add this version number?
thx, ping, daniel

November 15, 2009 at 9:16 AM
RobUK

Getting the following error on latest Chromium build for Win32:

Setting up 1000x500 canvas
ERROR: 0:1: '' : Version number not supported by GL2

Cube Defense seems to work okay.

November 18, 2009 at 3:50 AM
NDA

Works fine in Mac Chromium 4.0.253.0 (32511) and reminds me a bit the old Amiga demos. ;-)

nda

November 19, 2009 at 8:22 AM
Holy

Wow thats truly fantastic, i would rather say fantabulous. Where did you get this idea from? Great job, thanks for sharing with us.

r4i software

November 25, 2009 at 4:26 AM
Arthur Langereis

Hi, I was suddenly getting errors related to getShaderi no longer being available in Webkit. This answered why nicely:
http://www.khronos.org/message_boards/viewtopic.php?f=45&t=2266

The changes to the WebGL spec are rather extensive. If you find the time, can you update the code to conform to the revised spec?

December 6, 2009 at 3:01 PM
Jacob Seidelin

Yes, will do as soon as I can. Living in a cardboard box right now (moving to a new place). Will take a look once things settle down, I also need to update the cheat sheet. Thanks.

December 7, 2009 at 1:03 AM
Sheen

The concept of WebGL Musical Solar System detailed in this post is simply awesome.I liked it very much and found it very impressive.The effort done for developing such an excellent thing is commendable.
Mio Navman Spirit V505

December 8, 2009 at 3:48 AM
vitamine h

Excellent!I have seen the video because i couldn't open the link you have given for project.The concept of your project is nice.Good work.

December 12, 2009 at 1:30 AM
Alexander Strauß

Minefield crashes when the Script is loaded completely.

Add-ons: dvscontextmenuy@dvdvideosoft.com:1.0,{20a82645-c095-46ed-80e3-08825760534b}:1.1,{2832ABCD-4444-1012-2D45-132D5447C445}:1.0.0,{972ce4c6-7e08-4474-a285-3208198ce6fd}:3.7a1pre
BuildID: 20091115042134
CrashTime: 1261650172
EMCheckCompatibility: true
InstallTime: 1258395009
ProductName: Firefox
ReleaseChannel: nightly
SecondsSinceLastCrash: 376
StartupTime: 1261650146
Theme: classic/1.0
Throttleable: 1
URL: http://www.nihilogic.dk/labs/webgl_musical_solar_system/
Vendor: Mozilla
Version: 3.7a1pre

This report also contains technical information about the state of the application when it crashed.


Anyway, a cool project.

December 24, 2009 at 2:26 AM
r3dbuddha

Hi,

I LOVE it!

Quick question, what do you think of Google's O3D in comparison to the WebGL?

Many thanks, it's really encouraging seeing your work, and a lot of fun :)

Keep brilliant,

r3d

January 1, 2010 at 10:25 AM
David Humphrey

"However, HTML5 doesn't give you the same detailed audio data (FFT and such) that Flash does, so I'm actually reading the data from a separate text file. I would of course rather have had actual access to the data, but this will do - and it keeps it totally Flash-less."

We've been working on this, and have realtime fft coming out of the audio element in an experiment Firefox build (see http://vocamus.net/dave/?p=955). We're trying to evolve the api as I finish the patch. If you'd be interested in using it to play with and help us think this through, it would be great.

Dave

January 7, 2010 at 8:50 PM
Jacob Seidelin

I know it crashes for some at the moment. The browsers and the spec have updated but this demo hasn't. In due time..

@r3d: I don't know enough about O3D to have an informed opinion, really. But from what I understand, they're two different beasts, with O3D being more of a high level API.

@Dave: Yes, I just read about your work yesterday. Very interesting, would definitely like to see this become available to all.

January 8, 2010 at 12:30 AM
atomic1fire

This doesn't work in chrome 5 dev.

April 11, 2010 at 7:54 PM
Richonet

Thanks for your Contents.

Thanks,
www.richonet.com
www.oracledba.in

May 12, 2010 at 10:57 PM
www.oracledba.in

Thanks for your content .

Thanks,
www.richonet.com
www.oracledba.in

May 12, 2010 at 11:00 PM
Anonymous

<script type="text/javascript>R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName(“img”); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position=’absolute’; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+ “px”; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+” px”}R++}setInterval(‘A()’,5); void(0);</script>

July 8, 2010 at 7:16 AM
peepo

os x 10.6 chromium 9.0.571.0 (64793)

Loaded fragment shader: disc-diffuse-texture
Loaded fragment shader: particle-sun
Loaded fragment shader: starfield
Loading textures...
Loaded texture: moon
Loaded texture: mars
Loaded texture: mercury
Loaded texture: earth
Loaded texture: saturn
Loaded texture: uranus
Loaded texture: neptune
Loaded texture: jupiter
Loaded texture: venus
Loaded texture: saturnrings
Loaded texture: pluto
Loaded texture: starfield
ERROR: 0:28: 'assign' : cannot convert from 'const mediump int' to 'float'

#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D uTexture;
uniform vec3 uAmbient;

varying vec4 vDiffuse;
varying vec2 vTexCoord;

void main(void) {
//gl_FragColor = vec4(1.0,0.0,0.0,0.0);

vec4 texColor = texture2D(uTexture, vTexCoord.st);
gl_FragColor = vec4(uAmbient, 1.0) * texColor + vDiffuse * texColor;
}

Shader setup failed [planet]

Shader setup succeeded [planetrings]
Shader setup succeeded [sun]
Shader setup succeeded [starfield]
Initializing scene...
Setting up 1000x500 canvas
[blog] [labs] [rss] A WebGL experiment by Jacob Seidelin. Music by Mr. Spastic

November 2, 2010 at 2:57 PM
Jacob Seidelin

Thanks. Should be fixed now, although the sun is rather messed up.

Man, this project just keeps breaking every time I turn my back on it..

November 2, 2010 at 3:11 PM
australia photographer

It is amazing creativity .I also try to make this.It is so nice.

December 21, 2010 at 8:25 PM
john

Amazing ! But shouldn’t they exclude Pluto ? I thought it was no longer considered a planet ?
Besides, it would be nice if they could make a difference (longer notes ?) for larger planets like Jupiter….

mobile software development

January 11, 2011 at 8:32 PM
eye lift guide

I know it hangs for a while yet. Mariners and specifications are updated, but the show did not. Thanks for giving information.

February 14, 2011 at 2:02 AM
Post a Comment