WebGL 2 lands in Firefox

With the release of Firefox 51, WebGL 2 support has landed! WebGL is a standard API to render 3D graphics in the Web. It is based on OpenGL ES, which is commonly used by mobile games.

To date, we have been able to use WebGL 1 (based on OpenGL ES 2) to render fancy graphics into a <canvas> element. WebGL 2, however, is based on the OpenGL ES 3.0 specification, which introduces new features – many of them aimed at increasing performance and visual fidelity.

Until today, WebGL 2 had been usable behind a flag or in the Developer Edition or Nightly, but with Firefox 51, it’s now unlocked for all users of Firefox on Windows, MacOS, and Linux.

Demo: “After the Flood” (PlayCanvas)

To give you a taste of the content WebGL 2 enables, we’re excited to highlight After the Flood, an interactive WebGL 2 demo by PlayCanvas. (Please note that this demo is currently desktop only, with mobile support coming soon.) Take a walk through the fantastical environment of water, glass, and steel running entirely within your web browser!

atf-0atf-1atf-3atf-4

How to use WebGL 2

To request a WebGL 2 context, all we need to do is ask for one from a <canvas> element. The string we use to request WebGL 2 is “webgl2”.

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('webgl2');

WebGL 2 might not be present in all browsers, so you should include some fallback code:

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('webgl2');
let isWebGL2 = !!ctx;
if (!isWebGL2) { // try to fallback to webgl 1
    ctx = canvas.getContext('webgl') ||
          canvas.getContext('experimental-webgl');
}
if (!ctx) {
    console.log('your browser does not support WebGL');
}

A word of caution…

Keep in mind that while WebGL 2 is based on OpenGL ES 3.0, it’s not identical. For instance, WebGL 2 does not support program binaries, and a number of optional restrictions in OpenGL are made mandatory for WebGL 2. The differences between the two are laid out in the WebGL 2 spec, so if you’re already familiar with OpenGL, you’ll be able to get up to speed with WebGL 2 quickly.

Another thing to note is that WebGL 2 is not strictly backwards compatible with WebGL 1, so there is the possibility that your WebGL 1 code will not work as expected when using a WebGL 2 context. That said, the differences are fairly minimal, and you should be able to port your code and shaders without too much hassle. You can read a backwards incompatibility list in the spec, as well as this quick guide from WebGL2 Fundamentals about migrating code from WebGL 1 to WebGL 2.

Keep in mind that while WebGL 2 will be bringing these new features to many of our users, we cannot offer WebGL 2 to users with old or outdated graphics cards and drivers.

Highlighted features

Updated shading language

WebGL 2 supports OpenGL ES Shading Language 3.0, which allows for much more capable and efficient shading programs. The new toys include:

  • True integer types
  • Uniform blocks
  • Binding the location indices for shader inputs and outputs in the shader source
  • Fragment discard
  • Dynamic loops
  • Sophisticated texture sampling built-ins

Multiple render targets (“MRTs”)

This allows you to render to several color buffers or textures in one pass, using multiple outputs from the fragment shader.

This feature was enabled in WebGL 1 via an extension, but now forms part of the core set of features of WebGL 2, so there’s no need to worry about a fallback path.

One of the main applications of MRTs is a technique called deferred shading – and we have already written about it in Hacks before. It’s a rendering technique that allows for a lot of dynamic lights in a scene, since the complexity on rendering doesn’t depend on the amount of lights, but on the actual number of pixels that are being lit.

Instanced geometry drawing

Instancing allows you to render multiple instances of a geometry with a single draw call, which reduces the burden on the CPU. Note that each instance can have its own attributes, like a transformation matrix, so you could use this to render a lot of similar objects, like particles, trees in a forest, people in a crowd, etc.

The following THREE.js demo uses instancing via an extension – which, remember, is no longer needed in WebGL 2.
instanced-rendering

New texture features

3D or volume textures are textures where we access the data using three coordinates instead of two (like in regular, 2D textures). These are most commonly used for tone mapping, but also can be helpful for rendering volumetric effects, like smoke, fog, and rays.

2D array textures hold a series of separate 2D layers, which a shader can index into in order to select just one of the contained 2D textures.

Sampler objects are new in WebGL 2. These decouple the way the texture is sampled from the texture selected for sampling, so a single texture can be sampled in several ways, and multiple textures can point to the same sampler object.

WebGL 2 also removes restrictions on non-power-of-two (NPOT) textures.

Transform feedback

Transform feedback captures the output of the vertex shader into a buffer object, often using this output as input to the next frame. This creates a loop that doesn’t leave the GPU, offloading the CPU of these computations. Particle systems often take advantage of transform feedback to iterate each particle’s position and move it in each frame without CPU interaction.

Transform feedback can also be combined with “rasterizer discard”, which allows running the vertex shader without the fragment shader. This allows for natural “map” GPGPU (general-purpose computing on graphics processing units) data processing flows.
transform-feedback

And more!

There are many more features that have arrived in WebGL 2, including Vertex Array Objects, MSAA renderbuffers, and Uniform Buffer Blocks to name a few. For a full list of everything new in WebGL 2, you can have a look at the official spec, since it contains just the differences between WebGL 1 and 2.

A number of these features can be seen in relative isolation on the WebGL 2 samples page. These feature-specific demos serve to illustrate the effects possible with new features, as well as to provide example code for how to use them.

