Learning WebGL

Lesson 1 >>

[This post has been updated several times since it was originally written, as things have moved on a bit... information is correct as of 16 August 2010.]

The first step in trying out WebGL is to get a browser that supports it; WebGL is supported in development versions of all of the main browsers apart from Internet Explorer, so what you need to do is get the appropriate version for your machine. How easy this is depends on what kind of computer you have:

• Windows:
  • If you have a reasonably recent ATI or Nvidia graphics card, you should be fine. Go ahead and try installing either Firefox or Chromium, whichever you prefer — if it doesn’t work, check out the troubleshooting guide.
  • If you have an Intel graphics chipset (common in laptops) then things are less good. The drivers that Intel provide for their graphics hardware don’t support OpenGL very well, and right now the WebGL support in browsers works through OpenGL (this will change in the future). You may want to try the instructions for Firefox or Chromium, but it’s quite likely that they won’t work. If that’s the case, your best bet right now is to use Firefox with software rendering (that is, 3D graphics running on your normal processor, not on the graphics card). This will be slow, but at least you’ll be able to try out some of the WebGL content out there!
• Macintosh: if you’re running Snow Leopard (OS X 10.6), things should be fine; I recommend that you use the development version of WebKit, which will run as an alternative version of Safari. If you’re running Leopard (OS X 10.5), then you won’t be able to use that version of WebKit, but you can run either Firefox or Chromium. Snow Leopard users can use Firefox or Chromium too, of course. If you’ve got an older version of OS X, unfortunately I don’t know of any WebGL browser you can use right now :-(
• Linux: the situation is largely the same as with Windows:
  • If you’ve got ATI or Nvidia graphics, and recent drivers, then things should work just fine with either Firefox or Chromium. (A few months back there were some problems with 64-bit Firefox on Linux, but apparently they’ve been fixed; as Benoit Jacob from the development team says, please try it — bug reports welcome :-)
  • If you have Intel graphics, just like the Windows users you’re likely to have to use slow software rendering; try Firefox or Chromium, but they probably won’t work with the default (hardware rendering) setup. To use software rendering on Linux, you need to make sure that Mesa is installed (you should just be able to get the latest version using your distro’s package manager) and then you can use the latest Firefox with a few extra settings.

Firefox

The “unstable” development release of Firefox is called Minefield. It’s updated every night, and it’s actually pretty solid right now: with one minor tweak to the settings, I’ve not seen it crash recently (and I use it for everything). It can be installed alongside a regular version of Firefox, too, so you don’t need to worry about uninstalling it if you give up on it, or just want to switch back to the regular version for a while.

To get Minefield:

• Go to the nightly builds page and get the appropriate version for your machine.
• Install it (you’ll need to quit any running Firefox instances while this happens).
• Start Minefield.
• Go to the page “about:config”
• Filter for “webgl”
• Switch the value “webgl.enabled_for_all_sites” to “true”.
• As of 9 February 2010 I also recommend you also set the “dom.ipc.plugins.enabled” setting to “false” — this disables a recently-added feature which I’ve found tends to cause the browser to lock up, apparently when you have a non-visible tab that’s showing a PDF.

(Thanks to Vladimir Vukićević for the information for this one.)

Next, click here to try out some WebGL pages.

Running Minefield with Software Rendering on Windows

If your graphics hardware doesn’t support OpenGL 2.0, then right now the only way to get WebGL working on your machine is to use a library called Mesa. Mesa basically emulates a graphics card in software, so it’s a bit slow — but it’s better than nothing! It integrates with Minefield, which is the “unstable” development release of Firefox, and to get it all working on Windows:

• Go to the nightly builds page and get the appropriate version for your machine.
• Install it (you’ll need to quit any running Firefox instances while this happens).
• Download this version of the Mesa libary, kindly provided by Mozilla’s Vladimir Vukićević
• Unzip the Mesa zip file; it contains one DLL file, called OSMESA32.DLL, which you need to put somewhere on your machine.
• Start Minefield.
• Go to the page “about:config”
• Filter for “webgl”
• Switch the value “webgl.enabled_for_all_sites” to “true”.
• Set the value “webgl.osmesalib” to point to your OSMESA32.DLL. For example, if you extracted it to “C:\temp”, set “webgl.osmesalib” to “C:\temp\osmesa32.dll”
• Switch the value “webgl.software_rendering” to “true”.
• As of 9 February 2010 I also recommend you also set the “dom.ipc.plugins.enabled” setting to “false” — this disables a recently-added feature which I’ve found tends to cause the browser to lock up, apparently when you have a non-visible tab that’s showing a PDF.

(Thanks again to Vladimir Vukićević for the information for this one.)

Once you’ve done all that, you should be set. Click here to try out some WebGL pages.

Running Minefield with Software Rendering on Linux

If your graphics hardware doesn’t support OpenGL 2.0, then right now the only way to get WebGL working on your machine is to use a library called Mesa. Mesa basically emulates a graphics card in software, so it’s a bit slow — but it’s better than nothing! It integrates with Minefield, the “unstable” development release of Firefox, and it’s normally part of your Linux distro. Here’s how to get it working.

• Download the latest version of Minefield.
• Install it (you’ll need to quit any running Firefox instances while this happens).
• Using your Linux distro’s package manager, make sure that you have Mesa installed and updated to the latest version.
• Start Minefield.
• Go to the page “about:config”
• Filter for “webgl”
• Switch the value “webgl.enabled_for_all_sites” to “true”.
• Switch the value “webgl.software_rendering” to “true”.
• Set the “webgl.osmesalib” setting to the location of your OSMesa shared library (normally something like /usr/lib/libOSMesa.so).
• As of 9 February 2010 I also recommend you also set the “dom.ipc.plugins.enabled” setting to “false” — this disables a recently-added feature which I’ve found tends to cause the browser to lock up, apparently when you have a non-visible tab that’s showing a PDF.

Once you’ve done all that, you should be set. Click here to try out some WebGL pages.

Safari

Remember, Safari only supports WebGL on Macs running Snow Leopard (OS X 10.6); if you’re on Leopard (10.5), Windows or Linux then you’ll have to use Firefox or Chromium. (If you’re on an older version of OS/X, I don’t know of any browser you can use :-()

If you are on Snow Leopard, to get it running, you need to:

• Make sure you have at least version 4 of Safari.
• Download and install the WebKit nightly build.
• Start up a Terminal, and in it run this command:

  defaults write com.apple.Safari WebKitWebGLEnabled -bool YES
  

• Run the freshly-installed WebKit application.

(Thanks to Chris Marrin for the information for this one.)

Next, click here to try out some WebGL pages.

Chromium

The way the Chrome developers currently recommend you get WebGL in Chrome is to use a nightly build of Chromium, the open source browser on which Chrome is based. The procedure is a little different for each supported operating system; here are instructions for Windows, Macintosh, and Linux. (A warning — I’ve only tried the Windows version myself, but I’m told the other versions work fine too. Leave a comment below if I’m wrong on that :-)

For Windows

• Go to the continuous integration page and get chrome-win32.zip
• Unzip the file somewhere convenient.
• Open a Command Prompt, and go to the chrome-win32 directory that you unzipped.
• Make sure you’re not running Chrome already
• Run the following command:

  chrome.exe --enable-webgl
  

For the Macintosh

• Go to the continuous integration page and get chrome-mac.zip
• Unzip the file somewhere convenient.
• Open a Terminal window, and go to the chrome-mac directory that you unzipped.
• Make sure you’re not running Chrome already
• Run the following command:

  ./Chromium.app/Contents/MacOS/Chromium --enable-webgl
  

• Once you’ve checked that it works, you might want to automate things a bit so that you don’t have to type the command line every time; in the comments, Julien Limoges has provided a useful shell script to handle that.

For Linux

• If you’re using 32-bit Linux, go to the 32-bit continuous integration page and get chrome-linux.zip. If you want a 64-bit version instead, you can go to the 64-bit continuous integration page, scroll to the bottom to find the most-recent build directory, go into there, and get chrome-linux.zip from there instead.
• Unzip the file somewhere convenient, and go to the chrome-linux directory that you unzipped in a terminal window.
• Make sure you’re not running Chrome already
• Run the following command:

  ./chromium --enable-webgl
  

(Thanks to Mohamed Mansour for the information for this one.)

Next, click here to try out some WebGL pages.

Some first examples

Once your browser is installed, you should be able to see WebGL content.  Here’s a first sanity check; the results of my second WebGL lesson. You should see a triangle coloured red, green and blue, and a light blue square. If you don’t see both the square and the triangle, check out the troubleshooting guide below.

If it did work, everything should be set up! Unfortunately some recent changes to WebGL broke many of the demos out there, but here are some that have been updated:

• One of my own demos: Bouncing Mandelbrot Cubes.
• From Google: a shiny teapot (click and drag to spin it), “San Angeles“, and some cool particle effects
• A real-world use of WebGL: ChemDoodle 3D displays molecules in web pages.

That’s it for my first post on getting started with WebGL. If you want to go further and learn about how to create your own WebGL pages, you can check out my first WebGL lesson.

Lesson 1 >>

Troubleshooting

I don’t have any useful hints and tips for getting WebGL running on Macs, because no-one’s ever asked me for help and I don’t think I’ve ever seen questions in the forums. I can only assume that this means that Everything Just Works on OS X…

For Windows and Linux users: the most common reason for WebGL not working (apart from missing out a step in the instructions :-) is problems with graphics drivers. All current browser implementations of WebGL are based on OpenGL (this is expected to change at some time in the future), and OpenGL support is something that is provided by your graphics driver. WebGL needs at least OpenGL 2.0 in order to run; the reason that owners of Intel graphics cards have problems is that Intel haven’t released drivers for most of their graphics hardware with support for that. If you have Intel graphics, and you followed the instructions for Windows or for Linux above, and it’s still not working, leave a comment below and I’ll try to help.

If you have ATI or Nvidia graphics, the first thing to do is check the version of OpenGL you have on your machine. For Windows, GLview is a nifty tool that can give you that information. On Linux, you should just be able to run glxinfo and look for the line headed “OpenGL version string”. If the version number you see is less than 2.0, you’ll need to update your drivers. Check out your computer manufacturer’s website, and have a look at Windows update or your Linux distro’s package manager.

If you still can’t get things running, it may just be that a decent OpenGL driver isn’t available for your graphics hardware and operating system. Your best bet for now is probably to use software rendering. Here are the instructions for Windows and for Linux.