Effects

module

Effects.js:1

Direct2D effects
Minimum system requirements: Windows 7 Platform Update (Direct2D 1.1)
Not all effects in this module supported by minimum Direct2D version.
d2d.Effect returns null if effect is not supported.
See examples on top and bottom of this page.

Examples

window.DrawMode = 1;

include(`${fb.ComponentPath}\\docs\\Effects.js`);

const img = d2d.Image(`${fb.ComponentPath}\\samples\\d2d\\images\\Flowers.jpg`);

const effect = d2d.Effect(Effects.Sepia.ID);
effect.SetInput(0, img);
effect.SetValue(Effects.Sepia.Intensity, 0.5);

function on_paint(dgr) {	
    dgr.DrawEffect(effect, 0, 0, 0, 0, img.Width, img.Height);
}

window.DrawMode = 1;

include(`${fb.ComponentPath}\\docs\\Effects.js`);

const img = d2d.Image(`${fb.ComponentPath}\\samples\\d2d\\images\\Flowers.jpg`);

const sepia = d2d.Effect(Effects.Sepia.ID);
sepia.SetInput(0, img);
sepia.SetValue(Effects.Sepia.Intensity, 0.5);

const contrast = d2d.Effect(Effects.Contrast.ID);
contrast.SetInputEffect(0, sepia);
contrast.SetValue(Effects.Contrast.Contrast, 1.0);

const scale = d2d.Effect(Effects.Scale.ID);
scale.SetInputEffect(0, contrast);
scale.SetValue(Effects.Scale.Scale, new Float32Array([0.7, 0.7]));

function on_paint(dgr) {	
    dgr.DrawEffect(scale, 10, 10, 0, 0, img.Width, img.Height);
}

include(`${fb.ComponentPath}\\docs\\Effects.js`);

window.DrawMode = 1;

// Simple colour inversion shader
const shaderSource = `
    // Input texture (Direct2D passed it into t0)
    Texture2D InputTexture : register(t0);
    SamplerState InputSampler : register(s0);

    // Direct2D input data structure
    struct VS_OUTPUT {
        float4 clipSpacePos : SV_POSITION;
        float4 sceneSpacePos : SCENE_POS;
        float4 texelSpacePos : TEXEL_POS;
    };

    // Simple color inversion shader
    float4 main(VS_OUTPUT input) : SV_Target
    {
        // Selecting a pixel from an input image
        float4 color = InputTexture.Sample(InputSampler, input.texelSpacePos.xy);
	
        // Invert RGB, keep alpha
        return float4(1.0 - color.rgb, color.a) * color.a;
    }
`;

const img = d2d.Image(`${fb.ComponentPath}\\samples\\d2d\\images\\Flowers.jpg`);
const effect = d2d.Effect(Effects.CustomShader.ID);
effect.SetInput(0, img);

const shaderCode = d2d.Compile(shaderSource);
if (shaderCode.Error !== "") 
    fb.ShowPopupMessage(shaderCode.Error, "Direct2D compile error!");
else
    effect.SetValue(Effects.CustomShader.ShaderCode, shaderCode.Code);

function on_paint(dgr) {	
    dgr.DrawEffect(effect, 10, 10, 0, 0, img.Width, img.Height);
}

enum

AlphaMode

Effects.js:1285

Used in Effects.Sepia and Effects.EdgeDetection

Values number

Name	Value	Description
`Unknown`	`0`	The alpha value might not be meaningful.
`Premultiplied`	`1`	The alpha value has been premultiplied. Each color is first scaled by the alpha value. The alpha value itself is the same in both straight and premultiplied alpha. Typically, no color channel value is greater than the alpha channel value. If a color channel value in a premultiplied format is greater than the alpha channel, the standard source-over blending math results in an additive blend.
`Straight`	`2`	The alpha value has not been premultiplied. The alpha channel indicates the transparency of the color.
`Ignore`	`3`	The alpha value is ignored.

enum

BlendMode

Effects.js:1461

Used in Effects.Blend
For blend modes description see: https://learn.microsoft.com/en-us/windows/win32/direct2d/blend#blend-modes

Values number

Name	Value	Description
`Multiply`	`0`
`Screen`	`1`
`Darken`	`2`
`Lighten`	`3`
`Dissolve`	`4`
`Burn`	`5`
`LinearBurn`	`6`
`DarkerColor`	`7`
`LighterColor`	`8`
`ColorDodge`	`9`
`LinearDodge`	`10`
`Overlay`	`11`
`SoftLight`	`12`
`HardLight`	`13`
`VividLight`	`14`
`LinearLight`	`15`
`PinLight`	`16`
`HardMix`	`17`
`Difference`	`18`
`Exclusion`	`19`
`Hue`	`20`
`Saturation`	`21`
`Color`	`22`
`Luminosity`	`23`
`Subtract`	`24`
`Division`	`25`

enum

BorderEdgeMode

Effects.js:1447

Used in Effects.Border

Values number

Name	Value	Description
`Clamp`	`0`	Repeats the pixels from the edges of the image.
`Wrap`	`1`	Uses pixels from the opposite end edge of the image.
`Mirror`	`2`	Reflects pixels about the edge of the image.

enum

BorderMode

Effects.js:1245

Used in Effects.Scale, Effects.DirectionalBlur, Effects.GaussianBlur, Effects.ConvolveMatrix

Values number

Name	Value	Description
`Soft`	`0`	The effect pads the input image with transparent black pixels for samples outside of the input bounds when it applies the convolution kernel. This creates a soft edge for the image, and in the process expands the output bitmap by the size of the kernel.
`Hard`	`1`	The effect extends the input image with a mirror-type border transform for samples outside of the input bounds. The size of the output bitmap is equal to the size of the input bitmap.

enum

ChannelSelector

Effects.js:1313

Used in Effects.Histogram

Values number

Name	Value	Description
`R`	`0`	The effect generates the histogram output based on the red channel.
`G`	`1`	The effect generates the histogram output based on the green channel.
`B`	`2`	The effect generates the histogram output based on the blue channel.
`A`	`3`	The effect generates the histogram output based on the alpha channel.

enum

ColorMatrixAlphaMode

Effects.js:1510

Used in Effects.ColorMatrix

