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.
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.
Yay! That's what I'm talking about! The next 6 months are going to be exciting :)
November 10, 2009 at 11:12 AM subblueLooks promising, however with the latest Webkit nightly I'm getting a few errors:
November 10, 2009 at 11:32 AM Arthur LangereisERROR: 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)
Hm, on my Mac mini I get the same errors in both Webkit Nightly and Minefield. Right after the 'Setting up 1000x500 canvas' message:
November 10, 2009 at 11:43 AM Arthur LangereisERROR: 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.)
Hm, and the Mac Chromium latest build dies when it tries to start.
November 10, 2009 at 11:50 AM Jacob SeidelinWHY DO YOU HATE US SO?
Anyway. Um, cool stuff.
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 UnknownVery 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 AnonymousCan'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.
November 11, 2009 at 4:37 AM Jacob SeidelinThe video looks awesome, though :)
Yea, they changed the names of the *Array objects yesterday. Made a quick fix, should work now.
November 11, 2009 at 5:25 AM GilesWow, that's truly fantastic! Great one.
November 11, 2009 at 7:13 AM AnonymousChrome keeps telling me Aw Snap! with a sad face :-( that is it fails with some unknown error. It's
November 12, 2009 at 9:32 AM Jacob Seidelinchrome-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.
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 dotnetCarpenterWhere did you get the MIDI sounds from?
November 12, 2009 at 7:45 PM Jacob SeidelinWho said anything about MIDI?
November 13, 2009 at 12:29 AM AnonymousThanks 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 Danielhi, lovely work! btw, im using ff 3.7a1 pre alpha.
November 15, 2009 at 9:16 AM RobUKcan you add this version number?
thx, ping, daniel
Getting the following error on latest Chromium build for Win32:
November 18, 2009 at 3:50 AM UnknownSetting up 1000x500 canvas
ERROR: 0:1: '' : Version number not supported by GL2
Cube Defense seems to work okay.
Works fine in Mac Chromium 4.0.253.0 (32511) and reminds me a bit the old Amiga demos. ;-)
November 19, 2009 at 8:22 AM Unknownnda
Wow thats truly fantastic, i would rather say fantabulous. Where did you get this idea from? Great job, thanks for sharing with us.
November 25, 2009 at 4:26 AM Anonymousr4i software
Hi, I was suddenly getting errors related to getShaderi no longer being available in Webkit. This answered why nicely:
December 6, 2009 at 3:01 PM Jacob Seidelinhttp://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?
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 UnknownThe 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.
December 8, 2009 at 3:48 AM vitamine hMio Navman Spirit V505
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.
December 24, 2009 at 2:26 AM r3dbuddhaAdd-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.
Hi,
January 1, 2010 at 10:25 AM David HumphreyI 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
"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."
January 7, 2010 at 8:50 PM Jacob SeidelinWe'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
I know it crashes for some at the moment. The browsers and the spec have updated but this demo hasn't. In due time..
January 8, 2010 at 12:30 AM Anonymous@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.
This doesn't work in chrome 5 dev.
April 11, 2010 at 7:54 PM RichonetThanks for your Contents.
May 12, 2010 at 10:57 PM www.oracledba.inThanks,
www.richonet.com
www.oracledba.in
Thanks for your content .
May 12, 2010 at 11:00 PM AnonymousThanks,
www.richonet.com
www.oracledba.in
<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 peepoos x 10.6 chromium 9.0.571.0 (64793)
November 2, 2010 at 2:57 PM Jacob SeidelinLoaded 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
Thanks. Should be fixed now, although the sun is rather messed up.
November 2, 2010 at 3:11 PM AnonymousMan, this project just keeps breaking every time I turn my back on it..
It is amazing creativity .I also try to make this.It is so nice.
December 21, 2010 at 8:25 PM AnonymousAmazing ! But shouldn’t they exclude Pluto ? I thought it was no longer considered a planet ?
January 11, 2011 at 8:32 PM eye lift guideBesides, it would be nice if they could make a difference (longer notes ?) for larger planets like Jupiter….
mobile software development
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