Textures are 2 dimensional images. Meshes are 3 dimensional objects. When applying a texture to a mesh, we have to reconcile this dimensional gap. We do that by mapping the 3d mesh to a 2d image. This map, we then use to instruct the texture as to how it should apply itself onto the model.
Cube primitive
This is called a UV-map. They’re quite important. As we’re essentially ‘unfolding’ the 3d model to become 2d (think of how you could unfold a cube, this is what it’d look like:
Here’s the corresponding UV-map, which is automatically added because the cube is a primitive. We won’t be let off this easy for much longer.
A 2D mirror
The UV map reflects it’s changes over to the mesh, and the mesh reflects it’s changes over to the UV map.
Textures are square, so it’s actually impossible to perfectly fill out the map, but that’s okay.
Now, the UV map is displaying all 6 faces of the cube. If I now add a texture to the cube, the texture will use the UV map to transform itself onto the mesh. Here I’ve added some colourful blobs to the 2d texture.
Every face of this UV-map/cube can individually be moved, resized, rotated. The texture continues to infinity, repeating itself. I’m going to make the faces smaller on the UV map, so that the blobs take up more of the faces on the mesh. As you can see, the unfolded mesh didn’t change, because it has it’s own UV faces, which are overlapping the cube’s faces. This is no problem, in fact it’s memory efficient, if you don’t mind reusing the texture.
That’s ‘what’, now ‘how’
To make the UV-map, we must tell the 3D software where it can cut the mesh open. These are called seams. And the seams are then used to ‘unwrap’ the mesh. The texture doesn’t continue over loose areas on the UV map, so where a seam is placed there can be a disconnect between the texture on either side of it.
If we look at the unfolded cube, the outer edge is where all the seams were.
Refolded:
And tada! … upside down. No worries: we need to unwrap the mesh still. Select all faces, hit unwrap [U] and hit unwrap.
Right, on to a real mesh. For the texture, we’re going to be selecting the UV grid.
The 3d mesh should have squares, but instead they’re warped, elongated, and blurry. Until all the squares are squares, the UV-map is flawed.
Let’s start by marking some of the 90 degree angles as seams.
Hitting live unwrap will reflect our changes immediately, instead of needing to unwrap.
Now this is by no means a perfect unwrap, but it’s fine. There’s quite some unused space, and it’s a bit crooked.
To show the importance of the UV map, I’m going to stretch out some of the faces.
Roblox automatically UV-unwraps objects for it’s materials, so it’ll ignore our UV-maps. This is sometimes good, if our map is bad, and sometimes it’s bad, because it also can make for bad maps.
So here a Roblox material
Here a custom material
Two things: the UV map is rotated, and we’ve gotta fix that stretch.
Simple enough, just rotate the UV and re-export.
I added in a version where I scaled the bevel’s UVs down to 0, so that it just takes up 1 color.
Hope these tips help make the very annoying field of UV-unwrapping a little bit more bearable.