![Page 1: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/1.jpg)
http://www.cse.ohio-state.edu/~somasund/GRAPHICS/TeapotPhongOUT.jpg
CSE 381 – Advanced Game ProgrammingShading
![Page 2: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/2.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
![Page 3: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/3.jpg)
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
![Page 4: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/4.jpg)
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
![Page 5: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/5.jpg)
Shader Languages
• HLSL, GLSL, Cg (C for Graphics)
• Compile to Assembly
• Shader compilers are on the GPU
• Compiling is done at runtime
![Page 6: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/6.jpg)
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
![Page 7: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/7.jpg)
Shader Types
• Vertex Shader
• Pixel Shader (Fragment Shader in GLSL)
• Geometry Shader
• Compute Shader
![Page 8: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/8.jpg)
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
![Page 9: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/9.jpg)
Shading Techniques
• Flat shading
• Smooth Shading– Gouraud shading– Phong shading
• Additional techniques:– bump mapping– cel shading– and many more
![Page 10: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/10.jpg)
Let’s assume we want to render a red ball
• Ignore textures for now
• How can we shade the ball to make it realistic?
![Page 11: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/11.jpg)
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.
![Page 12: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/12.jpg)
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
![Page 13: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/13.jpg)
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
![Page 14: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/14.jpg)
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
![Page 15: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/15.jpg)
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
![Page 16: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/16.jpg)
Example of Cel Shading
• From The Legend of Zelda: The Wind Talker
![Page 18: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/18.jpg)
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
![Page 19: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/19.jpg)
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
![Page 20: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/20.jpg)
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
![Page 21: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/21.jpg)
Typical Graphics Pipeline
• In the traditional Programmable pipeline, which 2 stages may we control?– vertex processing– pixel processing
![Page 22: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/22.jpg)
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
![Page 23: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/23.jpg)
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
![Page 24: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/24.jpg)
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
![Page 25: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/25.jpg)
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
![Page 26: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/26.jpg)
Next Time
• Shader Examples
• GLSL & HLSL
![Page 27: Http://somasund/GRAPHICS/TeapotPhongOUT.jpg CSE 381 – Advanced Game Programming Shading](https://reader033.vdocuments.us/reader033/viewer/2022052913/56649d6f5503460f94a512b9/html5/thumbnails/27.jpg)
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