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

CSE 381 – Advanced Game ProgrammingShading

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

What’s 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

– Pixar’s 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

• Let’s 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

Let’s 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– we’ve 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

What’s 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: Microsoft’s 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 year’s 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 (Moravánsky)• And whatever will appear at next year’s 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,– NVIDIA’s 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/en-us/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