n00b question r/e Filters

[lawsonbruce15]

Can I write a filter that transforms any green pixels in an image over a certain threshold of "greenness" so that they become transparent? (Am thinking of overlaying a pic of me in front of a green background over any arbitrary background image in classic TV special effects stylee)

On IRC,  stelt kindly pointed  me to http://www.w3.org/TR/SVG/filters.html#feColorMatrix or http://dev.opera.com/articles/tags/feColorMatrix/  but they're rather too mathematical for me; the gist seems to be that I can make "green" transparent, but does that mean I can only map 10% green -> 10% transparent, 20% green -> 20% transparent, or am I able to do more sophisticated work like say "if a pixel < 85% green, leave it alone; otherwise make it completely transparent"?

[jeff_schiller]

Hi Bruce,

I saw your question on IRC, but didn't have time to think it through.

I wrote a tutorial once on SVG Color Matrix filter: http://dev.opera.com/articles/view/svg-evolution-3-applying-polish/?page=3 that might help to explain the math a little bit.

Basically it's just a multiplication of each of the RGBA values with some scalar value.  Thus, you can't really do any complicated logic.  The value of your alpha must fit into this equation:

newAlpha = a30 * oldRed + a31 * oldGreen + a32 * oldBlue + a33 * oldAlpha

so to make it such that your alpha scales directly based on the green component, you'd set a30=a32=a33 to 0.0 and a31 to 1.0:

newAlpha = 1.0 * oldGreen

Offhand, I don't see a way of doing what you want to do using only feColorMatrix, but have you looked at feComponentTransfer?

http://www.w3.org/TR/SVG/filters.html#feComponentTransfer

It seems there you can specify what the mapping of R,G,B and A are, including providing a table of values for the mapping (see tableValues).

So it seems like you could use feColorMatrix to transfer the green pixel values into alpha values and then feed that output as input to a funcA which would map values below 85% to alpha=1 and values above 85% to alpha=0.

I haven't thought it through completely, but it seems like you should be able to do it.  If you have any luck, please post a tutorial! :)

Regards,
Jeff

--- In svg-developers@..., "lawsonbruce15" <bruce@...> wrote:
>
> Can I write a filter that transforms any green pixels in an image over a certain threshold of "greenness" so that they become transparent? (Am thinking of overlaying a pic of me in front of a green background over any arbitrary background image in classic TV special effects stylee)
>
> On IRC,  stelt kindly pointed  me to http://www.w3.org/TR/SVG/filters.html#feColorMatrix or http://dev.opera.com/articles/tags/feColorMatrix/  but they're rather too mathematical for me; the gist seems to be that I can make "green" transparent, but does that mean I can only map 10% green -> 10% transparent, 20% green -> 20% transparent, or am I able to do more sophisticated work like say "if a pixel < 85% green, leave it alone; otherwise make it completely transparent"?
>

[jeff_schiller]

Ok, as usually - I got to thinking.

http://www.codedread.com/greenscreen/greenscreen.svg

This was the best I could figure out after playing with it.  This is my second experiment with SVG Filters and it was kind of fun.

Unfortunately, I could not get it to work in Firefox - any help there would be appreciated.

There is a lot of untapped potential in SVG Filters to say the least!

Jeff

--- In svg-developers@..., "jeff_schiller" <jeff_schiller@...> wrote:

>
> Hi Bruce,
>
> I saw your question on IRC, but didn't have time to think it through.
>
> I wrote a tutorial once on SVG Color Matrix filter: http://dev.opera.com/articles/view/svg-evolution-3-applying-polish/?page=3 that might help to explain the math a little bit.
>
> Basically it's just a multiplication of each of the RGBA values with some scalar value.  Thus, you can't really do any complicated logic.  The value of your alpha must fit into this equation:
>
> newAlpha = a30 * oldRed + a31 * oldGreen + a32 * oldBlue + a33 * oldAlpha
>
> so to make it such that your alpha scales directly based on the green component, you'd set a30=a32=a33 to 0.0 and a31 to 1.0:
>
> newAlpha = 1.0 * oldGreen
>
> Offhand, I don't see a way of doing what you want to do using only feColorMatrix, but have you looked at feComponentTransfer?
>
> http://www.w3.org/TR/SVG/filters.html#feComponentTransfer
>
> It seems there you can specify what the mapping of R,G,B and A are, including providing a table of values for the mapping (see tableValues).
>
> So it seems like you could use feColorMatrix to transfer the green pixel values into alpha values and then feed that output as input to a funcA which would map values below 85% to alpha=1 and values above 85% to alpha=0.
>
> I haven't thought it through completely, but it seems like you should be able to do it.  If you have any luck, please post a tutorial! :)
>
> Regards,
> Jeff
>
> --- In svg-developers@..., "lawsonbruce15" <bruce@> wrote:
> >
> > Can I write a filter that transforms any green pixels in an image over a certain threshold of "greenness" so that they become transparent? (Am thinking of overlaying a pic of me in front of a green background over any arbitrary background image in classic TV special effects stylee)
> >
> > On IRC,  stelt kindly pointed  me to http://www.w3.org/TR/SVG/filters.html#feColorMatrix or http://dev.opera.com/articles/tags/feColorMatrix/  but they're rather too mathematical for me; the gist seems to be that I can make "green" transparent, but does that mean I can only map 10% green -> 10% transparent, 20% green -> 20% transparent, or am I able to do more sophisticated work like say "if a pixel < 85% green, leave it alone; otherwise make it completely transparent"?
> >
>

