{"id":75,"date":"2020-10-22T12:45:55","date_gmt":"2020-10-22T12:45:55","guid":{"rendered":"http:\/\/half4.xyz\/?p=75"},"modified":"2024-01-25T10:04:22","modified_gmt":"2024-01-25T10:04:22","slug":"character-clothing-zone-culling","status":"publish","type":"post","link":"https:\/\/half4.xyz\/index.php\/2020\/10\/22\/character-clothing-zone-culling\/","title":{"rendered":"Character Clothing Zone Culling"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Table of Contents<\/h2>\n<blockquote class=\"wp-embedded-content\" data-secret=\"JVkMqPpEdz\"><p><a href=\"https:\/\/half4.xyz\/index.php\/2020\/10\/22\/character-clothing-zone-culling\/\">Character Clothing Zone Culling<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Character Clothing Zone Culling&#8221; &#8212; half4.xyz\" src=\"https:\/\/half4.xyz\/index.php\/2020\/10\/22\/character-clothing-zone-culling\/embed\/#?secret=NIsfTBxp9A#?secret=JVkMqPpEdz\" data-secret=\"JVkMqPpEdz\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"QROZOQMAN9\"><p><a href=\"https:\/\/half4.xyz\/index.php\/2020\/10\/22\/character-clothing-part-2-maya\/\">Character Clothing &#8211; Part 2: Maya<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Character Clothing &#8211; Part 2: Maya&#8221; &#8212; half4.xyz\" src=\"https:\/\/half4.xyz\/index.php\/2020\/10\/22\/character-clothing-part-2-maya\/embed\/#?secret=Rdu5dNj425#?secret=QROZOQMAN9\" data-secret=\"QROZOQMAN9\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"xCles3FnWK\"><p><a href=\"https:\/\/half4.xyz\/index.php\/2020\/10\/22\/character-clothing-part-3-ue4-shaders\/\">Character Clothing &#8211; Part 3: UE4 Shaders<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Character Clothing &#8211; Part 3: UE4 Shaders&#8221; &#8212; half4.xyz\" src=\"https:\/\/half4.xyz\/index.php\/2020\/10\/22\/character-clothing-part-3-ue4-shaders\/embed\/#?secret=gde5C3zYNq#?secret=xCles3FnWK\" data-secret=\"xCles3FnWK\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"1IZh9MmYBO\"><p><a href=\"https:\/\/half4.xyz\/index.php\/2020\/10\/26\/character-clothing-part-4-ue4-logic\/\">Character Clothing \u2013 Part 4: UE4 Logic<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Character Clothing \u2013 Part 4: UE4 Logic&#8221; &#8212; half4.xyz\" src=\"https:\/\/half4.xyz\/index.php\/2020\/10\/26\/character-clothing-part-4-ue4-logic\/embed\/#?secret=GvdXhecQ6l#?secret=1IZh9MmYBO\" data-secret=\"1IZh9MmYBO\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n<p>When developing characters with multiple layers of clothing, it is very possible you\u2019ll end up with this sort of issue:<\/p>\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-634\" src=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-36-561x1024.png\" sizes=\"(max-width: 561px) 100vw, 561px\" srcset=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-36-561x1024.png 561w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-36-164x300.png 164w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-36-768x1402.png 768w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-36-841x1536.png 841w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-36.png 1110w\" alt=\"\" width=\"561\" height=\"1024\" \/><\/figure>\n<p>As you apply layers of clothing, you may find that the layers intersect and clip.<\/p>\n<p>What you\u2019d really like this:<\/p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-635\" src=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-37-1011x1024.png\" sizes=\"(max-width: 1011px) 100vw, 1011px\" srcset=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-37-1011x1024.png 1011w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-37-296x300.png 296w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-37-768x778.png 768w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-37-1516x1536.png 1516w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-37.png 1805w\" alt=\"\" width=\"1011\" height=\"1024\" \/><\/figure>\n<p>A common approach to solve this is to develop all the mesh combinations you need as separate meshes, like so:<\/p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-576\" src=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-5-1024x456.png\" sizes=\"(max-width: 1024px) 100vw, 1024px\" srcset=\"https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-5-1024x456.png 1024w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-5-300x134.png 300w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-5-768x342.png 768w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-5-1536x684.png 1536w, https:\/\/half4.xyz\/wp-content\/uploads\/2020\/10\/image-5.png 1667w\" alt=\"\" width=\"1024\" height=\"456\" \/><figcaption>Each of these is a separate mesh<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>This can lead to restricting clothing designs and shapes and colossal amounts of geometry files to cope with all the variations.<\/p>\n<p>But there is a better way!<\/p>\n<p>One solution I\u2019ve found particularly interesting is how Star Citizen handle it. They break their clothes down into sections that can each be toggled on\/off as needed, based on the combination of clothing applied.<\/p>\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\">\n<div class=\"wp-block-embed__wrapper\"><iframe title=\"CitizenCon 2948 - Panel: What a Bunch of Characters\" src=\"https:\/\/www.youtube.com\/embed\/JQEQmO9uX28?start=2538&amp;feature=oembed\" width=\"960\" height=\"540\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/figure>\n<p>I will now show you how to implement such a system in Unreal Engine 4 (though the approach is completely doable in Unity, too). This system will enable you to layer up clothing and hide any sections of those layers so that they no longer clip. The system is flexible and supports, in theory, an infinite amount of culling zones (although, that might become unmanageable from an artists\u2019s workflow perspective).<\/p>\n<p>Performance cost should also be improved. Although all your vertices will be processed, they won\u2019t need drawing. As a result you\u2019ll have less to draw, less to light and less to process overall.<\/p>\n<h3 class=\"wp-block-heading\">Requirements<\/h3>\n<p>We\u2019ll need a few things to get started.<\/p>\n<ol>\n<li>Unreal Engine 4. Any recent version should do<\/li>\n<li>A modelling tool. We\u2019ll be using Maya here, but as long as you can have multiple UV sets\/channels, you\u2019ll be good<\/li>\n<\/ol>\n<h2 class=\"wp-block-heading\">Preparation<\/h2>\n<p>We\u2019ll introduce you to a few topics in this tutorial that will make this process possible.<\/p>\n<p>First off, we need to figure out how to cull parts of the mesh dynamically in a nice, optimised &amp; efficient way, then we need to figure out how to define an area to cull and finally implement this in a nice way in Unreal Engine 4 so that an artist can control, per piece of clothing, which sections to hide underneath.<\/p>\n<p>In order to figure out our best approach we need to consider the way we want to author the clothing content.<\/p>\n<h3 class=\"wp-block-heading\">The desired workflow:<\/h3>\n<p>We want an artist to make a item of clothing, such as a leather jacket, a t-shirt or a vest as they normally would.<\/p>\n<p>Import those as individual items into the game project.<\/p>\n<p>Layer up the clothing.<\/p>\n<p>Then, be able to configure each layer item with a value that tells our shader what parts of each layer to mask (all demonstrated in the Star Citizen video)<\/p>\n<h3 class=\"wp-block-heading\">Some Theory<\/h3>\n<p>As discussed, it isn\u2019t practical to pre-calculate variations of a mesh with every possible other combination of clothing layering. We need to be able to cull <em>dynamically <\/em>within a mesh\u2019s vertex shader.<\/p>\n<p>For culling, there\u2019s a small feature within vertex shaders we can use to our advantage:<\/p>\n<p>If a vertex\u2019s position is either <em>infinity<\/em> or <em>not a number<\/em> (referred to as \u201c<em>NaN<\/em>\u201c), the renderer will just cull it. So, if we know which vertices the hide, we\u2019ll be able to do that within the shader.<\/p>\n<p>Dividing the vertices\u2019 position by 0 will do just fine:<\/p>\n<pre class=\"wp-block-code\"><code>if(cullThisVertex)\n{\n    \/\/ Dividing by 0 is a great way to break a value\n    \/\/ This vertex will no longer be drawn\n    vertex.position = vertex.position \/ 0.0;\n}<\/code><\/pre>\n<p>We know how to cull the vertices \u2013 but a larger problem is still looming: <em>How do we know which areas to cull?<\/em><\/p>\n<p>So, time to figure out how to define those areas to cull in the shader. We want a value we can provide to the vertex shader that will know how to cull each zone.<\/p>\n<p>This is where bitmasks come in.<\/p>\n<h4 class=\"wp-block-heading\">A Short Introduction to Bitmasks:<\/h4>\n<p>This part is heavy. Basically bitmasks allow us to manipulate the way computers store numbers in such a way as we can create a list of things to show\/hide.<\/p>\n<p><strong>Tangent #1 \u2013 Bitmasks<\/strong><\/p>\n<p>There are two things to keep in mind:<\/p>\n<ol>\n<li>Modern consumer-grade GPUs only support 32-bit unsigned integers. This means that for each material on our character\/clothing, we can only have 32 zones for culling.<\/li>\n<li>If you\u2019re using Unreal Engine 4, you will be limited to 24 zones. This is because you can\u2019t pass integers, or unsigned integers to a Material without modifying the Engine \u2013 you can only pass floats, which are stored differently in memory than integers.<\/li>\n<\/ol>\n<p>You can get around these limitations by breaking your meshes up. For example, separate the head, upper and lower-parts of your body. This means for each of these, you get your full zoning allocation. For this to work, you can\u2019t have single clothing pieces across these separations, such as with overalls or jumpsuits without additional work outside the scope of this tutorial.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Continue on to the next page:<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"QROZOQMAN9\"><p><a href=\"https:\/\/half4.xyz\/index.php\/2020\/10\/22\/character-clothing-part-2-maya\/\">Character Clothing &#8211; Part 2: Maya<\/a><\/p><\/blockquote>\n<p><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Character Clothing &#8211; Part 2: Maya&#8221; &#8212; half4.xyz\" src=\"https:\/\/half4.xyz\/index.php\/2020\/10\/22\/character-clothing-part-2-maya\/embed\/#?secret=Rdu5dNj425#?secret=QROZOQMAN9\" data-secret=\"QROZOQMAN9\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Table of Contents Character Clothing Zone Culling Character Clothing &#8211; Part 2: Maya Character Clothing &#8211; Part 3: UE4 Shaders Character Clothing \u2013 Part 4: UE4 Logic Introduction When developing characters with multiple layers of clothing, it is very possible you\u2019ll end up with this sort of issue: As you apply layers of clothing, you may find that the layers intersect and clip. What you\u2019d really like this: A common approach to solve this is to develop all the mesh combinations you need as separate meshes, like so: Each of these is a separate mesh &nbsp; This can lead to restricting clothing designs and shapes and colossal amounts of geometry files to cope with all the variations. But there is a better way! One solution I\u2019ve found particularly interesting is how Star Citizen handle it. They break their clothes down into sections that can each be toggled on\/off as needed, based on the combination of clothing applied. I will now show you how to implement such a system in Unreal Engine 4 (though the approach is completely doable in Unity, too). This system will enable you to layer up clothing and hide any sections of those layers so that they no longer clip. The system is flexible and supports, in theory, an infinite amount of culling zones (although, that might become unmanageable from an artists\u2019s workflow perspective). Performance cost should also be improved. Although all your vertices will be processed, they won\u2019t need drawing. As a result you\u2019ll have less to draw, less to light and less to process overall. Requirements We\u2019ll need a few things to get started. Unreal Engine 4. Any recent version should do A modelling tool. We\u2019ll be using Maya here, but as long as you can have multiple UV sets\/channels, you\u2019ll be good Preparation We\u2019ll introduce you to a few topics in this tutorial that will make this process possible. First off, we need to figure out how to cull parts of the mesh dynamically in a nice, optimised &amp; efficient way, then we need to figure out how to define an area to cull and finally implement this in a nice way in Unreal Engine 4 so that an artist can control, per piece of clothing, which sections to hide underneath. In order to figure out our best approach we need to consider the way we want to author the clothing content. The desired workflow: We want an artist to make a item of clothing, such as a leather jacket, a t-shirt or a vest as they normally would. Import those as individual items into the game project. Layer up the clothing. Then, be able to configure each layer item with a value that tells our shader what parts of each layer to mask (all demonstrated in the Star Citizen video) Some Theory As discussed, it isn\u2019t practical to pre-calculate variations of a mesh with every possible other combination of clothing layering. We need to be able to cull dynamically within a mesh\u2019s vertex shader. For culling, there\u2019s a small feature within vertex shaders we can use to our advantage: If a vertex\u2019s position is either infinity or not a number (referred to as \u201cNaN\u201c), the renderer will just cull it. So, if we know which vertices the hide, we\u2019ll be able to do that within the shader. Dividing the vertices\u2019 position by 0 will do just fine: if(cullThisVertex) { \/\/ Dividing by 0 is a great way to break a value \/\/ This vertex will no longer be drawn vertex.position = vertex.position \/ 0.0; } We know how to cull the vertices \u2013 but a larger problem is still looming: How do we know which areas to cull? So, time to figure out how to define those areas to cull in the shader. We want a value we can provide to the vertex shader that will know how to cull each zone. This is where bitmasks come in. A Short Introduction to Bitmasks: This part is heavy. Basically bitmasks allow us to manipulate the way computers store numbers in such a way as we can create a list of things to show\/hide. Tangent #1 \u2013 Bitmasks There are two things to keep in mind: Modern consumer-grade GPUs only support 32-bit unsigned integers. This means that for each material on our character\/clothing, we can only have 32 zones for culling. If you\u2019re using Unreal Engine 4, you will be limited to 24 zones. This is because you can\u2019t pass integers, or unsigned integers to a Material without modifying the Engine \u2013 you can only pass floats, which are stored differently in memory than integers. You can get around these limitations by breaking your meshes up. For example, separate the head, upper and lower-parts of your body. This means for each of these, you get your full zoning allocation. For this to work, you can\u2019t have single clothing pieces across these separations, such as with overalls or jumpsuits without additional work outside the scope of this tutorial. &nbsp; &nbsp; Continue on to the next page: Character Clothing &#8211; Part 2: Maya<\/p>\n","protected":false},"author":1,"featured_media":635,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-75","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tuts"],"_links":{"self":[{"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/posts\/75"}],"collection":[{"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=75"}],"version-history":[{"count":44,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/posts\/75\/revisions"}],"predecessor-version":[{"id":1274,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/posts\/75\/revisions\/1274"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/media\/635"}],"wp:attachment":[{"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=75"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/categories?post=75"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/tags?post=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}