Custom Fabric Shader
for Unreal Engine 4
Gregory Dongseok Kim
2016-04-11
■ Two types of Fabric
⚬ Non-Metal: Cotton, denim, flax and common fabrics
⚬ Metal: Silk, satin, velvet, nylon and polyester
■ The Order approach
■ Limitations of Unreal Engine shader
■ My approach
⚬ Oren-nayar diffuse shading
⚬ Specular Term
⚬ Fiber Scatter Term
■ Result
Overview
2
Two types of Fabric: Non-Metal
■ Cotton, Denim, Flax and Common fabrics
⚬ Tiny furs on each fibers
⬝ Roughness value of those fabrics is always 1.0 unless they
wet
⬝ Reflect lights to random directions
⬝ It induces not only front scattering but also back scattering
Fuzz on rim part
⚬ Specular lobe is widely spread on view direction surface
⬝ Specular color is white but it is looked like desaturated color
of base one because of front scattering
3
Two types of Fabric: Metal (1)
■ Silk, Satin, Velvet, Nylon and Polyester
⚬ Silk has round triangular cross section and smooth surface
⬝ It induces simiral reflection with metal
⬝ Smooth surface: Reflects lights as perfect as metal surface
⬝ Triangular cross section: Reflects specific light wave
⚬ Silk can have Roughness value around 0.3 - 0.7
⬝ Thickness of each fibers is 5 - 10 μm
⬝ Thin to make smooth surface as metal
4
Two types of Fabric: Metal (2)
■ Special properties of Silk and Satin
⚬ They have much less fuzz on rim part then
cotton or common fabrics
⬝ Their intensive structure makes similar
specluar with metal’s one
⚬ They can have various specular colors
⬝ If they are woven by different colors
strings
⬝ Specular color can be changed by view
direction
⚬ They have anistropic specular shape
5
Two types of Fabric: Metal (3)
■ Special properties of Velvet
⚬ Tiny fibers are attached on the surface
⬝ Its Roughness value has to be 1.0
⬝ If the light is behind, those fibers give foward scattering
and it gives rim light effect on edge part
⚬ Diffuse shading is simiral with metal’s diffusion
⬝ Its surface color is darker than original color of fibers
6
The Order approach1
■ Custom microfiber model
⚬ Ashikhmin’s Distribution based BRDF for fresnel term
⚬ Inverse Gausian for specular term
⚬ No geometry term to improve rim light effect
⚬ Smoother specular than GGX
■ Future works
⚬ Ambient specular
⚬ Modify fresnel term to match with direct light
7
Goal of my approach
■ Shading model for every types of fabrics
⚬ From cotton to velvet
⚬ Easy to use for artists
■ Technical perspective
⚬ Oren-nayar diffusion
⚬ Specular term for fabrics
⚬ 2 colors specular
⚬ Fresnel term which is toward to light direction
8
Limitations of Unreal Engine shader
■ Hard to implement custom shading model
⚬ Diffuse shading: Lambert
⚬ No way to change specular model
■ Base Color slot can be only available slot to input custom shading code, but
⚬ The value is clamped as 0.0 - 1.0
⚬ Range of value is too narrow to use specular light
Fortunately, fabrics do not need strong specular, so its specular can be
implemented to Base Color
9
My approach - Diffuse term (1)
■ Oren-nayar diffuse shading
⚬ Based on Pope Kim’s approximation
⚬ It is not matched with real Oren-nayar shading, but its quality is great, cheap and easy to
implement
■ Removing (n∙l) from the original code
10
1
My approach - Diffuse term (2)
■ Replace (n∙l) to 1.0
■ Output value multiplys Base Color
■ If surface is smooth(Roughness = 0.0), than uses Unreal default diffuse
shading
11
My approach - Specular (1)
(Fresnel Term × Specular) + Fiber Scatter
■ Fresnel Term
⚬ Fuzz on rim part
■ Specular Term
⚬ Customized inverse gausian specular
⚬ For describing back scattering
⚬ Secondary specular lobe
■ Fiber Scatter Term
⚬ For describing front scattering
⚬ Primary specular lobe
12
My approach - Specular (2)
■ Fresnel term
⚬ Based on Schlick Fresnel approximation1
⬝
⚬ Modified 5th power of 1 - cosθd
to 4th power for increasing rim lighting effect
13
My approach - Specular (3)
■ Specular Term
⚬ Based on The Order’s approach
⬝ iverse gausian specular
⚬ Not related with Roughness value, but much simpler equation
⬝ Result is simiral with The Order’s approach when Roughness value is 1.0
⬝ I premise every non-metal fabrics’s roughness value is 1.0
If fabric surface has lower roughness than 1.0, using Unreal default specular term
Primary specular is implemented in Fiber scatter term
⚬ Masking fresnel term and it induces light direction toward rim lighting
14
My approach - Specular (3)
■ Roughness value
⚬ GGX: 0.65
⚬ The Order: 1.0
⚬ My approach: 1.0
15
My approach - Fiber Scatter Term (1)
■ Fiber Scatter Term
⚬ Wrap lighting for front scattering
⬝ Week transmission effect for the eye facing surface
⬝ Can be used as a secondary specular color for metal fabrics such as Silk or stain
⚬ Linear interpolation between two types of fresnel
⬝ First one is wider
⬝ Second one is narrwer
⬝ Blend them by fabric scatter amount value
Can describe from fuzzy cotton to smooth denim
⬝ Fabric scattering color is multiplied to this value
16
My approach - Fiber Scatter Term (2)
■ Wrap lighting
17
My approach - Fiber Scatter Term (3)
■ Linear interpolation between two types of fresnel
18
My approach - Final
19
Result - Fabric scatter amount compare
■ Define which part will use fabric scatter color
⚬ If the value is 0, than rim part will use fabric scatter color
⚬ If the value is getting increased, area of fabric scatter color is getting wider
⚬ If the value is 1.0, most of surface is fabric scatter color and rim part is base color
20
Result - Fabric examples (1)
21
Cotton
Velvet
Result - Fabric examples (2)
■ Hint to make good look fabric material with my approach
⚬ Set Metalic value for ratio of silk fibers in the fabric
⚬ Only Metal fabrics can have lower Roughness value than 1.0
⚬ Do not use Normal map to describe patterns on silk surface
⬝ Using different values of Roughness for pattern and non-pattern part
22
Satin
Recomend values for fabrics
23
Fabric Types Metalic Roughness Fabric Scatter amount
Cotton or ordinary
fabrics
0 1 0.5
Velvat 1 1 0
Silk, Satin 0.8 - 0.9 0.35 - 0.7 1
Bibliography
■ Page 3
⚬ image 1: http://www.apparelsearch.com/fibers.htm
⚬ image 2: http://www.trimfabric.com/nv-97.html
■ Page 4
⚬ image 1: https://www.asahi-kasei.co.jp/fibers/en/cupro/what/function1.html
⚬ image 2: https://quizlet.com/92490419/intro-2-textiles-test-1-flash-cards/
⚬ image 3: https://quizlet.com/92490419/intro-2-textiles-test-1-flash-cards/
■ Page 5
⚬ image 2: https://wallpaperscraft.com/download/silk_material_soft_light_50576/3840x2160
■ Page 6
⚬ image 1: http://www.bloomsburgcarpet.com/resources/weave-structures
⚬ image 2: http://www.textilestock.in/productdetail/47/Fabrics-HomeFurnishingFabrics-Velvet-Velvet-Stock.html
24
Bibliography
■ Page 7
⚬ citation 1: Neubelt, David, Matt Pettineo, and Ready At Dawn Studios. "Crafting a Next-Gen
Material Pipeline for The Order: 1886." part of “Physically Based Shading in Theory and
Practice,” SIGGRAPH (2013).
■ Page 10
⚬ citation 1: http://www.slideshare.net/blindrenderer/rendering-tech-of-space-marinekgc-2011
■ Page 13
⚬ citation 1: Schlick, Christophe. “An inexpensive BRDF Model for Physically-based Rendering.”
Computer graphics forum 1 Aug. 1994: 233-246
25

