WebGL shader effects in Construct 2

by Ashley | 30th, August 2012

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?

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.

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.

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.

Now follow us and share this

Tags:

Comments

3
Aura 3,396 rep

nice thank you !

Thursday, August 30, 2012 at 11:05:31 AM
3
delgado 12.9k rep

I love this shaders, our games will be best :D Thanks to you Scirra

Thursday, August 30, 2012 at 11:05:38 AM
0
Mipey 12.9k rep

I'm not sure I'm seeing what I should... All three are like this:
https://dl.dropbox.com/u/629300/Images/webgl_shader_effects_blog.png
Exactly the same. But when I click them (to fullscreen), each of them displays the desired effect.
Looks like multiple instances of C2 canvases on the same page all somehow merge effects?

Thursday, August 30, 2012 at 11:10:14 AM
3
Ashley 112.2k rep

@Mipey - are you using Firefox or Chrome? Are you sure it's up to date?

Thursday, August 30, 2012 at 11:11:58 AM
1
Mipey 12.9k rep

@Ashley, I knew I was forgetting something important... Firefox 15.

Thursday, August 30, 2012 at 11:13:22 AM
3
Ashley 112.2k rep

@Mipey - maybe try Firefox Nightly - if it works it might be a Firefox bug that is already fixed. Also it might be a graphics driver bug (grr), have you tried updating them too?

Thursday, August 30, 2012 at 11:16:43 AM
1
noboard 2,545 rep

Loving the work, but does that top image make anyone else feel sick?

Thursday, August 30, 2012 at 11:19:58 AM
4
Kyatric 41.3k rep

FF 15 here too (and chrome 21), but I'm seeing all three effects independently as expected in both browsers.

Nvidia GTX 560 Ti, drivers 301.742

Thursday, August 30, 2012 at 11:23:20 AM
1
boybokeh 4,287 rep

Spent some time going through the example shaders last night and doing a bit of experimentation. So much potential!

Thursday, August 30, 2012 at 11:41:21 AM
3
necromaster 6,263 rep

You can bet your bottom dollar that I'll be using it in my upcoming game. And if GLSL ES is very similar to HLSL, it would flatten the learning curve for me dramatically. Anyway, there's always a HLSL to GLSL converter out there (for those who are interested - Google it).

Can't wait to use the first and second shader effects... they look very practical and are visually stunning!

Thursday, August 30, 2012 at 12:35:56 PM
3
thehen 10.2k rep

Although maybe beyond the remit of Construct tutorials, it would be great if someone experienced with writing GLSL shaders could write a beginners guide on writing our own effects. I'd love to write an effect that skewed sprites to create a windy foliage effect.

Thursday, August 30, 2012 at 12:42:22 PM
3
KidsOnTheBeat 2,996 rep

Great post! I agree with @thehen that some simply GLSL tutorials would be very interesting. I've been playing with the built in effects and they are definitely impressive.

Thursday, August 30, 2012 at 1:29:16 PM
1
ludodesign 22.5k rep

Really beatiful.. but I can't see directly use for this. I will talk with the art team, to see their opinion about it, and get ideas.

Thursday, August 30, 2012 at 1:33:29 PM
2
AVIX 4,921 rep

Maybe activate them when getting a power up? seems very nice! We love your work scirra!!!

Thursday, August 30, 2012 at 1:52:08 PM
1
Bigheti 12.6k rep

Interesting and good information for us! But, unfortunately, the IE browser's is the most used around the world.

Thursday, August 30, 2012 at 2:21:01 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.