{"id":156,"date":"2020-08-27T09:12:24","date_gmt":"2020-08-27T09:12:24","guid":{"rendered":"http:\/\/half4.xyz\/?p=156"},"modified":"2024-02-05T18:50:09","modified_gmt":"2024-02-05T18:50:09","slug":"part-4-skin-shader","status":"publish","type":"post","link":"https:\/\/half4.xyz\/index.php\/2020\/08\/27\/part-4-skin-shader\/","title":{"rendered":"Part 4: Skin Shader"},"content":{"rendered":"\n

Now we need to bring out LUT into a skin shader. For this tutorial, we\u2019ll be using the Bust_Outdoors level from the Digital Human content pack, which you get through the Epic Games Launcher (via Unreal Engine -> Learn).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once you\u2019re there, we\u2019ll move on to some quick theory:<\/p>\n\n\n\n

When recolouring the skin, what we want is the ability to change just<\/em> the underlying skin tone. In an ideal world, we also want to be able to texture the skin in the normal workflow way \u2013 so we texture an albedo map. This makes it easier to author, and will work with existing assets you may have.<\/p>\n\n\n\n

<\/p>\n\n\n\n

But how do we do this? If we use a Hue\/Saturation\/Lightness adjustment to the skin, we may end up changing the colour of the lips or other scars and blemishes, too \u2013 which is not what we want. All we want to change is the chromophore contribution to the skin tone.<\/p>\n\n\n\n

The solution is to divide the albedo texture by the original chromophore contribution, then multiply it by the new chromorphore contribution:<\/p>\n\n\n\n

\u03b1= (\u03b1\/ \u03b2)\u03b3
Where \u03b1 is the albedo, \u03b2 is the underlying chromophore contribution, and \u03b3 is the new target chromophore contirbution.<\/em><\/p>\n\n\n\n

<\/p>\n\n\n\n

By dividing, we remove the chromophore contribution from the albedo, leaving only the remaining color contribution from blemishes, lips, etc. We can then add in a new color by multiplying it in.<\/p>\n\n\n\n

First, we need to get the chromophore contribution in the head texture. To do this,:<\/p>\n\n\n\n

    \n
  1. Open the Albedo in Photoshop<\/li>\n\n\n\n
  2. Select an area of skin that doesn\u2019t have too many blemishes and is fairly even in skin tone<\/li>\n\n\n\n
  3. Go Filter -> Blur -> Average<\/li>\n\n\n\n
  4. Use the color picker to get the Hex value for this new skin color<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Next we need to import our LUT correctly. Import the PNG we output from our Monte Carlo simulation, then double click the uasset, and change its settings to the following, then save:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    These are required so we keep defined edges between our 3 LUT areas \u2013 using a different filter will cause blurry edges. Clamping the texture prevents large or negative values in the shader looping back around \u2013 it just makes it less prone to user-error.<\/p>\n\n\n\n

    Next, we shall head into UE4 and create a new Material Function called MF_SkinLUT. Open it up and construct the following:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    What\u2019s going on here?<\/p>\n\n\n\n

    We have 3 areas of our LUT for different melanin blends. We need to sample two<\/em> of these areas and blend between them. For example, if we had a blend value of 0.25, we need to sample a pixel from the first LUT area (0.01 blend) and one from the second LUT area (0.5 blend), and then pick a value that is halfway between those sampled colors.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    We will select which pixel we sample based on melanin fraction (our \u201cx-axis\u201d in each area, and hemoglobin fraction is our \u201cy-axis\u201d)<\/p>\n\n\n\n

    Now open up the M_Skin_Bust from the character in our scene, it contains the head skin material in this scene:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Now, drag in you MF_SkinLUT material function. Add in three scalar inputs, like so:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Apply the following settings to them:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    Next, create a Vector Parameter and set the sRGB Hex value we extracted from Photoshop:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Now, divide the Albedo RGB node by this amount, then multiply that output by the output of your Material Function, just like this:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Now, create a Material Instance of this Material and apply it back to your head. We do this so we can change out skin chromophore values without having to recompile shaders. You should end up with the following:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Now we can start changing the skin tones!<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    As an extension task, you can completely remove the Material Function and just multiply in any colour you like for some fantasy-genre skin tones:<\/p>\n\n\n\n

    As you can see, we maintain pinkness in the lips (that is more evident in lighter tones)<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Appendix: Unity<\/h2>\n\n\n\n

    If you\u2019re using Unity, you can use the following Shader Graph setup:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    The process is identical \u2013 clamp the LUT, nearest pixel filter. <\/p>\n\n\n\n

    Here it in on the Digital Human from The Heretic project which you can grab from the Asset Store in Unity:<\/p>\n\n\n\n

    \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

    Now we need to bring out LUT into a skin shader. For this tutorial, we\u2019ll be using the Bust_Outdoors level from the Digital Human content pack, which you get through the Epic Games Launcher (via Unreal Engine -> Learn). Once you\u2019re there, we\u2019ll move on to some quick theory: When recolouring the skin, what we want is the ability to change just the underlying skin tone. In an ideal world, we also want to be able to texture the skin in the normal workflow way \u2013 so we texture an albedo map. This makes it easier to author, and will work with existing assets you may have. But how do we do this? If we use a Hue\/Saturation\/Lightness adjustment to the skin, we may end up changing the colour of the lips or other scars and blemishes, too \u2013 which is not what we want. All we want to change is the chromophore contribution to the skin tone. The solution is to divide the albedo texture by the original chromophore contribution, then multiply it by the new chromorphore contribution: \u03b1= (\u03b1\/ \u03b2)\u03b3Where \u03b1 is the albedo, \u03b2 is the underlying chromophore contribution, and \u03b3 is the new target chromophore contirbution. By dividing, we remove the chromophore contribution from the albedo, leaving only the remaining color contribution from blemishes, lips, etc. We can then add in a new color by multiplying it in. First, we need to get the chromophore contribution in the head texture. To do this,: Next we need to import our LUT correctly. Import the PNG we output from our Monte Carlo simulation, then double click the uasset, and change its settings to the following, then save: These are required so we keep defined edges between our 3 LUT areas \u2013 using a different filter will cause blurry edges. Clamping the texture prevents large or negative values in the shader looping back around \u2013 it just makes it less prone to user-error. Next, we shall head into UE4 and create a new Material Function called MF_SkinLUT. Open it up and construct the following: What\u2019s going on here? We have 3 areas of our LUT for different melanin blends. We need to sample two of these areas and blend between them. For example, if we had a blend value of 0.25, we need to sample a pixel from the first LUT area (0.01 blend) and one from the second LUT area (0.5 blend), and then pick a value that is halfway between those sampled colors. We will select which pixel we sample based on melanin fraction (our \u201cx-axis\u201d in each area, and hemoglobin fraction is our \u201cy-axis\u201d) Now open up the M_Skin_Bust from the character in our scene, it contains the head skin material in this scene: Now, drag in you MF_SkinLUT material function. Add in three scalar inputs, like so: Apply the following settings to them: Next, create a Vector Parameter and set the sRGB Hex value we extracted from Photoshop: Now, divide the Albedo RGB node by this amount, then multiply that output by the output of your Material Function, just like this: Now, create a Material Instance of this Material and apply it back to your head. We do this so we can change out skin chromophore values without having to recompile shaders. You should end up with the following: Now we can start changing the skin tones! As an extension task, you can completely remove the Material Function and just multiply in any colour you like for some fantasy-genre skin tones: As you can see, we maintain pinkness in the lips (that is more evident in lighter tones) Appendix: Unity If you\u2019re using Unity, you can use the following Shader Graph setup: The process is identical \u2013 clamp the LUT, nearest pixel filter. Here it in on the Digital Human from The Heretic project which you can grab from the Asset Store in Unity:<\/p>\n","protected":false},"author":1,"featured_media":321,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[8,7],"class_list":["post-156","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-lut","tag-skin"],"_links":{"self":[{"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/posts\/156","targetHints":{"allow":["GET"]}}],"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=156"}],"version-history":[{"count":14,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/posts\/156\/revisions"}],"predecessor-version":[{"id":1297,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/posts\/156\/revisions\/1297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/media\/321"}],"wp:attachment":[{"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/categories?post=156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/half4.xyz\/index.php\/wp-json\/wp\/v2\/tags?post=156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}