Re: [css4-images] custom blending effects

Hi Dean,

part of the proposal would be to introduce a new CSS keyword 'blend-mode'.
This keyword can have the following values: normal, plus, multiply, screen,
overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light,
difference, exclusion, hue, saturation, color, luminosity and inherit.
The formulas for most of these keywords are defined in the SVG composting
spec [1]. Hue, saturation, color, luminosity are defined in the PDF spec.

To allow a custom blend mode, I propose the following keyword: custom(
<fragment-shader>[,<params>])
'fragment-shader' would point to a glsl program that will blend 2 source
images. 'params' contains the parameters that are passed to the shader.
These parameters can also be animated which can be used to do
swipes/dissolves/etc.
I don't believe there is a need for a vertex shader (like we have in the
CSS shader proposal) since blending doesn't alter the shape.

Rik

[1] http://www.w3.org/TR/SVGCompositing/


On Sat, Nov 26, 2011 at 9:22 PM, Dean Jackson <dino@apple.com> wrote:

> Hi Rik,
>
> On 27/11/2011, at 3:42 PM, Rik Cabanier wrote:
>
> What if we extend the SVG compositing spec to include CSS and provide the
> ability to do a custom blend using glsl? It seems pretty straightforward to
> come up with a syntax since the notation is basic.
> If we combine this with transitions, it seems that this would be powerful
> and also enable your use case.
>
>
> I have no attachment to the syntax or approach I suggested, so sure. I'd
> like to see your proposal.
>
> I just wanted to float the idea since I'd seen a lot of interest for
> cross-fade on The Twitters, and figured we could provide even more useful
> transitions (blends/whatever-you-want-to-call-them).
>
> Dean
>
>
> We do need to come up with a way to calculate background in a HTML context
> both for compositing and filters...
>
> Rik
>
>
> On Thu, Nov 24, 2011 at 3:13 PM, Dean Jackson <dino@apple.com> wrote:
>
>> This is a completely half-baked proposal, but I figured it was ok to
>> embarrass myself on this list rather than forget about the idea. This is
>> definitely not a proposal from Apple as a whole. Just one fool mumbling in
>> public.
>>
>> The cross-fade() function is going to be extremely useful. However,
>> cross-fading is one of many blending operations [*]. IIRC SMPTE (and the
>> larger SMIL spec) list a set of predefined functions like wipe, iris,
>> dissolve, etc.
>>
>> [*] The terminology is going to be confusing. Typically such operations
>> are called 'transitions' but that term already has a meaning in CSS.
>> Obviously 'blending' here isn't the same operation as you typically
>> associate with compositing and Photoshop-like effects. We're just talking
>> about moving from one image to another image over time.
>>
>> I wonder if we should add another operation to CSS 4 images that allows
>> more blending operations. My suggestion would be to allow a CSS Shader with
>> three hard-coded inputs (like cross-fade): image1, image2 and amount of
>> blend (0 - 1). This would allow for some pretty snazzy effects.
>>
>> cross-fade would just be the special/common case of e.g.
>> image-blend(crossfade, image1, image2, 0.4)
>>
>> [1] Here's the SMIL set of predefined transitions:
>> http://www.w3.org/TR/2005/REC-SMIL2-20050107/smil-transitions.html
>>
>> Dean
>>
>>
>>
>
>