Values number

Name	Value	Description
`Unknown`	`0`	The alpha value might not be meaningful.
`Premultiplied`	`1`	The alpha value has been premultiplied. Each color is first scaled by the alpha value. The alpha value itself is the same in both straight and premultiplied alpha. Typically, no color channel value is greater than the alpha channel value. If a color channel value in a premultiplied format is greater than the alpha channel, the standard source-over blending math results in an additive blend.
`Straight`	`2`	The alpha value has not been premultiplied. The alpha channel indicates the transparency of the color.
`Ignore`	`3`	The alpha value is ignored.

enum

ConvolveMatrixScaleMode

Effects.js:1347

Used in Effects.Scale

Values number

Name	Value	Description
`NearestNeighbor`	`0`	Samples the nearest single point and uses that. This mode uses less processing time, but outputs the lowest quality image.
`Linear`	`1`	Uses a four point sample and linear interpolation. This mode uses more processing time than the nearest neighbor mode, but outputs a higher quality image.
`Cubic`	`2`	Uses a 16 sample cubic kernel for interpolation. This mode uses the most processing time, but outputs a higher quality image.
`MultiSampleLinear`	`3`	Uses 4 linear samples within a single pixel for good edge anti-aliasing. This mode is good for scaling down by small amounts on images with few pixels.
`Anisotropic`	`4`	Uses anisotropic filtering to sample a pattern according to the transformed shape of the bitmap.
`HighQualityCubic`	`5`	Uses a variable size high quality cubic kernel to perform a pre-downscale the image if downscaling is involved in the transform matrix. Then uses the cubic interpolation mode for the final output.

enum

D2DAffinetransformInterpolationMode

Effects.js:1391

Used in Effects.AffineTransform

Values number

Name	Value	Description
`NearestNeighbor`	`0`	Samples the nearest single point and uses that. This mode uses less processing time, but outputs the lowest quality image.
`Linear`	`1`	Uses a four point sample and linear interpolation. This mode uses more processing time than the nearest neighbor mode, but outputs a higher quality image.
`Cubic`	`2`	Uses a 16 sample cubic kernel for interpolation. This mode uses the most processing time, but outputs a higher quality image.
`MultiSampleLinear`	`3`	Uses 4 linear samples within a single pixel for good edge anti-aliasing. This mode is good for scaling down by small amounts on images with few pixels.
`Anisotropic`	`4`	Uses anisotropic filtering to sample a pattern according to the transformed shape of the bitmap.
`HighQualityCubic`	`5`	Uses a variable size high quality cubic kernel to perform a pre-downscale the image if downscaling is involved in the transform matrix. Then uses the cubic interpolation mode for the final output.

enum

D2DEffectPropertyType

Effects.js:1197

Specifies the types of properties supported by the Direct2D property interface.
Used as return type of GetPropertyType

Values number

Name	Value	Description
`Unknown`	`0`
`String`	`1`
`Bool`	`2`
`Uint32`	`3`
`Int32`	`4`
`Float`	`5`
`Vector2`	`6`
`Vector3`	`7`
`Vector4`	`8`
`Blob`	`9`
`IUnknown`	`10`
`Enum`	`11`
`Array`	`12`
`CLSID`	`13`
`Matrix3x2`	`14`
`Matrix4x3`	`15`
`Matrix4x4`	`16`
`Matrix5x4`	`17`
`ColorContext`	`18`

enum

D3DPerspectiveTransformInterpolationMode

Effects.js:1429

Used in Effects.D3DPerspectiveTransform

Values number

Name	Value	Description
`NearestNeighbor`	`0`	Samples the nearest single point and uses that. This mode uses less processing time, but outputs the lowest quality image.
`Linear`	`1`	Uses a four point sample and linear interpolation. This mode uses more processing time than the nearest neighbor mode, but outputs a higher quality image.
`Cubic`	`2`	Uses a 16 sample cubic kernel for interpolation. This mode uses the most processing time, but outputs a higher quality image.
`MultiSampleLinear`	`3`	Uses 4 linear samples within a single pixel for good edge anti-aliasing. This mode is good for scaling down by small amounts on images with few pixels.
`Anisotropic`	`4`	Uses anisotropic filtering to sample a pattern according to the transformed shape of the bitmap.

enum

D3DTransformInterpolationMode

Effects.js:1411

Used in Effects.D3DTransform

Values number

Name	Value	Description
`NearestNeighbor`	`0`	Samples the nearest single point and uses that. This mode uses less processing time, but outputs the lowest quality image.
`Linear`	`1`	Uses a four point sample and linear interpolation. This mode uses more processing time than the nearest neighbor mode, but outputs a higher quality image.
`Cubic`	`2`	Uses a 16 sample cubic kernel for interpolation. This mode uses the most processing time, but outputs a higher quality image.
`MultiSampleLinear`	`3`	Uses 4 linear samples within a single pixel for good edge anti-aliasing. This mode is good for scaling down by small amounts on images with few pixels.
`Anisotropic`	`4`	Uses anisotropic filtering to sample a pattern according to the transformed shape of the bitmap.

enum

DirectionalBlurOptimization

Effects.js:1257

Used in Effects.DirectionalBlur

Values number

Name	Value	Description
`Speed`	`0`	Applies internal optimizations such as pre-scaling at relatively small radii. Uses linear filtering.
`Balanced`	`1`	Uses the same optimization thresholds as Speed mode, but uses trilinear filtering.
`Quality`	`2`	Only uses internal optimizations with large blur radii, where approximations are less likely to be visible. Uses trilinear filtering.

enum

EdgeDetectionMode

Effects.js:1367

Used in Effects.EdgeDetection

Values number

Name	Value	Description
`Sobel`	`0`	Indicates the Sobel operator should be used for edge detection.
`Prewitt`	`1`	Indicates the Prewitt operator should be used for edge detection.

enum

GaussianBlurOptimization

Effects.js:1271

Used in Effects.GaussianBlur

Values number

Name	Value	Description
`Speed`	`0`	Applies internal optimizations such as pre-scaling at relatively small radii. Uses linear filtering.
`Balanced`	`1`	Uses the same optimization thresholds as Speed mode, but uses trilinear filtering.
`Quality`	`2`	Only uses internal optimizations with large blur radii, where approximations are less likely to be visible. Uses trilinear filtering.