[Robert Longson-2]

--- In svg-developers@..., "jeff_schiller" <jeff_schiller@...> wrote:
>
> Ok, as usually - I got to thinking.
>
> http://www.codedread.com/greenscreen/greenscreen.svg
>
> This was the best I could figure out after playing with it.  This is my second experiment with SVG Filters and it was kind of fun.
>
> Unfortunately, I could not get it to work in Firefox - any help there would be appreciated.

"in" and "result" as filter attributes not "in" and "out" as you have it (http://www.w3.org/TR/SVG/filters.html#FilterPrimitivesOverview). I'm surprised this works in any other renderers.

Best regards

Robert

[lawsonbruce15]

On Tue, 20 Oct 2009 23:02:09 +0100, jeff_schiller  
<jeff_schiller@...> wrote:

> Ok, as usually - I got to thinking.
>
> http://www.codedread.com/greenscreen/greenscreen.svg
>
> This was the best I could figure out after playing with it.  This is my  
> second experiment with SVG Filters and it was kind of fun.

wow, that's amazing. I like it when you get to thinking!

How does it work? What I'm looking to do is
(1) adjust the tolerance of the filter so that it makes a broader range of  
green transparent (so if there are variations in the green background due  
to slight shadows etc that will still become transparent, within a certain  
threshold)
(2) make it "different colour screen portable" so that if it were in front  
of a blue screen, for example, I could filter that out.

I guess I'm asking you for a pointer as to which are the magic variables  
to play around with, as there is so much going on there I don't know where  
to start.

In your previous message you said "I haven't thought it through  
completely, but it seems like you should be able to do it. If you have any  
luck, please post a tutorial! :)"

Do I take it that you're cool with my writing it up as a tutorial for  
Opera if I can get it all working (with appropriate attribution, of  
course?)

bruce

[jeff_schiller]

Wow - what a horrible 'typo' on my part, thanks Robert! :)

Bug in Opera, I guess that turns 'out' into a synonym for 'result'.  I've also noticed that you can use 'SourceImage' as a synonym for 'SourceGraphic' sometimes.

Ok, the green screen experiment now works in Firefox as well.  Anybody have a Filter-enabled Webkit build?  Supposedly feComponentTransfer, feColorMatrix and feComposite have been implemented...

http://www.codedread.com/greenscreen/greenscreen.svg

Jeff

--- In svg-developers@..., "longsonr" <longsonr@...> wrote:

>
>
>
> --- In svg-developers@..., "jeff_schiller" <jeff_schiller@> wrote:
> >
> > Ok, as usually - I got to thinking.
> >
> > http://www.codedread.com/greenscreen/greenscreen.svg
> >
> > This was the best I could figure out after playing with it.  This is my second experiment with SVG Filters and it was kind of fun.
> >
> > Unfortunately, I could not get it to work in Firefox - any help there would be appreciated.
>
> "in" and "result" as filter attributes not "in" and "out" as you have it (http://www.w3.org/TR/SVG/filters.html#FilterPrimitivesOverview). I'm surprised this works in any other renderers.
>
> Best regards
>
> Robert
>

[David Leunen]

> (http://www.w3.org/TR/SVG/filters.html#FilterPrimitivesOverview). I'm
> surprised this works in any other renderers.
>

"[result:] If no value is provided, the output will only be available for
re-use as the implicit input into the next filter primitive if that filter
primitive provides no value for its in attribute"

I guess it's interpreted as "[...] no valid value for its in attribute".


[Non-text portions of this message have been removed]