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:
|
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.
Last updated
