WWW-www.enlightenment.org pushed a commit to branch master. http://git.enlightenment.org/website/www-content.git/commit/?id=5cf52ce2d2a7996b89a1a3e480f8c9cfdeaaa969
commit 5cf52ce2d2a7996b89a1a3e480f8c9cfdeaaa969 Author: Andrew Williams <[email protected]> Date: Fri Oct 20 12:21:37 2017 -0700 Wiki page eflgfxfilters changed with summary [refactoring developer docs] by Andrew Williams --- pages/devvelop/efl/advanced/eflgfxfilters.txt | 109 ++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) diff --git a/pages/devvelop/efl/advanced/eflgfxfilters.txt b/pages/devvelop/efl/advanced/eflgfxfilters.txt new file mode 100644 index 00000000..701378ea --- /dev/null +++ b/pages/devvelop/efl/advanced/eflgfxfilters.txt @@ -0,0 +1,109 @@ +====== EFL Graphics Filters ====== + +Supported since 1.15. + +This page presents an overview of [[Efl.Gfx.Filter]] used for advanced text effects and basic image filtering. + +Since 1.19 textblock also supports filters by using the "gfx_filter" format tag. Since 1.20 most filters have GL acceleration. + +===== Functions ===== +Summary of the supported filtering functions: + *[[:docs:efl:advanced:eflgfxfilter:blend|blend]] + *[[:docs:efl:advanced:eflgfxfilter:blur|blur]] + *[[:docs:efl:advanced:eflgfxfilter:grow|grow]] + *[[:docs:efl:advanced:eflgfxfilter:curve|curve]] + *[[:docs:efl:advanced:eflgfxfilter:fill|fill]] + *[[:docs:efl:advanced:eflgfxfilter:mask|mask]] + *[[:docs:efl:advanced:eflgfxfilter:bump|bump]] + *[[:docs:efl:advanced:eflgfxfilter:displace|displace]] + *[[:docs:efl:advanced:eflgfxfilter:transform|transform]] + *[[:docs:efl:advanced:eflgfxfilter:buffer|buffer]] + *[[:docs:efl:advanced:eflgfxfilter:padding_set|padding_set]] + *[[:docs:efl:advanced:eflgfxfilter:state|state]] + +===== Core concepts ===== + +The Eo class [[Efl.Gfx.Filter]] provides an interface for Evas objects (currently only [[Evas.Text]] and [[Evas.Image]]) to alter their appearance by applying a series of filtering operations. Filtered objects will be rendered in internal surfaces and transformed before being drawn on the canvas. Objects without a filter are rendered directly on the canvas. + +EFL provides a set of standard core filters that can be combined by using a simple script. Custom filters can be written in [[http://www.lua.org/|Lua (5.1)]] and can be a combinaison of any number of the base filters presented below. + +==== Input, output and buffers ==== + +The filters work by taking an ''input'' buffer (or image), applying some effects on it, and drawing the result to an ''output'' buffer. This final image is rendered on the canvas. + +Since [[Efl.Gfx.Filter]] works on both [[Evas.Image]] and [[Evas.Text]] objects, the ''input'' buffer can contain respectively a scaled copy of the source image (RGBA), or the text string rendered as an Alpha-only buffer, like this: + +{{:docs:efl:advanced:filter-input.png|}} + +=== Buffer management === + +It is also possible to manually create more buffers using the [[:docs:efl:advanced:eflgfxfilter:buffer|buffer]] function. + +Read more [[:docs:efl:advanced:eflgfxfilter:buffer|here]]. + +=== Padding === + +Since the filters may modify pixels based on their neighbors (blur) or move pixels around (displace, transform), a filter ends up requiring the input buffer to be padded to avoid cropping of the effect. The filter engine will automatically compute the necessary padding for you, but this may be too much in some situations (eg. blur 10 + blur 20 will add a padding of 30 but most pixels will be blank). + +You can set the padding to a fixed value with the [[:docs:efl:advanced:eflgfxfilter:padding|padding_set]] command. + +==== Base filters ==== + +The following table lists all the core filter functions, applied to an [[Evas.Text]] object. + +^ Feature ^ Function ^ Example ^ +| [[:docs:efl:advanced:eflgfxfilter:blend|Blend]] | ''blend'' | {{ :docs:efl:advanced:filter-blend.png |}} | +| [[:docs:efl:advanced:eflgfxfilter:blur|Blurs, glows and shadows]] | ''blur'' | {{ :docs:efl:advanced:filter-blur.png |}} | +| [[:docs:efl:advanced:eflgfxfilter:grow|Grow and shrink]] | ''grow'' | {{ :docs:efl:advanced:filter-grow.png |}} {{ :docs:efl:advanced:filter-shrink.png |}} | +| [[:docs:efl:advanced:eflgfxfilter:curve|Color curves]] | ''curve'' | {{ :docs:efl:advanced:filter-curve.png |}} | +| [[:docs:efl:advanced:eflgfxfilter:fill|Solid color fill]] | ''fill'' | {{ :docs:efl:advanced:filter-fill.png |}} | +| [[:docs:efl:advanced:eflgfxfilter:mask|Masking and texturing]] | ''mask'' | {{ :docs:efl:advanced:filter-mask.png |}} | +| [[:docs:efl:advanced:eflgfxfilter:bump|Bump maps]] | ''bump'' | {{ :docs:efl:advanced:filter-bump.png |}} | +| [[:docs:efl:advanced:eflgfxfilter:displace|Displacement maps]] | ''displace'' | {{ :docs:efl:advanced:filter-displace.png |}} | +| [[:docs:efl:advanced:eflgfxfilter:transform|Transformation]] | ''transform'' | {{ :docs:efl:advanced:filter-transform.png |}} | + +==== Complex filters ==== + +Graphics filters in EFL can be described by short Lua scripts. Various graphics buffers can be combined and mixed together using other objects from the canvas as sources. + +=== Example 1 === + +{{:docs:efl:advanced:filter1.png|}} + +Here is an example of a very simple filter using only the ''blur'' and ''grow'' functions: + +<code Lua filter1.lua> +blur { 10, color = '#009' } +blur { 4, color = '#f00' } +grow { -4 } +</code> + +Step by step, this is how Evas generates the final output. + + - First, we ask Evas to blur the input by 10 pixels, and use the color ''#009'', which is equivalent to ''#000099'' or ''rgba(0, 0, 0x99, 0xff)''. + - Then we do the same operation with a 4-pixels radius and the red color. + - Finally we use a shrinking algorithm (grow with a negative radius) and blend on top with the default color (here, white). + +^ Input ^ Step 1 ^ Step 2 ^ Step 3 ^ +| {{ :docs:efl:advanced:filter-input-bg.png |}} | {{ :docs:efl:advanced:filter1-1.png |}} | {{ :docs:efl:advanced:filter1-2.png |}} | {{ :docs:efl:advanced:filter1.png |}} | + +=== Example 2 === + +{{:docs:efl:advanced:filter2.png|}} + +The Evas filter system is based around the use of various //"buffers"//, which can be either Alpha masks or full RGBA color images. The following example uses an intermediate buffer to store the output of the ''grow'' command, and use that as input for the ''blur'' command: + +<code Lua filter2.lua> +a = buffer { 'alpha' } -- step 1 +grow { 6, dst = a } -- step 2 +blur { 4, src = a, color = '#009' } -- step 3 +blend { src = input } -- step 4 +</code> + +Step by step, this is what happens to the contents of our buffers. + +^ Step ^ ''input'' ^ ''a'' ^ ''output'' ^ +| Step 1 | {{ :docs:efl:advanced:filter-input-bg.png |}} | {{ :docs:efl:advanced:filter-bg-full.png |}} | {{ :docs:efl:advanced:filter-bg-full.png |}} | +| Step 2 | {{ :docs:efl:advanced:filter-input-bg.png |}} | {{ :docs:efl:advanced:filter2-a.png |}} | {{ :docs:efl:advanced:filter-bg-full.png |}} | +| Step 3 | {{ :docs:efl:advanced:filter-input-bg.png |}} | {{ :docs:efl:advanced:filter2-a.png |}} | {{ :docs:efl:advanced:filter2-3.png |}} | +| Step 4 | {{ :docs:efl:advanced:filter-input-bg.png |}} | {{ :docs:efl:advanced:filter2-a.png |}} | {{ :docs:efl:advanced:filter2.png |}} | \ No newline at end of file --
