WebGL Effects impacting mobile performance tests

I've been a vocal "anti-WebGL effects for mobiles" guy on this forum since forever, due to a bad encounter with a few of them in my game which I had to remove. But recently I've just had the chance to do some testing on several effects that are quite useful to have to spice up presentation on mobiles.

I will just list what it is and how much performance loss it was to have it. This was run on my LG G-Pad 8 inch, with the Snapdragon S600 SoC (which is around the same as the Nexus 7 with Snapdragon S4). It's about 60-65% of the processing power as devices with newer SoCs, such as S800, S801 and Samsung Exynos Octa (In their S4 and S5), so its by no means the fastest thing out there, but its still got plenty of punch. Also tested on an Asus TF700 tablet with Tegra 3 SoC (quite weak now).

Vertical and Horizontal Glows = 10 sprites (32 x 32 pixels) on the screen, moving random with bullet. Performance loss ~50%.

Warp Mask/Ripple and Water Background = 3 transparent sprite (256 x 256) of one effect at a time only, not all combined, static no behavior (used to cause a ripple effect to generate fancy fx or water scenes). Performance loss ~30%.

Glass = 4-6 sprites, (128 x 128), with fade behavior and onscreen every-tic change its size to grow larger by 16 pixels (a circle shockwave). Performance loss ~10%.

All of this was in the context of a proper game (Star Nomad), not a blank screen.

This was compiled using Crosswalk/Intel XDK.

I got the same result with CocoonJS for the V/H Glow Effects, but didn't try others with CJS yet. (Edit: Just tested Glass with CJS, same condition as XDK, very similar result! YAY!)

It definitely looks like some WebGL effects are very fast on mobiles while others are extremely wasteful to use.

Feel free to chip in if you have some experience with the other shader effects, I'd love to try more but due to my horrid internet connection, uploading my 30MB game each test is a chore.

Anyhow, I love that the Glass shaders are so efficient, because there's a LOT you can do with it to spice up the visuals.

Could you share the testing capx?

Could you share the testing capx?

Sorry, no. It's my work in progress (nearly done!), Star Nomad Sandbox RPG/RTS.

If you want context, the effects are used in scenes like this:

I can't say what it will be like for your own project, but considering this game is already quite complex with multiple fleets engagement and AI, I had thought adding WebGL shaders would be impossible, but its not! And good for me (and you guys too, give it a go) since the effects takes the entire game up a notch.

Some shaders are more intensive than others - the blurs/glows are the slowest, heavy distortion like the water effect are next, light distortion like ripple should be faster, and the blends should be the fastest (like multiply, screen etc). Blends are generally just a tweak to the normal alpha-blending rendering formula so should be very close to normal rendering performance, except for the CPU overhead of processing a shader (which can be high if you use it on lots of separate sprites - using it on a whole layer can be faster in that kind of case).

I'm curious about how well bumpmapping/normals impact mobile performance, though I've never really targeted mobile so I don't have much of a context for testing it.