Vectary как добавить свою текстуру
Экспорт и импорт файлов в Vectary 3D
ИМПОРТ
How to implement 3D and AR to your website with Vectary
What’s the next big thing in web design? 3D and AR. Today we’ll introduce you to Vectary, an online 3D and AR design creation and publishing platform that can help you to ride the wave. It has a simple UI and learning curve that any web designer can almost instantly understand.
What you need to get started
Literally just a web browser and an internet connection. Vectary is a website app built from scratch on WebGL technology. By having everything online, you can access your 3D projects even from your daughter’s Chromebook, collaborate real-time with your colleagues, get feedback from clients and also embed your 3D design online as easy as YouTube videos.
Here are two tips on how you can implement a 3D design on your website:
1 . No more stock photos: Create custom 3D visuals and headers easily
If you don’t have any 3D modeling experience, don’t get scared: 3D content creation is not the same as 3D modeling anymore. Today, you can easily create 3D visual from 2D images or simply assemble a scene from libraries of ready-made 3D assets. All without any editing of the geometry.
Do you want a 3D logo? Just import your logo as an SVG file, and it will be automatically changed into 3D. Need to add 3D text? Vectary has a built-in library of 800+ Google fonts that are automatically in 3D. You can play with thousands of assets, materials, lights, cameras, generative tools, and deformers.
Gary Simon, author of the DesignCourse YouTube channel, for UI designers and developers, told us he spent only 2 hours in Vectary before being able to create a tutorial of a 3D scene. Check it out:
2 . Embed an interactive 3D element with AR preview: Increase conversions
The use of interactive 3D elements is particularly useful if you want to focus on conversion on your e-commerce site. 3D and AR have the power to bring authentic real-life experience to the visitor. If one image is worth 1000 words, AR is worth 1000 images. This is why Ikea developed their own AR app — customers can put the images of the furniture into context by viewing them in their own home. This interactive view speeds up the decision-making process.
While not every online store has the budget to build their own AR application, with today’s possibilities of web browsers, it’s not so necessary. Why build a separate app for something as simple as viewing 3D content in the real world, when everyone can access it directly by browsing your website?
Vectary AR Application
AR is more accessible than you might think. In October 2018, Apple turned millions of iPhones and iPads into AR devices with a single iOS update. They introduced a USDZ format used in ARkit for augmented reality preview. Anyone can put their product in this format on their website for visitors to try it in AR. But what about folks with Android devices? At the beginning of May, Google introduced a similar Scene Viewer AR solution for Androids using GLTF 3D format. Ben Schrom, the Product Manager in Google’s AR team, said at the I/O19 conference that since last year the number of Android devices supporting ARcore technology almost quadrupled to 400 million. This is an opportunity for every web designer to implement AR on their website.
Try this AR demo created with Vectary, directly in your mobile browser.
Vectary merges both of these Apple and Android technologies into one 3D/AR viewer, which you can embed as an iframe code into your website. Visitors on desktops can see the viewer as interactive 3D content on your website. Smartphone visitors have the same 3D experience, plus they can try it in augmented reality directly from their browser. No installing of a third party app is required.
Vectary 3D Model & AR Viewer.
Furthermore, Vectary’s web embed works like a 3D CMS, so you can enter the Vectary 3D editor, make changes and they will be applied on all your web embeds instantly. Whether you choose Vectary 3D/AR viewer or other solutions out there, Vectary’s creation platform and 3D file converter to USDZ or GLTF might always be handy.
Vectary 3D converter: Import more than sixty 3D file formats
Over 60 new formats can be imported into Vectary. One of the main supported formats that you can import and even export is the FBX format.
How to import 3D files to Vectary
- Open the Vectary Studio.
- Drag and drop your 3D file on the scene.
- Now you can use Vectary’s whole toolset to modify the 3D model such as Cap open boundaries to fix geometry, the Simplify tool to make the file smaller, the library of materials, rendering, and other various object and edit tools.
- You also have the option to export your 3D file as a 3D web embed with an augmented reality feature or as different 3D or 2D formats:
- USDZ — augmented reality format for ARkit
- glTF — (GL Transmission Format) called the JPEG of 3D, also augmented reality format for ARcore
- OBJ — Universal format
- STL — for 3D printing
- GLB — Facebook 3D post
- DAE — an interchange file format for interactive 3D applications
- FBX — a proprietary file format owned by Autodesk since 2006
- JPEG — basic 2D image format
- PNG — a 2D image file format
- Facebook 3D Photo — The zip file contains a png and depth map of your design.
You can also share your project as a Vectary page which allows you to share your entire project for customization.
3D file formats worth mentioning
FBX
The FBX format is one of the most widely used 3D interchange formats. It contains the whole 3D scene, including the lights, meshes, transformations, materials, well you get the idea. Introducing the FBX format into your workflow into Vectary is great news, mainly for people who work or are interested in working in the gaming, film production or advertising industries. It simplifies the exchange of 3D models and projects between different software suites.
Vectary not only supports the import of FBX files but export as well. Your design and publishing process is now streamlined, so you can now import an existing FBX file into Vectary edit it and embed it on the Web for a 3D and AR experience. Or you can create your gaming 3D scene, export it and then transfer it into Unity and get working on that game you always wanted to create. The world is your oyster.
3DS
Not to be confused with the Nintendo 3DS console, it is a format dating back to the 1990s, so it has been around for quite a while. It is considered to be one of the industry standards when it comes to transferring models between various 3D modeling programs. Models created in 3DS have meshes made exclusively from triangles. It has various other limits including that it supports only a limited number of vertices and polygons per mesh, that magical number is 65536.
DAE
DAE is a 3D file interchange format that is supported by most 3D editing software and a number of game engines. Although we already support the COLLADA format, the new importer has improved our support of the format. The importing of DAE is more streamlined and our processing of the file has improved as well.
Vectary как добавить свою текстуру
Миссия Vectary — сделать создание 3D доступным для всех. Поэтому платформа без преувеличения революционная. 
Также и с материалами и окружением — всё уже готово, вам лишь нужно перетаскивать на сцену, словно в игре. Но с одним отличием — в конце вы запустите рендер и получите красоту. 
- Имитация рендеринга. Это быстрый рендеринг, не требующий установку софта на компьютер.
- Фотореалистичный рендер Photon. Это програмка от Vectary, бесплатно скачиваешь её и уже через минуту рендеришь, используя мощности своего компьютера. А именно — процессора.
Доступен как на MacOS, так и на Windows. 
Colors and Materials
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
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:
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
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.
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.
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. Such maps are available in some library materials, or you can create them yourself or find them on the web.
Links to various useful resources are in our Discord .
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.
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.
Vectary как добавить свою текстуру
It is used for changing the color of the material. There are two different ways to do it: use the mouse or simply adjust the values.
Adjust the hue, saturation, and brightness. Color pick any color in the scene or paste in the specific value. You can switch between HEX or RGB values.
It is also possible to switch between different color modes — solid colors and gradients and also import animated materials, Figma frames or custom textures.
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
Metalness controls the metalness of a material. This way we can increase or decrease the metallic look.
0 — non-metallic material (dielectric) 100 — maximally metallic
Opacity
0 — completely invisible 100 — fully visible
This property can work with a texture that can make an object partially transparent. This requires the use of a black and white opacity map, in which the black parts of the map represent the parts where the texture is transparent.
Emission
Adding emission to material causes it to appear as a visible source of light. It is best used with bloom effects under scene settings to change the color and intensity of the light the surface emits. If you want to make your objects really bright, explore values higher than 100.
The less light in the scene, the more noticeable the emission of light will be.
Normal map
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. Such maps are available in some library materials, or you can create them yourself or find them on the web.
Links to various useful resources are in our Discord .
Import own texture
You can import your own texture maps for each of the properties. The image can be downloaded from the computer 1 and from the 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 , clearcote, 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 the 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 thickness parameter. If you want to add some color to the refractive material, add an Absorption color.
Absorption
Absorption value is distance between the object’s surface and start of the absorption. For stronger effect, set 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 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.
Its best to use objects with more complex surfaces so there is a big area to do its magic. Play with its value, but best result are 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 towards the camera, the bottom value in the gradient represents the vector pointing outside of the camera.
Clearcoat
It can be usually found on surfaces such car paint. Basically, it’s an extra layer of lacquer on top of the existing material. It can add extra depth to the color plus some additional shines. Achieve interesting results by modifying its roughness separately from the roughness of the material in its basic settings.
Reflectivity
Reflectivity is a value of how reflective the object is. Most realistic materials use 100% reflectivity.