OpenFL GlowFilter tweaks for HTML5 :)

#1

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.

6 Likes
#2

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

#3

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?

#4

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.