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:
|
||||||||||||
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.
|
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:
|
Gain Pivot | Changes starting value of Gain attribute.
Numeric Range:
|
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:
|
||||||
V Offset | Control from where texture is placed in V direction or vertically.
Numeric Range:
|
||||||
U Wrap Style |
|
||||||
V Wrap Style |
|
||||||
Scale Mode |
|
||||||
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:
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
Composition | Base = Layers below operator Blend = Selected canvas composite operator
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
Enable Tint | Checking the Enable Tint box exposes new attributes to affect the color of the composite asset. Default blending mode is 'Multiply'.
|
🖼️ 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.
Tiling uses the `Repeat` option in `Windowed` mode:
Position
The Position values determine where the Canvas Composite is placed on the texture asset.
PROPERTY | DESCRIPTION | ||||||||||||||||||
Unit |
|
||||||||||||||||||
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.
|
||||||||||||||||||
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.
|
||||||||||||||||||
Horizontal Align | This determines what is considered the start of the Canvas Composite or window. Position coordinates and rotation begin from the selection below.
|
||||||||||||||||||
Vertical Align |
|
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:
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
Composition | Base = Layers below operator Blend = Selected canvas composite operator
|
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 |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
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:
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
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:
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
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
|
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 |
|
||||||||||
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 |
|
||||||||||
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.
|
||||||||||
Horizontal Align | This determines what is considered the start of the Canvas Text or window. Position coordinates and rotation begin from the selection below.
|
||||||||||
Vertical Align |
|
||||||||||
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.
|
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.
|
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:
|
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
- ex.:
-
Color Space:
RGB
orHSL
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.
- The work around for this is to create a canvas and use the vector node in a canvas composite then add the
- 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
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.
Renaming operators makes it easier to manage a large stack and apply Logic accurately.
Toggling operators helps compare Operator results and troubleshoot.
Accessing Operators via APIs are easier as well - Operators can be accessed using Unique IDs rather than indexes.