Lesson 0: Getting started with WebGL

Lesson 1 >>

[This post has been updated several times since it was originally written, as things have moved on a bit since it was originally published in October 2009... to the best of my knowledge, information is correct as of 4 February 2011.]

The first step in trying out WebGL is to get a browser that supports it. Because the WebGL specification is still under development — a “final draft” was released on 27 January 2011, but things haven’t quite settled down yet — which browser you should get depends on a number of factors.

Keeping it simple

In general, I recommend that if you want to take a look at cool WebGL demos and aren’t really worried about developing your own, and don’t really care that some of the very latest stuff might not work, then:

  • If you’re on Windows, make sure you have the Microsoft DirectX runtime installed — this is a free download from Microsoft.
  • Next, choose between Chrome or Firefox:
    • Chrome: if you’re already using it, just check whether it’s updated itself to verison 9 — this will probably have happened automatically, but you can check from the “About Google Chrome” option on the tools menu to confirm. If you weren’t previously using Chrome, but want to try it for WebGL, just download it from here.
    • Firefox: download and install Firefox 4 beta.

That’s it! You should be good to go. Next, click here to try out some WebGL pages.

Doing it the hard way

If you’re developing WebGL yourself, or if you need the latest features, then nothing beats having the very latest browser. And WebGL is supported in development versions of all of the main browsers apart from Internet Explorer, so all 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 haven’t already done so, make sure you have the DirectX runtime installed — this is a free download from Microsoft. Once you’ve done that, install either Firefox or Chromium, whichever you prefer — if it doesn’t work, check out the troubleshooting guide.
  • 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: quite a large number of Linux graphics drivers are, sadly, not good enough to work with WebGL. The same used to be the case under Windows, but the browser makers worked around it using DirectX; unfortunately there’s no such escape route for Linux. Here’s what I’ve managed to gather:
    • If you’ve got ATI or Nvidia graphics, and recent drivers, then things should work just fine with either Firefox or Chromium.
    • If you have Intel graphics, you’re likely to have to use slow software rendering, which sucks but at least lets you see some WebGL stuff; 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: 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. Look out! There might be various versions there, with names like firefox-4.0b11something or firefox-4.0b12something. You want the most recent, which will be with the highest number after the ‘b’.
  • Install it (you’ll need to quit any running Firefox instances while this happens).
  • Start Minefield.

A useful tip — if you want to run Minefield side-by-side with the regular Firefox, you can do this by adding the following command-line parameters: -P Minefield -no-remote. The first parameter makes it run with a separate profile (so that you keep separate histories and sets of active tabs in each browser) and the second means that when you start Minefield while Firefox is already running, it won’t just open a new window in the currently-running Firefox. You might also want to add -P default -no-remote to the parameters for your normal Firefox to do the same there too. Windows users: you can set the command-line parameters for each application by right-clicking on the icon you use to launch it, selecting “Properties”, and adding the parameters to the end of the “Target” field. Mac and Linux users — I don’t know how you do it, but you probably know anyway ;-)

Next, click here to try out some WebGL pages.

Running Minefield with Software Rendering on Linux

If your graphics hardware or — more likely — driver doesn’t support OpenGL 2.0, then right now the only way to get WebGL working on Linux 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).

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.

Next, click here to try out some WebGL pages.

Chromium

The way the Chrome developers currently recommend you get WebGL in Chrome, if you’re doing WebGL development, 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.
  • Inside the unpacked directory, double-click the chrome.exe file.

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
    
  • 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

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:

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

Macs

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…

Windows

The most common problem for Windows users is that you don’t have the DirectX runtime installed — this is a free download from Microsoft, so give it a go. It might also be worth seeing if there are more up-to-date drivers for your graphics card — check out Windows Update, or perhaps the website of your graphics card manufacturer.

Linux

The most common reason for WebGL not working under Linux is problems with graphics drivers. All current Linux browser implementations of WebGL are based on OpenGL, and OpenGL support is something that is provided by your graphics driver. WebGL needs at least OpenGL 2.0 in order to run; in particular, owners of Intel graphics cards have problems because Intel haven’t released drivers for most of their graphics hardware with support for that. If you have Intel graphics, try using Mesa software rendering. If 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. To do this, 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/graphics card manufacturer’s website, and have a look at distro’s package manager.

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

Acknowledgments

Thanks to Vladimir Vukićević, Mohamed Mansour, Ehsun Amanolahi, and Chris Marrin for the information that made up this page, and all of its many previous incarnations!

You can leave a response, or trackback from your own site.

