[HTML5 target] Filters on DisplayObject Not working

Help
#1

Hi all,

I’m trying to add DropShadowFilter / BlurFilter / GlowFilter to a simple Sprite on stage.
If i target flash, it looks and behaves fine. When i target HTML5, i see nothing.

The wiki says “Available on all platforms” (link).
Am i doing something wrong?

I’m importing
import openfl.filters.BlurFilter;
import openfl.display.Sprite;

Here is the code im using:

    var s:Sprite = new Sprite();
    s.graphics.beginFill(0xff0000, 1);
    s.graphics.drawCircle(50, 50, 50);
    s.graphics.endFill();
    var blur:BlurFilter = new BlurFilter(40, 40, 1);
    s.filters = [blur];
    addChild(s);

HTML5 PRINTSCREEN:

FLASH PRINTSCREEN:

1 Like
#2

Right now there is little to no support for filters on any target but Flash.

The good news is that we are working on implementing custom shaders and filters for OpenFL next on every target that uses OpenGL. Here is the PR and discussion https://github.com/openfl/openfl/pull/697

html5 webgl
67WDBF6.png965×690 224 KB

I would guess that some filters could be implemented via software for HTML5 canvas, but I’m not focusing on that in that PR.

2 Likes
#3

Thanks,
Of course it would be great to get greater unity between target platforms but of course filters are not top priority.

#4

I think part of the confusion is because the docs claim they work on all platforms. Far as I know, they only work on Flash. Case in point.

http://www.openfl.org/documentation/api/openfl/filters/GlowFilter.html

The shaders do look quite nice. Can’t wait to see them make it into the Haxelib version.