Custom Fabric Shader for Unreal Engine 4

Gregory Dongseok Kim2016-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