enum

HdrToneMapDisplayMode

Effects.js:1526

Used in Effects.HdrToneMap

Values number

Name	Value	Description
`SDR`	`0`	Specifies that the tone mapper algorithm be optimized for best appearance on a standard dynamic range (SDR) display.
`HDR`	`1`	Specifies that the tone mapper algorithm be optimized for best appearance on a high dynamic range (HDR) display.

enum

InputGamma

Effects.js:1301

Used in Effects.HighlightsShadows

Values number

Name	Value	Description
`Linear`	`0`	Indicates the input image is in linear gamma space.
`SRGB`	`1`	Indicates the input image is sRGB gamma space.

enum

MorphologyMode

Effects.js:1379

Used in Effects.Morphology

Values number

Name	Value	Description
`Erode`	`0`	The minimum value from each RGB channel in the kernel is used.
`Dilate`	`1`	The maximum value from each RGB channel in the kernel is used.

enum

ScaleInterpolationMode

Effects.js:1225

Used in Effects.Scale

Values number

Name	Value	Description
`NearestNeighbor`	`0`	Samples the nearest single point and uses that. This mode uses less processing time, but outputs the lowest quality image.
`Linear`	`1`	Uses a four point sample and linear interpolation. This mode uses more processing time than the nearest neighbor mode, but outputs a higher quality image.
`Cubic`	`2`	Uses a 16 sample cubic kernel for interpolation. This mode uses the most processing time, but outputs a higher quality image.
`MultiSampleLinear`	`3`	Uses 4 linear samples within a single pixel for good edge anti-aliasing. This mode is good for scaling down by small amounts on images with few pixels.
`Anisotropic`	`4`	Uses anisotropic filtering to sample a pattern according to the transformed shape of the bitmap.
`HighQualityCubic`	`5`	Uses a variable size high quality cubic kernel to perform a pre-downscale the image if downscaling is involved in the transform matrix. Then uses the cubic interpolation mode for the final output.

enum

ShadowOptimization

Effects.js:1496

Used in Effects.Shadow

Values number

Name	Value	Description
`Speed`	`0`	Applies internal optimizations such as pre-scaling at relatively small radii. Uses linear filtering.
`Balanced`	`1`	Uses the same optimization thresholds as Speed mode, but uses trilinear filtering.
`Quality`	`2`	Only uses internal optimizations with large blur radii, where approximations are less likely to be visible. Uses trilinear filtering.

enum

StraightenScaleMode

Effects.js:1329

Used in Effects.Straighten

Values number

Name	Value	Description
`NearestNeighbor`	`0`	Indicates nearest neighbor interpolation should be used.
`Linear`	`1`	Indicates linear interpolation should be used.
`Cubic`	`2`	Indicates cubic interpolation should be used.
`MultisampleLinear`	`3`	Indicates multi-sample linear interpolation should be used.
`Anisotropic`	`4`	Indicates anisotropic filtering should be used.

enum

TurbulenceNoise

Effects.js:1538

Used in Effects.TurbulenceNoise

Values number

Name	Value	Description
`FractalSum`	`0`	Computes a sum of the octaves, shifting the output range from [-1, 1], to [0, 1].
`Turbulence`	`1`	Computes a sum of the absolute value of each octave.

object

Effects

Effects.js:90

Contains identifiers of built-in Direct2D effects with their CLSIDs and tuning properties.

Properties

Name Type Description

ColorMatrix

Object

Use the color matrix effect to alter the RGBA values of a bitmap.
You can use this effect to:
- Remove a color channel from an image.
- Reduce the color in an image.
- Swap color channels.
- Combine color channels.
Many built-in effects are specializations of color matrix that are optimized for the intended use of the effects. Examples include saturation, hue rotate, sepia, and temperature and tint.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/color-matrix

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`ColorMatrix`	`string`	Value type: Float32Array(20) A 5x4 matrix of float values. The elements in the matrix are not bounded and are unitless. The default is the identity matrix. The default value is [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0]
`AlphaMode`	`string`	Value type: ColorMatrixAlphaMode The alpha mode of the output. The default value is ColorMatrixAlphaMode.Premultiplied
`ClampOutput`	`string`	Value type: BOOL Whether the effect clamps color values to between 0 and 1 before the effect passes the values to the next effect in the graph. The effect clamps the values before it premultiplies the alpha. If you set this to TRUE the effect will clamp the values. If you set this to FALSE, the effect will not clamp the color values, but other effects and the output surface may clamp the values if they are not of high enough precision. The default value is FALSE

HdrToneMap

Object

This effect adjusts the dynamic range of an image to better suit its content to the capability of the output display.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/hdr-tone-map-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`InputMaxLuminance`	`string`	Value type: FLOAT The maximum light level (or MaxCLL) of the image, in nits.
`OutputMaxLuminance`	`string`	Value type: FLOAT The MaxCLL supported by the output target, in nits—typically set to the MaxCLL of the display.
`DisplayMode`	`string`	Value type: HdrToneMapDisplayMode When set to HDR, the tone mapping curve is adjusted to better fit the fit the behavior of common HDR displays.

WhiteLevelAdjustment

Object

This effect allows the white level of an image to be linearly scaled. This is especially helpful when you convert between display-referred luminance space and scene-referred luminance space, or vice versa.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/white-level-adjustment-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`InputWhiteLevel`	`string`	Value type: FLOAT The white level of the input image, in nits.
`OutputWhiteLevel`	`string`	Value type: FLOAT The white level of the output image, in nits.

AlphaMask

Object

This effect applies an alpha mask to an image. It has two inputs, named Destination and Mask. Color values in the Destination image are multiplied by the alpha channel of the Mask image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/alpha-mask-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.

ArithmeticComposite

Object