What’s next

We’re releasing the API for widespread use today, but there’s still more work to do. We’re looking forward to working on performance improvements, relaxing some restrictions, and improving general polish. We know performance in particular is on a lot of your minds, so we have some exciting work in store to provide applications with the performance they need to deliver even more sophisticated and impactful experiences.

In addition to seeing apps add WebGL 2 support, we look forward to seeing WebGL 2 integration into existing WebGL frameworks and engines. PlayCanvas is supporting WebGL 2, as shown off in our highlight of After the Flood. Three.js also has support for utilizing WebGL 2. Keep an eye out for other engines receiving WebGL 2 support later this year!

Running into an issue? Please file a bug on our Bugzilla. (Remember: GitHub logins work too!)

About Jeff Gilbert

Jeff leads Firefox WebGL development and is co-editor of the WebGL specs.

More articles by Jeff Gilbert…

About Belén Albeza

Belén is an engineer and game developer working at Mozilla Developer Relations. She cares about web standards, high-quality code, accesibility and game development.

More articles by Belén Albeza…


24 comments

  1. Omar Shehata

    That PlayCanvas demo looks awesome! Is the project for that public by any chance? I’d really love to fork it and see how it was made.

    January 24th, 2017 at 09:32

    1. Joseph Peterson

      I too would like to fork the project. 3D on the web just keeps getting better and better.

      January 24th, 2017 at 10:00

    2. Marco

      Their blog states that they have to do some refactoring before they make it publicly accessible:

      https://blog.playcanvas.com/mozilla-launches-webgl-2-with-playcanvas/

      January 25th, 2017 at 12:04

  2. Andre Vrignaud

    PlayCanvas is intending to release the demo – keep an eye on their blog!

    January 24th, 2017 at 10:59

  3. John

    I didn’t expect much when I tested this out, but hot damn is it sweet! Such an amazing time to be alive :)

    January 24th, 2017 at 19:40

  4. mkv

    On Firefox 51.0:

    “This demo requires WebGL 2.0 support. Please update to the latest version of Mozilla Firefox.”

    ???

    January 25th, 2017 at 11:46

    1. Jeff Gilbert

      You should also try updating graphics card drivers if any updates are available for your system.

      January 25th, 2017 at 13:19

    2. Olivier

      I’m having the same problem! No graphic card driver updates have been released for my 2009 iMac. Guess I’m gonna have to uninstall Firefox… what a waste of time!

      January 26th, 2017 at 12:02

      1. Jeff Gilbert

        If you file a bug with a copy-paste of your about:support page’s Graphics section, we can take a look!
        For a 2009 iMac, it might just be too old for us to guarantee correct behavior at this point, unfortunately.

        February 8th, 2017 at 17:29

        1. Olivier

          How / Where should I file a bug?

          February 9th, 2017 at 06:04

        2. Olivier

          I filed Bug 1338147.

          It does appear to be a driver issue.

          February 9th, 2017 at 06:35

  5. Xuer

    Please include WebGL in the site permissions system and allow us to set it to “Ask to use”.

    Anything that touches video drivers that closely should be able to be disabled.

    Thanks for your work on the feature in general.

    January 25th, 2017 at 15:24

    1. dand

      Until they include something like that you can use the NoScript extension to selectively permit WebGL (and many other problematic features).

      January 26th, 2017 at 07:26

  6. Daniel C. Henning

    After upgrading to the newest Firefox, when I try the After The Flood link, upon the progress bar reaching 100%, Firefox force quits on me every time

    January 25th, 2017 at 18:47

    1. Jeff Gilbert

      This sounds like this bug:
      https://bugzilla.mozilla.org/show_bug.cgi?id=1333534

      January 27th, 2017 at 15:26

  7. clem

    Why webGL tuto always end at .getContext() ?

    January 25th, 2017 at 19:26

    1. Jeff Gilbert

      How to use WebGL itself is beyond the scope of this blog post. There are a number of other sites for learning how to use the API in detail, such as https://webglfundamentals.org/.

      February 8th, 2017 at 17:27

  8. mkv

    Thanks for the proposals.
    My drivers are the latest ones from NVidia.
    As for “site permission system” – where can I find it?

    January 26th, 2017 at 05:32

  9. Martin Best

    Updated to this, Chrome’s latest version has shipped and also includes WebGL2.

    January 26th, 2017 at 23:51

  10. wissing

    WebGL runs fine on Firefox 50, but since the update to Firefox 51 my WebGL-WebApps don’t show anything any more.
    Seems that all WebGL-capability is now cut off, if the graphic card has no WebGL2 support. That’s a pity, Firefox 51 is a big step into nirwana for those users who have no decent graphic card.

    January 30th, 2017 at 06:08

    1. Jeff Gilbert

      Very strange!
      Could you file a bug and include a copy-paste of your about:support page’s Graphics section?

      February 8th, 2017 at 17:26

  11. Wellington Torrejais

    Amazing!

    February 6th, 2017 at 07:58

  12. Muchlas Barkat

    Mozilla is the best

    February 19th, 2017 at 04:19

  13. Rober Villar

    There is a difference between rendering in a browser that supports WebGL, but it does not support VR like Firefox 51 and another one that supports both features , WebGl and VR like Nightly.

    February 19th, 2017 at 12:21

Comments are closed for this article.