Getting started

Rendering

Importing

Design process

Materials and Textures

Lighting and Environment

3D Configurator

Scene and project settings

Version History

Augmented Reality (WebAR)

Sharing, exporting, embedding

Performance analyzer

Optimizing a shared project

Project cloning

Embedding to other software

Export options

Other

Figma Plugin - Vectary 3D Studio Lite

Model API

Floating UI Configurators

Ecommerce

Materials and Textures

Easily create stunning photorealistic materials

How to add or change the material:

First, select an object.
In the right panel go to the Library icon to select a pre-defined material from the Material Library.
It is also possible to manually change many material properties (color, metallicity, opacity, and more), these properties are divided into two sections: Basic and Advanced.

🔥

Learn more about the materials library and how to add custom materials to the library:

Libraries - Material library

Each object can have many materials, you can easily switch between them:

1 - create new material for the object

2 - duplicate already created material

3 - 🔥 copy material from another object with eyedropper

4 - delete the material

Basic Materials Settings

Color

👉

It is important to understand that color works differently in 3D than it does in 2D. Because an object's color is affected by the lighting. That's why in 3D it's not just color, it's diffuse color.

You can set the color using standard methods: select a color from the palette, insert a color code, or use the dropper. The HEX and RGB color models are available.

There are different color modes - solid color or gradient. And you can also use textures (png/jpg/svg) and even animated textures (gif/lottie) instead of colors and import images directly from Figma:

Figma frames import

Animated Materials

Roughness

Roughness controls how matte or glossy the material will be.

0 — maximum glossy 100 — maximum matt

Roughness greatly affects metallicity (and vice versa). Below you can see two sets of spheres with different roughness. All spheres of the upper row have zero metallicity. While all the lower spheres have maximum metallicity.

Metalness

This property determines how metallic the material will be.

0 — non-metallic material (dielectric) 100 — maximally metallic

💡

100% metalness and 0% roughness is a mirror

Opacity

With this property, an object can be made transparent or partially transparent.

You can also use a texture for this property, which can make the object transparent only in some parts of it.

To do this, you must use a black-and-white opacity map, in which black is responsible for transparency.

0 — completely invisible 100 — fully visible

There are two methods: Blend and Mask. The Mask method allows non-transparent areas to cast a shadow. In addition, this mode is preferred for better performance.

Mask — texture can contain only two values: fully transparent and fully non-transparent (binary principle)
Blend — texture can have a gradient opacity

Invert — Inverts the texture colors, white becomes black, and vice versa.

Emission

Adding emission to a material makes it appear as a source of visible light. You can change the color of the emission and its intensity. The less light in the scene, the more visible the emission of light will be.

👉

The intensity of the emission can be greater than 100, just enter the value manually.

💡

Emission is best used together with the Bloom effect.

Normal map

A normal map is used for simulating shadows on uneven surfaces, grooves, or dents. It creates a more detailed texture to the object without increasing its polygons.

This property only works in texture import mode. Therefore, you will need a Normal map.

🔥

Upload any texture and it will be automatically converted to a Normal Map.

Import own texture

You can import your own texture maps for each of the properties.

The image can be downloaded from computer 1 and from link 2:

You can adjust the texture with hue, saturation, brightness, and contrast.

Under the transformation menu, you can set tiling, offset, rotation and resolution.

Advanced Materials Settings

In advanced material settings are properties such as subsurface, refraction, clearcoat, thinfilm and reflectivity, ambient occlusion, lightmap, double sided.

Subsurface

Subsurface scattering is important for realistic results, being necessary for the rendering of materials such as marble, skin, leaves, wax, milk, and others. It simulates light penetrating the surface of the object. If subsurface scattering is not implemented, the material may look unnatural, like plastic or metal.

It's important to notice that a light source plays a big part in the end look of this material. With Radius you can then control how deep the light goes into the object.

Refraction

Refraction is a redirection of light that passes through objects. In reality, you can observe this effect mostly on objects made out of glass, acrylic glass, or water. Usually, it's either a value of 0 or 100. For best results, it's not recommended to combine it with the Subsurface.

The second parameter controls IOR (The Index of Refraction) is a value used to specify the way that light is scattered as it passes through a material.). You can control it with the thickness parameter. If you want to add some color to the refractive material, add an Absorption color.

👉

Use the Roughness property to make frosted glass

Absorption

Absorption value is the distance between the object's surface and the start of the absorption. For a stronger effect, set a lower value.

Thickness

Thickness is a parameter that defines the thickness of the object. If you have a window with 2mm glass, you should set the Thickness to value 2.

Thinfilm

Known under names such as iridescent material or pearlescent material. Iridescence is the phenomenon of certain surfaces that appear to gradually change color as the angle of view or the angle of illumination changes. Examples of iridescence include soap bubbles, feathers, oil slick.

It’s best to use objects with more complex surfaces so there is a big area to do its magic. Play with its value, but the best result is usually under value 100.

To change its color, click on the color icon and adjust the gradient. The top color in the gradient represents the vector pointing toward the camera, and the bottom value in the gradient represents the vector pointing outside of the camera.

👉

