930331 - feComponentTransfer /feFuncA results in visible banding

Status: UNCONFIRMED

(Core :: SVG, defect)

Description

[Michael Mullany]

Attachment: screenshot of the bug

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/536.30.1 (KHTML, like Gecko) Version/6.0.5 Safari/536.30.1

Steps to reproduce:

SVG Filter Bug
Created a spotlight using feDiffuseLighting. 
Ran it through a feColorMatrix - L2A to get a mask. 
Tried to apply a feComponentTransfer/feFuncA- table to invert and threshold



Actual results:

Instead of a smooth remapping of the alpha channel using feFuncA, there is very visible banding in the resulting graphic


Expected results:

Should have been remapped smoothly (as in Chrome/Safari) - attached. 
Live example at: http://codepen.io/mullany/pen/yckph

(The light seems to be just fine (no banding) before it's run through the component transfer)

Comment 1

[Michael Mullany]

Actually that first attachment is the *unexpected* bad result from Firefox - not the smooth, expected result (sorry!)

Comment 2

[[:Aleksej]]

Looks similar in 2013-10-28-03-02-05-mozilla-central-firefox-27.0a1.en-US.linux-x86_64 (w/o graphics acceleration).

Comment 3

[Robert Longson [:longsonr]]

Specify a filterRes of the filter with large enough values if you want to avoid this. All the specification says is to pick suitable defaults and we have to trade off between performance and accuracy.

Comment 4

[Michael Mullany]

Increasing the filterRes doesn't fix this - in fact it seems to surface a bug with light sources when filterRes is explicitly specified (in related news, changing filterRes from default also exposes a similar bug in webkit/blink - where the coordinate system for lightsources seems to be affected by smaller or larger filterRes's)

Comment 5

[Michael Mullany]

I've filed a bug that isolates the problems with light sources when you change filterRes: Bug 932111

Comment 6

[Robert Longson [:longsonr]]

Attachment: simpler testcase

Comment 7

[Michael Mullany]

Here is a test case that shows three implementations of the original contrasty vignette. The first shows default filterRes. The second shows a 2x filter res, with light source positions scaled by 50% to match the new resolution. The third shows the default filterRes combined with a 0.5 kernelUnitLength - with lightSource positions adjusted by 200% to produce the same effect. All cases show the banding artifacts.

http://codepen.io/mullany/pen/qJsvI

(btw firefox is the only browser to implement both kernelUnitLength and filterRes. Webkit/Blink doesn't implement kernelUnitLength, and IE doesn't implement filterRes.)

Comment 8

[Michael Mullany]

One last comment on this. The spec does require all UA's to produce a high quality result - from the spec: "the user agent will use reasonable values to produce a high-quality result on the output device." With all due respect for the work that Firefox has done to advance the state of SVG, in this particular case, the Firefox output is significantly worse than competitive browsers - and one would be hard pressed to call it "high quality".