Learn how to do stylized shading with Shader Graph – Unite Copenhagen 2019
10 likes13,829 views
The presentation by Ciro Continisio focuses on creating stylized shading using Shader Graph in Unity, including how to obtain light and shadow information through custom HLSL code. It details steps for developing a cartoon-like toon shader, emphasizing key techniques like hard transitions, gradient shading, and unique specular effects. The session also includes tips for improving production workflow and links to additional resources for learning more about Shader Graph.
Learn how to do stylized shading with Shader Graph – Unite Copenhagen 2019
- 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
- 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
- 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
- 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
- 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
- 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
- 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