Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview •...

56
Shader In Unity Tim Cooper @stramit

Transcript of Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview •...

Page 1: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Shader In UnityTim Cooper@stramit

Page 2: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Who Am I?

• Developer at Unity

• Used to make games!

• Bioshock 1 / 2

• Responsible for:

• Editor features

• Graphics features

Page 3: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Topics• Overview

• How do shaders work?• Vertex / Fragment

• Shaders in Unity• Render pipeline

• Material Usability• Making them nice for artists

Page 4: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Overview• Everything is rendered with shaders!

• Need to know HOW things get onto the screen

• What happens to verts / pixels?

• How does unity wrap all of this for you?

• How can we expose this to artists?

Page 5: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

What is a Vertex• Data containing

• Position

• Color

• Normal

• Texture information

• Other (usage specific)

Page 6: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

A Basic Render Pipeline• Start with a mesh

• Made up of vertices

• Vertices live in ‘local space’

Page 7: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

A Basic Render Pipeline• Vertex shader

• Translate vertices

• Output verts in projection space

• Do per vertex calculations

• Pass data to pixel shader

Page 8: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

A Basic Render Pipeline• Pixel shader

• Shade each triangle

Page 9: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

A Basic Render Pipeline• Vertex interpolation

• Anything output from the vertex shader will have it’s values interpolated between vertices.

• Each vertex outputs a different color

• Color is interpolated over the triangle

Page 10: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

A Basic Render Pipeline• Basic Lighting

• Uses a light direction and surface normal

• No specular

• Hard coded light direction

• Lambert Model

Page 11: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

A Basic Render Pipeline• Texturing

• Need extra vertex data

• Maps each vertex texel in a texture

• In the range 0,1 (normalized)

• Each UV is interpolated

Page 12: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

A Basic Render Pipeline• Blending

• How do output pixels from the pixel shader get written to the screen?

• They can

• Overwrite what is there

• Blend with what is there

• No nothing to what is here

Page 13: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

A Basic Render Pipeline• Blending

• Syntax:

• Source: the value coming out of the pixel shader

• Destination: the existing value in the buffer

• Blend function format:

• Blend (srcmode) (dstmode)

• Blend (srcColor * srcMode) + (dstColor * dstMode)

Page 14: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

A Basic Render Pipeline• Blending

• Overwrite what is there:

• Blend One Zero

• Output = One * srcColor + Zero * dstColor

Page 15: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

A Basic Render Pipeline• Blending

• Blend with what is there:

• Alpha blending

• Blend SrcAlpha OneMinusSrcAlpha

• Output = output.a * srcColor + (1 - output.a) * dstColor

• 2x Multiplicative

• Blend DstColor SrcColor

• Output = DstColor * SrcColor + SrcColor * DstColor

Page 16: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

A Basic Render Pipeline• Blending

• Available blend flags

• One, Zero, SrcColor, SrcAlpha, DstColor, DstAlpha, OneMinusSrcColor, OneMinusSrcAlpha, OneMinusDstColor, OneMinusDstAlpha

• Some hardware also supports separable alpha blending (alpha is blended differently from RGB).

• Blend SrcFactor DstFactor, SrcFactorA DstFactorA

Page 17: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

A Basic Render Pipeline• Multiple Passes

• Most effects require multiple passes

• Multiple light rendering

• Doing multiple things

• But how do passes relate?

Page 18: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• So now we know a bit about how rendering works...

• How can Unity help?

Page 19: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Unity provides a framework

• Automatic calculation of lights

• Automatic calculation of camera data

• Built in multi pass rendering techniques

• ‘Surface Shader’ syntax (does heavy lifting)

• Gets data from the scene into the rendering pipeline

• Provides the glue to hook everything together

Page 20: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Automatic calculation

• Unity provides a lot of the glue code for your shaders

• Matrices for spacial conversion (object2world, projection)

• Matrices for texture scaling and offset

• Requested vertex data (normals, color, uv)

• Light locations (depending on renderer configuration)

• Camera location

• Lots of other stuff

Page 21: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Helper functions:

• UnityCG.cginc - lots of helper functions

• Spacial conversions

• Normal map helpers

• Shadowing code

• Image space calculation

Page 22: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Helper functions:

• Lighting.cginc - lighting helper functions

• Lambert lighting model

• Blinn-Phone lighting model

• Forward / Deferred configuration

Page 23: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Rendering Paths - Are different ways to render objects

• Why do we need more than one?

• Different content

• Different hardware

• Unity Supports

• Vertex Lit

• Forward Rendering

• Deferred Lighting (Light Prepass)

Page 24: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Vertex Lit Path

• Old school rendering path

• Common on DX7 / DX8 games

• Lighting is calculated per vertex

• Interpolated over the triangle

Page 25: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Vertex Lit Path - In Unity

• Should probably be called ‘the simple path’

• This is because you don't really have to do vertex lighting

• Default shaders that use this path are vertex lit

• You can write your own shaders here that do per-pixel lighting

• Supports lightmaps

• No shadows, light cookies, or SH

• Fast on the CPU

Page 26: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Vertex Lit Path - In Unity

• 4 Lights per pass

• sequential

• sorted from brightest to dimmest

• directional / point lights only

Page 27: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Vertex Lit Path - In Unity

• Separate passes to handle

• Realtime lit objects

• Tags { "LightMode" = "Vertex" }

• Lightmapped objects