Use the arithmetic composite effect to combine 2 images using a weighted sum of pixels from the input images.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/arithmetic-composite

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Coefficients`	`string`	Value type: Float32Array(4) The coefficients for the equation used to composite the two input images. The coefficients are unitless and unbounded. Default value is [1.0, 0.0, 0.0, 0.0].
`ClampOutput`	`string`	Value type: BOOL The effect clamps color values to between 0 and 1 before the effect passes the values to the next effect in the graph. If you set this to TRUE the effect will clamp the values. If you set this to FALSE, the effect will not clamp the color values, but other effects and the output surface may clamp the values if they are not of high enough precision. Default value is FALSE.

Blend

Object

Use the blend effect to combine 2 images. This effect has 26 blend modes.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/blend

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Mode`	`string`	Value type: BlendMode The interpolation mode the effect uses to scale the image to the corresponding kernel unit length. There are six scale modes that range in quality and speed. The default value is BlendMode.Multiply

Composite

Object

Use the composite effect to combine 2 or more images. This effect has 13 different composite modes. The composite effect accepts 2 or more inputs. When you specify 2 images, destination is the first input (index 0) and the source is the second input (index 1). If you specify more than 2 inputs the images are composited starting with the first input and the second and so on. This effect implements all of the modes using the blending unit of the graphics processing unit (GPU).
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/composite

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Mode`	`string`	Value type: CompositeMode The mode used for the effect. The default value is CompositeMode.SourceOver

CrossFade

Object

This effect combines two images by adding weighted pixels from input images. It has two inputs, named Destination and Source. The cross fade formula is output = weight * Destination + (1 - weight) * Source.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/cross-fade-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Weight`	`string`	Value type: FLOAT How much to weigh the source image color values versus the destination image. The minimum value is 0.0f (exclusively use the destination image to determine the output) and the maximum value is 1.0f (exclusively use the source image to determine the output). The default value is 0.5

ConvolveMatrix

Object

Use the convolve matrix effect to apply an arbitrary 2D kernel to an image. You can use this effect to blur, detect edges, emboss, or sharpen an image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/convolve-matrix

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`KernelUnitLength`	`number`	Value type: FLOAT The size of one unit in the kernel. The units are in (DIPs/kernel unit), where a kernel unit is the size of the element in the convolution kernel. A value of 1 (DIP/kernel unit) corresponds to one pixel in an image at 96 DPI. The default value is 1.0
`ScaleMode`	`number`	Value type: ConvolveMatrixScaleMode The interpolation mode the effect uses to scale the image to the corresponding kernel unit length. There are six scale modes that range in quality and speed. The default value is ConvolveMatrixScaleMode.Linear
`KernelSizeX`	`number`	Value type: UINT32 The width of the kernel matrix. The units are specified in kernel units. The default value is 3
`KernelSizeY`	`number`	Value type: UINT32 The height of the kernel matrix. The units are specified in kernel units. The default value is 3
`KernelMatrix`	`number`	Value type: Float32Array(9) The kernel matrix to be applied to the image. The kernel elements aren't bounded and are specified as floats. The first set of KernelSizeX numbers in the FLOAT[] corresponds to the first row in the kernel. The second set of KernelSizeX numbers correspond to the second row, and so on up to KernelSizeY rows. The default value is [0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0]
`Divisor`	`number`	Value type: FLOAT The kernel matrix is applied to a pixel and then the result is divided by this value. 0 behaves as a value of float epsilon. The default value is 1.0
`Bias`	`number`	Value type: FLOAT The effect applies the kernel matrix, the divisor, and then the bias is added to the result. The bias is unbounded and unitless. The default value is 0.0
`KernelOffset`	`number`	Value type: Float32Array(2) Shifts the convolution kernel from a centered position on the output pixel to a position you specify left/right and up/down. The offset is defined in kernel units. With some offsets and kernel sizes, the convolution kernel s samples won't land on a pixel image center. The pixel values for the kernel sample are computed by bilinear interpolation. The default value is [0.0, 0.0]
`PreserveAlpha`	`number`	Value type: BOOL Specifies whether the convolution kernel is applied to the alpha channel or only the color channels. If you set this to TRUE the convolution kernel is applied only to the color channels. If you set this to FALSE the convolution kernel is applied to all channels. The default value is false.
`BorderMode`	`number`	Value type: BorderMode The mode used to calculate the border of the image, soft or hard. The default value is BorderMode.Soft
`ClampOutput`	`number`	Value type: BOOL Whether the effect clamps color values to between 0 and 1 before the effect passes the values to the next effect in the graph. The effect clamps the values before it premultiplies the alpha. If you set this to TRUE the effect will clamp the values. If you set this to FALSE, the effect will not clamp the color values, but other effects and the output surface may clamp the values if they are not of high enough precision. The default value is false.

DirectionalBlur

Object

The directional blur effect is similar to Gaussian blur, except you can skew the blur in a particular direction. You can use this effect to make an image look as if it is in motion or to emphasize an animated image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/directional-blur

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`StandardDeviation`	`number`	Value type: FLOAT The amount of blur to be applied to the image. You can compute the blur radius of the kernel by multiplying the standard deviation by 3. The units of both the standard deviation and blur radius are DIPs. A value of 0 DIPs disables this effect. The default value is 3.0
`Angle`	`number`	Value type: FLOAT The angle of the blur relative to the x-axis, in the counterclockwise direction. The units are specified in degrees. The blur kernel is first generated using the same process as for the Gaussian blur effect. The kernel values are then transformed according to the blur angle. The default value is 0.0
`Optimization`	`number`	Value type: DirectionalBlurOptimization The optimization mode. The default value is DirectionalBlurOptimization.Balanced
`BorderMode`	`number`	Value type: BorderMode The mode used to calculate the border of the image, soft or hard. The default value is BorderMode.Soft

EdgeDetection

Object

