Adventures in Unity – 2.4 Edge Padding

The levels in this project are made up of tiles – I’d working with about four different tile types to when constructing the basic game framework;

 

1. Default Floor Tile

2. Bonus Tile

3. Start Tile

4. Goal Tile

 

The floor tiles looked great – But the start, goal & bonus tiles were a little out of place & had seams showing;

 

---

 

Googling around, I discovered I wasn’t the first person to have this issue – & everyone seems to have their own resolution…

Some people offered sensible first steps advice, such as ensuring the in the texture setting clamp rather than repeat was selected – Others suggesting ideas like merging the tiles into one model, drawing with a custom shader, deleting all offscreen model faces, recalculating the models normals, turning off anti aliasing, turning off mip-mapping, etc..

After trying, a failing with quite a range potential solutions; what eventually worked for me was edge padding.

Edge padding, as the Unity docs explain;
‘Unity renders a scene using a process known as downsampling which uses texture filtering to smoothly render the textures. If the ‘gutters’ (blank areas between UV’s) have colors/transparencies that are very different from the colors inside the UV’d areas, then those colors can ‘bleed’ together which creates seams on the model. This problem will also occur when neighbouring UV shells have different colors; as the texture is downsampled eventually those colors start to mix.

To avoid this problem, edge padding should be added to the empty spaces around each UV shell. Edge padding is the process of dilating the pixels along the inside of the UV edge to spread the colors outward, forming a border of similar colors around the UV shell.‘

 

---

 

UV Mapping is the process of projecting a texture onto a 3D object – It identifies what area in a texture/image a model faces uses as it’s texture.

So, for example, in the image below the right side shows a model with one face selected (outlined in orange & shaded slightly) .

The left hand side shows the texture being used – The orange square (on the top left quarter) shows what part of the texture will be used to ‘paint’ the select face

 

---

 

In my case, my original textures looked like this;

My uv texture mapping looked like this;

The problem was the UV areas I’d setup were too tight – so when Unity rendered the textures onto the models, it would sometime collect colour information outside my defined UV area – causing seams to be displayed.

The fix was to reposition the UV mapping & add a border to accommodate the potential bleeding effect.

My initial attempt at edge padding resolved 90% of the problem – but I found the enter/exit tiles didn’t quite match up.

 

---

 

For ‘complex’ textures, instead of continuing that edge colour, I instead just continued the pattern.

Instead of using this;

I setup the texture to look like this;

Which worked perfectly;

 

---

 

Note: My textures & UV mapping are pretty simple- I used that to my advantage when edge padding – padding far more of the texture than I really needed to.

The amount of padding actually required depends on the size of the texture used – (I think the smaller the texture, the higher the chance of seams)- For this game, my textures are 64×64 – I found I needed a 3-4 pixel buffer to completely remove seams.

 

---

 

Ultimately, edge padding provides a satisfying fix – going forward, as long as I keep padding in mind when creating textures, it should have almost no further impact on this project.

 

---

Play the game (WebGL)

---

 

Next post: 2.5b Palette Shift

Last post: 2.3 Palette Swap

Contents page.

 

---