174 Responses to “Lesson 0: Getting started with WebGL”

  1. Here is an updated link to chromium linux64 download:

    http://build.chromium.org/f/chromium/continuous/linux64/LATEST/

    Cheers for the amazing site.

  2. Thai Tran says:

    I’ve tried all exercises. They all worked except Lesson 8 with “Use blending”. Can you help?

    Thanks.

  3. giles says:

    @Roberto — no problem!

    @Vincent — the problem I’ve seen in the past with the auto-updating versions is that they’ve pulled WebGL support without warning a few times. In general, it has been safer to rely on Chromium nightly builds. That might be no longer the case, though.

    @Ehsun — thanks! I will update the post.

    @Thai Tran — looks like something’s stopping that one working in Chromium, not sure if it’s my problem or theirs. I’ll take a look and update it if necessary — keep an eye on the comments for that post for details.

  4. [...] Getting a WebGL browser Note: If you have Chrome version 7+, you just need to enable it with chrome.exe –enable-webgl [...]

  5. Henry P. Day, Jr. says:

    I tried to use your link from Vladimir to get the Mesa .dll file,

    http://people.mozilla.com/~vladimir/misc/OSMESA32.zip

    and got an error 404 message. Can you update your link?

  6. giles says:

    Thanks for the heads-up, Henry — looks like my instructions are out of date. I’ll fix them ASAP. In the meantime: as of Firefox 4 beta 8, you probably don’t need Mesa. Instead, try making sure you have the DirectX runtime installed as per this post on Vlad’s blog: http://blog.vlad1.com/2010/12/21/webgl-in-firefox-4-beta-8/

  7. wap-tek says:

    webgl = forced to use beta browser + 90 mb video driver ,
    = maybe see something

    vrml/x3d = find a decent plugin or viewer ,
    = all were less than 5 mb and worked over 10 years ago!

    why cant mozilla just use a generic vrml / x3d plugin and make it
    FAULT TOLLERANT = ignore the deliberate standards breaking
    that the major players did 10 years ago

  8. [...] just noticed in the release notes for Chrome the mention of Web GL .  So, I looked up some instructions to enable [...]

  9. F1LT3R says:

    Particle effects demo appears to be broken in both Firefox4 Beta8 and Chromium 10.

    https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/google/particles/index.html

  10. Haisen says:

    Thank you.My firefox mozilla can run webgl now.

  11. giles says:

    @wap-tek — right now, sure. But things go in to beta browsers in order to go into production browsers later when all of the problems are fixed — that’s what the beta is for! So going forward, all browsers with the (hopefully temporary) exception of Internet Explorer will have WebGL support by default. It’s also worth noting that with VRML and X3D you can only do a subset of the things WebGL can manage. X3DOM is an X3D implementation on top of WebGL.

    @F1LT3R — thanks for the heads-up, I’ll remove it from my list and alert the Google guys so that they can fix it.

    @Haisen — glad to help!

  12. To start I am running a Window 7 64bit machine with an Nvidia graphics card.
    When I tried your second lesson “the results of my second WebGL lesson” it did not work. I followed you instruction and found the continuous integration page and saw the chrome-win32.zip file. Is there a 64bit version?

  13. giles says:

    Hi Michael — I use a Win7 64-bit machine (albeit with ATI graphics) and the Win32 Chromium works for me. I don’t think there is a 64-bit nightly build for Windows, anyway — not sure why. Perhaps you could try Mozilla Minefield and see if you have any more luck? Alternatively, was there anything displayed in the JavaScript console in Chromium?

  14. [...] want to install the developer channel of Chrome or else Firefox 4 to do the newer stuff like webgl: http://learningwebgl.com/blog/?p=11 )Insert a dynamic date here  Yin Huang The apparent difficulty of JavaScript depends [...]

  15. used chrome ,my system is windows xp ,i doesn’t open the webgl,please help me ,thank you!

  16. jatatar says:

    in ubuntu edited applications menu item for chrome to “google-chrome –enable-webgl” and it works fine. using latest stable build and repos from ubuntu tweak.

  17. aestheticsData says:

    works perfectly on OSX 10.6.4 with webkit !!!

  18. giles says:

    @china wenjie xiao — try making sure you have the DirectX runtime installed as per this post on Vlad’s blog: http://blog.vlad1.com/2010/12/21/webgl-in-firefox-4-beta-8/

  19. [...] für 3D-Grafik. Was damit möglich ist, zeigt eine Demo-Seite. Die Beispiele darauf funktionieren auch in anderen Browsern, etwa der aktuellen Beta des Firefox und der Entwicklerversion von [...]

  20. [...] updated its Chrome web browser to version 9.  Basically the biggest changes for users will be WebGL support and the Chrome Web Store.  If you’ve never seen WebGL in action check it out.   The [...]

  21. [...] WebGL is a Javascript API that makes it possible to create 3D graphics that update in real time inside the computers browser (FYI: I use Google Chrome a lot, so the following experiments are within Chrome). There is no need to download any special software or plug-in to see these 3D images. For some browsers, such as Chrome or Firefox, this technology seems to work flawlessly already. For Macs, Safari only supports WebGL on Macs running Snow Leopard (OS X 10.6)…other versions won’t work. To see if your preferred browser has the capabilities to run WebGL, click here. [...]

  22. [...] Firefox:WebGL工作在 Windows、Mac OS X和Linux中每日构建(Nightly Build,也 叫Daily Build), 是将一个软件项目的所有最新代码取出,从头开始编译,链接, 运行测试软件包对代码进行单元测试 并对主要功能进行测试,发现错误并报告错误的完整过程。——译者注)的Firefox开发版上。点击此处了解如何安装支持WebGL的Firefox。如 果你使用PC机,建议用Firefox。 [...]

  23. [...] Lesson 0: Getting started with WebGL | Learning WebGL WebGL examples webglsamples – Project Hosting on Google Code [...]

Leave a Reply

Subscribe to RSS Feed Follow me on Twitter!