Filters out the content of an image, leaving lines at the edges of contrasting sections of the image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/edge-detection-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Strength`	`number`	Value type: FLOAT Value modulating the response of the edge detection filter. A low strength value means that weaker edges will get filtered out, while a high value means stronger edges will get filtered out. The allowed range is 0.0 to 1.0 The default value is 0.5
`BlurRadius`	`number`	Value type: FLOAT Value specifying the amount of blur to apply. Applying blur is used to remove high frequencies and reduce phantom edges. The allowed range is 0.0 to 10.0 The default value is 0.0 (no blur applied).
`Mode`	`number`	Value type: EdgeDetectionMode Value which mode to use for edge detection. The default value is EdgeDetectionMode.Sobel
`OverlayEdges`	`number`	Value type: BOOL Edge detection only applies to the RGB channels, the alpha channel is ignored for purposes of detecting edges. If is false, the output edges is fully opaque. If is true, the input opacity is preserved. The default value is false.
`AlphaMode`	`number`	Value type: AlphaMode Value indicating the alpha mode of the input file. If the input is not opaque, this value is used to determine whether to unpremultiply the inputs. See the About Alpha Modes section of the Supported Pixel Formats and Alpha Modes topic for additional information. The default value is AlphaMode.Premultiplied

GaussianBlur

Object

Use the Gaussian blur effect to create a blur based on the Gaussian function over the entire input image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/gaussian-blur

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`StandardDeviation`	`number`	Value type: FLOAT The amount of blur to be applied to the image. You can compute the blur radius of the kernel by multiplying the standard deviation by 3. The units of both the standard deviation and blur radius are DIPs. A value of zero DIPs disables this effect entirely. The default value is 3.0
`Optimization`	`number`	Value type: GaussianBlurOptimization The optimization mode. The default value is GaussianBlurOptimization.Balanced
`BorderMode`	`number`	Value type: BorderMode The mode used to calculate the border of the image, soft or hard. The default value is BorderMode.Soft

Morphology

Object

Use the morphology effect to thin or thicken edge boundaries in an image. This effect creates a kernel that is 2 times the Width and Height values you specify. This effect centers the kernel on the pixel it is calculating and returns the maximum value in the kernel (if dilating) or minimum value in the kernel (if eroding).
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/morphology

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Mode`	`number`	Value type: MorphologyMode The morphology mode. The available modes are erode (flatten) and dilate (thicken). The default value is MorphologyMode.Erode
`Width`	`number`	Value type: UINT Size of the kernel in the X direction. The units are in DIPs. Values must be between 1 and 100 inclusive. The default value is 1
`Height`	`number`	Value type: UINT Size of the kernel in the Y direction. The units are in DIPs. Values must be between 1 and 100 inclusive. The default value is 1

Emboss

Object

Creates a grayscale version of the image that appears as though it has been stamped into paper.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/emboss-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Height`	`number`	Value type: FLOAT Value controlling the strength of the embossing effect. The allowed range is 0.0 to 10.0 The default value is 1.0
`Direction`	`number`	Value type: FLOAT Value specifying the light direction used to create the effect. The allowed range is 0.0 to 360.0 The default value is 0.0

Posterize

Object

The posterize effect reduces the number of unique colors in an image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/posterize-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`RedValueCount`	`number`	Value type: UINT Integer value specifying how many evenly spaced steps to divide the red channel range of 0.0 to 1.0 into. For example, a value of 4 generates a table with 4 steps, [0.0, 0.33, 0.67, 1.0]. The allowed range for this property is 2 to 16 The default value is 4
`GreenValueCount`	`number`	Value type: UINT Integer value specifying how many evenly spaced steps to divide the green channel range of 0.0 to 1.0 into. For example, a value of 4 generates a table with 4 steps, [0.0, 0.33, 0.67, 1.0]. The allowed range for this property is 2 to 16 The default value is 4
`BlueValueCount`	`number`	Value type: UINT Integer value specifying how many evenly spaced steps to divide the blue channel range of 0.0 to 1.0 into. For example, a value of 4 generates a table with 4 steps, [0.0, 0.33, 0.67, 1.0]. The allowed range for this property is 2 to 16 The default value is 4

Shadow

Object

Use the shadow effect to generate a shadow from the alpha channel of an image. The shadow is more opaque for higher alpha values and more transparent for lower alpha values. You can set the amount of blur and the color of the shadow.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/drop-shadow

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`BlurStandardDeviation`	`number`	Value type: FLOAT The amount of blur to be applied to the alpha channel of the image. You can compute the blur radius of the kernel by multiplying the standard deviation by 3. The units of both the standard deviation and blur radius are DIPs. This property is the same as the Gaussian Blur standard deviation property. The default value is 3.0
`Color`	`number`	Value type: Float32Array(4) The color of the drop shadow. This property is a Float32Array(4) defined as: [R, G, B, A] (normalized in range [0.0, 1.0]). You must specify this color in straight alpha. The default value is [0.0, 0.0, 0.0, 1.0].
`Optimization`	`number`	Value type: ShadowOptimization The level of performance optimization. The default value is ShadowOptimization.Balanced

Brightness

Object

Use the brightness effect to control the brightness of the image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/brightness

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`WhitePoint`	`number`	Value type: Float32Array(2) The upper portion of the brightness transfer curve. The white point adjusts the appearance of the brighter portions of the image. This property is for both the x value and the y value, in that order. Each of the values of this property are between 0 and 1, inclusive. The default value is [1.0, 1.0]
`BlackPoint`	`number`	Value type: Float32Array(2) The lower portion of the brightness transfer curve. The black point adjusts the appearance of the darker portions of the image. This property is for both the x value and the y value, in that order. Each of the values of this property are between 0 and 1, inclusive. The default value is [0.0, 0.0]

Contrast

Object

Increases or decreases the contrast of an image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/contrast-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Contrast`	`number`	Value type: FLOAT Value indicating the amount by which to adjust the contrast of the image. Negative values reduce contrast, while positive values increase contrast. Minimum value is -1.0, maximum value is 1.0. The default value for the property is 0.0.
`ClampInput`	`number`	Value type: BOOL Value indicating whether or not to clamp the input to [0.0, 1.0]. The default value for the property is false.

Exposure

Object

Increase or decreases the exposure of the image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/exposure-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`ExposureValue`	`number`	Value type: FLOAT Specifies how much to increase or decrease the exposure of the image. The allowed range is -2.0 to 2.0. The default value is 0.0 (no change).

Grayscale

Object

Converts an image to monochromatic gray.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/grayscale-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.

HighlightsShadows

Object

