43
Shaders Tasos Stamadianos

Workshop: (Unity3D) Shaders – Making your games pretty!

Embed Size (px)

Citation preview

Page 1: Workshop: (Unity3D) Shaders – Making your games pretty!

Shaders

Tasos Stamadianos

Page 2: Workshop: (Unity3D) Shaders – Making your games pretty!

Before we begin...

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

Page 3: Workshop: (Unity3D) Shaders – Making your games pretty!

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

Page 4: Workshop: (Unity3D) Shaders – Making your games pretty!

About Me

- Graduated from UOIT- Engine programmer at Ludia- Programming is love, programming is life

Page 5: Workshop: (Unity3D) Shaders – Making your games pretty!

No black boxes!

- Know enough to Google it!

Page 6: Workshop: (Unity3D) Shaders – Making your games pretty!

Reinvent the wheel!

- Practice, practice, practice to learn!

Page 7: Workshop: (Unity3D) Shaders – Making your games pretty!

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.

Page 8: Workshop: (Unity3D) Shaders – Making your games pretty!

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

Page 9: Workshop: (Unity3D) Shaders – Making your games pretty!

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

Page 10: Workshop: (Unity3D) Shaders – Making your games pretty!

Graphics Pipeline High-level

Page 11: Workshop: (Unity3D) Shaders – Making your games pretty!

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....

Page 12: Workshop: (Unity3D) Shaders – Making your games pretty!

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!

Page 13: Workshop: (Unity3D) Shaders – Making your games pretty!

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

Page 14: Workshop: (Unity3D) Shaders – Making your games pretty!

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

Page 15: Workshop: (Unity3D) Shaders – Making your games pretty!

Fragment Shader

- Most common example is normal mapping

Page 16: Workshop: (Unity3D) Shaders – Making your games pretty!

Fragment Shader

- Toon shading is popular too

Page 17: Workshop: (Unity3D) Shaders – Making your games pretty!

Fragment Shader

- But nothing is more ubiquitous than LENS FLARES AND BLOOM- SO REALISTIC

Page 18: Workshop: (Unity3D) Shaders – Making your games pretty!

The Final Step

- Blending to the backbuffer- Incoming pixels must interact with existing pixels- Try it

Page 19: Workshop: (Unity3D) Shaders – Making your games pretty!

Geometry Shaders

- Vertices can also produce more vertices- Geometry shaders take one vertex, do some calculations, and output more

vertices!- Good for particles

Page 20: Workshop: (Unity3D) Shaders – Making your games pretty!

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

Page 21: Workshop: (Unity3D) Shaders – Making your games pretty!

Lighting

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

Page 22: Workshop: (Unity3D) Shaders – Making your games pretty!

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

Page 23: Workshop: (Unity3D) Shaders – Making your games pretty!

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

Page 24: Workshop: (Unity3D) Shaders – Making your games pretty!

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

Page 25: Workshop: (Unity3D) Shaders – Making your games pretty!

Unity PBR Material Parameters

- Albedo- Colour at a specific point- Can be uniform or provided via ‘albedo map’, AKA ‘texture map’

Page 26: Workshop: (Unity3D) Shaders – Making your games pretty!

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

Page 27: Workshop: (Unity3D) Shaders – Making your games pretty!

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

Page 28: Workshop: (Unity3D) Shaders – Making your games pretty!

Unity PBR Material Parameters

- Normal map- Specify detailed normals to use in the lighting calculations

Page 29: Workshop: (Unity3D) Shaders – Making your games pretty!

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

Page 30: Workshop: (Unity3D) Shaders – Making your games pretty!

Unity PBR Material Parameters

- Occlusion map- Specify how certain parts of the model should react to indirect lighting (lighting from the scene)

Page 31: Workshop: (Unity3D) Shaders – Making your games pretty!

Unity PBR Material Parameters

- Emission map- Specify the light emitting from areas of a surface- Both colour and intensity

Page 32: Workshop: (Unity3D) Shaders – Making your games pretty!

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

Page 33: Workshop: (Unity3D) Shaders – Making your games pretty!

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

Page 34: Workshop: (Unity3D) Shaders – Making your games pretty!

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)

Page 35: Workshop: (Unity3D) Shaders – Making your games pretty!

Unity Shader System

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

Page 36: Workshop: (Unity3D) Shaders – Making your games pretty!

Putting it all together

- Need two things:- Script with “OnRenderImage” implemented- Shader to apply

Page 37: Workshop: (Unity3D) Shaders – Making your games pretty!

Post-processing effect example

Page 38: Workshop: (Unity3D) Shaders – Making your games pretty!

OnRenderImage

- Important parameters- ‘src’ and ‘dest’ are render targets

- One extremely important function

Page 39: Workshop: (Unity3D) Shaders – Making your games pretty!

Fullscreen Blur

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

Page 40: Workshop: (Unity3D) Shaders – Making your games pretty!

Questions?

Page 41: Workshop: (Unity3D) Shaders – Making your games pretty!

Shameless friend plug

- Special thanks to:- Jonathan Virly for the spider mech

- [email protected] Matthew Racanelli for the textures

- mracanelli.com

Page 42: Workshop: (Unity3D) Shaders – Making your games pretty!

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/

Page 43: Workshop: (Unity3D) Shaders – Making your games pretty!

Thank you!

I enjoy learning through teaching!

@tasostamtasosgamedev.com