Custom fabric shader for unreal engine 4

  • 1.
    Custom Fabric Shader forUnreal Engine 4 Gregory Dongseok Kim 2016-04-11
  • 2.
    ■ Two typesof Fabric ⚬ Non-Metal: Cotton, denim, flax and common fabrics ⚬ Metal: Silk, satin, velvet, nylon and polyester ■ The Order approach ■ Limitations of Unreal Engine shader ■ My approach ⚬ Oren-nayar diffuse shading ⚬ Specular Term ⚬ Fiber Scatter Term ■ Result Overview 2
  • 3.
    Two types ofFabric: Non-Metal ■ Cotton, Denim, Flax and Common fabrics ⚬ Tiny furs on each fibers ⬝ Roughness value of those fabrics is always 1.0 unless they wet ⬝ Reflect lights to random directions ⬝ It induces not only front scattering but also back scattering Fuzz on rim part ⚬ Specular lobe is widely spread on view direction surface ⬝ Specular color is white but it is looked like desaturated color of base one because of front scattering 3
  • 4.
    Two types ofFabric: Metal (1) ■ Silk, Satin, Velvet, Nylon and Polyester ⚬ Silk has round triangular cross section and smooth surface ⬝ It induces simiral reflection with metal ⬝ Smooth surface: Reflects lights as perfect as metal surface ⬝ Triangular cross section: Reflects specific light wave ⚬ Silk can have Roughness value around 0.3 - 0.7 ⬝ Thickness of each fibers is 5 - 10 μm ⬝ Thin to make smooth surface as metal 4
  • 5.
    Two types ofFabric: Metal (2) ■ Special properties of Silk and Satin ⚬ They have much less fuzz on rim part then cotton or common fabrics ⬝ Their intensive structure makes similar specluar with metal’s one ⚬ They can have various specular colors ⬝ If they are woven by different colors strings ⬝ Specular color can be changed by view direction ⚬ They have anistropic specular shape 5
  • 6.
    Two types ofFabric: Metal (3) ■ Special properties of Velvet ⚬ Tiny fibers are attached on the surface ⬝ Its Roughness value has to be 1.0 ⬝ If the light is behind, those fibers give foward scattering and it gives rim light effect on edge part ⚬ Diffuse shading is simiral with metal’s diffusion ⬝ Its surface color is darker than original color of fibers 6
  • 7.
    The Order approach1 ■Custom microfiber model ⚬ Ashikhmin’s Distribution based BRDF for fresnel term ⚬ Inverse Gausian for specular term ⚬ No geometry term to improve rim light effect ⚬ Smoother specular than GGX ■ Future works ⚬ Ambient specular ⚬ Modify fresnel term to match with direct light 7
  • 8.
    Goal of myapproach ■ Shading model for every types of fabrics ⚬ From cotton to velvet ⚬ Easy to use for artists ■ Technical perspective ⚬ Oren-nayar diffusion ⚬ Specular term for fabrics ⚬ 2 colors specular ⚬ Fresnel term which is toward to light direction 8
  • 9.
    Limitations of UnrealEngine shader ■ Hard to implement custom shading model ⚬ Diffuse shading: Lambert ⚬ No way to change specular model ■ Base Color slot can be only available slot to input custom shading code, but ⚬ The value is clamped as 0.0 - 1.0 ⚬ Range of value is too narrow to use specular light Fortunately, fabrics do not need strong specular, so its specular can be implemented to Base Color 9
  • 10.
    My approach -Diffuse term (1) ■ Oren-nayar diffuse shading ⚬ Based on Pope Kim’s approximation ⚬ It is not matched with real Oren-nayar shading, but its quality is great, cheap and easy to implement ■ Removing (n∙l) from the original code 10 1
  • 11.
    My approach -Diffuse term (2) ■ Replace (n∙l) to 1.0 ■ Output value multiplys Base Color ■ If surface is smooth(Roughness = 0.0), than uses Unreal default diffuse shading 11
  • 12.
    My approach -Specular (1) (Fresnel Term × Specular) + Fiber Scatter ■ Fresnel Term ⚬ Fuzz on rim part ■ Specular Term ⚬ Customized inverse gausian specular ⚬ For describing back scattering ⚬ Secondary specular lobe ■ Fiber Scatter Term ⚬ For describing front scattering ⚬ Primary specular lobe 12
  • 13.
    My approach -Specular (2) ■ Fresnel term ⚬ Based on Schlick Fresnel approximation1 ⬝ ⚬ Modified 5th power of 1 - cosθd to 4th power for increasing rim lighting effect 13
  • 14.
    My approach -Specular (3) ■ Specular Term ⚬ Based on The Order’s approach ⬝ iverse gausian specular ⚬ Not related with Roughness value, but much simpler equation ⬝ Result is simiral with The Order’s approach when Roughness value is 1.0 ⬝ I premise every non-metal fabrics’s roughness value is 1.0 If fabric surface has lower roughness than 1.0, using Unreal default specular term Primary specular is implemented in Fiber scatter term ⚬ Masking fresnel term and it induces light direction toward rim lighting 14
  • 15.
    My approach -Specular (3) ■ Roughness value ⚬ GGX: 0.65 ⚬ The Order: 1.0 ⚬ My approach: 1.0 15
  • 16.
    My approach -Fiber Scatter Term (1) ■ Fiber Scatter Term ⚬ Wrap lighting for front scattering ⬝ Week transmission effect for the eye facing surface ⬝ Can be used as a secondary specular color for metal fabrics such as Silk or stain ⚬ Linear interpolation between two types of fresnel ⬝ First one is wider ⬝ Second one is narrwer ⬝ Blend them by fabric scatter amount value Can describe from fuzzy cotton to smooth denim ⬝ Fabric scattering color is multiplied to this value 16
  • 17.
    My approach -Fiber Scatter Term (2) ■ Wrap lighting 17
  • 18.
    My approach -Fiber Scatter Term (3) ■ Linear interpolation between two types of fresnel 18
  • 19.
    My approach -Final 19
  • 20.
    Result - Fabricscatter amount compare ■ Define which part will use fabric scatter color ⚬ If the value is 0, than rim part will use fabric scatter color ⚬ If the value is getting increased, area of fabric scatter color is getting wider ⚬ If the value is 1.0, most of surface is fabric scatter color and rim part is base color 20
  • 21.
    Result - Fabricexamples (1) 21 Cotton Velvet
  • 22.
    Result - Fabricexamples (2) ■ Hint to make good look fabric material with my approach ⚬ Set Metalic value for ratio of silk fibers in the fabric ⚬ Only Metal fabrics can have lower Roughness value than 1.0 ⚬ Do not use Normal map to describe patterns on silk surface ⬝ Using different values of Roughness for pattern and non-pattern part 22 Satin
  • 23.
    Recomend values forfabrics 23 Fabric Types Metalic Roughness Fabric Scatter amount Cotton or ordinary fabrics 0 1 0.5 Velvat 1 1 0 Silk, Satin 0.8 - 0.9 0.35 - 0.7 1
  • 24.
    Bibliography ■ Page 3 ⚬image 1: http://www.apparelsearch.com/fibers.htm ⚬ image 2: http://www.trimfabric.com/nv-97.html ■ Page 4 ⚬ image 1: https://www.asahi-kasei.co.jp/fibers/en/cupro/what/function1.html ⚬ image 2: https://quizlet.com/92490419/intro-2-textiles-test-1-flash-cards/ ⚬ image 3: https://quizlet.com/92490419/intro-2-textiles-test-1-flash-cards/ ■ Page 5 ⚬ image 2: https://wallpaperscraft.com/download/silk_material_soft_light_50576/3840x2160 ■ Page 6 ⚬ image 1: http://www.bloomsburgcarpet.com/resources/weave-structures ⚬ image 2: http://www.textilestock.in/productdetail/47/Fabrics-HomeFurnishingFabrics-Velvet-Velvet-Stock.html 24
  • 25.
    Bibliography ■ Page 7 ⚬citation 1: Neubelt, David, Matt Pettineo, and Ready At Dawn Studios. "Crafting a Next-Gen Material Pipeline for The Order: 1886." part of “Physically Based Shading in Theory and Practice,” SIGGRAPH (2013). ■ Page 10 ⚬ citation 1: http://www.slideshare.net/blindrenderer/rendering-tech-of-space-marinekgc-2011 ■ Page 13 ⚬ citation 1: Schlick, Christophe. “An inexpensive BRDF Model for Physically-based Rendering.” Computer graphics forum 1 Aug. 1994: 233-246 25