Today is a huge milestone for real-time graphics on the web. Mozilla has launched Firefox 51, the first browser to bring WebGL 2 to the masses. WebGL has been around since 2011, the year when PlayCanvas was founded. 6 years on, the open standard for web graphics has taken a huge leap forwards, exposing far more GPU capabilities to developers, making for ever richer, more beautiful experiences.
To mark the launch of WebGL 2, Mozilla and PlayCanvas have teamed up to build ‘After the Flood’.
EXPERIENCE ‘AFTER THE FLOOD’ NOW
‘After the Flood’ illustrates many of the key, new aspects of WebGL 2.
- Transform feedback: to animate leaf particles on the GPU.
- 3D Textures: used to create procedural clouds.
- HDR rendering with MSAA: for correct blending of antialiased HDR surfaces.
- Hardware PCF: for better shadow filtering at a lower cost.
- Alpha to coverage: to render antialiased foliage.
- …and much more.
So how was all of this done? As you know, PlayCanvas is an open source game engine. All of the work to integrate WebGL 2 into the engine can be found on Github.
Other key demo features are:
- Compressed textures: DXT, PVR and ETC1 are used to reduce VRAM usage.
- Asynchronous asset streaming: to get the demo loading faster.
- Runtime lightmap baking: to generate realistic shadows that render fast.
- Procedural water ripples
- Planar mirrors
As you can see, PlayCanvas is all about squeezing the full potential from the browser. PlayCanvas apps, like ‘After the Flood’, look beautiful, load fast and perform great.
So what’s next? First, we will refactor and merge our WebGL 2 work into PlayCanvas’ mainline codebase. Then we will enable ‘After the Flood’ on mobile. And finally, we will make the demo project public so you can see exactly how we made it:
Want to get creative with WebGL yourself? Why not get started with PlayCanvas today?
Hi,
At the beginning of the demo, the view goes progressively to the vertical without touching my trackpad and i cannot change the perspective afterwards. I’m using a 2013 macbook pro. The demo doesn’t work…:(
Hi, we’re tracking an issue like this. Currently we think it might be an issue in Firefox. For example, does this demo work correctly for you? https://mdn.github.io/pointer-lock-demo/
Sorry! We’re trying to find a fix.
I put a bug notice since I think it’s broken in v51. It seems fine in the beta and dev. versions
https://bugzilla.mozilla.org/show_bug.cgi?id=1333574
works well. cant wait to try out the project myself. well done guys
Interesting demo. Wondering how this will effect Three.js
Why do I get “Firefox is up to date” in the about Window when my version is “50.1.0” ?
I’m not sure. One of our team in Russia had the same problem. Maybe they roll up the update gradually across regions. You could always force enable WebGL 2 in about:config
Unfortunately crashes after immediately after loading on a MacBook Pro with nvidia 750m :/
Thanks for the feedback. We’ll let Mozilla know.