CODEWITHSUNDEEP
javascriptjquerycsshtmlcanvas
Michael Dionne
Michael Dionne

Reputation: 53

Heat distortion / underwater visual effect in HTML5 Canvas

We are developing a trading card video game (for both desktop and mobiles, so must ideally be very fast for mobiles else we will have to desactivate this graphical feature on those lower-end devices) using HTML5 and canvas technologies.

We figured out that it would add a lot of life to our top-view environments (levels) if we could implement some heat distortion (or some kind of underwater/turbulence) effect on some specific canvas/scene elements, like on a grass-only terrain and on vegetation props, in order to visually simulate (to some extend) the effect of randomly-animated wind turbulence on those specific canvas/scene elements (ideally using masks, in order to affect only a pre-determined region of a canvas).

Controls to make the effect strong or subtle, depending on wind force, as well as controls over wind direction would then be quite easily achievable. We just need to find some solid base to start the work.

Just to be sure that you correctly understand the effect we need, look at those videos: http://www.youtube.com/watch?v=brcMUHPNy-Y / http://www.youtube.com/watch?v=nZtmLCaYoHc

We've Googled a lot for this and haven't found any pre-made solution to achieve this relatively-simple effect. We want to avoid using WebGL and threeJS if possible, as well as pre-rendering or pre-animate any graphics.

Any idea of how to achieve this effect using code?

Upvotes: 0

Views: 4172

Answers (1)

markE
markE

Reputation: 105035

Here's a starting point for you to begin your performance tests, but I warn that turbulence effects on mobile will likely eat resources beyond acceptability.

Almer Thie has done a nice water ripple effect using html canvas:

http://code.almeros.com/code-examples/water-effect-canvas/#.VCr6tfldV8E.

His solution uses pixel manipulation via context.getImageData to achieve the effect. In fact, all pixel turbulence effects must use .getImageData to accomplish their required pixel manipulation.

The problem is .getImageData is never optimized by a GPU and so it runs very slowly on lesser powered devices (like mobile devices).

You might use Almers demo as a baseline to judge whether pixel manipulation is feasible for your project on mobile. I wish you the best...but I fear the worst :-(

Upvotes: 2

Related Questions