Adjusts the highlights and shadows of the image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/highlights-and-shadows-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Highlights`	`number`	Value type: FLOAT Value indicating how much to increase or decrease highlights. The allowed range is -1.0 to 1.0 The default value is 0.0
`Shadows`	`number`	Value type: FLOAT Value indicating how much to increase or decrease shadows. The allowed range is -1.0 to 1.0 The default value is 0.0
`Clarity`	`number`	Value type: FLOAT Value indicating how much to increase or decrease clarity. The allowed range is -1.0 to 1.0 The default value is 0.0
`InputGamma`	`number`	Value type: InputGamma Value indicating the gamma of the input image. The Highlights and Shadows effect works in linear gamma space, so if the input image is know to be linear, the InputGamma.Linear value should be used to prevent sRGB to linear conversions from being performed.
`MaskBlurRadius`	`number`	Value type: FLOAT Value controlling the size of the region used around a pixel to classify the pixel as highlight or shadow. Lower values result in more localized adjustments. The allowed range is 0.0 to 10.0 The default value is 1.25

Histogram

Object

Use the histogram effect to generate a histogram for the input bitmap based on the specified number of bins.
The effect generates a histogram for pixel values between 0 and 1. Values outside of this range are clamped to the range. The range of a particular bucket depends on the number of buckets.
This effect works on straight bitmap pixels. The color channels of the input bitmap are divided by the alpha channel to compute this effect. For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/histogram

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`NumBins`	`number`	Value type: UINT32 Specifies the number of bins used for the histogram. The range of intensity values that fall into a particular bucket depend on the number of specified buckets. The default value is 256
`ChannelSelect`	`number`	Value type: ChannelSelector Specifies the channel used to generate the histogram. This effect has a single data output corresponding to the specified channel. See Channel selectors for more info. The default value is ChannelSelector.R
`HistogramOutput`	`number`	Value type: Float32Array (output property only!) This effect outputs a Float32Array, with the number of elements corresponding to the number of specified NumBins.

Invert

Object

Inverts the colors of an image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/invert-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.

Sepia

Object

Increase or decreases the exposure of the image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/sepia-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Intensity`	`number`	Value type: FLOAT Value indicating the intensity of the sepia effect. The allowed range is 0.0 to 1.0 The default value is 0.5
`AlphaMode`	`number`	Value type: AlphaMode enumeration value indicating the alpha mode of the input file. The default value is AlphaMode.Premultiplied

Sharpen

Object

Sharpens the image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/sharpen-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Sharpness`	`number`	Value type: FLOAT Value indicating how much to sharpen the input image. The allowed range is 0.0 to 10.0 The default value is 0.0
`Threshold`	`number`	Value type: FLOAT The allowed range is 0.0 to 1.0 The default value is 0.0

Straighten

Object

Rotates and optionally scales an image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/straighten-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Angle`	`number`	Value type: FLOAT Value that specifies how much the image should be rotated. The allowed range is -45.0 to 45.0 The default value is 0.0
`MaintainSize`	`number`	Value type: BOOL Value that specifies whether the image will be scaled such that the original size is maintained without any invalid regions. The default value is false.
`ScaleMode`	`number`	Value type: StraightenScaleMode Value indicating the scaling mode that should be used. See module:Effects.StraightenScaleMode

TemperatureTint

Object

Rotates and optionally scales an image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/temperature-and-tint-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Temperature`	`number`	Value type: FLOAT Value specifying how much to increase or decrease the temperature of the input image. The allowed range is -1.0 to 1.0 The default value is 0.0
`Tint`	`number`	Value type: FLOAT Value specifying how much to increase or decrease the tint of the input image. The allowed range is -1.0 to 1.0 The default value is 0.0

Vignette

Object

Fades the input image at the edges to a user-set color.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/vignette-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Color`	`number`	Value type: Float32Array(4) RGBA values (normalized in range [0.0, 1.0]) that specifies the color to fade the image's edges to. The default color is black [0.0, 0.0, 0.0, 1.0]
`TransitionSize`	`number`	Value type: FLOAT Value that specifies the size of the vignette region as a percentage of the full image region. A size of 0 means the unfaded region is the entire image, while a size of 1 means the faded region is the entire source image. The allowed range is 0.0 to 1.0 The default value is 0.1
`Strength`	`number`	Value that specifies how much the vignette color bleeds in for a given transition size. The allowed range is 0.0 to 1.0 The default value is 0.5

Flood

Object

Use the flood effect to generate a bitmap based on the specified color and alpha value. You can use this effect when you want a specific color as an input for an effect, like a background color.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/flood

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Color`	`number`	Value type: Float32Array(4) The color and opacity of the bitmap. This property is a Float32Array(4). The individual values for each channel are of type FLOAT, unbounded and unitless. The effect doesn't modify the values for the channels. The RGBA values for each channel range from 0 to 1 The default value is [0.0, 0.0, 0.0, 1.0f]

Turbulence

Object

Use the turbulence effect to generate a bitmap based on the Perlin noise function.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/turbulence

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Offset`	`number`	Value type: Float32Array(2) The coordinates where the turbulence output is generated. The algorithm used to generate the Perlin noise is position dependent, so a different offset results in a different output. This property is not bounded and the units are specified in DIPs Note: The offset does not have the same effect as a translation because the noise function output is infinite and the function will wrap around the tile. The default value is [0.0, 0.0]
`Size`	`number`	Value type: Float32Array(2) The size of the turbulence output. This property is not bounded and the units are specified in DIPs The default value is [0.0, 0.0]
`BaseFrequency`	`number`	Value type: Float32Array(2) The base frequencies in the X and Y direction. This property is a float and must be greater than 0. The units are specified in 1/DIPs. A value of 1 (1/DIPs) for the base frequency results in the Perlin noise completing an entire cycle between two pixels. The ease interpolation for these pixels results in completely random pixels, since there is no correlation between the pixels. A value of 0.1(1/DIPs) for the base frequency, the Perlin noise function repeats every 10 DIPs. This results in correlation between pixels and the typical turbulence effect is visible. The default value is [0.01, 0.01]
`NumOctaves`	`number`	Value type: UINT32 The number of octaves for the noise function. This property is a UINT32 and must be greater than 0. The default value is 1
`Seed`	`number`	Value type: UINT32 The seed for the pseudo random generator. This property is unbounded. The default value is 0
`Noise`	`number`	Value type: TurbulenceNoise The turbulence noise mode. This property can be either fractal sum or turbulence. Indicates whether to generate a bitmap based on Fractal Noise or the Turbulence function. The default value is TurbulenceNoise.FractalSum
`Stitchable`	`number`	Value type: BOOL Turns stitching on or off. The base frequency is adjusted so that output bitmap can be stitched. This is useful if you want to tile multiple copies of the turbulence effect output. True The output bitmap can be tiled (using the tile effect) without the appearance of seams. The base frequency is adjusted so that output bitmap can be stitched. False The base frequency is not adjusted, so seams may appear between tiles if the bitmap is tiled. The default value is FALSE

