By: Tasos Stamadianos (@tasostam) http://tasosgamedev.com/ A gentle introduction to the concept and customization of shaders! Learn how to give your Unity games a unique and pretty twist both in the Unity editor and shader code! We’ll be covering what a shader is, Standard Unity shader (which comes by default), and an intro to writing your own shader.This workshop is oriented to folks with little to no knowledge about shaders.

1. Shaders
Tasos Stamadianos

2. Before we begin...
- Please download the necessary files:
- http://bit.ly/2arPTiv

3. Agenda
● About me
● What’s a shader?
● Graphics pipeline high-level
● Lighting
● Physically-based rendering
● Physically-based rendering in Unity
● Post-processing effects
● Unity shader system
● Post-processing effect example

4. About Me
- Graduated from UOIT
- Engine programmer at Ludia
- Programming is love, programming is life

5. No black boxes!
- Know enough to Google it!

6. Reinvent the wheel!
- Practice, practice, practice to learn!

7. Ask questions!
- No one attends presentations because they already know everything.
- No such thing as a stupid question
- While embarrassment can be an effective growing tool for some, it can
paralyze others out of learning.

8. What’s a shader?
- A lightweight program running thousands at times at once on the GPU
- Takes in data and outputs data
- Varies depending on stage of graphics pipeline

9. Graphics Pipeline High-level
- Starts with a 3D model and ends with a flat image on the screen
Model-friendly
vertex data Vertex
Shader
GPU-friendly
vertex data
Textures and
other data
Fragment
Shader
Pretty pixels

10. Graphics Pipeline High-level

11. Graphics Pipeline High-level
- Models are comprised of their own points relative to that model, not to your
game world
- First step is to position these local points into the game world
- To do this we use....

12. Vertex Shaders
- Given information about a vertex and some info about the world and camera,
this places a point on a model into the virtual world
- There’s also some GPU stuff related to clipping but that’s not important for this workshop
- Model data in, important data for shading out!

13. Graphics Pipeline High-level
- After we know what has to be rendered, it comes time to actually render it
- Known as ‘shading’
- Use vertex data and some other customizable parameters
- Uniforms (constants), textures, etc

14. Fragment Shader
- The penultimate step of the rendered pixel, but easily the most important
- Vertices are assembled into tiny pieces and we use interpolated data to colour
things (normals and UVs most common)
- All colouring and effects are done here
- Normal mapping
- Colour correction
- Toon shading

15. Fragment Shader
- Most common example is normal mapping

16. Fragment Shader
- Toon shading is popular too

17. Fragment Shader
- But nothing is more ubiquitous than LENS FLARES AND BLOOM
- SO REALISTIC

18. The Final Step
- Blending to the backbuffer
- Incoming pixels must interact with existing pixels
- Try it

19. Geometry Shaders
- Vertices can also produce more vertices
- Geometry shaders take one vertex, do some calculations, and output more
vertices!
- Good for particles

20. Tessellation Shaders
- Take a model as a whole and either reduce/increase the number of triangles
- Increases or decreases model quality to save on calculations

21. Lighting
- Traditional method is to use Phong shading
- Looks okay, efficient and cheap
- Doesn’t have the next-gen look

22. Physically-based rendering!
- THE FUTURE IS HERE
- Use physical properties of a material (roughness, shininess) to light it, and
reflect how light bounces around a scene!
- Global illumination in a fast way
- Unity uses this method

23. Physically-based rendering in Unity
- Unity material system is pretty powerful and customizable
- Relies on certain material properties, and we will go over each of them

24. A Note on Maps
- “Maps” are just fancy terms for textures
- Dictate the values at a given point of a surface
- Albedo, specular, normal, etc
- Each will be explained

25. Unity PBR Material Parameters
- Albedo
- Colour at a specific point
- Can be uniform or provided via ‘albedo map’, AKA ‘texture map’

26. Unity PBR Material Parameters
- Metallic
- One of two shininess options
- Basically, how metalic an object is will influence how much light reflects
- Can also specify “smoothness”
- Describes how the reflected light will reflect

27. Unity PBR Material Parameters
- Specular
- The other of two shininess options
- Use a map to specify the shiny parts of the
surface
- Also uses the “smoothness” parameter

28. Unity PBR Material Parameters
- Normal map
- Specify detailed normals to use in the lighting calculations

29. Unity PBR Material Parameters
- Height map, or parallax map
- Gives the appearance of protruding geometry from a flat surface
- Fake extra modelled detail at a fraction of the cost

30. Unity PBR Material Parameters
- Occlusion map
- Specify how certain parts of the model should react to indirect lighting (lighting from the scene)

31. Unity PBR Material Parameters
- Emission map
- Specify the light emitting from areas of a surface
- Both colour and intensity

32. Unity PBR Material Parameters
- Detail mask
- Specify parts of the surface which need more detail
- Provide more detail with the specified albedo and normal textures

33. Post-processing effects
- Make things pretty!
- Shaders can be used to change colours of a screen as a whole
- Known as post-processing effects
- Colour correction, greyscale, toon shading, bloom
- Lens flares for that next-gen look & feel
- Must use the Unity shader and RTT system now

34. Unity Shader System
- Can write a variety of shaders
- Surface shader (lighting, not what we’re interested in)
- Traditional vertex/fragment shader (more useful for post-processing)
- Fixed-function (i don’t know why these are still here)

35. Unity Shader System
- We’ll use the Vertex/Fragment shader method
- Unity ShaderLab is based on HLSL

36. Putting it all together
- Need two things:
- Script with “OnRenderImage” implemented
- Shader to apply

37. Post-processing effect example

38. OnRenderImage
- Important parameters
- ‘src’ and ‘dest’ are render targets
- One extremely important function

39. Fullscreen Blur
- One of the easiest effects to create
- Can be used to bring things in/out of focus
- Cheap DOF

40. Questions?

41. Shameless friend plug
- Special thanks to:
- Jonathan Virly for the spider mech
- jones.virly@gmail.com
- Matthew Racanelli for the textures
- mracanelli.com

42. Helpful resources
- Krita
- General 2D painting
- https://krita.org/en/
- Blender
- 3D Modelling + map painting
- https://www.blender.org
- Sculptris
- Normal maps
- http://pixologic.com/sculptris/

43. Thank you!
I enjoy learning through teaching!
@tasostam
tasosgamedev.com