wiki.sine.space | sinespace

Difference between revisions of "Designing Detailed Clothing"

From wiki.sine.space
Jump to: navigation, search
 
(15 intermediate revisions by 3 users not shown)
Line 4: Line 4:
 
<tr>
 
<tr>
 
<td>
 
<td>
[[File:Bannervlad.jpg]]
+
[[File:Shoebanner.png]]
  
<div style="display: inline-box; margin: 6px; padding-left: 6px; padding-right: 6px; padding-bottom: 6px; border: solid 1px #000000; border-radius: 3px; width: 200px; height: 70px; float: right;">
+
<div style="display: inline-box; margin: 6px; padding-left: 6px; padding-right: 6px; padding-bottom: 6px; border: solid 1px #000000; border-radius: 3px; width: 300px; height: 60px; float: right;">
 
<div style="font-size: 14px; font-weight: bold; color: #000000; height: 20px;">Vlad Outfit</div>
 
<div style="font-size: 14px; font-weight: bold; color: #000000; height: 20px;">Vlad Outfit</div>
*[ Outfit]
+
*[http://space-files.s3.amazonaws.com/sample-art/V%20designs%20female%20outfit.rar Outfit]
 
</div>
 
</div>
  
 
This page describes some best practice for clothing and outfit creation, using the Vlad outfit which you can download original source files for here.
 
This page describes some best practice for clothing and outfit creation, using the Vlad outfit which you can download original source files for here.
  
 
[[File:vladoutfitfirst.jpg]]
 
  
 
The outfit showcases the following best practice areas;
 
The outfit showcases the following best practice areas;
  
*Model creation
+
__TOC__
*Tessellation
+
*PBR textures
+
*Space Clothing Shader
+
*Weighting and skinning
+
*Offering pattern variations
+
  
  
 
==Model Creation==
 
==Model Creation==
  
 +
 +
 +
[[File:vladoutfitfirst.jpg]]
 +
 +
 +
<div style="display: inline-box; margin: 6px; padding-left: 6px; padding-right: 6px; padding-bottom: 6px; border: solid 1px #000000; border-radius: 3px; width: 300px; height: 200px; float: right;">
 +
<div style="font-size: 14px; font-weight: bold; color: #000000; height: 20px;">Tutorials</div>
 +
*[https://www.youtube.com/watch?v=oXEPHVEm5wM Designing a Base Mesh]
 +
*[https://www.youtube.com/watch?v=eCAbA94vaJU Customizing a 3D Body in ZBrush & Blender]
 +
*[https://www.youtube.com/watch?v=XGCIuVb8kxA Modeling 3D Clothes in ZBrush & Blender]
 +
*[https://www.youtube.com/watch?v=P8WBaubooX4 Texturing the Clothes in Substance Painter]
 +
</div>
 
We recommend following current game character modelling practices; specifically using PBR texturing tools and low poly models with a high detail normal map.
 
We recommend following current game character modelling practices; specifically using PBR texturing tools and low poly models with a high detail normal map.
  
For more information see;
+
This brilliant set of four short tutorials are a fabulous start to learning how to create detailed clothing.
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
  
PENDING LINKS
 
  
 
The Vlad outfit was created with a set of high detail models (totalling 1 million polygons) to create normal and tangent maps and a set of low detail models (totalling 12,000 polygons) for upload to the Space platform).
 
The Vlad outfit was created with a set of high detail models (totalling 1 million polygons) to create normal and tangent maps and a set of low detail models (totalling 12,000 polygons) for upload to the Space platform).
 +
 +
<div style="display: inline-box; margin: 6px; padding-left: 6px; padding-right: 6px; padding-bottom: 6px; border: solid 1px #000000; border-radius: 3px; width: 300px; height: 60px; float: right;">
 +
<div style="font-size: 14px; font-weight: bold; color: #000000; height: 20px;">Tutorial</div>
 +
*[https://www.youtube.com/watch?v=OYyK4y_6lZw Designing Detailed Clothing]
 +
</div>
 +
Watch the tutorial for creating detailed clothing here.
 +
 +
 +
  
  
Line 42: Line 63:
  
 
Upload a low poly, high performance model
 
Upload a low poly, high performance model
 +
  
 
[[File:Shoerealgeo.jpg]]
 
[[File:Shoerealgeo.jpg]]
 +
  
 
And transform it inworld into a high detail, super smooth, high poly but low performance asset using the custom built Space tessellation shader;
 
And transform it inworld into a high detail, super smooth, high poly but low performance asset using the custom built Space tessellation shader;
 +
  
 
[[File:Shoetessellation.jpg]]
 
[[File:Shoetessellation.jpg]]
 +
  
 
Using tessellation shaders means you no longer need to sacrifice inworld performance to achieve a high quality product.
 
Using tessellation shaders means you no longer need to sacrifice inworld performance to achieve a high quality product.
Line 53: Line 78:
 
Tessellation shaders create dynamic multi-million polycount level of detail, controlled by camera distance. They use Phong Tessellation to ensure that hard edges are rounded by tessellation processes.
 
Tessellation shaders create dynamic multi-million polycount level of detail, controlled by camera distance. They use Phong Tessellation to ensure that hard edges are rounded by tessellation processes.
  
 +
===Phong Smoothing===
 +
The phong strength setting has values of 0.1-1.0; 0.1 being the minimal smoothing, and 1.0 being the maximum smoothing. We recommend setting the phong strength to between 0.1 and 0.3 for the best results; higher values may introduce artefacts (especially when animating the model).
 +
 +
Please make sure your renderer is 'skinned' when adjusting these settings otherwise the values you set will look different in world.
  
 
==Avoiding Tessellation Seams==
 
==Avoiding Tessellation Seams==
 +
  
 
Please paint red all vertices that run along UV seams.
 
Please paint red all vertices that run along UV seams.
Line 62: Line 92:
 
Our tessellation shader has support for excluded zones - to exclude a vertice from tessellation, paint the vertex colour in your 3D modelling tool pure red (255,0,0). This will tell the shader to avoid separating the mesh on this area.
 
Our tessellation shader has support for excluded zones - to exclude a vertice from tessellation, paint the vertex colour in your 3D modelling tool pure red (255,0,0). This will tell the shader to avoid separating the mesh on this area.
  
INSERT IMAGES  - broken seam. Red vertex. Fixed seam. (Need images from Tom)
+
 
 +
[[File:Redseam.png]]
  
  
 
==Tessellation or Geometry?==
 
==Tessellation or Geometry?==
 +
  
 
Best Practice – where does it make sense to to use tessellation and where to use geometry?
 
Best Practice – where does it make sense to to use tessellation and where to use geometry?
Line 73: Line 105:
  
 
[[File:tessellationedge.jpg|450x450px|right]]
 
[[File:tessellationedge.jpg|450x450px|right]]
As a guiding principal, set the Tessellation Edge to 15.  
+
As a guiding principal, set the Tessellation Edge to between 5-15. Higher is exponentially better performance (so 15 is 9x better performing than 5). Unless you are using a heightmap there should be no reason to go below 15 - as that will appear generally perfectly smooth.
  
 
This means no triangle with an edge shorter than 15 pixels will be created.  
 
This means no triangle with an edge shorter than 15 pixels will be created.  
Line 94: Line 126:
  
  
[[File:ShoesVlad.jpg]]
+
[[File:Shoesvlad4.jpg]]
 
+
 
+
  
 
==Space Custom Clothing Shader==
 
==Space Custom Clothing Shader==
 
+
<div style="display: inline-box; margin: 6px; padding-left: 6px; padding-right: 6px; padding-bottom: 6px; border: solid 1px #000000; border-radius: 3px; width: 300px; height: 130px; float: right;">
 +
<div style="font-size: 14px; font-weight: bold; color: #000000; height: 20px;">Unified Shader Page</div>
 +
*[[Unified_Clothing_And_Skin_(Metal_and_Tessellate)|Unified Clothing And Skin]]
 +
</div>
 
Space supplies a custom shader to handle the tessellation on clothing items which is available free in the Space editor pack. Search for Unified Clothing & Skin (Metal and Tessellate) and add this shader to you clothing material.
 
Space supplies a custom shader to handle the tessellation on clothing items which is available free in the Space editor pack. Search for Unified Clothing & Skin (Metal and Tessellate) and add this shader to you clothing material.
  
LINK TO
 
  
Unified Clothing & Skin (Metal and Tessellate)
+
 
 +
 
 +
 
 +
 
 +
[[File:Qualityshoe.png]]
 +
 
  
  
Line 117: Line 154:
  
 
===Background===
 
===Background===
 
+
<div style="display: inline-box; margin: 6px; padding-left: 6px; padding-right: 6px; padding-bottom: 6px; border: solid 1px #000000; border-radius: 3px; width: 300px; height: 180px; float: right;">
 +
<div style="font-size: 14px; font-weight: bold; color: #000000; height: 20px;">PBR Info</div>
 +
*[https://blogs.unity3d.com/2014/10/29/physically-based-shading-in-unity-5-a-primer/ Physically based shading in Unity 5]
 +
*[https://unity3d.com/learn/tutorials/modules/intermediate/graphics/substance/01-02-working-with-pbr-in-unity Working with PBR in Unity]
 +
*[https://www.marmoset.co/posts/basic-theory-of-physically-based-rendering/ Basic theory of physically based rendering]
 +
*[https://blogs.unity3d.com/2015/02/18/working-with-physically-based-shading-a-practical-approach/ Working with physically based shading - A practical approach]
 +
</div>
 
PBR allows you to accurately simulate a huge range of materials. It carries through energy conservation, so avatars will look better across a wide range of lighting environments, maintaining a realistic look throughout.
 
PBR allows you to accurately simulate a huge range of materials. It carries through energy conservation, so avatars will look better across a wide range of lighting environments, maintaining a realistic look throughout.
  
Line 123: Line 166:
  
  
[https://blogs.unity3d.com/2014/10/29/physically-based-shading-in-unity-5-a-primer/ Physically based shading in Unity 5]
 
  
[https://unity3d.com/learn/tutorials/modules/intermediate/graphics/substance/01-02-working-with-pbr-in-unity Working with PBR in Unity]
 
 
[https://www.marmoset.co/posts/basic-theory-of-physically-based-rendering/ Basic theory of physically based rendering]
 
 
[https://blogs.unity3d.com/2015/02/18/working-with-physically-based-shading-a-practical-approach/ Working with physically based shading - A practical approach]
 
  
 
===Creating PBR Textures===
 
===Creating PBR Textures===
 +
<div style="display: inline-box; margin: 6px; padding-left: 6px; padding-right: 6px; padding-bottom: 6px; border: solid 1px #000000; border-radius: 3px; width: 300px; height: 120px; float: right;">
 +
<div style="font-size: 14px; font-weight: bold; color: #000000; height: 20px;">Software for PBR Textures</div>
 +
*[http://quixel.se/ Quixel Suite]
 +
*[https://www.allegorithmic.com/products/substance-painter Substance Painter]
 +
*[https://www.marmoset.co/ Marmoset]
 +
</div>
 +
These are the tools we recommend for creating PBR textures.
  
There are a number of tools in the market for creating PBR textures;
+
Marmoset is used to preview the PBR texture in Photoshop as you can't preview in Photoshop, but you can edit in Photoshop and see the results update instantly on your model in the Unity editor.
  
[http://quixel.se/ Quixel Suite]
 
 
[https://www.allegorithmic.com/products/substance-painter Substance Painter]
 
 
You can also use Photoshop. You cannot preview in Photoshop but you can edit in Photoshop and see the results update instantly on your model in the Unity editor.
 
 
You can also use [https://www.marmoset.co/ Marmoset] to preview with Photoshop.
 
  
 
==Patterns==
 
==Patterns==
 
+
For adding additional patterns to your clothing, see [[Creating_Clothing_Patterns|Creating Clothing Patterns]] for more details.
LINK
+

Latest revision as of 09:48, 2 January 2019

Shoebanner.png

Vlad Outfit

This page describes some best practice for clothing and outfit creation, using the Vlad outfit which you can download original source files for here.


The outfit showcases the following best practice areas;


Model Creation

Vladoutfitfirst.jpg


We recommend following current game character modelling practices; specifically using PBR texturing tools and low poly models with a high detail normal map.

This brilliant set of four short tutorials are a fabulous start to learning how to create detailed clothing.






The Vlad outfit was created with a set of high detail models (totalling 1 million polygons) to create normal and tangent maps and a set of low detail models (totalling 12,000 polygons) for upload to the Space platform).

Watch the tutorial for creating detailed clothing here.



Tessellation

Tessellation shaders allow you to create multi-million polycount details across your model with almost no performance impact. They are fantastic at creating ultra-smooth surfaces that you can zoom in to as close as you like.

Upload a low poly, high performance model


Shoerealgeo.jpg


And transform it inworld into a high detail, super smooth, high poly but low performance asset using the custom built Space tessellation shader;


Shoetessellation.jpg


Using tessellation shaders means you no longer need to sacrifice inworld performance to achieve a high quality product.

Tessellation shaders create dynamic multi-million polycount level of detail, controlled by camera distance. They use Phong Tessellation to ensure that hard edges are rounded by tessellation processes.

Phong Smoothing

The phong strength setting has values of 0.1-1.0; 0.1 being the minimal smoothing, and 1.0 being the maximum smoothing. We recommend setting the phong strength to between 0.1 and 0.3 for the best results; higher values may introduce artefacts (especially when animating the model).

Please make sure your renderer is 'skinned' when adjusting these settings otherwise the values you set will look different in world.

Avoiding Tessellation Seams

Please paint red all vertices that run along UV seams.

Phong Tessellation can fail on UV seams where the vertices are not connected. This will create gaps in the mesh around UV seams.

Our tessellation shader has support for excluded zones - to exclude a vertice from tessellation, paint the vertex colour in your 3D modelling tool pure red (255,0,0). This will tell the shader to avoid separating the mesh on this area.


Redseam.png


Tessellation or Geometry?

Best Practice – where does it make sense to to use tessellation and where to use geometry?

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


Tessellationedge.jpg

As a guiding principal, set the Tessellation Edge to between 5-15. Higher is exponentially better performance (so 15 is 9x better performing than 5). Unless you are using a heightmap there should be no reason to go below 15 - as that will appear generally perfectly smooth.

This means no triangle with an edge shorter than 15 pixels will be created.

Setting the edge length shorter than this offers marginal visual benefits but may start to impact on performance. Avoid setting Tessellation Edge to 1!






Hard edged non-organic shapes should have a basic geometry rather than in tessellation - as bitmapping of the heightmaps can introduce undesired noise on the model.

Basic tessellation with smoothing is excellent for rounding off ultra smooth surfaces (think shoes and other elements which want ultra smoothed corners).


Shoesvlad4.jpg

Space Custom Clothing Shader

Unified Shader Page

Space supplies a custom shader to handle the tessellation on clothing items which is available free in the Space editor pack. Search for Unified Clothing & Skin (Metal and Tessellate) and add this shader to you clothing material.




Qualityshoe.png


Weighting and Rigging

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

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


Physically Based Rendering (PBR)

Background

PBR allows you to accurately simulate a huge range of materials. It carries through energy conservation, so avatars will look better across a wide range of lighting environments, maintaining a realistic look throughout.

Our PBR maps follow a Metalness/Smoothness workflow (based on the Unity 5 Standard Shader) - however as a general note, Specular/Smoothness workflows work just fine too.



Creating PBR Textures

Software for PBR Textures

These are the tools we recommend for creating PBR textures.

Marmoset is used to preview the PBR texture in Photoshop as you can't preview in Photoshop, but you can edit in Photoshop and see the results update instantly on your model in the Unity editor.


Patterns

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