WebGL for Firefox

This is a re-post from Vlad Vukićević‘s personal blog. WebGL, an effort to bring a GL-based 3D extension to the web, is being standardized through Khronos. The WebGL work is based on the GL Canvas extension that Vlad started and is now being implemented in both Firefox and Safari. Builds that include support for WebGL are now being built every night. This work won’t make it into Firefox 3.6 but may be included in a post-3.6 release. To keep track of the WebGL progress you can follow Vlad or Mark Steele‘s progress.

Since my post on Friday, we landed a few fixes to improve our WebGL implementation and to fix a couple of bugs we discovered on Friday. I’m looking forward to seeing what people do with WebGL, and how it can be useful on the web right now. For example, EA/Maxis recently added COLLADA export of Creature designs to their popular game Spore, and they have a Sporepedia where players can see others’ creations. Right now, those previews are just as images. With WebGL, they could be fully 3D, even animated.

Spore Creature View (thumbnail)Over the weekend I’ve put together this example, which uses WebGL to render an exported Spore creature, and let the user rotate the 3D model to view it from different angles. For those who want to try it out, you’ll need a recent Firefox nightly (one from today, September 21, or newer), and with one preference flipped as described in this post.

I’ll be working to update the very basic “getting started” demos from the GL ES 2 book that I ported to Canvas 3D as well, so that those who are interested in experimenting can have some good basic code to look at. They’re not updated yet, but they should be in the next day or two.

For those of you on Windows who don’t have an up to date OpenGL driver, or don’t have the possibility of getting one (e.g. many common Intel graphics cards doesn’t have OpenGL drivers), you can enable software rendering by downloading a Windows build of the Mesa software OpenGL implementation. It won’t be fast, but it should be enough for you to get an idea of what’s going on, and to play with some of the demos. To use it, download webgl-mesa-751.zip and extract it somewhere on your computer. It has a single file, OSMESA32.DLL, that you need to tell Firefox where to find: open up about:config, and set the preference webgl.osmesalib to the path of OSMESA32.DLL. If you extracted it to “C:temp”, you would put in “C:temposmesa32.dll” in the pref. Then, flip webgl.software_rendering to true, and you should be good to go.

(Mac OS X users shouldn’t need to bother with software rendering, since Apple already provides a high quality OpenGL implementation, and Linux users should be ok as long as they have recent OpenGL drivers installed.)


