In this session at Unite Copenhagen, attendees learned how to write a custom lighting shader for a stylized look that can easily be shared across multiple assets. There was also a demo of the workflow for creating and maintaining custom HLSL inside the Unity Shader Graph, and an exploration of new Shader Graph features such as keywords. Speaker: Ciro Continisio – Unity Watch the session on YouTube: https://youtu.be/DOLE4nrK97g

2. Learn how to create
stylised shading with
Shader Graph
Ciro Continisio - Lead Evangelist, EMEA

3. Who am I
3
Ciro Continisio
Lead Evangelist, EMEA
Focus: Games, more advanced uses of Unity
Past:
— Developer of my own games
— Certification tester at EA
@CiroContns

4. In this presentation
4
— How to get light and shading information through custom
HLSL code in Shader Graph
— Use that to create a custom toon shader
— Tips to improve your production workflow

5. Shader Graph
5

6. Shader Graph
6
Available as part of the SRPs
— Visual shader editor
— Node-based
— Instant feedback
— Now out of Preview
www.unity3d.com/shader-graph

7. 7

8. What if we don’t want a
realistic rendering style?
8

9. 9
Sayonara Wild Hearts Overland Circuit Superstars

10. “Stylised” look
10
— Something that doesn’t necessarily look real
– Altering the surface response to shadows and lighting
– Added abstract details (e.g. an outline)
— Exaggerating or removing details
– To direct the viewer’s attention
– To make the game easier to read
– To still look cool on less powerful hardware

11. Recreating a toon shader in
Shader Graph
11

12. 12
The Legend of Zelda: Breath of the Wild

13. Step 1:
Getting light and shadow
information from the pipeline
13

14. Custom Function Node
14
— Supports custom HLSL
– Inside the node
– From an external .hlsl file

15. Getting main light information
1
2
3
4
5
6
7
8
#if SHADERGRAPH_PREVIEW
Direction = half3(0.5, 0.5, 0);
Color = 1;
#else
Light light = GetMainLight();
Direction = light.direction;
Color = light.color;
#endif
15
(this code will be shared at the end of the presentation)

16. Lambert lighting model
1
2
3
4
5
half3 LightingLambert(half3 lightColor, half3 lightDir, half3 normal)
{
half NdotL = saturate(dot(normal, lightDir));
return lightColor * NdotL;
}
16
Code from:
com.unity.render-pipelines.universal@version/ShaderLibrary/Lighting.hlsl

17. Dot product (of two vectors)
17
A
0.80.50-1
B

18. 1
2
3
4
5
half3 LightingLambert(half3 lightColor, half3 lightDir, half3 normal)
{
half NdotL = saturate(dot(normal, lightDir));
return lightColor * NdotL;
}
18

19. Lambert lighting model
19

20. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
void MainLight_half(float3 WorldPos, out half3 Direction, out half3 Color, out half DistanceAtten, out half ShadowAtten)
{
#if SHADERGRAPH_PREVIEW
Direction = half3(0.5, 0.5, 0);
Color = 1;
DistanceAtten = 1;
ShadowAtten = 1;
#else
#if SHADOWS_SCREEN
half4 clipPos = TransformWorldToHClip(WorldPos);
half4 shadowCoord = ComputeScreenPos(clipPos);
#else
half4 shadowCoord = TransformWorldToShadowCoord(WorldPos);
#endif
Light mainLight = GetMainLight(shadowCoord);
Direction = mainLight.direction;
Color = mainLight.color;
DistanceAtten = mainLight.distanceAttenuation;
#if !defined(_MAIN_LIGHT_SHADOWS) || defined(_RECEIVE_SHADOWS_OFF)
ShadowAtten = 1.0h;
#endif
#if SHADOWS_SCREEN
ShadowAtten = SampleScreenSpaceShadowmap(shadowCoord);
#else
ShadowSamplingData shadowSamplingData = GetMainLightShadowSamplingData();
half shadowStrength = GetMainLightShadowStrength();
ShadowAtten = SampleShadowmap(shadowCoord, TEXTURE2D_ARGS(_MainLightShadowmapTexture,
sampler_MainLightShadowmapTexture),
shadowSamplingData, shadowStrength, false);
#endif
#endif
}
20
(will share later)

