Shading Techniques for Interactive Computer Graphics

(1)

Lighting

and

Shading

(2)

Interactive Computer Graphics Chapter 3 - 2

Overview

 Local and global illumination

 Phong reflectance model (local illumination)

 Flat, Gouraud, and Phong

 Shading on a polygonal mesh

 Surface subdivisions

 Shading in OpenGL

 WebGL lighting demo

(3)

(4)

Need for shading

 How do you make something look 3D?

 Shading that is

appropriate for the

lighting is the primary cue to 3D appearance

 [What are some other cues?]

(5)

Illumination models

 General approach:

 model the world

 simulate physics

 Global illumination models (ray tracing, radiosity) determine shading by bouncing

light around an entire environment (too slow for interactive graphics, usually [1] [2])

 Local illumination models consider only the surface, light direction, and viewing direction

(6)

(7)

Local illumination

 To make lighting fast, we will initially restrict our attention to:

 Light source, one surface, and viewer (ignore inter-object reflections, shadows)

 Ambient, diffuse, and specular reflection (ignore transparency, refraction, reflection, …)

(8)

(9)

Light sources

 In general, a light source is a rather

complicated thing. It can emit different amounts of light for each

 Location (x, y, z)

 Direction (, )

 Wavelength ()

 Illumination function:

I(x, y, z, , , )

 Examples: ambient, point, area, spot,

distant, …

(10)

Colored lights

 Intensity of emitted light can also be a function of wavelength

 We usually model as I = [I_r, I_g, I_b] components

 Some experiments have been done with a whole spectrum of color values, giving more realistic results in some cases

(11)

Ambient light

 Intensity doesn’t vary with x, y, z, , 

 I = [I_ar, I_ag, I_ab]

(12)

Point lights

 Point lights have a location (so farther objects receive less light) but are not directional

 I(p0) = [Ir(p0), Ib(p0), Ig(p0)]

 How would you compute the illumination at point p?

 Illumination proportional to inverse square of distance

 I(p, p₀) =

(1/d²) [I_r(p₀), I_b(p₀), I_g(p₀)]

(13)

Limitations of point lights

 Usually result in artificially high-contrast images

 Can generate umbra (full shadow) but not

penumbra (partial shadow)

 Area lights generate softer shadows, but are usually

used only in non-interactive graphics (e.g.

raytracing or radiosity)

(14)

Distant (directional) lights

 Like point lights, but

 Without attenuation based on the distance

 Without difference in direction (parallel rays)

 Location of light source becomes [x, y, z, 0]; no attenuation

 More efficient to compute than point sources

(15)

Spotlights

 Directional, i.e. light is emitted in a narrow range of angles, 

 More realistic spotlights would model a gradual fall-off of light

 E.g. cos^e 

= (s • l)^e if s is direction of source, l direction to

source, both unit vectors

(16)

Illumination and shading

 How do these light sources affect brightness of a surface point?

 Most commonly used model for interactive graphics: Phong Illumination Model

 Involves terms:

 Ambient

 Diffuse

 Specular

 It is a (simplified) model of the physics of reflection

(17)

Vectors used by Phong model

 The directions used by the phong model

 n: surface outward normal

 v: direction to viewer

 l: direction to light source

 r: reflection direction [r = 2 (l • n) n – l]

 Since these are directions, they are unit vectors.

(18)

Ambient term of Phong model

 An object has an ambient reflectivity coefficient, ka

 A light source gives off a certain amount of ambient light, L_a

 Total ambient illumination:

I_a = k_a L_a

 (For colored light, we repeat this

computation for R, G, and B ambient light values and reflectivity coefficients)

(19)

(20)

Diffuse term

 A perfectly diffuse reflector is so rough that it scatters light equally in all directions

 But note that when the

light comes in at an angle, the same energy is spread out over larger area

 Such surfaces are called Lambertian surfaces

(obeying Lambert’s Law)

(21)

Diffuse shading

 At noon, illum. is 1

 As the angle  (u in figure) decreases, illumination goes to zero

 Illumination is

proportional to cos() (Lambert’s law)

 cos() = l • n

 I_d = k_d l • n L_d

(22)

(23)

Specular Term

 Specular term adds highlights in the reflection direction

 Note that the smoother and

shinier the object, the tigher and brighter the highlight

 Highlight power falls as viewer v moves away from reflection dir, r. (cos  = v • r)

 Modeled as cos^ ,  is

