Skip to main content

Designing Detailed Clothing

Overview​

This guide covers best practices for clothing and outfit creation, using the Vlad outfit as an example. The workflow focuses on current game-character modelling practices: low-poly runtime meshes, high-detail source meshes for normal maps, PBR textures, tessellation where it helps, and careful weighting for avatar movement.

The outfit showcases these areas:

  • Model creation
  • Tessellation
  • PBR textures
  • Sinespace custom clothing shaders
  • Weighting and skinning
  • Pattern variations

Model Creation​

We recommend following current game-character modelling practices: use PBR texturing tools and low-poly models with a high-detail normal map.

The Vlad outfit was created with high-detail models totalling roughly 1 million polygons to create normal and tangent maps, and low-detail models totalling roughly 12,000 polygons for upload to Sinespace.

Useful tutorials:

Tessellation​

Tessellation shaders let you create multi-million-poly details across a model with very little performance impact. They are useful for ultra-smooth surfaces that can be viewed closely.

The usual workflow is to upload a low-poly, high-performance model, then use the Sinespace tessellation shader to make it appear as a high-detail, smooth asset in-world.

Tessellation shaders create dynamic detail controlled by camera distance. They use Phong tessellation to help hard edges become rounded during tessellation.

Phong Smoothing​

The Phong strength setting ranges from 0.1 to 1.0: 0.1 is minimal smoothing, and 1.0 is maximum smoothing. We recommend setting Phong strength between 0.1 and 0.3 for the best results. Higher values may introduce artefacts, especially when the model animates.

Make sure your renderer is set to Skinned when adjusting these settings. Otherwise, the values you set may look different in-world.

Avoiding Tessellation Seams​

Paint red on all vertices that run along UV seams.

Phong tessellation can fail on UV seams where the vertices are not connected. This creates gaps in the mesh around the UV seams.

The Sinespace tessellation shader supports excluded zones. To exclude a vertex from tessellation, paint the vertex colour pure red (255,0,0) in your 3D modelling tool. The shader will avoid separating the mesh in that area.

Tessellation or Geometry?​

Tessellation height maps can introduce complex patterns that would otherwise require extreme polygon counts, such as fabric ruffles, distressed surfaces, or wrinkles. They work best with organic patterns that do not contain hard edges, unless those edges are slightly rounded.

As a guide, set Tessellation Edge between 5 and 15. Higher values are much better for performance; 15 is significantly cheaper than 5. Unless you are using a height map, there is usually no reason to go below 15, because the result should already appear smooth.

Avoid setting Tessellation Edge to 1.

Hard-edged non-organic shapes should use basic geometry rather than tessellation. Bitmapped height maps can introduce unwanted noise on hard-edged shapes.

Basic tessellation with smoothing is excellent for rounding very smooth surfaces, such as shoes or other elements that need softened corners.

Sinespace Custom Clothing Shader​

Sinespace supplies a custom shader for clothing tessellation in the editor pack. Search for Unified Clothing and Skin (Metal and Tessellate) and add that shader to your clothing material.

For more detail, see Unified Clothing and Skin (Metal and Tessellate).

Weighting and Rigging​

Use skin weight transfer if you have non-skin-tight clothing, such as dresses or baggy items. Then reweight by hand as appropriate.

You can use the automated skinning system built into the clothing component if your clothing item is skin-tight.

Physically Based Rendering (PBR)​

Background​

PBR lets you accurately simulate a wide range of materials. It carries through energy conservation, so avatars look better across different lighting environments and maintain a more realistic look.

Sinespace PBR maps follow a Metalness/Smoothness workflow based on the Unity 5 Standard Shader. Specular/Smoothness workflows can also work well.

Useful PBR references:

Creating PBR Textures​

Recommended tools for creating PBR textures:

You can also use Photoshop. Photoshop cannot preview the final PBR result directly, but you can edit textures there and preview the results on your model in the Unity editor. Marmoset can be used to preview PBR textures while editing in Photoshop.

Patterns​

For adding additional patterns to your clothing, see Creating Clothing Patterns.