OpenFL GlowFilter tweaks for HTML5 :)

TL;DR - scroll to bottom to see how to “fix” GlowFilters for HTML5 targets.

Filters in OpenFL have been a bit buggy the past few releases. The GlowFilter, for example, seems to work well on Flash targets, but not very well in HTML5.

Sample code using Haxe 4 and OpenFL 8.9.7:

var glowFilter:GlowFilter = new GlowFilter(0xff0000, 1, 8, 8, 10);
textField.filters = [glowFilter];

Flash results:
image

HTML5 results:
image

I was messing with Starling for Haxe a few days ago and the documentation said if you want a glow filter to resemble a thick stroke, you multiply the alpha parameter by a decent number, like 4 or 8 or 16. In the Flash/OpenFL API documentation states that “valid” values for the alpha parameter are between “0 and 1”. This makes sense for maintaining consistency with Flash render targets, but I got an idea in my head that maybe the alpha could be scaled for HTML5 targets.

Multiplying it by a constant seems to produce better results:

var a:Float = 1;
#if html5
	a *= 8;
#end
var glowFilter:GlowFilter = new GlowFilter(0xff0000, a, 8, 8, 10);
textField.filters = [glowFilter];

The new HTML5 results:
image

Again, this seems to produce nice results with OpenFL 8.9.7 using WebGL, but it could be “fixed” in future implementations, so it might be a good idea to make a wrapper class if you do go this route so it can be easily adjusted.

4 Likes

Good work Tamar! I am very interested in these filters since they go somewhat beyond what pure CSS can do.

Does this affect GL targets or is this when running the software version of the filter?

Would it look closer to Flash if the implementation was permanently changed to have a multiplier like in your example?

The original test was using WebGL but I just tested canvas using the “-D canvas” flag and the results seem to be the same. I’ve only been targeting Flash and HTML5 in earnest, so I’m not sure if any other platforms are affected right now.

I think it would look closer to Flash if a permanent multiplier were implemented, but I don’t know the exact multiplier value to use for best results.