Canvas Composite

Canvas operators are very valuable in our configured workflow. They work as a layering system on top of the Texture asset. The real flexibility comes from the ability to assign their properties to Threekit’s logic and rule system.

This Canvas Composite Operator works similar to a blending mode found in post processing software. Use to combine images on top of one another. Make sure to add a Canvas operator first before using. Then adjust the size to the size of the Source Image you will be adding in the Canvas Composite operator, unless certain situation specifically mentioned.

PROPERTIES

Composite

Source Image Asset

Input the texture asset you would like to use in the canvas composite operator.

Opacity

Determines how see-through the layer is. Numeric Range:

• Input = 1 = Defaulted value. Completely opaque.

• 0.1 - 0.9 = Gets more see-through the lower the value input.

• Input = 0 = Completely see-through.

Composition

Base = Layers below operator Blend = Selected canvas composite operator

Source-Over	Default setting. Draws new shapes on top of existing canvas content.
Source-In	Combines blend and base layer. Looks to where the base and blend overlap and makes everything else transparent.
Source-Out	Combines blend and base layer. Looks to where the base and blend overlap and makes that transparent.
Source-Atop	Looks to where the base and blend overlap. Then combines the section of the blend and base overlap with the base layer.
Destination-Over	Blend layer is combined behind base layer.
Destination-In	Looks to where the base and blend overlap and makes everything else transparent. The end-result is the base layer with the overlapping section used as a mask.
Destination-Out	Invert version of Destination-In. Looks to where the base and blend overlap and everything else is transparent. The end-result is the base layer with the non-overlapping section used as a mask.
Destination-Atop	Looks at where the base and blend overlap and makes everything else is transparent. End result is the base layer with the blend layer behind and the overlapping section used as a mask.
Lighter	Adds blend and base layer together and then looks at the color information in the base and blend color. It then outputs the highest value from the combination. Similar to Lighten but results are brighter.
Copy	Uses the blend layer and ignores base.
Xor	The layers are made transparent where they overlap and shown normally everywhere else.
Multiply	The blend layer is multiplied over the base resulting in a darkening effect.
Screen	The base and blend colors are inverted then multiplied against each other. The result is inverted again, giving a much brighter image overall.
Overlay	White values Lighten the base. Black values Multiple the base. Grey values have no affect.
Darken	Looks to the color information in the base and blend color. Chooses the darker values between the layers, and outputs the new result.
Lighten	Looks to the color information in the base and blend color. Chooses the lighter values between the layers, and outputs the new result.
Color-Dodge	Divides the base by an inverted blend layer. The end result depends on the values in the blend layer. The lighter the blend layer, the more the base colors are affected.
Color-Burn	Divides an inverted base by the blend layer. The end result depends on the values in the blend layer. The blend layer is darkened and contrast increased. The darker the base, the more of its color is shown in the end result.
Hard Light	Multiples or screens the colors based on the blend layer color. If the blend is lighter than 50% grey, the image is screened. If the blend is darker than 50% grey the image is multiplied. The farther away from the grey, the more intense the effect.
Soft Light	Dodges or burns the colors based on the blend layer color. If the blend is lighter than 50% grey, the image is dodged. If the blend is darker than 50% grey the image is burned. The farther away from the grey the more intense the effect. The blending mode uses a different curve to blend the color information which results in a less contrasted image.
Difference	Looks for the brighter value between the base and blend layer. Then subtracts the color information from the other layer. Blending with white inverts the base color. Blending with black produces no change.
Exclusion	Very similar to the Difference blending mode but results are lower in contrast. Blending with white inverts the base color. Blending with black produces no change.
Hue	Combines the luminance and saturation of the base but the hue of the blend layer.
Saturation	Combines the luminance and hue of the base but the saturation of the blend layer.
Color	Combines the luminance of the base but the hue and saturation of the blend layer.
Luminosity	Combines the hue and saturation of the base but the luminosity of the blend layer. The inverse of the Color blending mode

Enable Tint

Checking the Enable Tint box exposes new attributes to affect the color of the composite asset. Default blending mode is 'Multiply'.

Tint Color	Defines the color used for Tint. We use a color picker that can use RGB, HSV or HEX inputs.
Opacity	Determines how see-through the layer is. Numeric Range: Input = 1 = Defaulted value. Completely opaque. .1 - .9 = Gets more see-through the lower the value input. Input = 0 = Completely see-through.
Tint Mode	Blending modes you can have the tint color use. Same as blending modes for Composition.

Flip options

These allow for flipping along the X and/or Y axis. These options can be set explicitly or driven by a product configurator using attributes.

Tiling

Uses the `Repeat` option in `Windowed` mode:

---

Position

The Position values determine where the Canvas Composite is placed on the texture asset.

Unit

Pixel	Selecting this option moves the Canvas Composite in pixel-based units.
Relative	Selecting this option moves the Canvas Composite in a 0 to 1 space, where 1 represents a full repetition of the Canvas.

X Pixel or X Relative

Moves the Canvas Composite horizontally. Negative values move it left. Positive right.

Y Pixel or Y Relative

Moves the Canvas Composite vertically. Negative values move it up. Positive down.

Canvas Rotation

Rotates the Canvas Composite image or window.

Windowed

The Windowed feature allows user to defined and work only inside a sub area inside Canvas. In this case, the Canvas Composite operator layer will inherit the width and height from Canvas Operator. And the position, rotation and alignment feature will be applied onto the window instead of the Canvas Composite operator. For example, the position of the window starts in the top left of the Canvas and inherits the X Pixel/X Relative and Y Pixel/Y Relative. And image asset alignment inside window will inherit the Horizontal and Vertical Align values.

Window Border

Enabling this adds a white border to the crop.

Window Width or Relative Window Width

Determines the width of the window. Uses the Unit value you have selected above.

Window Height or Relative Window Height

Determines the height of the window. Uses the Unit value you have selected above.

Window Fit Mode

None	Draw image using its original size inside window. Image will be cropped if its size is bigger than the window size.
Fit Width	Scale image up or down to make sure the image takes the entire window width. Image will be cropped if image aspect ratio is less than window aspect ratio.
Fit Height	Scale image up or down to make sure the image takes the entire window height. Image will be cropped if image aspect ratio is larger than window aspect ratio.
Inside	Scales the source image so that its totally fits inside of the window without being clipped.
Full	Scale the source image so that the image takes the entire window. Image will be clipped if image and window has a different aspect ratio.

Override Default Size

This will rescale the size of your Canvas Composite. The Override Default Size will not keep the asset image aspect ratio. If you want to resize the image while keeping its aspect ratio, using Windowed feature.

Unit

Pixel	Selecting this option will set the Canvas Composite size using the value of Override Width/Height
Relative	Selecting this option will set the image asset size using the value as the result of Relative Width/Height times Canvas Width/Height.

Override Width or Relative Width

Scales the width of image asset. Uses the unit value you have selected above.

Override Height or Relative Height

Scales the height of image asset. Uses the unit value you have selected above.

Horizontal Align

This determines what is considered the start of the Canvas Composite or window. Position coordinates and rotation begin from the selection below.

Left

Default value. The Canvas Composite or window's left section is considered the starting horizontal alignment.

Center

The Canvas Composite or window’s center is considered the starting horizontal alignment.

Right

The Canvas Composite or window’s right section is considered the starting horizontal alignment.

Vertical Align

Top

Default value. The Canvas Composite or window’s top section is considered the starting vertical alignment.

Middle

The Canvas Composite or window’s center is considered the starting vertical alignment.

Bottom

The Canvas Composite or window’s bottom section is considered the starting vertical alignment.