# Canvases

Canvas assets are very valuable within the configured workflow. The Canvas  works 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.

#### **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**

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

**Width -** Optimize Image, Resize Image

**Height -** Optimize Image, Resize Image

***

### Color Transform

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.

#### **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

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.

#### **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

<table><thead><tr><th width="100">None</th><th>There is no repeat on the texture.</th></tr></thead><tbody><tr><td>Wrap</td><td>The texture asset repeats.</td></tr><tr><td>Mirror</td><td>The texture asset repeats, but every repeat is flipped horizontally from the last.</td></tr></tbody></table>

#### V Wrap Style

<table><thead><tr><th width="100">None</th><th>There is no repeat on the texture.</th></tr></thead><tbody><tr><td>Wrap</td><td>The texture asset repeats.</td></tr><tr><td>Mirror</td><td>The texture asset repeats, but every repeat is flipped vertically from the last.</td></tr></tbody></table>

#### Scale Mode

<table><thead><tr><th width="100">Tiling</th><th>The UV Tiling values determine amount of texture repeat in 0 to 1 space</th></tr></thead><tbody><tr><td>Scale</td><td>The UV Tiling values multiples texture asset starting from bottom left corner</td></tr></tbody></table>

#### 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