The effect is best seen at 100% metallicity or 100 refraction

Clearcoat

This property simulates a material with a transparent top coat, like lacquer or car paint. It helps to give extra depth of color and shine.

The main value is the depth of the transparent layer.
Achieve interesting results by modifying its roughness separately from the roughness of the material in its basic settings.

Reflectivity

Reflectivity is the value of how reflective the object is. Most realistic materials use 100% reflectivity.

Double sided material

By default, the material is only displayed on one side. This option enables the display of material on both sides.

👉

The use of double sided material affects the loading speed of the scene

Baked textures

Ambient occlusion

Ambient occlusion (AO) is the generation of additional shadows that are added in places of curvature and uneven parts of the geometry (recesses, etc.).

To get these shadows, there are three ways:

These shadows can be added to the entire scene with the Ambient Occlusion effect of the same name, which is added in the Effects section of the right panel.
It is possible to create (bake) an AO texture directly in Vectary. Read more about this below.
Import an existing AO texture (or map). As a rule, most stock models contain such a texture. The AO map is a black-and-white image.

👉

AO texture is not related to the light in the scene, it is based only on the distances between surfaces, so regardless of the presence of light in the scene, AO will be generated.

Lightmap

Lightmap (LM) is a texture on which the light information is baked. Accordingly, if there is no light in the scene, all the objects will be black, but the object with the Lightmap will be visible, as its map informs the renderer of the light.

The Lightmap texture considers the environment light, local light sources and material properties of each object in the scene.

This map can be created (baked) directly in Vectary. Read more about this below.

👉

It is possible to import an already created Lightmap: jpg png hdr exr

💡

Lightmap can be quickly previewed in a special mode, learn more about it here

Texture Remapping

Texture remapping allows converting Ambient Occlusion and Lightmaps (proprietary material properties) into basic material settings such as Roughness and Emission, which are supported in standard 3D formats like GLB, FBX, OBJ, USDZ. This ensures that the object retains a similar appearance when exported into a file or viewed in AR.

How to run remapping:

for this feature to become available, the object or group must contain Ambient Occlusion or a Lightmap in any of its materials
select the desired object or group and right-click to open the context menu
select the Remap AO and LM

The time required for the remapping process may vary depending on the complexity of the scene

Result:

the original object will be hidden
a copy of the object will appear (If the result is satisfactory, the original object may be deleted, they are not linked)
the copy of the object will include Roughness and Emission maps instead of Ambient Occlusion and Lightmap

brightness and contrast settings can be adjusted for the Roughness and Emission maps if they do not match the appearance of the Ambient Occlusion and Lightmap.

Baking process

Texture Baking is the process of saving (or transferring) calculated information onto a texture (image).

Baking takes some time because it applies a rendering method based on path tracing, resulting in high, physically correct quality.

💡

The texture can be baked for each object individually or for several objects at once

What are the benefits?

Performance

Texture Baker allows you to turn off the Ambient Occlusion effect, and reduce or eliminate the use of light sources altogether. Thereby, providing much better performance, because there won’t be a need to render it in realtime.

Realism

Using the photorealistic path trace rendering method, offers impressive results with a single click.

Bake settings

UV0 — use this channel to link AO/LM textures with other textures (Color, Roughness, etc.). This will allow all the textures to be engaged when you change the texture projection

UV1 — use this channel to make the AO/LM textures independent of the other textures

Update UV — use when the geometry has been changed (to get the correct UV considering the modified geometry)

👉

The unwrapping is done at the material level, not at the object level. If several objects use the same material, the unwrap will generate one UV map for all objects with that material

Textures using UV0:

- Color

- Roughness

- Metalness

- Opacity

- Emission

- Normal

- Thickness

💡

UV0 in most cases does not match the shape of the object

Textures using UV1:

- Ambient Occlusion

- Lightmap

💡

UV1 is the exact opposite. UV1 fully matches the shape of the object, so the object must be unwrapped for AO and LM to work properly

⚠️

It will almost always be better to keep UV0 and UV1 separate, in order to adjust the texture projection separately

Example:
The 3D table model has two textures: Color (the tree texture) and Lightmap. The Color texture refers to UV0, and the Lightmap to UV1. If you want to change the projection of the tree texture, but don't want to change the Lightmap projection, you should leave the default settings, i.e. UV0 and UV1 are unrelated.

Resolution — the texture resolution.

Auto — this option determines the resolution of each object in the scene relative to the largest object.

Quality — the texture quality. This parameter determines the number of samples to render. The more samples, the longer it takes to render the texture.

Draft: 16 samples Medium: 256 samples High: 1024 samples

Denoise — enables noise removal for texture rendering.

Texture transformation

You can customize each texture separately, or you can do it all at once: set the tiling, offset, and rotation.

Texture Projection

A texture is a 2D image that can be "stretched" over a three-dimensional object in various ways. So if you see that the texture is not distributed correctly on the object, you can fix it.

With Texture Projection, you can choose the shape in which the texture is projected onto the object.

💡 You can also manually transform, move and rotate this projection with Gizmo.

👉

Click the projection shape icon several times to change its plane in space