w3c / fxtf-drafts

Mirror of https://hg.fxtf.org/drafts
https://drafts.fxtf.org/
Other
68 stars 49 forks source link

[filter-effects-1] Add edgemode=reflect #527

Closed flackr closed 4 months ago

flackr commented 10 months ago

A reflect edgemode in filter-effects-1 would be very useful as the behavior for the backdrop-filter blur behavior (See #374) as it avoids a discontinuity when moving the filter over new content.

The behavior of this mode would be that pixels outside mirror the pixels inside, e.g. it would be as follows: Original N-by-M image, where m=M-1 and n=N-1:

 11  12 ...  1m  1M
 21  22 ...  2m  2M
... ... ... ... ...
 n1  n2 ...  nm  nM
 N1  N2 ...  Nm  NM

Extended by two pixels in each direction using reflect:

 22  21  21  22 ...  2m  2M  2M  2m
 12  11  11  12 ...  1m  1M  1M  1m
 12  11  11  12 ...  1m  1M  1M  1m
 22  21  21  22 ...  2m  2M  2M  2m
... ... ... ... ... ... ... ... ...
 n2  n1  n1  n2 ...  nm  nM  nM  nm
 N2  N1  N1  N2 ...  Nm  NM  NM  Nm
 N2  N1  N1  N2 ...  Nm  NM  NM  Nm
 n2  n1  n1  n2 ...  nm  nM  nM  nm

We can debate whether the border pixels should repeat in reflect mode, but doing so has the nice property that a 2N by 2M sampling is exactly one additional copy of the image worth of pixels.

mstange commented 10 months ago

Thanks for filing! For some parts of the current Firefox implementation (specifically Canvas2D filters on Windows) it would be convenient if the reflection worked the same as in D2D1_BORDER_EDGE_MODE_MIRROR.

tabatkins commented 10 months ago

I don't know anything about the impl concerns of this, but is there a particular reason we're reflecting solely on the right/bottom edges? Or was this just an artifact of a simplified example, and a "real" reflect would also have reflected pixels along the top/left edges?

flackr commented 10 months ago

It would of course be mirrored / reflected on all edges, I was just following the conventions at https://drafts.fxtf.org/filter-effects-1/#element-attrdef-feconvolvematrix-edgemode where they've only illustrated extending further down and to the right even though the existing edge modes also can extend up and to the left.

flackr commented 8 months ago

Thanks for filing! For some parts of the current Firefox implementation (specifically Canvas2D filters on Windows) it would be convenient if the reflection worked the same as in D2D1_BORDER_EDGE_MODE_MIRROR.

I'm not sure where it is defined, but looking at https://learn.microsoft.com/en-us/windows/win32/direct2d/border#mirror it does look like the mirroring is equivalent to the proposal here - repeating the border pixels - such that you can draw an image 2x the original size and have exactly one mirrored copy.

css-meeting-bot commented 7 months ago

The CSS Working Group just discussed [filter-effects-1] Add edgemode=reflect, and agreed to the following:

The full IRC log of that discussion <bramus> flackr: last week we agreed to use reflect mode as backdrop filter but in the filter effects spec devs can specifyt from one of several edge modes and this issue is if we should expose reflect edge-mode. I think its reasonable to add. do we call it reflect or mirror? details in the issue.
<bramus> astearns: generally in favor of exposing things we use under the covers, so makes sense to me
<ydaniv> +1 on exposing
<bramus> astearns: so PROPOSED RESOLUTION is add reflect or mirror value?
<bramus> emilio: so only expose in the attr of the element right?
<bramus> flackr: yeah
<bramus> emilio: there is no way to specify this in css right now
<bramus> emilio: not opposed to expose it where we already expose the same switch
<schenney> q+
<astearns> ack schenney
<bramus> flackr: might make sense to expose which edgemode to use in a backdrop filter, but could be future extension
<bramus> schenney: standards in graphics textures is to use “mirrored”
<bramus> flackr: i’m good with mirror, as its what i originally proposed
<bramus> chris: probably spec text should reflect what ??? we pick as the name
<bramus> astearns: as long as there is no case where there is a future extension that does both mirror and reflect but slightly different
<bramus> astearns: can always fix up spec text
<bramus> astearns: so we agree on mirror to add
<chris> s/should reflect what ??? we pick as the name/should mention both terms, regardless what we pick as the name
<bramus> emilio: in the edgemode attribute
<bramus> flackr: will point out attributes are not past tense, so should be mirror not mirrored
<bramus> PROPOSED RESOLUTION: add mirror value to edgemode attribute
<bramus> astearns: objections?
<bramus> RESOLVED: add mirror value to edgemode attribute