Difference between revisions of "Filter Effects"

From Inkscape Wiki
Jump to navigation Jump to search
(23 intermediate revisions by 6 users not shown)
Line 1: Line 1:
Filter effects is a part of [http://www.w3.org/TR/SVG11/filters.html SVG specification] and worked on in Inkscape as part of [[Googles_Summer_Of_Code]] 2006 and [http://www.coss.fi/web/coss/developers/summercode COSS's Kesäkoodi] 2007
Filter effects is a part of [http://www.w3.org/TR/SVG11/filters.html SVG specification]. It has been worked on in Inkscape as part of Googles Summer Of Code 2006 and 2007 and [http://www.coss.fi/web/coss/developers/summercode COSS's Kesäkoodi] 2007


For more info on this Kesäkoodi project, see [http://fedev.blogspot.com/ the project blog] or [http://cs.helsinki.fi/u/kiirala/kesakoodi/application.html the project plan].
For more info on this Kesäkoodi project, see [http://fedev.blogspot.com/ the project blog] or [http://cs.helsinki.fi/u/kiirala/kesakoodi/application.html the project plan].


Also, there is an accepted proposal in GSoC 2007 for implementing the user interface for filter effects.
User interface for filter effects was developed in GSoC 2007.
 
There exists a (still incomplete) set of filter effect tutorials aimed for end users at [http://fedev.blogspot.com/search/label/Filter%20Effects%20Tutorial fedev.blogspot.com]
 
For information about internal workings of filter effects renderer, please see page [[Filter effects internals]].
 
== What works in Inkscape 0.46 ==
 
While Inkscape 0.46 support for Filter Effects is still incomplete, it has a fairly good support for most features.
 
The big improvements compared to Inkscape 0.45 are
* The Filter Effects dialog, which allows for easy creation of new filter effects
* Filter primitives can be connected to each other to form complex filters
* Support for using background image as part of a filter effect
* Most filter primitives are now implemented, compared to one filter primitive in 0.45
 
Noteworthy things that don't work:
* Fill Paint and Stroke Paint input images do not work, even though they are usable in Filter Effects dialog. Any filter using these is likely to look different in future Inkscape versions, when the renderer is implemented.
* There's no GUI for setting the enable-background property. This property has to be set on some parent layer of filtered object to make Background Image and Background Alpha input images work.
* Filter primitive subregions do not work nor there is GUI for them. These are required for SVG compatibility and to make using feTile to make any sense.
 
=== Status of the filter primitives===
{| border="1"
! primitive
! renderer
! user interface
|-
! [http://www.w3.org/TR/SVG11/filters.html#feBlendElement feBlend]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
! [http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement feColorMatrix]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
! [http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement feComponentTransfer]
|style="background-color:#ffbbbb;"| '''Not implemented'''
|style="background-color:#dddddd;"| '''Disabled'''
|-
! [http://www.w3.org/TR/SVG11/filters.html#feCompositeElement feComposite]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
! [http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement feConvolveMatrix]
|style="background-color:#ddffbb;"| '''Partial implementation'''
TODO:
*edgeMode behaviour
*produce resolution-independent results
|style="background-color:#aaffbb;"| '''Implemented'''
|-
! [http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement feDiffuseLighting]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
! [http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement feDisplacementMap]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
! [http://www.w3.org/TR/SVG11/filters.html#feFloodElement feFlood]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
! [http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement feGaussianBlur]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
! [http://www.w3.org/TR/SVG11/filters.html#feImageElement feImage]
|style="background-color:#ddffbb;"| '''Partly implemented'''
* Only works on external images
|style="background-color:#aaffbb;"| '''Implemented'''
|-
! [http://www.w3.org/TR/SVG11/filters.html#feMergeElement feMerge]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
! [http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement feMorphology]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
! [http://www.w3.org/TR/SVG11/filters.html#feOffsetElement feOffset]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
! [http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement feSpecularLighting]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
! [http://www.w3.org/TR/SVG11/filters.html#feTileElement feTile]
|style="background-color:#ddffbb;"| '''Partly Implemented'''
|style="background-color:#dddddd;"| '''Disabled'''
|-
! [http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement feTurbulence]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
|}


== What works in Inkscape 0.45 ==
== What works in Inkscape 0.45 ==
Line 30: Line 125:
! [http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement feComponentTransfer]
! [http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement feComponentTransfer]
|style="background-color:#ffbbbb;"| '''Not implemented'''
|style="background-color:#ffbbbb;"| '''Not implemented'''
|style="background-color:#ffbbbb;"| '''Not implemented'''
|style="background-color:#ddffbb;"| '''Partially Implemented'''
|-
|-
! [http://www.w3.org/TR/SVG11/filters.html#feCompositeElement feComposite]
! [http://www.w3.org/TR/SVG11/filters.html#feCompositeElement feComposite]
Line 39: Line 134:
|style="background-color:#ddffbb;"| '''Partial implementation'''
|style="background-color:#ddffbb;"| '''Partial implementation'''
TODO:
TODO:
*edgeMode & preserveAlpha behaviours
*edgeMode behaviour
*produce resolution-independent results
*produce resolution-independent results
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
Line 48: Line 143:
|-
|-
! [http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement feDisplacementMap]
! [http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement feDisplacementMap]
|style="background-color:#aaffbb;"| '''Implemented''' - see [http://article.gmane.org/gmane.comp.graphics.inkscape.devel/21524]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
|-
! [http://www.w3.org/TR/SVG11/filters.html#feFloodElement feFlood]
! [http://www.w3.org/TR/SVG11/filters.html#feFloodElement feFlood]
|style="background-color:#ffbbbb;"| '''Not implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#ffbbbb;"| '''Not implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
|-
! [http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement feGaussianBlur]
! [http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement feGaussianBlur]
|style="background-color:#ddffbb;"| '''Implemented''' - bugs: [http://sourceforge.net/tracker/index.php?func=detail&aid=1762289&group_id=93438&atid=604306]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
|-
! [http://www.w3.org/TR/SVG11/filters.html#feImageElement feImage]
! [http://www.w3.org/TR/SVG11/filters.html#feImageElement feImage]
|style="background-color:#ffffbb;"| '''Work in progress''' - see [http://article.gmane.org/gmane.comp.graphics.inkscape.devel/21524]
|style="background-color:#ddffbb;"| '''Partly implemented'''
|style="background-color:#ffbbbb;"| '''Not implemented'''
* still doesnt work for other SVG elements. There is a [http://article.gmane.org/gmane.comp.graphics.inkscape.devel/24571 patch] being worked on.
 
|style="background-color:#aaffbb;"| '''Implemented'''
|-
|-
! [http://www.w3.org/TR/SVG11/filters.html#feMergeElement feMerge]
! [http://www.w3.org/TR/SVG11/filters.html#feMergeElement feMerge]
Line 72: Line 169:
|-
|-
! [http://www.w3.org/TR/SVG11/filters.html#feOffsetElement feOffset]
! [http://www.w3.org/TR/SVG11/filters.html#feOffsetElement feOffset]
|style="background-color:#ddffbb;"| '''Implemented''' - bugs: [https://sourceforge.net/tracker/index.php?func=detail&aid=1762588&group_id=93438&atid=604306]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
|-
Line 80: Line 177:
|-
|-
! [http://www.w3.org/TR/SVG11/filters.html#feTileElement feTile]
! [http://www.w3.org/TR/SVG11/filters.html#feTileElement feTile]
|style="background-color:#ffbbbb;"| '''Not implemented'''
|style="background-color:#ddffbb;"| '''Partly Implemented'''
|style="background-color:#ffbbbb;"| '''Not implemented'''
|style="background-color:#dddddd;"| '''Needs some analysis'''
|-
|-
! [http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement feTurbulence]
! [http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement feTurbulence]
|style="background-color:#ffffbb;"| '''Work in progress''' - see [http://fedev.blogspot.com/2007/07/i-can-has-turbulence.html],[http://fedev.blogspot.com/2007/07/introducing-fecomposite.html],[http://article.gmane.org/gmane.comp.graphics.inkscape.devel/21525]
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|style="background-color:#aaffbb;"| '''Implemented'''
|-
|-
|}
|}


=== general bugs ===
=== General bugs ===
UI
UI
* Connecting a Filter with itself, connect it to one of the reserved keywords.[https://sourceforge.net/tracker/index.php?func=detail&aid=1762574&group_id=93438&atid=604306]
* Connecting a filter with itself, connect it to one of the reserved keywords.[https://bugs.launchpad.net/inkscape/+bug/168790]


== What next? ==
Renderer
* StrokePaint and FillPaint input images are not supported. [https://bugs.launchpad.net/inkscape/+bug/168791]


Now that this one filter works, most of the basic framework needed for filtering exists.
* Result from filter is not cut to the shape of filter effects area. Note that filter effects area can be a rotated rectangle or parallelogram when viewed in display coordinates.


These are the basic steps to create a new filter primitive:
* There are many parts in filtering code marked with TODO. Many of these mark unhandled corner cases and places, where the filters generate almost but not quite correct results.
* Write a new document model level class for this filter primitive (see src/sp-gaussian-blur.cpp) - note that while there are basic implementations for  many filter primitives, they do need plenty of changes.
* Write a renderer for this filter primitive (see src/display/nr-filter-gaussian.cpp)
* Add a pointer to a function returning an instance of the renderer class to function Filter::_create_constructor_table in file src/display/nr-filter.cpp
(this is likely not an exhaustive list)


Before new filter primitives can be useful, there has to be an user interface for applying them to shapes. A really good thing would also be an UI for creating filters out of filter primitives.
== Mockups of Filter editing and related dialogs ==


: See [[http://sourceforge.net/tracker/index.php?func=detail&aid=1628343&group_id=93438&atid=604309 1628343]] for my filter UI suggestion - [[User:Mauve|Mauve]] 01:44, 7 February 2007 (UTC)
As of Inkscape 0.46 there exists a Filter Effects editor, highly similar to the one depicted here.
 
== NR::Filter initialization ==
 
This is a brief explanation on how NR::Filter (filter effects renderer) objects are constructed.
 
SPFilter has a single method sp_filter_build_renderer, which will initialize given renderer object (NR::Filter) to a correct state. Calling this method is all that needs to be done in those three nr-arena-* classes to set the correct filter renderer state. This method takes in the NR::Filter object instead of returning one, because this way that object can be reserved and freed on the same level in code. Also, this makes it easier to re-use the object instead of allocating new objects.
 
The inside workings of sp_filter_build_renderer are as follows: each filter primitive (SPFilterPrimitive subclasses) has a build_renderer virtual function that will add the correct NR::FilterPrimitive object in the filter renderer. Before doing any filter specific initialization, this function should call sp_filter_primitive_renderer_common, which will do the part of initialization, which is common for all filter primitives.
 
== Modification signals for filters ==
 
This is explanation on how different parts of document tree are notified of changes to filter primitives. This is done so that the display can be updated as the filters are modified.
 
As the underlying XML representation of the drawing is modified, the corresponding document level objects are notified of the change. Let's suppose, that the changed value was stdDeviation in feGaussianBlur. For the SPGaussianBlur object, this will show as call to sp_gaussianBlur_set method, with key=SP_ATTR_STDDEVIATION and 'value' containing the new value.
 
After modifying its internal state according to new values, the _set method should pass the update notification onwards - this will allow objects using this filter to update their own state. As for now, this happens by calling ::requestModified(SP_OBJECT_MODIFIED_FLAG) on the filter primitive's parent (which should be SPFilter). This may not be the best way to do this, though.
 
Filters are referenced from object style. When SPStyle object is built, it subscribes for update notifications from SPFilter it references (if any). Now when ::requestModified is called on SPFilter, these update notifications are also called (eventually, as requestModified only schedules modification event, instead of executing the event immediately).
 
The SPStyle object in turn knows, which object it's part of - these objects are the actual drawable objects, to which the filters are applied to. SPStyle propagates the modification event to that object, which in turn applies the modifications to its internal state and schedules redraw for itself.
 
== Mockups of Filter editing and related dialogs ==


Presentation of new Fill and Stroke dialog where user can easily access most frequent actions like changing Blend modes, Blurring and Opacity of an object and select filter for an object or group of objects WITHOUT ability of accessing  editing of the same.
Presentation of new Fill and Stroke dialog where user can easily access most frequent actions like changing Blend modes, Blurring and Opacity of an object and select filter for an object or group of objects WITHOUT ability of accessing  editing of the same.

Revision as of 07:33, 9 April 2012

Filter effects is a part of SVG specification. It has been worked on in Inkscape as part of Googles Summer Of Code 2006 and 2007 and COSS's Kesäkoodi 2007

For more info on this Kesäkoodi project, see the project blog or the project plan.

User interface for filter effects was developed in GSoC 2007.

There exists a (still incomplete) set of filter effect tutorials aimed for end users at fedev.blogspot.com

For information about internal workings of filter effects renderer, please see page Filter effects internals.

What works in Inkscape 0.46

While Inkscape 0.46 support for Filter Effects is still incomplete, it has a fairly good support for most features.

The big improvements compared to Inkscape 0.45 are

  • The Filter Effects dialog, which allows for easy creation of new filter effects
  • Filter primitives can be connected to each other to form complex filters
  • Support for using background image as part of a filter effect
  • Most filter primitives are now implemented, compared to one filter primitive in 0.45

Noteworthy things that don't work:

  • Fill Paint and Stroke Paint input images do not work, even though they are usable in Filter Effects dialog. Any filter using these is likely to look different in future Inkscape versions, when the renderer is implemented.
  • There's no GUI for setting the enable-background property. This property has to be set on some parent layer of filtered object to make Background Image and Background Alpha input images work.
  • Filter primitive subregions do not work nor there is GUI for them. These are required for SVG compatibility and to make using feTile to make any sense.

Status of the filter primitives

primitive renderer user interface
feBlend Implemented Implemented
feColorMatrix Implemented Implemented
feComponentTransfer Not implemented Disabled
feComposite Implemented Implemented
feConvolveMatrix Partial implementation

TODO:

  • edgeMode behaviour
  • produce resolution-independent results
Implemented
feDiffuseLighting Implemented Implemented
feDisplacementMap Implemented Implemented
feFlood Implemented Implemented
feGaussianBlur Implemented Implemented
feImage Partly implemented
  • Only works on external images
Implemented
feMerge Implemented Implemented
feMorphology Implemented Implemented
feOffset Implemented Implemented
feSpecularLighting Implemented Implemented
feTile Partly Implemented Disabled
feTurbulence Implemented Implemented

What works in Inkscape 0.45

Basic support for filter effects is included in 0.45 release. At the moment only gaussian blur is implemented, so while specifications define a bunch of other effects and some other programs can handle them, Inkscape cannot render them yet. Also, tools for editing other types of filters do not exist yet.

Gaussian blur can be applied to an object by using Blur slider in Fill and stroke dialog.

In Inkscape preferences dialog there is a setting controlling the filter rendering quality. Even low quality often produces good enough rendering quality, but it takes a lot less time to render. When exporting an image from Inkscape, the best quality is always used, regardless of this setting.

Filter Effect support in trunk

Status of the filter primitives

primitive renderer user interface
feBlend Implemented Implemented
feColorMatrix Implemented Implemented
feComponentTransfer Not implemented Partially Implemented
feComposite Implemented Implemented
feConvolveMatrix Partial implementation

TODO:

  • edgeMode behaviour
  • produce resolution-independent results
Implemented
feDiffuseLighting Implemented Implemented
feDisplacementMap Implemented Implemented
feFlood Implemented Implemented
feGaussianBlur Implemented Implemented
feImage Partly implemented
  • still doesnt work for other SVG elements. There is a patch being worked on.
Implemented
feMerge Implemented Implemented
feMorphology Implemented Implemented
feOffset Implemented Implemented
feSpecularLighting Implemented Implemented
feTile Partly Implemented Needs some analysis
feTurbulence Implemented Implemented

General bugs

UI

  • Connecting a filter with itself, connect it to one of the reserved keywords.[1]

Renderer

  • StrokePaint and FillPaint input images are not supported. [2]
  • Result from filter is not cut to the shape of filter effects area. Note that filter effects area can be a rotated rectangle or parallelogram when viewed in display coordinates.
  • There are many parts in filtering code marked with TODO. Many of these mark unhandled corner cases and places, where the filters generate almost but not quite correct results.

Mockups of Filter editing and related dialogs

As of Inkscape 0.46 there exists a Filter Effects editor, highly similar to the one depicted here.

Presentation of new Fill and Stroke dialog where user can easily access most frequent actions like changing Blend modes, Blurring and Opacity of an object and select filter for an object or group of objects WITHOUT ability of accessing editing of the same.

Fill and stroke.png

Changing of effect parameters and building sets of same can be done in specialized editor. Maybe next step in pushing ease of effect use further could be loading of contributed sets of effects and their parameters from file user had made himself or downloaded according to his preference from Effect library hosted somewhere on net (inkscape.org?!).

Filter edit dialog.png

Possible benefits of this approach:

- Speed-ups - no need to redraw canvas for every single effect parameter tweaking

- Effect library - like noted above; SVG effects can be very hard to deal with for a designer/illustrator without technical background. This way developers can make a small set of commonly used effects like drop shadow, outer/inner glow, etc. Learning curve for such (I think targeted) user will be shorter because he/she will eventually catch up with internal way of dealing with effects by doing simple changes on occasion.

Another possible mock-up of the filters dialogue: http://wiki.inkscape.org/wiki/images/INKSCAPE_filters_dialogue.svg

-using extra windows to tweak effect parameters (its good for effects with 1 parameter, but most have at least 2. hmm)