Texture Operators

Canvas

Canvas operators are very valuable within the configured workflow. The Canvas Operators work as a layering system on top of the Texture asset. The ability to manipulate properties and assign values within Threekit's Logic system provides a great deal of flexibility.

Properties

Canvas

This Canvas Operator works much like a bucket fill. You can add a solid color over the texture asset.

PROPERTY DESCRIPTION
Color Defines the color used for color fill in operator. 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 non see-through.
  • .1 - .9 = Gets more see-through the lower the value input.
  • Input = 0 = Completely see-through.
External ID Allows an embedder to create an html <canvas> element and have the result of the canvas operations reflected on the external canvas. Conversely, it can allow someone to set up an external canvas and take user input (e.g. freehand drawings) and use that as a texture.
HDR Encoding NOTE: Definition copied from Texture Properties.

The encoding used by the Environment map file. Since the platform optimizes it for you, it should be left to RGBM 16 Encoding. The only potential exception would be if someone were to upload a .png envmap that was optimized to another of the formats listed.

When an image asset is uploaded, the original version of that image is stored, and if it's too big or in a non-consumable format, a smaller, reformatted image is automatically created. That is when "original" vs "webgl" must be considered. This has no effect on renders as the original will always be used.

It has no effect on renders though. For those we always use the original.

Linear Gamma value of 1. Majority of values would be perceptually close to white
sRBG Stores color in RGB with gamma 2.2
RGBE/Radiance Stores color in Radiance RGB
Log LUV Stores color in luminance and chromaticity (HS)
RGBM 7  
RGBM 16 Stores color in RGB and a multiplier(M) in the alpha channel.

Size

PROPERTY DESCRIPTION
Width

Optimize Image, Resize Image
Height

Optimize Image, Resize Image

Color Transform

NOTE: Definition copied from Texture Properties.
The Color Transform section adjusts texture lightness and darkness values and allows for inverting texture assets. This will override the Color Transform on the base Texture Asset Properties.

PROPERTY DESCRIPTION
Invert Inverts colors of texture asset, producing a negative.
Brightness An additive like factor that increased overall brightness of the image. Use a negative number to darken the texture asset.
Gain Multiply effect that adjusts values of texture asset.

Numeric Range:

  • Input = 1 = No effect. Defaulted value
  • Input > 1 = Multiplying lightening effect
  • Input < 1 = Multiplying darkening effect
Gain Pivot Changes starting value of Gain attribute.

Numeric Range:

  • Input = 0 = Defaulted value. Will target highlights.
  • Input > 1 = The further from 0, the more it clips values making the value range smaller and more contrasted.
  • Input < 1 The further from 0, the more it expands the value range and makes the image more washed out.

UV Transform

NOTE: Definition copied from Texture Properties.

The UV Transform section adjusts placement within the Texture Asset space. Texture assets have their own texture coordinates, U and V. These are used to describe width and height of texture assets. Texture coordinates are measured in scale of 0 to 1, with 0 and 1 at opposite sides of the texture. This will override the UV Transform on the base Texture Asset Properties.

PROPERTY DESCRIPTION
U Offset Control from where texture is placed in U direction or horizontally.

Numeric Range:

  • Input = 0 = Defaulted value.
  • Input > 0 = Moves texture asset right.
V Offset Control from where texture is placed in V direction or vertically.

Numeric Range:

  • Input = 0 = Defaulted value.
  • Input > 0 = Moves texture asset right.
U Wrap Style
None There is no repeat on the texture.
Wrap The texture asset repeats.
Mirror The texture asset repeats, but every repeat is flipped horizontally from the last.
V Wrap Style
None There is no repeat on the texture.
Wrap The texture asset repeats.
Mirror The texture asset repeats, but every repeat is flipped vertically from the last.
Scale Mode
Tiling The UV Tiling values determine amount of texture repeat in 0 to 1 space
Scale The UV Tiling values multiples texture asset starting from bottom left corner
U Tile Value input for Scale Mode that determines Left/Right or Horizontal Tiling
V Tile Value input for Scale Mode that determines Top/Bottom or Vertical Tiling

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