35 comments

  1. Aaron

    This is fantastic. Great job Vlad. I can’t wait to see the material that takes advantage of OpenGL in the browser in the months to come.

    September 21st, 2009 at 18:29

  2. Eric Shepherd

    It’s important to note that this is trunk nightlies, not Namoroka nightlies.

    September 21st, 2009 at 18:56

  3. Yann

    I don’t seem to get it work on Linux amd64, just nothing loads… any idea?

    September 22nd, 2009 at 09:02

  4. András Bártházi

    I have “Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.3a1pre) Gecko/20090922 Minefield/3.7a1pre”, and I see an empty box. I have enabled the extension at about:config, and I have tried software rendering with both on and off.

    September 22nd, 2009 at 11:53

  5. […] – WebGl in Firefox (Ars Technica) – WebGL for Firefox (blog de […]

    September 22nd, 2009 at 12:41

  6. Steve Harvey

    Great… but we could do all this 15 years ago with VRML.

    September 22nd, 2009 at 14:38

  7. […] a follow-up post featured at the Mozilla Hacks website, he shows how WebGL can be used to display a COLLADA model. […]

    September 22nd, 2009 at 18:41

  8. […] – WebGl in Firefox (Ars Technica) – WebGL for Firefox (blog de […]

    September 23rd, 2009 at 00:07

  9. […] information here. Follow me on twitter Twitter Delicious Dzone Reddit Stumble […]

    September 23rd, 2009 at 10:28

  10. David Leppik

    @Steve Harvey: you have a good point, but this is bigger than VRML ever could have been. VRML described 3D scenes, rather than being an API for rendering frames. In theory they are interchangeable, but no model-based API has ever caught on, in part because there are certain things that are difficult or impossible, such as split-screen views or rendering different objects within a scene with different lighting. VRML never caught on, in part because it was a separate plug-in, and in part because the few sites that had a use for it could just as easily offer a Windows application that could serve nearly as many users.

    These days, there are more non-Windows users, people are more used to using the web instead of installing programs, JavaScript has matured, and I would argue that there are more uses for it. Mostly games, but also maps (Google Earth, anyone?) and data visualization.

    September 24th, 2009 at 08:47

  11. Gil

    The spore example doesn’t work for me. I have Ubuntu 9.04, and I get a dialog message that tells me to turn on webgl… but it is on!

    September 25th, 2009 at 10:58

  12. Floyd

    No luck getting it to work here with Ubuntu 9.04 either. Tried setting webgl.osmesalib to /usr/lib/libGL.so, but getContext still fails.

    September 26th, 2009 at 08:29

  13. […] Source Evangelist at Mozilla. Blizzard exported a Spore creature, and used WebGL’s API to render it as a 3-D model that you can rotate around, viewing it from different […]

    September 29th, 2009 at 04:05

  14. […] I first started work on porting the C3DL library from using Canvas 3D to WebGL, I ran into a problem with instanceof. In a particular line of code, I check if an object is an […]

    October 18th, 2009 at 10:00

  15. […] Events, Mobile Technology | Tags: ARM techcon, Jay Sullivan, Mozilla | Leave a Comment  Mozilla’s VP of Mobile, Jay Sullivan, positioned the company at the forefront of the mobile web during his […]

    October 22nd, 2009 at 14:35

  16. […] web developers to create interactive 3D content for any browser supporting the standard. So far Mozilla, Safari and possibly Chrome are on board. No word on stagnant Microsoft […]

    December 3rd, 2009 at 15:57

  17. ant

    No go for me on amd64 Linux – I’ve tried using radeon git drivers (which claim to be OpenGL2.0) and setting the LIBGL_ALWAYS_SOFTWARE env var (which claims to support 2.1) but either way it doesn’t work. Here’s hoping this doesn’t turn into a binary-drivers-only fiasco by the time it’s released…

    February 11th, 2010 at 18:48

  18. roy

    in regards to the VRML comment, i was never ever able to get VRML to work under any system. in fact, when i try importing and exporting VRML with at least 1/2 dozen modellers, i’ve just as much success. the first time i downloaded and installed a firefox nightly build for webgl it worked perfectly. i think there are a lot of reasons besides the plug-in thing which caused the death of VRML. for me, these experiences of it NEVER working was the deciding factor.

    February 17th, 2010 at 00:00

  19. Alexander

    What Windows 7 64-bit? Can’t get it working with OSMESA32.DLL, c:WindowsSysWOW64opengl32.dll or c:WindowsSystem32opengl32.dll

    March 3rd, 2010 at 11:51

  20. […] for WebGL, which is disabled by default but can be enabled by changing a preference. See this blog post and this blog post for more […]

    March 5th, 2010 at 13:24

  21. […] for WebGL, which is disabled by default but can be enabled by changing a preference. See this blog post and this blog post for more […]

    March 5th, 2010 at 13:33

  22. anon

    You forgot to mention to set webgl.enabled_for_all_sites to enabled.

    August 12th, 2010 at 19:50

  23. skierpage

    Do you need to update this sample to use Float32Array instead of WebGLFloatArray ? The sample is not working for me with libOSMesa.so.6 , though I don’t get the alert(“Please update to a newer Firefox nightly to pick up some WebGL API changes!”) that I think I should see.

    September 16th, 2010 at 02:07

  24. Amir

    What is the state of WebGL now? It’s been a year since this article was posted, where can we download the latest version?

    December 19th, 2010 at 11:38

  25. gonebamboo

    Will WebGL get the features that is absolutely necessary for developing FPS games such as creating joints, skeleton based animation, morphing, and collision detection. I can see how all these features will make javascript even more cumbersome to use in game development.

    Check out this web site that use high level object-oriented visual programming paradigm for reducing the complexity in developing web-based 3d games.

    http://www.otakhi.com

    December 21st, 2010 at 09:00

  26. wap-tek

    NO status bar in the new firefox = now you are blind ,
    the status bar made it easy to tell if a site link
    lied about where you were going and this was
    just not coperate / advertizer friendly

    webgl = require a beta browser = maybe see something

    vrml/x3d = use a plugin or viewer
    in any browser, = it worked over 10 years ago!

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

    google , mozilla, and many other “good guys”
    jumped the shark or drank the flavoraid

    December 25th, 2010 at 04:14

  27. Danny Moules

    “vrml/x3d = use a plugin or viewer
    in any browser, = it worked over 10 years ago!”

    This has already been addressed above. It’s a totally different beast. Somewhat like saying Windows and DOS are identical because they both run programs, sit above a file system and schedule CPU time… and DOS totally works on age-old x86 hardware. Why do we need this 64-bit Windows 7 stuff?

    “webgl = require a beta browser = maybe see something”

    Until it’s not in beta..

    “No luck getting it to work here with Ubuntu 9.04 either. Tried setting webgl.osmesalib to /usr/lib/libGL.so, but getContext still fails.”

    OSMesaLib is a software rendering library. It is not OpenGL ES.

    “I’ve tried using radeon git drivers (which claim to be OpenGL2.0)”

    You require OpenGL ES 2.0.

    January 11th, 2011 at 09:21

  28. Danny Moules

    “Will WebGL get the features that is absolutely necessary for developing FPS games such as creating joints, skeleton based animation, morphing, and collision detection.”

    These are unrelated to the rendering engine. You can use the same collision detection and animation engine easily across WebGL, DirectX, OpenGL, canvas, SVG, etc.

    January 11th, 2011 at 09:24

  29. Danny Moules

    Will WebGL get the features that is absolutely necessary for developing FPS games such as creating joints, skeleton based animation, morphing, and collision detection.

    January 11th, 2011 at 09:25

  30. LiJian

    I can’t download webgl-mesa-751.zip.

    July 12th, 2011 at 19:31

    1. louisremi

      You shouldn’t have to install the mesa pilot anymore if you’re using firefox 4 or greater.

      July 13th, 2011 at 18:37

      1. LiJian

        Thanks.I am using firefox5,but it always says “Could not initialise WebGL, sorry :-(“.

        July 14th, 2011 at 05:06

  31. TheCyndicate

    ALL medium to high end Intel graphics cards have OpenGL drivers.

    I just LOVE the hate from ignorant Mac users, lol.

    September 2nd, 2011 at 18:18

  32. TheCyndicate

    HAHAHAHA‼

    Only COWARDS moderate posts‼

    It shows that you are scared of the TRUTH that people might post, LOL‼

    Pathetic.

    September 2nd, 2011 at 18:20

    1. Robert Nyman

      Or we have a massive audience and there is lots of spam, so comments are moderated to avoid posts that could be of explicit or completely unrelated nature.

      September 5th, 2011 at 01:33

Comments are closed for this article.