CSE 381 Advanced Game Programming

Shading

http://www.cse.ohio-state.edu/~somasund/GRAPHICS/TeapotPhongOUT.jpg

What is Shading?
Calculating how a 3D object should look, taking lighting
into account
Depends on:
mesh data
vertices, colors, textures, etc.

lighting properties
type of light, position of light, etc.

shading algorithm used

How is it done?
basically by running a script on your graphics card

Whats a Shader?
A good definition from Wikipedia:
a program used to determine the final surface
properties of an object or image
this can include arbitrarily complex descriptions of:

light absorption
light diffusion
texture mapping
reflection
refraction
shadowing
surface displacement
post-processing effects

Simpler Shader Definition

A program that can affect:
the position of a vertex
the color of a pixel
or both

Create interesting effects by:

manipulating geometry
manipulating color

Shader Languages
HLSL, GLSL, Cg (C for Graphics)
Compile to Assembly
Shader compilers are on the GPU
Compiling is done at runtime

Shading Languages
Shader programs may be written for different platforms
can operate on GPU

Different platforms use different shading languages, e.g.

High-Level Shading Language (HLSL)
uses C-like code

OpenGL Shading Language (GLSL)

uses C-like code

Nvidia Cg
uses assembly-like code

Pixars RenderMan
the pioneer among shaders

Shader Types
Vertex Shader
Pixel Shader (Fragment Shader in GLSL)
Geometry Shader
Compute Shader

Vertex Shader
Job is to process vertices and send them to pixel
shader
Process?
Transformation & lighting

Lets look at an HLSL example & GLSL example

Shading Techniques
Flat shading
Smooth Shading
Gouraud shading
Phong shading

Additional techniques:
bump mapping
cel shading
and many more

Lets assume we want to render a red ball

Ignore textures for now
How can we shade the ball to make it realistic?

Flat Shading
Assigns a single color to a
polygon
Simple & fast
Color based on:
Material color
the polygon's normal
the position and intensity
of a light source.

Gouraud Shading
invented by Henri Gouraud in 1971
simulates smoothly shaded surfaces
How?
computes vertex colors using normals & lighting
interpolates vertex colors across a polygon's surface
done linearly

fast and resource-conscious

Phong Shading
invented by Bui Tuong Phong
a smooth shading technique
approximates curved-surface
lighting
How?
interpolates the vertex normals
of a polygon across the surface

Most realistic but expensive

Bump Mapping

invented by Jim Blinn

an extension of Phong shading
simulates bumpy or wrinkled surfaces
How?
at each pixel along a surface, slight changes are made to the
normal
these changes are usually stored in a texture map

Cel Shading
also called toon shading
technique of making computer generated graphics
appear to look hand drawn
How?
objects have black outlines (as though done with
pencil)
done via inversing back-face culling with black vertices &
slight translation

only a few shades of each color used for objects

Example of Cel Shading

From The Legend of Zelda: The Wind Talker

Different Effects using Different Shaders

Texture Shading
Textures can be lit as well
weve already seen this

How?
make polygon white & light normally
when laying texture, calculate texel brightness using polygon
colors before texture

We can exert further control over how textures appear

ex: texture blending

Rendering Pipeline
Ordered operations involved in transforming a
scene to a screen
transformations, hiding, lighting, shading, projection

Rendering Options:
Fixed-function pipeline
actually emulated these days

Programmable pipeline

Whats wrong with fixed-function?

Certain graphics algorithms are pre-programmed
into graphics cards (ex: Gouraud shading)
So what?
What if we want to use different algorithms?

Why is the programmable pipeline necessary?

can perform non-standard lighting/shading
can achieve higher quality lighting/shading
do these things on the hardware level

Typical Graphics Pipeline

In the traditional Programmable pipeline, which 2

stages may we control?
vertex processing
pixel processing

Types of Shaders
Vertex Shaders
allows programmer to control transformation &
lighting operations (T&L)

Pixel Shading
the output of a vertex shader provides input to a pixel
shader
allows programmer to ultimately decide final pixel
colors before rasterization

Shader Models
standardized support for shader programs
ex: Microsofts Shader Model 3.0

Possible uses of Vertex Shaders

Procedural Geometry (Isidoro/Gosslin)
cloth simulation, soap bubbles

Advanced Vertex Blending for Skinning and Vertex Morphing

(Gosselin)
tweening

Texture Generation (Riddle/Zecha)

Advanced Keyframe Interpolation
complex facial expression and speech

Particle System Rendering

Real-Time Modifications of the Perspective View
lens effects, underwater effect

Advanced Lighting Models

in cooperation with the pixel shader

Displacement Mapping (Calver)

And whatever will appear at next years SIGGRAPH Conference

Possible Uses of Pixel Shaders

Single pass, per-pixel lighting

True phong shading (Beaudoin/Guardado)
Anisotropic lighting (Isidoro/Brennan)
Non-Photorealistic-Rendering (Card/Mitchell)
Ex: cartoon shading, hatching, gooch lighting, image space techniques

Per-pixel fresnel term (Brennan)

Volumetric effects (Kraus, Hart)
Advanced bump mapping (self-shadowing bump maps)
also known as Horizon Mapping

Procedural textures (Zecha)

Texture perturbation (Isidoro/Riguer)
Bidirectional reflectance distribution functions (Moravnsky)
And whatever will appear at next years SIGGRAPH Conference

Shader Tools
Most modeling tools provide shader support
WYSIWYG use of algorithms
generation of shader code
shader work encapsulated in effects

Ex:
Maya
3D Studio Max,
NVIDIAs Effects Browser, Shader City, & Shader
Studio

Next Time
Shader Examples
GLSL & HLSL

Resources

GameDev.net
http://www.gamedev.net/columns/hardcore/dxshader1/
http://www.gamedev.net/reference/programming/features/celshading/
HowStuffWorks
http://computer.howstuffworks.com/question484.htm
MSDN
http://msdn.microsoft.com/library/default.asp?url=/library/enus/directx9_c/directx/graphics/programmingguide/gettingstarted/architecture.
asp
Wikipedia
http://en.wikipedia.org/wiki/Computer_graphics#Shading
http://en.wikipedia.org/wiki/Cel-shaded_animation