PROPERTY DESCRIPTION
Source Image Asset Input the texture asset you would like to use in the canvas composite operator.
Source Image Node  
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.
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.
Lighter
Copy Uses the blend layer and ignores base.
Lighter
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.
Lighter
Screen The base and blend colors are inverted then multiplied against each other. The result is inverted again, giving a much brighter image overall.
Lighter
Overlay White values Lighten the base. Black values Multiple the base. Grey values have no affect.
Lighter
Darken Looks to the color information in the base and blend color. Chooses the darker values between the layers, and outputs the new result.
Lighter
Lighten Looks to the color information in the base and blend color. Chooses the lighter values between the layers, and outputs the new result.
Lighter
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.
Lighter
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.
Lighter
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.
Lighter
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.
Lighter
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.
Lighter
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.
Lighter
Hue Combines the luminance and saturation of the base but the hue of the blend layer.
Lighter
Saturation Combines the luminance and hue of the base but the saturation of the blend layer.
Lighter
Color Combines the luminance of the base but the hue and saturation of the blend layer.
Lighter
Luminosity Combines the hue and saturation of the base but the luminosity of the blend layer. The inverse of the Color blending mode
Lighter
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 allow for flipping along the X and/or Y axis. These options can be set explicitly or driven by a product configurator using attributes.

canvas-flip.png

Tiling uses the `Repeat` option in `Windowed` mode:

canvas-repeat-tiling.png

 

Position

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

PROPERTY DESCRIPTION
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.

Canvas Fill

Canvas operators are very valuable within the configured workflow. The Canvas Operators work as a layering system on top of the Texture asset. The ability to manipulate properties and assign values within Threekit's Logic system provides a great deal of flexibility.

This Canvas Fill Operator works much like a bucket fill. You can add a solid color over the texture asset.

Properties

Fill

PROPERTY DESCRIPTION
Color Defines the color used for color fill in operator. 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.
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.
Lighter
Copy Uses the blend layer and ignores base.
Lighter
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.
Lighter
Screen The base and blend colors are inverted then multiplied against each other. The result is inverted again, giving a much brighter image overall.
Lighter
Overlay White values Lighten the base. Black values Multiple the base. Grey values have no affect.
Lighter
Darken Looks to the color information in the base and blend color. Chooses the darker values between the layers, and outputs the new result.
Lighter
Lighten Looks to the color information in the base and blend color. Chooses the lighter values between the layers, and outputs the new result.
Lighter
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.
Lighter
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.
Lighter
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.
Lighter
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.
Lighter
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.
Lighter
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.
Lighter
Hue Combines the luminance and saturation of the base but the hue of the blend layer.
Lighter
Saturation Combines the luminance and hue of the base but the saturation of the blend layer.
Lighter
Color Combines the luminance of the base but the hue and saturation of the blend layer.
Lighter
Luminosity Combines the hue and saturation of the base but the luminosity of the blend layer. The inverse of the Color blending mode
Lighter

Position

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

PROPERTY DESCRIPTION
Position DESCRIPTION

The Position values determine where the Canvas Fill is placed on the texture asset. This operator uses Pixels only for positioning values.
X Moves the Canvas Fill horizontally. Negative values move it left. Positive right.
Y Moves the Canvas Fill vertically. Negative values move it up. Positive down.
Width Scales the width of Canvas Fill uses Pixels.
Height Scales the height of Canvas Fill uses Pixels.

Canvas Linear Gradient

This Canvas Linear Gradient Operator works much like a bucket fill layer, except for the fact that there are a start and stop color. The gradient will begin at the start color and then slowly fade to the end in a direction you define with the properties. You can add a gradient color over the texture asset.

PROPERTY DESCRIPTION
Start Is
Top The start color begins at the top of the texture asset and then fades to the end color at the bottom side. It looks as if it is transitioning vertically downward.
Left The start color begins at the left of the texture asset and then fades to the end color at the right side. It looks as if it is transitioning horizontally right.
Right The start color begins at the right of the texture asset and then fades to the end color at the left side. It looks as if it is transitioning horizontally left.
Bottom The start color begins at the bottom of the texture asset and then fades to the end color at the top side. It looks as if it is transitioning vertically upward.
Top-Left The start color begins at the top-left of the texture asset and then fades to the end color at the bottom-right corner. It looks as if it is transitioning diagonally downward to the right.
Top-Right The start color begins at the top-right of the texture asset and then fades to the end color at the bottom-left corner. It looks as if it is transitioning diagonally downward to the left.
Bottom-Left The start color begins at the bottom-left of the texture asset and then fades to the end color at the top-right corner. It looks as if it is transitioning diagonally upward to the right.
Bottom-Right The start color begins at the bottom-right of the texture asset and then fades to the end color at the top-left corner. It looks as if it is transitioning diagonally upward to the left.
Start Color Defines the start color used for the gradient in the operator. We use a color picker that can use RGB, HSV or HEX inputs.
Start Opacity Determines how see-through the start color 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.
End Color Defines the end color used for the gradient in the operator. We use a color picker that can use RGB, HSV or HEX inputs.
End Opacity Determines how see-through the end color 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.
X Moves the Canvas Linear Gradient horizontally. Negative values move it left. Positive right. The Canvas Linear Gradient uses pixels.
Y Moves the Canvas Linear Gradient vertically. Negative values move it up. Positive down. The Canvas Linear Gradient uses pixels.
Width Scales the width of Canvas Linear Gradient uses Pixels.
Height Scales the height of Canvas Linear Gradient uses Pixels.
Mode 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.
Lighter
Copy Uses the blend layer and ignores base.
Lighter
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.
Lighter
Screen The base and blend colors are inverted then multiplied against each other. The result is inverted again, giving a much brighter image overall.
Lighter
Overlay White values Lighten the base. Black values Multiple the base. Grey values have no affect.
Lighter
Darken Looks to the color information in the base and blend color. Chooses the darker values between the layers, and outputs the new result.
Lighter
Lighten Looks to the color information in the base and blend color. Chooses the lighter values between the layers, and outputs the new result.
Lighter
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.
Lighter
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.
Lighter
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.
Lighter
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.
Lighter
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.
Lighter
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.
Lighter
Hue Combines the luminance and saturation of the base but the hue of the blend layer.
Lighter
Saturation Combines the luminance and hue of the base but the saturation of the blend layer.
Lighter
Color Combines the luminance of the base but the hue and saturation of the blend layer.
Lighter
Luminosity Combines the hue and saturation of the base but the luminosity of the blend layer. The inverse of the Color blending mode
Lighter