AffineTransform

Object

The 2D affine transform effect applies a spatial transform to an image based on a 3X2 matrix using the Direct2D matrix transform and any of six interpolation modes. You can use this effect to rotate, scale, skew, or translate an image. Or, you can combine these operations. Affine transfers preserve parallel lines and the ratio of distances between any three points in an image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/2d-affine-transform

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`InterpolationMode`	`number`	Value type: D2DAffinetransformInterpolationMode The interpolation mode used to scale the image. There are 6 scale modes that range in quality and speed. The default value is D2DAffinetransformInterpolationMode.Linear
`BorderMode`	`number`	Value type: BorderMode The mode used to calculate the border of the image, soft or hard. The default value is BorderMode.Soft
`TransformMatrix`	`number`	Value type: Float32Array(6) The 3x2 matrix to transform the image using the Direct2D matrix transform. Default value is [1, 0, 0, 1, 0, 0]
`Sharpness`	`number`	Value type: FLOAT In the high quality cubic interpolation mode, the sharpness level of the scaling filter as a float between 0 and 1. The values are unitless. You can use sharpness to adjust the quality of an image when you scale the image. The sharpness factor affects the shape of the kernel. The higher the sharpness factor, the smaller the kernel. Note: This property affects only the high quality cubic interpolation mode. Default value is 0.0

D3DTransform

Object

Use the 3D transform effect to apply an arbitrary 4x4 transform matrix to an image. This effect applies the matrix (M) you provide to the corner vertices of the source image ([ x y z 1 ]) using this calculation: [ xr yr zr 1 ]=[ x y z 1 ]*M
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/3d-transform

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`InterpolationMode`	`number`	Value type: D3DTransformInterpolationMode The interpolation mode used to scale the image. There are 6 scale modes that range in quality and speed. The default value is D3DTransformInterpolationMode.Linear
`BorderMode`	`number`	Value type: BorderMode The mode used to calculate the border of the image, soft or hard. The default value is BorderMode.Soft
`TransformMatrix`	`number`	Value type: Float32Array(16) A 4x4 transform matrix applied to the projection plane. The following matrix calculation is used to map points from one 3D coordinate system to the transformed 2D coordinate system. The individual matrix elements are not bounded and are unitless. Default value is [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]

D3DPerspectiveTransform

Object

Use the 3D perspective transform effect to rotate the image in 3 dimensions as if viewed from a distance.
The 3D perspective transform is more convenient than the 3D transform effect, but only exposes a subset of the functionality. You can compute a full 3D transformation matrix and apply a more arbitrary transform matrix to an image using the 3D transform effect
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/3d-perspective-transform

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`InterpolationMode`	`number`	Value type: D3DPerspectiveTransformInterpolationMode The interpolation mode the effect uses on the image. There are 5 scale modes that range in quality and speed. The default value is D3DPerspectiveTransformInterpolationMode.Linear
`BorderMode`	`number`	Value type: BorderMode The mode used to calculate the border of the image, soft or hard. The default value is BorderMode.Soft
`Depth`	`number`	Value type: FLOAT The distance from the PerspectiveOrigin to the projection plane. The value specified in DIPs and must be greater than 0. Default value is 1000.0
`PerspectiveOrigin`	`number`	Value type: Float32Array(2) The X and Y location of the viewer in the 3D scene. This property is a D2D1_VECTOR_2F defined as: (point X, point Y). The units are in DIPs. You set the Z value with the Depth property. Default value is [0.0, 0.0]
`LocalOffset`	`number`	Value type: Float32Array(3) A translation the effect performs before it rotates the projection plane. Default value is [0.0, 0.0, 0.0]
`GlobalOffset`	`number`	Value type: Float32Array(3) A translation the effect performs after it rotates the projection plane. Default value is [0.0, 0.0, 0.0]
`RotationOrigin`	`number`	Value type: FLOAT The center point of the rotation the effect performs. Default value is [0.0, 0.0, 0.0]
`Rotation`	`number`	Value type: FLOAT The angles of rotation for each axis. Default value is [0.0, 0.0, 0.0]

Atlas

Object

You can use this effect to output a portion of an image but retain the region outside of the portion for use in subsequent operations.
The atlas effect is useful if you want to load a large image made up of many smaller images, such as various frames of a sprite.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/atlas

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`InputRect`	`number`	Value type: Float32Array(4) The portion of the image passed to the next effect. Default value is [-FLT_MAX, -FLT_MAX, FLT_MAX, FLT_MAX].
`InputPaddingRect`	`number`	Value type: Float32Array(4) The maximum size sampled for the output rectangle. Default value is [-FLT_MAX, -FLT_MAX, FLT_MAX, FLT_MAX].

Border

Object

Use the border effect to extend an image from the edges. You can use this effect to repeat the pixels from the edges of the image, wrap the pixels from the opposite end of the image, or mirror the pixels across the bitmap border to extend the bitmap region.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/border

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`EdgeModeX`	`number`	Value type: BorderEdgeMode The edge mode in the X direction for the effect. You can set this to clamp, wrap, or mirror. The default value is BorderEdgeMode.Clamp
`EdgeModeY`	`number`	Value type: BorderEdgeMode The edge mode in the Y direction for the effect. You can set this to clamp, wrap, or mirror. The default value is BorderEdgeMode.Clamp

Crop

Object

