Muon Baryon in 6k JavaScript

I present to you my latest hack: Muon Baryon for JavaScript/WebGL. (Note: requires an HTML5/WebGL browser, a decent graphics card, and the pre-calculation time before the demo actually starts is quite long).

The Original

So, what is Muon Baryon? It’s a Windows 4k demo originally created by Youth Uprising, Ümlaüt Design and Outracks. More precisely, it’s the winner of the Assembly 2009 4k contest (so it’s a bit old – but still one of my absolute favorites). You can find out more here.

So, to begin with I started out converting the remaining C code to JavaScript, which mostly consisted of replacing things like glUseProgram() with gl.useProgram(), etc (a no-brainer). I also had to replace the handy desktop OpenGL call glRect with slightly more bloated vertex buffer code. When trying it out for the first time, nothing worked (black screen)… of course. I suspected the GLSL code and inserted the following lines after compiling the shaders:

I quickly realized that the original GLSL code was written for the older desktop GLSL 1.x (using ftransform etc), while WebGL uses GLSL ES, which has dropped a few functions. Here are a few things I had to do to convert the GLSL code to GLSL ES:

Replace ftransform with a “custom” position attribute (quite simple, since the demo didn’t use any transformations).

Include the line precision highp float; in the fragment shaders.

Replace the while-loop with a fixed length for-loop, i.e:

while(g<1.){ ... }

becomes:

for(int j=0; j<999; j++){if(g>=1.)break; ... }

Not sure about how good this solution is, but at least Firefox and Chrome do not complain. Another thing I did was to make the shader resolution independent (the original was hard-coded to a certain screen resolution). Other than that, it was quite straight forward work.

The Result

The size of the original Windows demo was 3977 bytes. I did not expect to be able to squeeze the JavaScript port down to 4k, but I hoped to get it below 8k at least. And the final result, after using Google Closure Compiler and CrunchMe to compress the code, is: 5846 bytes!!

16 thoughts on “Muon Baryon in 6k JavaScript”

I get a black screen in Chromium 14 on a couple of Windows 7 machines, both of which run it fine in Firefox 5. The latter have webgl.prefer-native-gl enabled in about:config, and it also works in Chrome 13 on an OS X machine, so I maybe it’s an ANGLE issue?

Thanks. That link didn’t make any difference – I still just got a black page and the audio playing – but I managed to find the solution via a bit of Googling.

Running Chrome/Chromium with the argument –use-gl=desktop fixed the problem for me. As far as I can tell, there’s nothing within Chrome’s options to set this within the browser. chrome://gpu does give you a bunch of extra information when this argument is passed, but you wouldn’t really know anything was amiss from the “default” information on that page.

It seems that a few of you are experiencing problems running this demo (I have not been able to reproduce myself). It should be a fairly straight forward case of standard WebGL (a few different shaders and very simple geometry).

I have not found any errors in the code (yet, please report if you do!), so my guess is that the demo is stressing the current WebGL implementations and/or graphics drivers a bit too far (the shaders are probably more complex than the standard case).

In any case, I hope that WebGL will be a good push for having GLSL compliant graphics cards and implementations everywhere pretty soon 😉