Construct 2 recently introduced WebGL shader effects in the beta releases, allowing for impressive native-grade visual effects. Below is an example of a 'water' shader simulating a watery surface effect on one of our site images. Click inside the effect to make it fullscreen in Firefox or Chrome. Construct 2 comes with a library of over 70 other effects. But what are WebGL shaders and how do they work?
https://www.scirra.com/labs/watershader/
The WebGL renderer
If you've been following our blog for a while, you'll have read about how our WebGL renderer works. All modern browsers provide a "canvas 2D" renderer, which is a simple but fairly limited way to draw 2D games. On the other hand, WebGL allows low-level access to graphics hardware, resulting in better performance and access to more features. Not only is WebGL about twice as fast as canvas 2D in our tests, its low-level access also allows us to take advantage of an amazing modern technology: shaders. These are small programs which run on the GPU (Graphics Processing Unit). The GPU is the chip in your computer that draws everything on your screen (as opposed to the CPU, which most programs run on).
GPU power
In my opinion, GPUs are underappreciated as a technology. Do you think a 16-core CPU is cool? Right now both AMD and nVidia are offering desktop GPUs with over 2000 cores. That's right - thousands - and this can involve up to four billion transistors. Wow! Admittedly, these are simpler cores designed only for graphics processing. You could not run Windows on these cores, because they are missing many CPU features in order to keep costs down. However they are perfect for the kind of processing done when rendering.
Even modern phones and tablets are getting impressively powerful GPUs. Of course, tighter cost and power constraints make most of the hardware in mobile devices weaker than desktops. But considering the hardware is designed for 3D, generally sensibly-designed 2D games are not a problem. (If your games run slow on mobiles, it's almost always because the GPU is not actually being used for rendering - a problem CocoonJS and directCanvas fix.)
Games can still be rendered on the CPU, which is called software rendering. However since GPUs have a large number of simple cores, they can blaze through all the thousands of pixels on your screen in a fraction the time that it would take the CPU. Imagine 2000 simple specially-designed GPU cores racing against eight highly complex general-purpose cores. It's no contest - even mobile devices using GPU rendering can outpace a high-end multicore desktop machine using software rendering.
Shaders
So while most programs run on your CPU, shaders are programs specially written to run on the GPU for graphics processing. In WebGL they are written in a language called GLSL ES ("OpenGL Shading Language for Embedded Systems"). Shaders are often just a few lines long, such as the 'grayscale' effect which simply calculates a shade of grey for a given color.
By cleverly programming a shader in GLSL ES, it is possible to craft almost any kind of visual effect you want. And best of all, the effects run on dedicated, specially-designed hardware. Since it runs on the GPU, it consumes almost no CPU time, freeing up the CPU to keep running the game logic.
In other words, shaders allow for a whole new class of visual effects that previously would make your computer grind to a halt.
https://www.scirra.com/labs/warpradialshader/
The catch
The main problem with WebGL is it is not supported everywhere yet. Firefox and Chrome have it enabled by default, as long as your graphics card driver is up to date. However, many drivers are horrendously buggy, and manufacturers are negligent in keeping users up to date, which means even a lot of Firefox and Chrome users don't get it enabled. Graphics drivers have caused us much pain as well.
Opera and Safari support WebGL, but have it turned off by default. You can turn it on to try it out, but obviously most users will still have it off. Let's hope both enable it by default in future.
Internet Explorer is the notable exception - it appears Microsoft have no plans to support WebGL, probably because it is based on OpenGL which competes with their own DirectX technology.
Very few mobile devices currently support WebGL. The Blackberry Playbook does, and in theory Firefox for Android does, but it is so slow it's not quite useful yet. Hopefully in future we'll see iOS and Android devices supporting WebGL. (I wouldn't hold out any hope for Windows Phone!)
Our recently added desktop exporter is powered by Awesomium, which is based on Chrome's browser engine and thus supports WebGL. Even better, we have WebGL forced enabled, so it is always supported regardless of the graphics driver. This means you can count on WebGL support in Awesomium.
In short, WebGL works in Awesomium, and for Firefox and Chrome users with new computers. However, support should be improving in future. You can also set fallbacks for effects, which say what to do when WebGL is not supported. This means you can design a game which uses lots of pretty shader effects, but still looks and works properly when using the canvas 2D renderer. This will be covered in more detail by future tutorials and documentation updates.
Creative possibilites
Despite the support headache, the creative possibilities are tremendous. Try browsing the built-in effects and see what they can do for you. There are also a set of Photoshop-style blend modes, such as Screen, Overlay, and Dodge. With Construct Classic we saw developers designing entire levels in Photoshop with various blend modes for artistic effect, then simply copying each layer to Construct layers with shaders reproducing the same blend modes. The results can be beautiful, and now this technique can be carried across to Construct 2 as well.
https://www.scirra.com/labs/polarshader/
We can't wait to see the next generation of Construct 2 games using WebGL shaders. We hope you are inspired by what we think is both a technically amazing and creatively enabling technology, and we're proud to still be one of the only engines implementing this even since Construct Classic first introduced shader effects five years ago.