Download GPU Computing - Unity Shaders and General Purpose

Unity Shaders
Vijay Kalivarapu
Overview
๏Graphics pipeline
-
How are things rendered on screen
๏Unity - Materials, Textures, and Shaders
-
Flat shaders
-
Lambert & specular shaders
-
Textures
Introduction – Graphics pipeline
๏Everything is 3D in Computer Graphics
๏A screen and a display window are 2D
๏Large part of a graphics rendering process is about transforming 3D
coordinates into 2D pixels that fit on the screen
๏Process of transforming 3D coordinates to 2D coordinates is
managed by the graphics pipeline
๏So, what is a graphics pipeline?
Introduction - Graphics pipeline
Vertex shader
Shape assembly
Geometry shader
Rasterization
Fragment shader
Testing and blending
Vertex data
Frame Buffer
Display / Projector
Introduction - Graphics pipeline
Vertex shader
Shape assembly
Geometry shader
Rasterization
Fragment shader
Testing and blending
Vertex data
Vertex shader takes x, y, zs
from the object and moves
them to respective 3D positions
Frame Buffer
Introduction - Graphics pipeline
Vertex shader
Shape assembly
Geometry shader
Rasterization
Fragment shader
Testing and blending
Vertex data
Primitive shape assembly
determines whether to draw
points, lines, or triangles
(A triangle in this case)
Frame Buffer
Introduction - Graphics pipeline
Vertex shader
Shape assembly
Geometry shader
Rasterization
Fragment shader
Testing and blending
Vertex data
Frame Buffer
Takes input vertices from
primitives and add additional
vertices to form a different
shape if needed (tessellation)
Introduction - Graphics pipeline
Vertex shader
Shape assembly
Geometry shader
Rasterization
Fragment shader
Testing and blending
Vertex data
Frame Buffer
Rasterization maps these
primitives to corresponding
pixels on the final screen
resulting in fragments
Introduction - Graphics pipeline
Vertex shader
Shape assembly
Geometry shader
Rasterization
Fragment shader
Testing and blending
Vertex data
Frame Buffer
Fragment shader calculates
the final color of the pixel
Introduction - Graphics pipeline
Vertex shader
Shape assembly
Geometry shader
Rasterization
Fragment shader
Testing and blending
Vertex data
Frame Buffer
Alpha testing and blending
determine if a pixel color is
obscured by another or to
blend for transparencies
Introduction - Graphics pipeline
Vertex shader
Shape assembly
Geometry shader
Rasterization
Fragment shader
Testing and blending
Vertex data
Frame Buffer
Portion of memory that
holds the bitmap to be
rendered on a video display
Fixed Function Graphics pipeline
Vertex shader
Shape assembly
Geometry shader
Rasterization
Fragment shader
Testing and blending
Vertex data
Until early 2000s, Computer Graphics was fixed functional
Operations in the pipeline were not configurable
You could say ‘make the fog dark gray’ or change a few
parameters
Functions themselves remained and inflexible
Frame Buffer
Display / Projector
Programmable Graphics pipeline
Vertex shader
Shape assembly
Geometry shader
Rasterization
Fragment shader
Testing and blending
Vertex data
Programmable pipeline arrived around 2002/2003!
Lets you write programs (shaders) for each vertex or each pixel
(fragment) that execute on a GPU
Frame Buffer
Display / Projector
Programmable Graphics pipeline
๏What is happening in the vertex and fragment shading stages?
Essentially Math operations to
-
move vertices around
-
calculate pixel color values (R, G, B, A)
๏Why GPUs over CPUs?
Digging holes
๏https://www.youtube.com/watch?v=bun_WSB9iRw&index=4&list=P
LAwxTw4SYaPm0z11jGTXRF7RuEEAgsIwH
CPU vs GPU implementation differences
CPU Implementation
for (i=1; i<1000; i++)
F[i] = x[i]*x[i] + y[i]*y[i];
GPU Implementation
//Executed on 1000 GPU threads in parallel
//id: identifying array index on GPU
F[id] = x[id]*x[id] + y[id]*y[id];
Introduction - Unity Shaders
๏Textures, Materials, and Shaders are Unity’s workhorses
Textures
๏Improves realism at a very low computational cost
๏Flexible and can be added to the base color of an object
๏Parametric - stretching, tiling possible with the drag of a slider
๏Typically a 2D bitmap image applied on a 2D or 3D object
Textures
๏Realism further improved using
-
Bump maps, Normal maps, and Displacement maps
-
http://blog.digitaltutors.com/bump-normal-and-displacement-maps/
Textures - Bump maps
๏Creates the illusion of raised detail
๏No additional resolution added to geometry
๏Generally grayscale images of 8-bit color info
๏Tells the renderer (e.g., Unity, Maya, etc) - up
or down
๏Uses - pores, wrinkles on skin
๏Visual effect breaks easily when viewed from
a wrong angle
Textures - Normal maps
๏A better flavor of bump map
๏Fake detail and no additional resolution added to
geometry
๏Uses RGBs that correspond to X, Y, and Z-axis in 3D
space
๏Tells the renderer (e.g., Unity, Maya, etc) - how surface
+
normals are oriented on each polygon
+
=
๏Surface normal orientation determines polygon’s shading
๏Generally purple and bluish - tangent space normal map
๏Most graphics hardware (even mobile devices) support
normal maps
Textures - Create normal maps
๏You can create normal maps in photo
applications (e.g., Adobe Photoshop)
๏Write your own code, or
๏http://cpetry.github.io/NormalMap-Online/
-
Activity: Download a sample wood texture
and create a normal map
Textures - Displacement maps
๏Best for low-resolution meshes
๏Geometry physically displaced
๏Mesh must be subdivided (tessellated)
๏For great results, combine bump, normal, and
displacement maps
๏Computationally very expensive, so use
sparingly
-
Loss of real-time interaction with high detail
geometry
Materials – Using inbuilt shaders
๏Definitions of how a surface should be rendered
-
E.g., reflectiveness, smoothness, metallic, etc
-
Includes references to textures, tiling, color tints, etc
๏Unity
-
Lets you create a new material with properties, or
-
Creates a default material for you when a texture is applied to an
object
-
Material created has the same name as the texture
-
In both cases, a default ‘Standard Shader’ will also be applied, that
can be customized or replaced by your own ‘Shader’
-
Material properties are managed by a ‘Shader’
Materials – Using inbuilt shaders
๏Customize material properties to add
-
Textures (using Albedo option)
-
Metallic properties
-
Normal maps, etc
๏Drag and drop material on the object (e.g.,
Capsule)
๏Activity - Try it!
-
Add a texture and its normal map to a material and
apply to a capsule!
Shaders - General flow
Shader
Material + texture
Surface
Break!
Shaders
๏Hands on
๏Write a simple flat shader
Shaders - Requirements
๏Skills
Some programming knowledge
-
-
-
-
๏Equipment
PC with a decent modern
graphics processing unit
(GPU)
-
Functions, variables, classes
Basic understanding of task
parallelism
-
Basic Algebra and
Trigonometry
Patience… lots of it
-
Dedicated GPU not
necessary but will be greatly
helpful
Recent version of Unity
installed
Shaders - Languages
๏ShaderLab
-
Core Unity shader language
-
Required in all shaders
-
Very basic language, fixed functional and works on most old hardware
๏Cg
-
Shader language developed by Nvidia
-
Easy to learn and powerful language
-
Other advantages (e.g., Cg shader written in Unity can be used in Maya)
๏Unity supports other languages - GLSL, HLSL
Shaders - Types
๏Surface shaders
-
Easy shaders, require little code
-
Does a lot of work in the background
-
Typically, expensive to render
๏Vertex/Fragment Shaders
-
‘From Scratch’ shader, significant code
-
More complex, but highly customizable
-
Takes advantage of GPU programmability
๏Fixed function
-
For old devices
Shaders - Resources
๏Introductory ‘noob to pro series’ from unitycookie.com
-
https://cgcookie.com/archive/noob-to-pro-shader-writing-for-unity-4beginner/
๏Videos
-
https://www.youtube.com/watch?v=zJxxXjoZE30&list=PLV4HCa5XqFT
02gZOZ_Jb_A66wqDhZMCkN
๏Material for Shaders in these slides adopted from above
Shaders
๏Unity Standard Shader
-
Built-in, compiles into fixed function graphics
pipeline
-
Comprehensive set of features
-
Supports materials - stone, wood, glass, metal etc
๏Custom shaders such as Cg, HLSL creates
more control
-
Can take advantage of vertex and fragment
shaders
Parts of a shader
๏Part 1: Interface
-
Connects shader to Unity
-
Properties box to change the shader
properties
๏Part 2: Vertex Program
-
-
-
๏Part 3: Fragment Program
Works with your mesh (or geometry) on a
per-vertex level
-
Works with your mesh on a per-fragment (perpixel) level
Allows vertex deformation within the
shader
-
Executes per pixel per frame
-
Output of a vertex program is the input to a
fragment program
Executes per vertex per frame
Shaders - overall structure
Shader “Name” {}
Properties {}
SubShader {}
Pass {}
CGPROGRAM … ENDCG
Defining Variables
Structs
Vertex Program
Fragment Program
Fallback
Shaders - Name & Properties
Shader “Name” {}
//Identifying name
Properties {}
//Color pickers, sliders
Shaders - Properties
๏Properties allow us to interface with the shader to change values
๏Updating the property on the material changes the corresponding
value within the shader
Shaders - SubShader and Passes
SubShader {}
//Entirety of shader
//You can have multiple
shaders, one for PC, XBox,
iPhone, etc
Pass {}
//Render passes, e.g.,
//Light 1 in 1st pass
//Light 2 in 2nd pass, etc
Shaders - Language scope and variables
CGPROGRAM … ENDCG
//Stop Shaderlab and use
Cg language
Variables
//For Cg to read
properties, variables must
be defined
Shaders - Variables
๏Variables must be defined so the shader can
access and change them
๏‘Uniform’ keyword is used to define initial
values
-
Not required, but a good habit
๏float4 is a four component variable
-
E.g., _ColorTint.r, _ColorTint.g, _ColorTint.b,
_ColorTint.a
Shaders - Variables
๏Float
๏Fixed
-
Floating point number
-
+/-2.0 range | 1/256th precision
-
Most expensive to render
-
Most optimized
๏Half
-
-
+/- 60,000 range | 3.3 decimal
precision
Much more efficient than float
We will stick to floats for now
Well optimized code can take advantage
of half and fixed type variables
Shaders
Structs
//Similar to classes with
pre-defined variables
//Handles communication
between Unity to Vertex
program, and Vertex to
fragment program
Shaders - Structs
๏Vertex and fragment functions talk to each other using
structs
-
Like base class for functions
๏Assign special operators called ‘Semantics’ to variables
in structs
-
Contain info like normals, vertex position and texture
coordinates
-
Vertex function can write to these semantics to change
geometry or as a temporary global variable so they can be
accessed in the fragment shader
Shaders - Structs
๏We use ‘vertexInput’ struct to take
vertex data from the object and pass it to
the vertex function
๏We use ‘vertexOutput’ to write the data
in the vertex function so we can pass it to
the fragment function
Shaders - Vertex Program
๏Vertex program is executed once per
vertex in an object per frame
๏We use vertexInput struct as a base
๏We write to vertexOutput
๏When done, return vertexOutput for use in
the fragment shader
Shaders - Fragment Program
๏Fragment program is executed once per pixel per
frame
๏Also called ‘pixel shader’
๏We use vertexOutput struct as a base
๏When we are done, we return a final output color
๏Be careful not to overload the fragment program
-
Can quickly destroy performance with heavy code
Shaders
Fallback
//If your shader doesn’t
work, it will use a
default Diffuse or
specular implementation of
Unity with the graphics
card
Activity - Flat Shaders
๏Create a new shader file in the Unity project you were previously
working on
-
Right click in Project >> Create >> Shader >> Standard Surface Shader
-
Give it a name and open in Mono-develop by double clicking it
-
Delete all content in the file
๏Type in along with me to see how flat shaders work
Shaders - Lambertian Shading (diffuse lighting)
๏Soft lighting with no specular (shininess) component
๏Lambertian reflectance is a property that defines a ‘matte’ surface (e.g.,
paper, unfinished wood, etc)
๏This model takes light direction and the surface orientation to calculate the
amount of light reflected into all directions
๏Lambertian reflectance is a model for diffuse reflection
๏Light reflected equally in all directions, so light position irrelevant, only light
direction is relevant
Resources - Lambertian Shading (diffuse lighting)
๏https://en.wikipedia.org/wiki/Lambertian_reflectance
๏http://www.conitec.net/shaders/shader_work2.htm
๏http://http.developer.nvidia.com/CgTutorial/cg_tutorial_chapter05.ht
ml
๏http://www.lighthouse3d.com/tutorials/glsl-12-tutorial/directionallights-i/
Shaders - Lambertian Shading
๏Following vectors typically used for lighting calculations
-
Light Direction (L)
-
View Direction (V)
-
Normal Direction (N)
-
Reflected Direction (R)
-
Halfway Vector (H): Half-way between view and Light direction
V
R
N H
L
๏Lambert shading a function of L and N, specifically their dot product
๏What is a dot product?
Dot Product
๏Length of the projection of a vector on another vector
๏The dot product is a very common function in Lighting
๏Returns a value of -1 to +1 as the first vector gets closer to the
second
๏Dot product of two vectors abc and def
-
dot(abc, def) = ad + be + cf
Light Direction
๏Getting the light direction is easy
-
Use built-in variable _WorldSpaceLightPos0
๏It’s a special float4 that handles any light
๏For point lights, _WorldSpaceLightPos0.xyz is the location
๏For direction lights, _WorldSpaceLightPos0.xyz is the rotation
-
_WorldSpaceLightPos0.w is 1 for a directional and 0 for a point light
Tip - Shaderlab Built-in variables
๏More built-in variables can be found here:
https://docs.unity3d.com/Manual/SL-UnityShaderVariables.html
๏Examples
-
unity_ObjectToWorld, unity_WorldToObject
๏It is ok if you feel lost. In time as you practice, you will learn more
and their significance
Lambert Model
๏Diffuse Reflection (a.k.a. Lambertian Reflection)
-
dot product of (Light Direction and Normal direction for a surface)
-
Essentially calculating the magnitude of projection of light direction vector
over the normal direction to the surface
๏Combine it with light color and the material color
๏DiffuseReflection = lightColor * MaterialColor *
dot(normal, lightdirection)
Specular Model
๏Specular Reflection
-
Highlights the point of light that follows ½ way between view and light
direction
๏SpecularReflection = dot(lightdirection,
normal)*pow(dot(reflect(-lightdirection, normal),
viewdirection), shininess)
๏Combine it with specular color and the light color and add it to
Lambert model
Activity
๏Write a simple Lambert using Flat shader as a template apply it to a Unity
geometry primitive, capsule
๏Write a simple Specular shader using Lambert shader as the template
and apply it to another capsule
๏Write a texture shader using the above shaders and apply it to another
capsule
๏Fill in the specular reflection blanks within the given normal shader and
apply it to a capsule so it has texture, bumpiness, and specular reflection