Re: [filters] Custom filter functions proposal

Hi Chris,

On Feb 25, 2012, at 9:06 AM, Chris Marrin wrote:


On Feb 24, 2012, at 6:56 PM, Vincent Hardy wrote:

Hi Lea,

On Feb 21, 2012, at 12:57 PM, Lea Verou wrote:

Hi Vincent,

About your question, let's assume we have a filter in filterlib.svg with the id #foobar and the parameters x, y, z of types number, length and color respectively and we want them specified in the same order in our filter function, which is going to be called foo(). With my proposal, it would be something along these lines:

@filter foo {
    src: url(filterlib.svg#foobar);
    parameters: x, y, z;
    default: 0 1pt black; /* this means that filter: foo(); is equivalent to filter: foo(0 1pt black); */
}

I didn't use "array" like in your example, since that doesn't correspond to a CSS type.

[vh] Yes. But for CSS shaders, we do have arrays, see the <param> description at:

https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html#feCustom

so it would be good to have a solution to pass arrays into shaders. But we can deal with that later I think.

If I try to convert one of the existing CSS shaders example:

filter: custom(url('wave.vs') url('old-paper.fs'), 20 20, phase 0, amplitude 50);

we could have something like:

@filter old-wave {
src: shader(url('wave.vs') url(old-paper.fs));
mesh: 20 20;
parameters: phase, amplitude;
default: 0 0;
}

So one thing I would note for shaders is that we would need a property for the mesh in the @filter rule (the syntax is described at:

https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html#vertexMesh-attribute

I don't like the idea of a property specifically for the shader function, it's not very extensible. I'd rather see something like:

@filter old-wave {
src: shader(url('wave.vs') url(old-paper.fs), 20 20);
parameters: phase, amplitude;
default: 0 0;
}

This keeps the properties consistent regardless of the src type.

I also think src is no longer the right property name. It would be better to call it 'function' and then use an svg(). So for the first example you'd have:

@filter foo {
    function: svg(url(filterlib.svg#foobar));
    parameters: x, y, z;
    default: 0 1pt black; /* this means that filter: foo(); is equivalent to filter: foo(0 1pt black); */
}

Just some ideas...

[vh] I like this idea, because it does keep the function-specific parameters (like vertex mesh) with the function definition and I agree this is a cleaner way to do it. May be 'function' is too generic? What about 'filter-provider' or 'filter-function' for example?

Vincent