ShadersChris PriceMike Johnson

Overview

● Introduction/review of shaders● Types of shaders● Applications of shaders● Shaders in Unity● Creating a Custom Shader in Unity● Shaders in XNA

What are shaders?

● Programs used for determining light/dark areas of an image, post-processing effects

● Executed in the GPU● Provide quite a bit of flexibility● Can greatly improve quality of rendered

images● Popular shading languages: GLSL

(OpenGL), HLSL (Direct3D)

Types of shaders

● Vertex shaders○ Passed one vertex at a time○ Primarily responsible for transforming vertex

coordinates to raster space○ Can also determine lighting and color properties of a

vertex (not typically the final values though)○ Output is passed along to geometry/fragment

shaders

Types of shaders

● Fragment shaders○ Also known as pixel shaders○ Last shader executed in the graphics rendering

pipeline○ Responsible for finding final color of each pixel

■ Material properties■ Textures■ Normal/bump mapping

Types of shaders

● Geometry shaders○ Fairly recent (OpenGL 3.2, Direct3D 10)○ Executed after vertex shader, before fragment

shader○ Given a primitive as input (vertices, possible

adjacency data)○ Have the capability of producing more primitives -

output is >=0 new primitives

A review of the graphics rendering pipeline

● In general:○ Vertex shader○ Geometry shader○ Clipping○ Rasterization○ Fragment shader○ Write to frame buffer

Applications of shaders

● Phong/Gouraud shading○ Both involve interpolation of normal data across

vertices○ Largely improves image quality at small cost

Source: http://diccan.com/Images/gouraud_phong_flat.jpg

Applications of shaders

● Normal/bump mapping○ Uses a texture to determine a new normal at a

vertex○ Another case of

improving low-poly models at little cost

Source: http://www.mayamax3d.net/pict/slovnik/bumpmapping.jpg

Applications of shaders

Normal map texture:

Applications of shaders

● Shadow mapping○ Involves rendering the

scene to the depth buffer from the light's point of view

○ A nice improvement without the computational cost of ray tracing

Applications of shaders

● Cel/toon shading○ Aesthetic effect○ Outgoing pixel value is determined from a smaller

set of possible colors by whether or not the reflectance value meets a certain threshold

○ Outline can be drawn by rendering back faces with thicker lines

Applications of shaders

● Real time ray tracing○ Recursively casts rays

from each ray-object collision

○ Great for reflections, soft shadows

○ Performance highly dependent on GPU power

Source: http://www.cs.technion.ac.il/~cs234326/projects/GLSLRayTracer/GLSLRayTracerSample.jpg

Applications of shaders

● Shadow extrusion○ Shadows represented by rays beginning at the given

vertex

Source: http://en.wikipedia.org/wiki/Shadow_volume

Applications of shaders

(This was done using Unity shaders)

Source: http://forum.unity3d.com/threads/9452-Shadow-volumes-in-Unity-on-the-wiki

Applications of shaders

● Fur simulation○ Popular method: shells and fins

■ "Shells" extrude the mesh along the normal■ "Fins" extrude the mesh along edges■ This method relies on

textures, alpha blending

Source: http://wwwcg.in.tum.de/typo3temp/pics/9cb18bdb3d.png

Applications of shaders

A nice visualization of shells and fins

Source: http://www.gameartisans.org/forums/attachment.php?attachmentid=14282&d=1236228833&stc=1

Applications of shaders

● Overall optimization○ Allowing the GPU to handle more calculations saves

CPU○ Allowing the GPU to procedurally generate primitives

means less primitives stored in memory

Shaders in Unity

● All rendering in Unity is done with Shaders○ Unity contains over 80 built-in shaders○ Documented in the Built-in Shader Guide○ Can extend this set by making custom shaders

● Shaders in Unity can be written in three ways○ Surface Shaders

■ Do not use if you are not doing anything with lights

○ Vertex and Fragment Shaders○ Fixed Function Shaders

Shaders in Unity - DownloadWebsite: http://download-cdn.unity3d.com/unity/download/archive

Using Shaders in Unity

● Shaders in Unity are used through Materials○ Combine shader code with

parameters (e.g. textures)● Material Properties will

appear in the Inspector● Single shader can be

used in Multiple Materials

Normal Shader Family in Unity

● Vertex Lit○ One Base texture○ No Alpha Channel Required

● Diffuse○ One Base Texture○ No Alpha Channel Required

● Specular○ One Base Texture○ Alpha Channel for Specular

Map

Normal Shader Family in Unity cont.

● Normal Mapped○ One Base texture○ No Alpha Channel Required○ One Normal Map

● Normal Mapped Specular○ One Base Texture○ Alpha Channel for Specular

Map○ One Normal Map

● Parallax○ Alpha Channel for Specular○ One Normal Map○ Height Texture

Normal Shader Family in Unity cont.

● Parallax Specular○ One Base texture w/ alpha○ One Normal Map○ Height Texture

● Decal○ One Base Texture○ No Alpha Channel Required○ One Decal texture

● Diffuse Detail○ One Base Texture○ No Alpha Texture Required○ One Detail grayscale texture

Writing Shaders in Unity

ShaderLab - organize shader structure

Image Reference: http://docs.unity3d.com/Documentation/Components/SL-Reference.html

Creating A Custom Shader in Unity

● In Unity there is already a Transparent Cutout Diffuse Shader

○ Doesn't have double sided capabilities

● Create Plane Game Object

Creating A Custom Shader in Unity

● Create New Material● Give it a name● Assign Transparent

Cutout Diffuse Shader

Creating A Custom Shader in Unity

● Lock in your texture● Apply Material to object● Back side will be

completely transparent● PROBLEM

Creating A Custom Shader in Unity

● Create shader● Give it a name● Want to use capabilities

of Transparent Cutout Diffuse shader but want to modify it

○ Can't modify in current state!

Creating A Custom Shader in Unity

Creating A Custom Shader in Unity

● Double-click on Double Sided shader to open it

● Replace code inside Double Sided with the code from Transparent Cutoff Diffuse

● Change Name

Creating A Custom Shader in Unity

● Shader should be ready to go!

● Grab your material● Switch the shader to

Custom Double Sided

Creating A Custom Shader in Unity

● When you Rotate around object it is still transparent on the back side

● Want to make object it double-sided○ Really Simple

Creating A Custom Shader in Unity

● Go into SubShader● Want to turn culling off

Creating A Custom Shader in Unity

● Just by editing one line○ When you rotate around

the backside is no longer transparent

● Great for objects that you need to see both sides of the plane.

○ Examples: capes, fur, hair, etc.

Shaders in XNA

● Written in HLSL● Represented by Effects● In code:

// declarationEffect effect;// loadingeffect = Content.Load<Effect>("filename");// setting parameterseffect.Parameters["parameter"].SetValue(newValue); // drawingDrawModelWithEffect(model, world, view, projection);

Sources: http://rbwhitaker.wikidot.com/first-shader, http://rbwhitaker.wikidot.com/shaders-in-xna

Questions?