Firefox 4, HTML5 and WebGL: Introduction (how to enable and set up)

Having been in awe with the idea of HTML5 and WEBGL, i have fiddled around with Firefox to get the environment ready.   I have tried with Safari and Chrome, but had no luck.  They all said getting the latest build (nightly build preferably) and usually with a command line " --enable-webgl".

However, if i start developing and distributing little cool apps with html5+webgl.  I certainly cannot ask all my target audience to modify their command line targets.   So, here, i document this 'less-annoying' way such that i could ask my fellow colleagues and research mates to run what i build for them.

Setting Things Up


1) Download and Install Firefox (latest version, as of writing, im using Firefox 5.0.
(http://www.mozilla.com/en-US/firefox/fx/)

2)  Once Firefox is installed, in the address bar, input the following:
about:config

3) then it may prompt for a warning, click "I'll be careful, i promise"  because i will show you what you need to configure without breaking anything

4) in the filter input textbox, input the following:
webgl

5) Double click the row webgl.force-enabled (the corresponding value column would change from false to true)

Testing and Demo

1) To test html5+webgl, i refer you to this website (http://www.html5test.com).  Let it load for a bit, and after its done, scroll to 'webgl'.  Your score should be greater than 20. (In my setting, it gave me 23/25)

2) To see the webgl demo, i refer you to this website (http://www.brummerblogs.com/curvature/work/atomic-orbitals/)  Why? Because it is showing 3D and it has good interactive mouse control!

Good luck, drop me a msg / comment if you need help.