shininess coefficient (1..200)

 I_s = k_s L_s (r • v)^

(24)

(25)

Phong illumination model

 Phong illumination model:

I = Ambient + Diffuse + Specular

= I_a + I_d + I_s

= k_a L_a + k_dL_d l • n + k_s L_s (r • v)^

 May add light attenuation term

1/(a+bd+cd²) ( k_a L_a + k_d l • n L_d) + k_s L_s (r • v)^

 Parameters needed:

 Light: L_a, L_d, L_s for each light

 Surface: k_a, k_d, k_s, 

 Repeat for each color component, light source

 How hard to calculate?

(26)

Polygon shading

 How do you use the Phong Illumination Model to render an object with shading?

 Consider a polygonal sphere approximation

 How do you find the normals to the faces?

 Shade a face with a constant color?

glShadeModel(GL_FLAT);

 Called flat shading or Constant shading

 How much computation would this require

 Per pixel?

 Per vertex?

(27)

(28)

Flat shading drawbacks

 The human visual system enhances edges

 We see stripes (known as Mach

Bands) along edges

 Much like a sharpening convolution!

 How to avoid?

(29)

Gouraud shading

 Gouraud shading:

 Define vertex normals as average of surrounding faces

 Compute lighting equation at each vertex

 Interpolate colors across polygon

glShadeModel(GL_SMOOTH);

 Computation required

 Per pixel?

 Per vertex?

 Very fast! Especially with reasonably large polygons and hardware color interpolation

Example

(30)

Bilinear interpolation

 Rasterization is done a scan-line at a time

 Bilinear interpolation: given a color at each vertex, how do you render a scan-line with smooth shading?

 interpolate vertex colors along each edge of the polygon to get colors for start

and end of scanline

 interpolate colors along the scanline

(31)

(32)

Gouraud drawbacks

 Drawbacks of Gouraud shading?

 Polygon edges are still visible

 Brightness is modelled as a linear function, but that’s not really accurate

 Real highlights are small

and bright and drop off sharply

 If polygons are too large, highlights get distorted and dimmed (notice the funny shape)

 How to avoid these artifacts?

(33)

Phong shading

 To eliminate artifacts, interpolate normals

 Results: better shading, much nicer highlights

 Computation required per pixel?

 Computationally much more expensive, but modern graphics cards can do it

Example Example 2

(34)

(35)

Gouraud shader

 See demo

(36)

Phong shader

 See demo

(37)

Shading summary

 Don’t confuse Phong Illumination Model and Phong Shading

 Gouraud shading: compute illumination model at each vertex. Interpolate colors.

(Often done in hardware)

 Phong shading: interpolate vertex normals.

Compute illumination model at each vertex

(38)

Virtual Trackball shading

 Flat shading

 Compute a normal for each face

 Gouraud shading

 Compute a normal for each vertex as average of adjacent faces

 [Defect: you may not want to smooth-shade

across every edge: how should it really be done?]

 Phong shading?

 What would you have to do to handle material properties, surface colors, etc?

(39)

Surface subdivision

 In real modelers…

 one can usually define smooth curved surfaces

 Eg spheres, quadrics, NURBS, smoothed polygons

 Modeler renders with smoothness setting

 Recursively split polygons into smaller pieces, with new vertices on the smooth surface

 Splitting a triangle can be done by

 Bisecting angles

 Computing the centrum

 Bisecting sides

 Of course, smoother surfaces take longer to draw

(40)

Effect of viewer position?

 Phong illumination model:

I = Ambient + Diffuse + Specular

= I_a + I_d + I_s

= k_a L_a + k_dL_d l • n + k_s L_s (r • v)^

 What part of this depends on the location of the viewer?

 How to change the image depending on the location of the viewer?

 VR, Fire phone, MS Kinect, . . .

(41)

What’s missing?

 Now that the rendering pipeline is all software, we can add additional effects

 What’s missing?

(42)

Fresnel Effect

 Surface reflectance depends on viewing angle

 Fresnel shaders: allow reflection, specularity, other attributes to depend on viewing angle

 Example

(43)

How would you do this?

 Refraction: 1 2 3 [more shading info]

(44)

(45)

Chapter summary

 Phong illumination model has ambient, diffuse, and specular terms

 It can be used for Flat, Gouraud, and Phong shading

 OpenGL supports eight ambient, point, distant, and spot lights

 You must specify light and material

properties with many OpenGL function calls

 Curved surfaces are modeled with polygon subdivisions