Canvas Text

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 Text Operator works similar to Canvas Composite Operator, instead, it adds a text layer rather than an image layer. The Operator size will be adjust to just contain the text content, unless certain situation specifically mentioned.

PROPERTIES

Text

This Canvas Text Operator allows you to put text on a texture asset. It can be extremely powerful for configurations incorporating text inputs from the user.

PROPERTY DESCRIPTION
Text User-typeable text input field.
Text Number Sets a character limit for the text.
Font Type
Serif Use the browser default Serif Font
Sans Serif Use the browser default Sans Serif Font
Monospace Use the browser default Monospace Font
Custom CSS Font Use the font defined inside property CSS FONT SPECIFER
Font File Use the font file asset from platform, defined inside property Font File Asset or Font File Node
CSS FONT SPECIFER Customize CSS font you would like to apply. Affect only when select Custom CSS Font option for Font Type property and the computer has the specific font available. Otherwise, use default Serif font.
Font File Asset Font file asset you would like to apply to the text. Affect only when select Font File option for Font Type property.
Font Size Font size in px
Auto Downsize Auto Downsize has different behaviour when working with other property. We will cover different case below when we introduce the related property. By default, it will inherit the width from Canvas Operator, and auto adjust the font size to make sure all the text will fit into the canvas.
Note: it will only downsize the font if text can not fit into the canvas width.

Position

The Position values determine where the Canvas Fill is placed on the texture asset. This operator uses Pixels only for positioning values.

PROPERTY DESCRIPTION
Multi-Line Allow you to start new line using new line character '\r', '\n' or '<br>';

Note: the above 3 character combinations will be replace to start a new line in Multi-Line mode. If you have to include above character combination while having multiply lines. Consider use Windowed feature or add multiply Text Operators.
Justify Aligns text along with the Position X or Relative X. The letter and word spacing is adjusted so that text falls flush with both the horizontal sides of a texture asset. The Head and End space determine the margin of the start and end of the text
Head Space Determines the margin for the start of the text. Only considered when Justify is used. Uses pixels.
End Space Determines the margin for the end of the text. Only considered when Justify is used. Uses pixels.
Unit
Pixel Selecting this option moves the Canvas Text in pixel-based units.
Relative Selecting this option moves the Canvas Text in a 0 to 1 space, where 1 represents a full repetition of the Canvas.
X Pixel or X Relative Moves the Canvas Text horizontally. Negative values move it left. Positive right.
Y Pixel or Y Relative Moves the Canvas Text vertically. Negative values move it up. Positive down.
Canvas Rotation Rotates the Canvas Text Content.
Windowed Similar as Windowed feature for Canvas Composite Operator, it allows user to defined and allows user to work inside a sub area inside Canvas. And the position, rotation and alignment feature will be applied onto the window instead of the Canvas Text operator.
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.
Windowed property will have some very helpful feature and behaviors when works together with other property.
  • When check the Windowed, the text content will automatically start a new line when reach the window border, character that can not fit into the window will not display.
  • When both Windowed and Multi-line are checked, the text content will start a new line when either encounter a new line character or reach the text reach the border. This is useful when you want to have multiply paragraphs inside one window.
  • When both Windowed and Auto Downsize are checked, the text will NOT automatically start new line any more, instead, it will reduce the font size to make sure the text will fit into the window for both width and height. You could still explicitly start new line by adding new line character and enable the Multi-Line feature in this case.