21. File mode
21
Link to an HLSL file external to the
graph
— Catch syntax errors
— Syntax highlighting

22. Lambert lighting with shadows
22

23. Lambert lighting with shadows
23

24. Put the Custom Function node in a Sub-Graph
24
#unitytips

25. Lambert lighting with shadows
25
0
0
0 to 1
-1 to 0

26. Visualise your values!
26
#unitytips

27. Visualise your values!
27
#unitytips

28. Calculating a simple specular
1
2
3
4
5
6
7
8
9
10
11
12
void DirectSpecular_half(half3 Specular, half Smoothness, half3 Direction, half3 Color, half3 WorldNormal,
half3 WorldView, out half3 Out)
{
#if SHADERGRAPH_PREVIEW
Out = 0;
#else
Smoothness = exp2(10 * Smoothness + 1);
WorldNormal = normalize(WorldNormal);
WorldView = SafeNormalize(WorldView);
Out = LightingSpecular(Color, Direction, WorldNormal, WorldView, half4(Specular, 0), Smoothness);
#endif
}
28
(will share the code later)

29. Calculating a simple specular
1
2
3
4
5
6
7
8
9
half3 LightingSpecular(half3 lightColor, half3 lightDir, half3 normal, half3 viewDir, half4 specular, half
smoothness)
{
float3 halfVec = SafeNormalize(float3(lightDir) + float3(viewDir));
half NdotH = saturate(dot(normal, halfVec));
half modifier = pow(NdotH, smoothness);
half3 specularReflection = specular.rgb * modifier;
return lightColor * specularReflection;
}
29
Code from:
com.unity.render-pipelines.universal@version/ShaderLibrary/Lighting.hlsl

30. The position of a specular effect
30

31. 31

32. 32

33. 33

34. Lambert model with Specular
34

35. 35
There’s more…
— Get information from Ambient lighting or GI
— Get information on additional lights in the scene (point lights)
There’s a blog post out about this: bit.ly/CustomLightingSG

36. Step 2:
Achieving the cartoon look
36

37. The final graph

38. 38
1: Lighting and shadows
— Hard transition from light to shadows
– Only 2 colours (1 transition)
— Never really reaching full white or full black

39. 39
Step operation
.25 .5 .750 1
Original

40. 40
Gradient (or “ramp”) shading
0 1
0 1
Original
Ramp shaded

41. The hard transition on light and shadows
41
Occlusion
texture
Not the
final value
Light info from Custom Function node

42. Using gradients
42
Fixed mode Blend used as Fixed
#unitytips

43. Pre-processing textures
43
#unitytips

44. Pre-processing textures
44
#unitytips

45. 2: The painted specular
45
— Specular appears as if painted with a brush
— Other materials (e.g. hair) have a more classic
“blob” specular

46. Creating the paint dabs
46

47. Using them as specular
47

48. 3: The backlight halo
48
Gives an appreciation of the colour of the model
even when it should be actually dark
— When point of view is completely opposite the
light source, contours are lit

50. The backlight halo
50

51. 4: The side shine
51
Helps to read the silhouette
— Bright thin light on the side of the model,
where light is coming from
— Often the brightest spot, reaching almost
white

52. Light Direction

53. The side shine
53

54. The graph
54
Base lighting
Ramp lighting
Final result
Dabs specular
Backlight rim
Side shine

55. The final graph
Base lighting
Ramp lighting
Dabs specular
Backlight rim
Side shine
Final result

56. 56

57. Want to learn more?
Tutorial:
Introduction to Shader Graph
Tutorial:
Shader Graph: Color Node
Project:
Make a Flag Move with
Shader Graph
Subscribe now for a 3-month free trial at
unity.com/learn-premium with code: UNITECPH19
*Learn Premium is included in Unity Plus and Pro licenses. Just sign in with your Unity ID.

58. Questions?
bit.ly/BotWToonShader
Ciro Continisio - Lead Evangelist, EMEA
@CiroContns
#UniteCopenhagen #Unity3d