• Tags { "LightMode" = "VertexLM" }

• Tags { "LightMode" = "VertexLMRGBM" }

• You will need to tag your passes to get the expected shader data

Page 28: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Vertex Lit Path - In Unity

• Good for:

• Fast lightmapping only shaders

• Custom lighting shaders, e.g. that handle 2 light only

• Mobile / barebones shaders

Page 29: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Forward Rendering Path

• Your traditional rendering path

• Rendering an object performs full shading on it right away

• More passes for every (per pixel) light hitting the object

Page 30: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Forward Rendering Path - The Good

• Arbitrary lighting models

• Unlit surfaces

Page 31: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Forward Rendering Path - The Bad

• Not suitable for many lights

• We try to LOD away the less important lights

• Additional limitations to make it run fast

• Shadows only for directional lights by default

Page 32: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline

• Less important lights calculated in an approximate manner

• per-vertex

• projected onto a SH probe

Page 33: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Forward Rendering Path

• Base pass { "LightMode" = "ForwardBase" }

• Are there lightmaps?

• Lightmaps, ambient (in the lightmap)

• No lightmaps?

• Directional light, ambient, 4 point vertex lights, SH

Page 34: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Forward Rendering Path

• Additive pass { "LightMode" = "ForwardAdd" }

• All the other lights, one pass per light

• directional, point or spot

• Simple, as it doesn’t need to care about lightmaps, vertex lights, SH, blending realtime shadows with lightmaps, etc.

• But more shader variants due to more light types

Page 35: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Forward Rendering Path

• Important lights are normally rendered with additive pass

• If there is no add pass they are passed to the (base) shader as vertex lights (point or spot) or in SH (directional)

• When the object is lightmapped those lights are ignored, this is a known issue

Page 36: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Deferred Rendering Path

• Modern approach for real-time lighting heavy scenes

• Defers light calculation to decouple lighting complexity from scene complexity

• Render objects into G-buffer first

• Calculate lighting looking just at the G-buffer

• Render objects a second time, this time with albedo and modulate with light from the light buffer

Page 37: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Deferred Rendering Path

• Pass 1, generate the G-buffer

• { "LightMode" = "PrePassBase" }

• G-buffer: normals and specular (RGBA) + depth

Page 38: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Deferred Rendering Path

• Lighting Passes: Calculate raw lighting using G-Buffer

• Done by projecting shapes into the G-Buffer with lighting information.

• Point Light

Page 39: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Deferred Rendering Path

• Lighting Passes: Calculate raw lighting using G-Buffer

• Done by projecting shapes into the G-Buffer with lighting information.

• Spot Light

Page 40: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Deferred Rendering Path

• Final Pass

• Rerender each object using the lighting buffer calculation for illumination values.

• { "LightMode" = "PrePassFinal" }

Page 41: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Deferred Rendering Path

• The Good

• Tons of dynamic lights!

• Cheap (screen space cost)

• Small lights

• Partially occluded lights

Page 42: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Deferred Rendering Path

• The Bad

• Have to render things twice (up front)

• Bandwidth (uses multiple frame buffers)

• Very limited lighting model flexibility

• Shadow casting still needs to be calculated

Page 43: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Deferred Rendering Path

• The Ugly

• Doesn’t handle transparent objects - need to render them afterwards, in the ‘forward’ modes, possibly in multiple passes

• Same when using shaders without ‘PrePassBase’ and ‘PrePassFinal’

• Unity handles that, of course

Page 44: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

The Unity Render Pipeline• Putting this all together

• Unity exposes a few different rendering methods to you.

• You can use or not use them, depending on what you want to do

• Most games use a combination of techniques

• Unique look

• Performance

Page 45: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Surface Shaders• Lots of talk about different passes and tags

• There has to be a simpler way!

• Surface Shaders!

Page 46: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Surface Shaders• Describe a surface

• Instead of defining• Light interaction

• You define Surface Properties• Emission

• Albedo

• Alpha

Page 47: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Surface Shaders• Unity generates all the ‘boring’ passes and lighting

model code.

• Surface Shader Examples

Page 48: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Surface Shaders• Basic Example

• Properties

• Textures

• Normal Maps

• Emission

• Specular

Page 49: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Material Keywords• Compile variants of your shader

• To do different things based on keywords

• Each line declares a set of defines

• Only one per line can be active at a time

• Make sure you enable one, otherwise Unity will pick one for you

Page 50: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Material Keywords• #pragma multi_compile AAA BBB

• #pragma multi_compile CCC

• two variants • AAA CCC

• BBB CCC

Page 51: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Material Keywords• #pragma multi_compile AAA BBB

• #pragma multi_compile CCC DDD

• Four variants • AAA CCC

• BBB CCC

• AAA DDD

• BBB DDD

Page 52: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Material Keywords• Example!

Page 53: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Material Keywords• Applications

• Switch the shaders in your scene via a keyword • completely change the look of your game

• Per material overrides

• One shader for: diffuse, normal maps, etc.

Page 54: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Material Property Drawers• You can write custom editors for shaders...

• But sometimes it’s too much

• Instead write property drawers!• New in Unity 4.3!

Page 55: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Material Property Drawers• Example!

Page 56: Shader In Unity - IGDA Denmarkigda.dk/wp-content/uploads/2013/10/Shaders.pdf · Overview • Everything is rendered with shaders! • Need to know HOW things get onto the screen •

Questions?@stramit