Filter effects: Blend

This is part one of my filter effects tutorials, where I'll describe the filter effects existing in Inkscape and general information about using and creating filter effects.

The blend filter composites two images pixel by pixel. It provides four compositing modes common in raster graphics editors: multiply, screen, darken and lighten. Also, it can be used to do the normal alpha compositing used in SVG.

Blend is also other one of the filters, that can be used without going to filter effects dialog in Inkscape: it is used to provide the layer blending modes.

The different blending modes work as follows:
Multiply: works like mixing pigments. Magenta and yellow make red, red and cyan make black etc.
Screen: works like mixing lights. Red and blue make magenta, magenta and green make white etc.
Darken: works like normal compositing, but composites both first image on top of second and second image on top of first and takes the darker result for each pixel and each colour channel, efficiently making the resulting image darker than either of source images.
Lighten: like darken, but takes the lighter results.

For multiply and screen, the following image might explain this better than I can:
On left: red, green and blue (RGB) circles composited with Screen.
On right: cyan, magenta and yellow circles (CMY) composited with Multiply.

For more complex effects, blend can be a handy tool when collecting several parts of the filter effects chain together.

There are a couple gotchas with blend filter in Inkscape and in general:
First, while Inkscape provides you with layer blending modes, such a concept doesn't actually exist in SVG 1.1. When you specify a layer blending mode, Inkscape creates a blend filter, that takes everything with lower z-index as your layer and composites that with your layer contents. This is the filter result. The filter result is then composited on the canvas, on top of everything with lower z-index. If your drawing has a solid background, this is just fine. If the background is not solid, it will be drawn twice. You may end up with funny looking results like in the following image:
On the top, over solid white background, everything works just fine. But on the bottom over transparent background, you can see a box appearing around the small star.

The other gotcha is the enable-background property. If you want to use background image as part of any filter, that property must be set. Some parent node of the object, you are applying the filter to, has to have this so that SVG renderers know, what part of background you want to use for compositing. This only applies to hand-made filter effects, if you use the layer blending mode combo box, Inkscape will take care of setting this property for you. For now, the easiest way to set enable-background so that you can use background in your filters, is to set some blending mode from layers palette.

Making use of Inkscape

I'm spending plenty of time developing a drawing program, so I decided to draw something for change.

This drawing is based on a photograph, but only to get the anatomy correct. I started with ordinary A4 copier parer and pencil for the first sketches. For the outline drawing I used heavier A4 drawing paper, on which I first drew the subject with pencil and then inked with a brush pen and 0.20 mm pen.

Scanning was a bit of a problem, as my scanner seems to be breaking down. The scanned image was full of horizontal colored lines. Luckily all those lines were bright colours, so I was able to open the image up in GIMP, take a CMYK separation of the image and discard all but the K (black) channel.

From this on, I used Inkscape for the work. Tracing the inked line drawing gave me a nice vector representation. This was actually surprisingly simple, as in GIMP - which I have used for drawing, too - separating these lines from background would have taken many steps and still wouldn't have yielded as well-defined lines.

The new paint bucket tool is a godsend for colouring drawings. Filling areas of drawing with the basic colour is only a mouse click away. With default settings, the filled area is not quite correct, as white lines show up between the area and bounding line, but this is easily remedied by increasing the value of "Grow / shrink by".

For adding shadows, I got to use the new featured I had created myself (Yay!). For this drawing I had though, that the lighting is quite warm, like summer day light, so I picked a cold color for the shadows - dark blue to be exact. Simple alpha blending with this kind of colour leaves a bit to be desired, so I used feBlend with multiply mode. Each shadow shape has an opacity of 20% instead of the whole shadow layer having that opacity - this way stacking shadows on top of each other will create darker shadows.

The few brighter spots are also created by using feBlend, this time with screen as mode. I feel that bright spots are really easy to overdo, so they are quite subtle here - some maybe even too subtle.

Well, for the bubbles and background I used plenty of gradients - probably not hard to tell ;) The bubbles are all clones, so it was easy to edit their appearance, when they didn't seem quite correct.

The pier planks are all unique, the tops are created by duplicating one plank, though. Also, lots of guidelines were used here. This is a place, where I wished that the 3D tool wasn't still in planning, but an usable tool.

And yes, the result:

I was also thinking, that I might create some kind of tutorial about this, too. I did take screenshots and save several copies of the image along the way. This might be a bit too large subject for a tutorial, though.

And yes, I haven't totally forgotten coding. As pointed out in inkscape-devel mailing list my last changes to codebase broke the about screen... Mixing these C and C++ objects is tricky sometimes. This time problem was that a C++ object inside a C object wasn't getting initialized. If both objects were of C++ style, this initialization would have happened automatically.

Filtering the image background

It's beginning to seem, that my planned timetable for this summer project is way off. Luckily it seems, that I've overestimated the time I need instead of underestimating. So what does this mean exactly? Well, now it's been a full two weeks since I started the project but I had planned five weeks for doing what I've done up to this point. Also, I've planned two weeks for creating renderer support for BackgroundImage and BackgroundAlpha input images. Well, it seems that support for BackgroundImage exists already, it just needed these changes I committed today to enable it.

Well then, about this commit today: support for in-parameter in filter primitives. This means, that now we aren't limited to filtering only the image itself and building linear filter chains. The background image can be taken into account when filtering and building complex filters should be possible too.

There are lots of possibilities that this enables. Next picture shows one of them: frost glass effect. Here I've got an ordinary gaussian blur, but instead of applying it to the object itself, I apply it to the background image. The object itself disappears, all we see is that a square area of the image is blurred.

This support for different input images isn't without problems, though. One really annoying one is with blend filter: it sometimes doesn't use the specified blending mode, but seems to apply normal alpha blending. I don't know yet, if this is a bug in input images support, in blend filter or even in some seemingly unrelated part of code.

To help debugging this, I think I'll reorder my timetable and implement feOffset filter next. This will allow me to use some example images W3C has published and compare renderings from Inkscape to them.

Rather odd blending bugs

Not long after committing the feBlend renderer, ScislaC found some rather odd bugs in it. Well, I'll show you the pictures:

What it looked like:

What it should have looked like:

So, what was up with this? Well, due to roundoff errors, under some circumstances feBlend renderer would output colours with more than 100% of some RGB components. The image compositing code didn't take such colours nicely...

Well, now this should be fixed in SVN.

On other topic, today I was looking for prices of new memory modules, so I could make this computer run smoother. It seems that increasingly often 512 MB just won't do it and the hard disk trashing begins. Now then, SO-DIMM memory is a bit on the expensive side, but for a bit less than 150 € / GB it would likely be worth the money...

Setup phaze and feBlend

Today I finally wrapped up some modifications I had lying on my hard disk and committed feBlend renderer into Inkscape codebase. The codebase surely changes fast, as testing those changes with latest code required a full recompile. (and that does take quite a while)

That feBlend renderer isn't much of use yet, as it needs some features, I'm planning to develop over the summer - for example, changing the input image. Blending the filtered image with itself isn't too useful a feature...

Recompiling Inkscape will hopefully take significantly less time in future though, as I installed distcc, which allows me to offload part of the compilation effort onto my other computer. It's quite nice a tool, as it works nice even though that other computer doesn't have all the libraries Inkscape requires, different versions of some and even a different processor architecture.