Mozilla

WebGL for Firefox

on September 21, 2009 by

in Demo Firefox WebGL

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

Comments are now closed.

  1. Aaron wrote on September 21st, 2009 at 6:29 pm:

    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.

  2. Eric Shepherd wrote on September 21st, 2009 at 6:56 pm:

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

  3. Yann wrote on September 22nd, 2009 at 9:02 am:

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

  4. András Bártházi wrote on September 22nd, 2009 at 11:53 am:

    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.

  5. Pingback from WebGL ya disponible en Firefox : Blogografia on September 22nd, 2009 at 12:41 pm:

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

  6. Steve Harvey wrote on September 22nd, 2009 at 2:38 pm:

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

  7. Pingback from Simprograms » 3D Spore Models in a browser soon to be possible? on September 22nd, 2009 at 6:41 pm:

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

  8. Pingback from WebGL ya disponible en Firefox | UR-VE.COM on September 23rd, 2009 at 12:07 am:

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

  9. Pingback from WebGL is in the nightly build of Firefox and Safari « Position Absolute on September 23rd, 2009 at 10:28 am:

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

  10. David Leppik wrote on September 24th, 2009 at 8:47 am:

    @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.

  11. Gil wrote on September 25th, 2009 at 10:58 am:

    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!

  12. Floyd wrote on September 26th, 2009 at 8:29 am:

    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.

  13. Pingback from New Firefox Demos Show Off WebGL’s Powerful 3-D Potential - Programming Blog on September 29th, 2009 at 4:05 am:

    [...] 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 [...]

  14. Pingback from Canvas 3d JS Library » instanceof issues on October 18th, 2009 at 10:00 am:

    [...] 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 [...]

  15. Pingback from Will Mozilla lead innovation of the mobile web? « AndaPR on October 22nd, 2009 at 2:35 pm:

    [...] 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 [...]

  16. Pingback from WebGL – The New Frontier – Stumbling Ahead - Nick Haemel on December 3rd, 2009 at 3:57 pm:

    [...] 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 [...]

  17. ant wrote on February 11th, 2010 at 6:48 pm:

    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…

  18. roy wrote on February 17th, 2010 at 12:00 am:

    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.

  19. Alexander wrote on March 3rd, 2010 at 11:51 am:

    What Windows 7 64-bit? Can’t get it working with OSMESA32.DLL, c:\Windows\SysWOW64\opengl32.dll or c:\Windows\System32\opengl32.dll

  20. Pingback from Mozilla developer preview (Gecko 1.9.3a1) available for download ✩ Mozilla Hacks – the Web developer blog on March 5th, 2010 at 1:24 pm:

    [...] 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 [...]

  21. Pingback from Mozilla developer preview (Gecko 1.9.3a2) now available ✩ Mozilla Hacks – the Web developer blog on March 5th, 2010 at 1:33 pm:

    [...] 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 [...]

  22. anon wrote on August 12th, 2010 at 7:50 pm:

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

  23. skierpage wrote on September 16th, 2010 at 2:07 am:

    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.

  24. Amir wrote on December 19th, 2010 at 11:38 am:

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

  25. gonebamboo wrote on December 21st, 2010 at 9:00 am:

    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

  26. wap-tek wrote on December 25th, 2010 at 4:14 am:

    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

  27. Danny Moules wrote on January 11th, 2011 at 9:21 am:

    “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.

  28. Danny Moules wrote on January 11th, 2011 at 9:24 am:

    “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.

  29. Danny Moules wrote on January 11th, 2011 at 9:25 am:

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

  30. LiJian wrote on July 12th, 2011 at 7:31 pm:

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

    1. louisremi wrote on July 13th, 2011 at 6:37 pm:

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

      1. LiJian wrote on July 14th, 2011 at 5:06 am:

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

  31. TheCyndicate wrote on September 2nd, 2011 at 6:18 pm:

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

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

  32. TheCyndicate wrote on September 2nd, 2011 at 6:20 pm:

    HAHAHAHA‼

    Only COWARDS moderate posts‼

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

    Pathetic.

    1. Robert Nyman wrote on September 5th, 2011 at 1:33 am:

      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.

Comments are closed for this article.