Seams, Damnable Seams. . .

Seams FixedSo, in my last post introducing the basic concept of Selvedge Guild, the tailoring crafting game, I talk briefly about breaking apart all the pieces of shirt to allow players more options in clothing creation.  Breaking stuff apart means that when trying to put it back together things can get pretty Humpty Dumpty, resulting in more seams than a Leatherface mask.  Fortunately I’ve got a working solution that minimizes their appearance to negligible notice-ability.

 

 

Now, I suppose I should back up a bit.  There’s a lot between the concept art and where I’m at now.  From sculpting to UV islands to custom shaders and texture import settings, there’s been a fair amount of experimentation to get that gif on the left to not have a huge seam (without just using Photoshop to edit it out!), while at the same time create something in line with the ultimate goals of this project.

 

 

 

BlenderMeshSeamsInitially, after determining where all the seams would be, I took the OneCharacter model, made some alterations and cut it along existing edge loops. Unfortunately, this resulted in seams due to the matching up of different normals.  I went back and split the faces across all the ‘face loops’ and put the seams along those edges.  This greatly reduced the visibility of seams on the base mesh.

 

 

 

 

 

 

 

SeamSculptNext I imported all the parts into zBrush.  Now I could see where all the seams would be while sculpting a basic shirt base for the torso.  For quite a few reasons, which I’ll get into in a second, I sculpted the shirt in one piece.

 

 

 

 

 

TorsoUVEven though on this project it’s likely that there will only one, possibly a few, characters on the screen at the same time, I want to keep the possibility open that someday there may be many.  And as performance is always a concern, there is a balance here that needs to be struck between customize-ability, draw calls, texture sizes, maximum shader uv offset counts, etc.  So without going into extreme detail, we’ll just say that the torso of the shirt will be it’s own material, and using ModelAssistant, be combined at runtime into one mesh.  Therefore, the bust and the waist are kept together in the UV layout.  The normal maps for this section are baked together using xNormal, and then separated in Photoshop.  Now, you might say, “Damn, that is a lot of open space on that uv map.”  Don’t worry, I’ve got plans for it it the future.

 

 

 

 

 

Continuing on, we’re now looking at the material and shader.TorsoShader  For each section, I want a color map and a normal map.  You may also notice that each clothing section has three color selectors as well.  This is one of the big things that will really help multiply the visual variety.  Color1 (e.g. “BustC1″) alters the red on the color map.  Color2 corresponds to green, and Color3 to blue.  Black through all grays to white are not influenced by any color and stay the same.  Mixtures of the colors are influenced based on their influence in the color map.  Ultimately this will allow the player to choose up to three colors per clothing section.  Hopefully this explains the odd boxes on the bust color map.

 

 

 

FilterModeI fought with the shader for a long time trying to figure out how to get rid of the white seam that is shown on the right.  As it turns out, the shader wasn’t the problem.  The textures’ import setting of “Filter Mode” is where the resolution was.  By changing it from ‘Bilinear’ to ‘Point’ the seam diminished greatly.  After altering the texture in Photoshop with anti-aliasing turned off, to get a nice crisp edge, it was gone, until I zoomed out.  The Mip Maps were causing the texture to bleed, bringing the seam back.  Fortunately, going to Texture Type > Advanced, allows you to turn Mip Map generation off.

(Thanks to Reddit user S1CKLY for the following realization) The problem was much better resolved by using edge padding.  At first I did not believe that I could use edge padding since my textures are laying on top of each other.  I was using the transparency of the texture for the alpha information.  By simply adding an alpha channel, and then having my colors extend beyond the channel’s bounds, I could achieve edge padding.  This allows me to keep mip maps, bilinear filtering, anti-aliasing and overall textures that don’t have edges from 1998.

 

Now that I can assemble the parts to where the seams are virtually unnoticeable, I can continue on generating content and refining the other aspects.