Use the crop effect to output a specified region of an image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/crop

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Rect`	`number`	Value type: Float32Array(4) The region to be cropped specified as a vector in the form (left, top, right, bottom). The default value is [-FLT_MAX, -FLT_MAX, FLT_MAX, FLT_MAX]
`BorderMode`	`number`	Value type: BorderMode The mode used to calculate the border of the image, soft or hard. The default value is BorderMode.Soft

Scale

Object

Use this effect to scale an image up or down.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/high-quality-scale

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Scale`	`number`	Value type: Float32Array(2) The scale amount in the X and Y direction as a ratio of the output size to the input size. This property an array defined as: (X scale, Y scale). The scale amounts are FLOAT, unitless, and must be positive or 0. The default value is [1.0, 1.0].
`CenterPoint`	`number`	Value type: Float32Array(2) The image scaling center point. This property is an array defined as: (point X, point Y). Use the center point property to scale around a point other than the upper-left corner. The default value is [0.0, 0.0].
`InterpolationMode`	`number`	Value type: ScaleInterpolationMode The interpolation mode the effect uses to scale the image. There are 6 scale modes that range in quality and speed. See Interpolation modes for more info. The default value is ScaleInterpolationMode.Linear
`BorderMode`	`number`	Value type: BorderMode The mode used to calculate the border of the image, soft or hard. The default value is BorderMode.Soft

Tile

Object

Use the tile effect to repeat the specified region of the image.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/tile

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Rect`	`number`	Value type: Float32Array(4) The region of the image to be tiled. This property is a Float32Array defined as: [left, top, right, bottom]. The default value is [0, 0, 100, 100]

ChromaKey

Object

Converts a given color plus or minus a tolerance to alpha. For example, chroma-key can remove the background of an image for a green-screen overlay effect.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/chromakey-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Color`	`number`	Value type: Float32Array(3) Value indicating the color that should be converted to alpha. Array contains RGB values normalized in range [0.0, 1.0] The default color is black [0, 0, 0]
`Tolerance`	`number`	Value type: FLOAT Value indicating the tolerance for matching the color specified in the Color property. The allowed range is 0.0 to 1.0 The default value is 0.1
`InvertAlpha`	`number`	Value type: BOOL Value indicating whether the alpha values should be inverted. The default value if FALSE
`Feather`	`number`	Value type: BOOL Value whether the edges of the output should be softened in the alpha channel. When set to FALSE, the alpha output by the effect is 1-bit: either fully opaque or fully transparent. Setting to TRUE results in a softening of edges in the alpha channel of the Chroma Key output. The default value is False.

LuminanceToAlpha

Object

Use the luminance to alpha effect to set the alpha channel to the luminance of the image and sets the color channels to 0. You can use the output of this effect to make a semitransparent overlay based on the brightness of the input image. Or you can use it to make an image mask.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/luminance-to-alpha

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.

Opacity

Object

This effect adjusts the opacity of an image by multiplying the alpha channel of the input by the specified opacity value. It has a single input.
For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct2d/opacity-effect

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`Opacity`	`number`	Value type: FLOAT The multiplier to the input image's alpha channel. The minimum value is 0.0f and the maximum value is 1.0f The default value is 1.0

CustomShader

Object

Applies custom shader to image.

Properties

Name	Type	Description
`ID`	`string`	CLSID of effect.
`ShaderCode`	`number`	Value type: Uint8Array (code bytes blob array) Compiled shader bytecode. Shader MUST be compiled before setting it as an input value for this effect. Use d2d.Compile to compile shader source code (see example in the page end). For more information, see: https://learn.microsoft.com/en-us/windows/win32/direct3dhlsl/dx-graphics-hlsl-writing-shaders-9

Default

Examples

//=========================== Histogram ========================================

window.DrawMode = 1;
include(`${fb.ComponentPath}\\docs\\Effects.js`);

const img = d2d.Image(`${fb.ComponentPath}\\samples\\d2d\\images\\Flowers.jpg`);

const effect = d2d.Effect(Effects.Histogram.ID);
effect.SetInput(0, img);
effect.SetValue(Effects.Histogram.NumBins, 10);
effect.SetValue(Effects.Histogram.ChannelSelect, ChannelSelector.R);

const dgrImg = d2d.CreateImage(1,1);
const dgr = dgrImg.GetGraphics();
dgr.DrawEffect(effect, 0, 0, 0, 0, img.Width, img.Height);
dgrImg.ReleaseGraphics(dgr);
const histogram = effect.GetValue(Effects.Histogram.HistogramOutput);

console.log(histogram); // Float32Array {0=0.04278142377734184, 1=0.03943245857954025, 2=0.06783067435026169, 3=0.08444418758153915, 4=0.12744605541229248, 5=0.13865619897842407, 6=0.14809100329875946, 7=0.16188085079193115, 8=0.15734052658081055, 9=0.03209662064909935}

//=========================== D3DPerspectiveTransform ========================================

window.DrawMode = 1;
include(`${fb.ComponentPath}\\docs\\Effects.js`);

const img = d2d.Image(`${fb.ComponentPath}\\samples\\d2d\\images\\Flowers.jpg`);

const scale = d2d.Effect(Effects.Scale.ID);
scale.SetInput(0, img);

const transform = d2d.Effect(Effects.D3DPerspectiveTransform.ID);
transform.SetInputEffect(0, scale);

const angles = new Float32Array(3);

window.SetInterval(() => {
	
  angles[0] += 1;
  angles[1] += 0.5;
  angles[2] += 0.8;
  if(angles[0] >= 360) angles[0] = 0;
  if(angles[1] >= 360) angles[1] = 0;
  if(angles[2] >= 360) angles[2] = 0;
	
  transform.SetValue(Effects.D3DPerspectiveTransform.Rotation, angles);
  window.Repaint();

}, 10);

var ww = 0, wh = 0;
function on_size(width, height) {
  ww = width;
  wh = height;
  scale.SetValue(Effects.Scale.Scale, new Float32Array([ww / img.Width, wh / img.Height]));
  transform.SetValue(Effects.D3DPerspectiveTransform.RotationOrigin, new Float32Array([ww / 2, wh / 2, 0]));
  transform.SetValue(Effects.D3DPerspectiveTransform.PerspectiveOrigin, new Float32Array([ww / 2, wh / 2]));	
}

function on_paint(dgr) {
  dgr.FillSolidRect(0, 0, ww, wh, 0xFFAAAAAA);	
  dgr.DrawEffect(transform, 0, 0, 0, 0, ww, wh);
}