CSPC 352: Computer Graphics

CSPC 352: Computer Graphics

Chapter 6:Lighting

and

Shading

Interactive Computer GraphicsChapter 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

http://www.realtimerendering.com/teapot/



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?]


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

http://www.lewpen.com/articles/3d-graphics/webgl/realtime-raytracer/raytracer-008-bumpy-textures/

http://www.satine.org/archives/2009/10/18/chocolux-webgl/



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, …)



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 (, f) Wavelength (l)

Illumination function:I(x, y, z, , f, l)

Examples: ambient, point, area, spot,distant, …


Colored lights Intensity of emitted light can also be a

function of wavelength We usually model as I = [Ir, Ig, Ib]

components Some experiments have been done

with a whole spectrum of color values, giving more realistic results in some cases


Ambient light Intensity doesn’t vary with x, y, z, , f I = [Iar, Iag, Iab]


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, p0) =

(1/d2) [Ir(p0), Ib(p0), Ig(p0)]


Limitations of point lights Usually result in artificially

high-contrast images Can generate umbra

(full shadow) but notpenumbra (partial shadow)

Area lights generate softershadows, but are usuallyused only in non-interactive graphics (e.g. raytracing or radiosity)


Distant (directional) lights Light point lights, but

Without attenuation based on the distance Without difference in direction (parallel

rays) Location of light source

becomes [x, y, z, 0]; noattenuation

More efficient to computethan point sources


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. cose f

= (s • l)e if s is direction ofsource, l direction to source, both unit vectors


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


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

Since these are directions, theyare unit vectors.


Ambient term of Phong model An object has an ambient reflectivity

coefficient, ka A light source gives off a certain

amount of ambient light, La Total ambient illumination:

Ia = ka La (For colored light, we repeat this

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



Diffuse term A perfectly diffuse reflector is so rough

that it scatters light equally in all directions

But note that when thelight comes in at an angle,the same energy is spreadout over larger area

Such surfaces are calledLambertian surfaces (obeying Lambert’s Law)


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 Id = kd l • n Ld



Specular Term Specular term adds highlights

in the reflection direction Note that the smoother and

shinier the object, the tigher and brighter thehighlight

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

Modeled as cosa f, a is shininess coefficient (1..200)

Is = ks Ls (r • v)a



Phong illumination model Phong illumination model:

I = Ambient + Diffuse + Specular= Ia + Id + Is = ka La + kd Ld l • n + ks Ls (r • v)a

May add light attenuation term 1/(a+bd+cd2) ( ka La + kd l • n Ld) + ks Ls (r •

v)a

Parameters needed: Light: La, Ld, Ls for each light Surface: ka, kd, ks, a Repeat for each color component, light

source How hard to calculate?


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?



Flat shading drawbacks The human visual system enhances

edges We see stripes

(known as MachBands) along edges

Much like aconvolution!

How to avoid?


Gouraud shading Gouraud shading:

Define vertex normals as averageof surrounding faces

Compute lighting equation at each vertex

Interpolate colors across polygonglShadeModel(GL_SMOOTH);

Computation required Per pixel? Per vertex? Very fast! Especially with reasonably large

polygons and hardware color interpolationExample

https://www.khronos.org/registry/webgl/sdk/demos/webkit/TeapotPerVertex.html


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



Gouraud drawbacks Drawbacks of Gouraud

shading? Polygon edges are still visible Brightness is modelled as

a linear function, but that’snot really accurate

Real highlights are smalland bright and drop off sharply

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

How to avoid these artifacts?


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

https://www.khronos.org/registry/webgl/sdk/demos/webkit/TeapotPerPixel.html



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


Specifying lights in OpenGL OpenGL supports those four light types Point, directional lights

GLfloat light0_pos[] = {1.0, 2.0, 3.0, 1.0};GLfloat light0_pos[] = {1.0, 2.0, 3.0, 0.0};

Diffuse, Ambient, Specular coefficients GLfloat diffuse0[] = {1, 0, 0, 1};GLfloat ambient0[] = {1, 0, 0, 1};GLfloat spedular0[] = {1, 1, 1, 1};

glEnable(GL_LIGHTING)



Enabling lights Can enable at least 8 lights:

glEnable(GL_LIGHT0);glLightfv(GL_LIGHT0, GL_POSITION, light0_pos);glLightfv(GL_LIGHT0, GL_AMBIENT, ambient0);glLightfv(GL_LIGHT0, GL_DIFFUSE, diffuse0);glLightfv(GL_LIGHT0, GL_SPECULA, specular0);

Spotlights: set more light parameters as above GL_SPOT_DIRECTION GL_SPOT_EXPONENT GL_SPOT_CUTOFF


Specifying Materials Material properties are part of the

drawing state, specified by glMaterialfvGLfloat ambient[] = {0.2, 0.2, 0.2, 1.0}; GLfloat diffuse[] = {1.0, 0.8, 0.0, 1.0};GLfloat specular[] = {1.0, 1.0, 1.0, 1.0};glMaterialfv(GL_FRONT, GL_AMBIENT, ambient);glMaterialfv(GL_FRONT, GL_DIFFUSE, diffuse);glMaterialfv(GL_FRONT, GL_SPECULAR, specular);glMaterialf(GL_FRONT, GL_SHININESS, 100.0);

GLfloat emission[]={0.0, 0.3, 0.3, 1.0};glMaterialfv(GL_FRONT, GL_EMISSION, emission);

Use GL_FRONT_AND_BACK for two-sided faces



OpenGL Gouraud Shading OpenGL needs to know vertex normals

as well as locationsglNormal3fv(n);glVertex3fv(p);

How to compute vertex normals? Cross product for face normals Average normals of surrounding faces

How to find neighboring faces?


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?


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

What’s missing? Now that the rendering pipeline is all

software, we can add additional effects What’s missing?


Fresnel Effect Surface reflectance depends on viewing angle Fresnel shaders: allow reflection, specularity,

other attributes to depend on viewing angle


How would you do this?

Refraction: 1 2 3


http://threejs.org/examples/webgl_materials_cubemap_balls_refraction.html

http://mrdoob.github.io/three.js/examples/webgl_materials_cubemap_refraction.html

http://madebyevan.com/webgl-water/



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

Documents

CSPC 352: Computer Graphics