Applying Materials & Unwrapping UVs
Last updated
Last updated
As you probably know, textures are 2D assets. You have an X and a Y axis.
3D Assets are 3D, so they have an X, Y, and Z axis.
So, how do you correctly apply a 2D asset to a 3D asset?
A simple explanation is that we must flatten the 3D asset onto a 2D plane. And for that, we are going to call our X and Y axis, in this particular case, U and V. Unwrapping UVs just means telling your texture where to go on the 3D Asset.
There are a few approaches to how you unwrap your assets and usually ranges from high detail and larger filesize , to simple detail but smaller filesize.
The UV space can be used for individual textures, like a character or custom detail asset. As the texture is unique to all parts of the model the texture needs to be in the 0-1 space, or within the square to apply our 3D asset to.
This results in high quality textures but requires a larger filesize.
Tileable textures repeat at the edge of the texture. This means we are not limited to the UV 0 to 1 space, we can apply our UVs as we see fit as big as we like in any direction.
This has a high level of detail and large filesize but usually covers a large area in the space such as floors or entire furniture. As spaces usually have many different materials however this can cost in performance if too many unique materials are used.
Trimsheets are like having multiple materials in one material. You can use tileable areas so that you can extend in one direction for example, but have other areas of the texture used for other elements.
It allows high quality textures and fewer materials. Takes longer to setup.
You can also apply simple colors to your assets from one material. In this example, each dot has all the polygons that use that color. And each section of this one material has different finishes, such as metallic, polished, matte, or emissive. This allows for many assets to use the same single material reducing drawcalls.
This allows for very small filesize and faster performance, but limited to simpler materials.
In this tutorial we will look at the Tileable Textures approach as it’s a good introduction to UVs.
The first thing we need to do is set up a Material so we know what the texture looks like on the 3D asset.
Find a tileable texture from a website with a CC0 license such as AmbientCG.
In the Properties panel, go to Material Properties at the bottom. Your model may already have a material on it, but if it doesn’t, select the + symbol at the top right of the panel. I recommend naming your material by double-clicking on it.
Set the base color to a different color and then make sure to set the viewport shading mode to Material Preview so you can see the result.
With this material selected, select ‘Shading’ at the top of the Blender window.
Drag the texture from your desktop into the node graph in the bottom section.
Connect the texture to the main color texture, also known as diffuse or Albedo, to the ‘Base Color’ in the main node.
As Unity has its own way of creating materials, and exporting with materials in place usually requires plugins,I usually stop there when adding textures in Blender. Doing so in Blender is more of a guide rather than the final material. And then, just create the Material from scratch using Unity directly.
Returning to the UV Editing layout, this will display the UVs on the left and your assets on the right. We can see the texture applied in the UV. Different layouts have different settings, so make sure to set your viewport mode to Material preview if you haven’t already.
Go to Edit mode and select all the polygons of your asset.
In the right viewport at the top, go to ‘UV > Smart UV Project’ and select OK on the popup that comes up. This tries to flatten your UVs into the square as best it can, depending on the parameters you set in the popup.
Use the standard tools to edit your UVs.
G - Position
R - Rotate
S - Scale.
And X and Y to define the axes.
Use the top left buttons to shift between Vertices, Edges, Polygons, and islands. Islands are all connected polygons in the UV.
1 - Edit Vertices
2 - Edit Edges
3 - Edit Polygons
4 - Edit Islands
Right Click in the UV view to offer other useful tools such as :
Align X or Y
Merge to join vertices
Split Selection to separate elements.
A common issue that may come up is that the Smart UV Project proportions don’t look correct when applied. For example, a UV might be a square when it should be a rectangle or vice versa. This could be because the asset doesn’t know it has changed from the previous shape. This is due to the transforms not being applied.
To fix this :
Go to Object mode
Use Object > Apply > Scale, or use Ctrl + A and select scale.
If you select Smart UV Project again, this issue should be fixed.
As this is a tileable texture, you can scale the UVs as you see fit and the texture will continue without issue. Note that you could scale the texture in Unity as well if the texture is too small or big in the space.
It is possible to create an asset with multiple materials if need be. This is not the best for performance reasons in a WebGL space as each material is a draw call, but it’s perfectly fine when starting to learn.
Go to Object Mode
Add another material with the + symbol in the materials properties panel.
Rename the Material
Apply your textures or colors the same way you did on the last material in the Shading tab at the top.
Select all the polygons on your asset to which you want to apply your second material in Edit mode.
Select the 'Assign’ button under the materials list in the Material Properties panel.
There are, of course, many ways to edit the UVs, but we’ll stick with simple edits for now.
In this tutorial, we went over the meaning of Unwrapping UVs, and how to do it, we also looked at how to create and assign single or multiple materials.