Drop Shadow Filter

Haxe
#1

I was just trying out something on a new project, and I realised a Drop Shadow would look good.

I dropped it in, and, probably unsurprisingly performance (I’m targeting HTML5 canvas) really dropped.

It’s not make or break, so I can leave it out, but, I’d like to add it so:

Is there a way of improving performance with drop shadows? (I’ve only got 9 tiles in a container sprite, on which the effect is applied.)

Is there a way of cheating the effect? I don’t need it super accurate, just something to give the tiles a bit of lift.

Thanks!

#2

With current releases, we should cache the effect, so if the content within the effect does not change, it should not have additional runtime cost. If someone has a good filter shader that looks good and works better than the one we have, that also would be welcome.

Oh, you might try HTML5 with the default WebGL target, it will fallback to canvas if WebGL is not supported, but we have a shader version of the DropShadowFilter which might run better?

#3

Yes, there is an animation within the container sprite (one of the tiles moves), clearly this is complex in terms of calculating the shadow.

I’m reluctant to move from a ‘one size fits all’ approach at the moment, but will look into the suggested options so I can change it, if it appears sensible, later on.

#4

I did a little experiment this morning. I created a drop shadow that had no blur - the performance was the same as with the blur.

I created my own drop shadow (separate sprite, with duplicated assets tinted black) and the performance was fine (adding a blur to it, unfortunately, was similarly laggy.)

1 Like
#5

In canvas, we have to go pixel by pixel to do a blur, and it is very expensive

#6

Sure, I understand (and expected) this.

What I found surprising was that the drop shadow, when setting blurX & blurY to 0, was still slow. I think there must be something else in the filter which makes it so.

I will try to take a look later on.

#7

Perhaps it runs the blur, regardless, when it should skip the blur if it is a blur of zero.

There is the implied cacheAsBitmap, though, when using a filter. You could test cacheAsBitmap = true instead of a filter, and compare that performance as well

#8

Where is the actual blur code? (and glow code) I had a quick look, but couldn’t find it. (I found the API stuff, but not the code that would do the business!)

#9

Here’s the software code:

or the hardware shader:

Here’s the software gaussian blur:

I’m not 100% content with this existing blur algorithm, it doesn’t seem quite right, but it’s good enough for us to get some of these filters (in software). Similar goes for the shader-based effect. Happy for any help here