Horizontal Align This determines what is considered the start of the Canvas Text or window. Position coordinates and rotation begin from the selection below.
Left Default value. The Canvas Text or window's left section is considered the starting horizontal alignment.
Center The Canvas Text or window’s center is considered the starting horizontal alignment.
Right The Canvas Text or window’s right section is considered the starting horizontal alignment.
Vertical Align
Top Default value. The Canvas Text or window’s top section is considered the starting vertical alignment.
Middle The Canvas Text or window’s center is considered the starting vertical alignment.
Bottom The Canvas Text or window’s bottom section is considered the starting vertical alignment.
Rotation Rotates the Canvas Text content or window.
Curve This will curve the text using the value of SVG Path
SVG Path A string follow the SVG Path pattern that define the path of the text content.
Curve This feature will allow you to curve a single line of text using the SVG Path.
SVG Path String with svg path format that define the shape of the curve.
SVG Width Width of the svg path.
SVG Height Height of the svg path.
SVG Text Align Left/Middle/Right
Path Start Offset Offsets the path from its original position

Style

This Canvas Text Operator works much like a bucket fill layer, except for the fact you have a start and stop color. The gradient will begin at the start color and then slowly fade to the end in a direction you define with the properties. You can add a gradient color over the texture asset.

PROPERTY DESCRIPTION
Color Hex code of the text color
Opacity Opacity factor of the text, 0 as fully transparent and 1 as fully opaque.
Italic Change text style to italic
Bold Change text style to bold
Drawing Style Change text drawing style between solid and outline
Outline Width Outline thinness, only available with outline Drawing Style
Shadow Similar as html canvas text shadow property.
Shadow Thinness How blur the shadow will be. The shadow will have the same shape as text if set to 0
Shadow Color Hex code of the text shadow
Shadow OffsetX Offset of the shadow along x horizontal direction in pixel
Shadow OffsetY Offset of the shadow along x vertical direction in pixel

BlackWhite

The BlackWhite operator can be useful for generating an opacity map or bump from texture assets or uploads.

The BlackWhite takes your texture asset and turns into a completely black or white texture asset. It does not maintain any grey values and all the colors become one extreme. The threshold value determines what values become black or white.

PROPERTY DESCRIPTION
Threshold The threshold value determines what values become black or white.

Numeric Range:

  • 0 =
  • .5 = Default value
  • 1 =

Posterization

Plugs

  • Image
  • Vector

Role

Recolor an image or vector by mapping each color to the closest color listed in the Colors property.
The distance can be computed in two color spaces; RGB or HSL.
In case of equidistance between two or more colors, the first one found it the one assigned.

Properties

  • Colors: List of color listed either by CSS color code or color name
    • ex.: purple, #ff0000, #abcd56, black
  • Color Space: RGB or HSL space

Limitations

  • An SVG with a gradient only maps the limit of the gradient and not the intermediate colors.
    • The work around for this is to create a canvas and use the vector node in a canvas composite then add the posterization operator.
  • An embedded image in an SVG file won't be recolored.
    • The same work around using a canvas composite works in this case

🖼 Posterization has been added as an operator for images. Now you can recolor images in real-time to a predefined list of colors. For example, if a Customer only prints 20 set colors or in black and white, Threekit can automatically recolor image uploads to those 20 colors in the configurator. Threekit can also export the recolored images for post-order workflows.
🔎 Head over to a Texture asset and add the Posterization Operator. Then you can add a list of colors using HEX code or HTML color names
Screen Shot 2020-12-10 at 3.16.17 PM.png

 

 

LUT

Plug

  • Vector

Role

Recolor a vector asset using a LUT (look up table) asset defined by an Adobe .CUBE file.

Properties

  • LUT: the look up table asset to use to recolor

Limitations

  • An SVG with a gradient only maps the limit of the gradient and not the intermediate colors.
  • An embedded image in an SVG file won't be recolored.

 

Enhanced Operators

⚙️ Enhanced Operators make it easier to manage a stack of operators, access via Logic, and manipulate through APIs.

Hovering over an Operator displays the new functionality: toggling and renaming.

operator-options.png

Renaming operators makes it easier to manage a large stack and apply Logic accurately.operator-rename.png

operator-name-logic.png

Toggling operators helps compare Operator results and troubleshoot.operator-disable.png

Accessing Operators via APIs are easier as well - Operators can be accessed using Unique IDs rather than indexes.

Share this