+ All Categories
Home > Documents > LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere...

LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere...

Date post: 20-Jul-2020
Category:
Upload: others
View: 0 times
Download: 0 times
Share this document with a friend
50
LIGHTING AND SHADING Lecture 4 Comp3080 Computer Graphics HKBU
Transcript
Page 1: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

LIGHTING AND

SHADING Lecture 4

Comp3080 Computer Graphics

HKBU

Page 2: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

OBJECTIVES

Learn to shade objects so their images appear three-dimensional

Introduce the types of light-material interactions

Build a simple reflection model --- the Phong model

--- that can be used with real time graphics hardware

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 2

Page 3: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

WHY WE NEED SHADING

Suppose we build a model of a

sphere using many polygons and

color it with glColor.

We get something like

But we want

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 3

Page 4: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

SHADING

Why does the image of a real sphere look like

Light-material interactions cause each point to have a different color or shade

Need to consider

Light sources

Material properties

Location of viewer

Surface orientation

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 4

Page 5: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

SCATTERING

Light strikes A

Some scattered

Some absorbed

Some of scattered light strikes B

Some scattered

Some absorbed

Some of this scattered light strikes A and so on

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 5

Page 6: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

RENDERING EQUATION

The infinite scattering and absorption of light can be described by the

rendering equation

Cannot be solved in general

Ray tracing is a special case for perfectly reflecting surfaces

Rendering equation is global and includes

Shadows

Multiple scattering from object to object

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 6

Page 7: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

GLOBAL EFFECTS

translucent surface

shadow

multiple reflection

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 7

Page 8: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

LOCAL VS. GLOBAL RENDERING

Correct shading requires a global calculation involving all objects and

light sources

Incompatible with pipeline model which shades each polygon independently

(local rendering)

However, in computer graphics, especially real time graphics, we are

happy if things “look right”

Exist many techniques for approximating global effects

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 8

Page 9: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

LIGHT-MATERIAL INTERACTION

Light that strikes an object is partially absorbed and partially scattered

(reflected)

The amount reflected determines the color and brightness of the object

A surface appears red under white light because the red component of the

light is reflected and the rest is absorbed

The reflected light is scattered in a manner that depends on the

smoothness and orientation of the surface

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 9

Page 10: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

LIGHT SOURCES

General light sources are difficult to work with because we must

integrate light coming from all points on the source

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 10

Page 11: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

SIMPLE LIGHT SOURCES

Point source

Model with position and color

Distant source = infinite distance away (parallel)

Spotlight

Restrict light from ideal point source

Ambient light

Same amount of light everywhere in scene

Can model contribution of many sources and reflecting surfaces

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 11

Page 12: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

SURFACE TYPES

The smoother a surface, the more reflected light is concentrated in the

direction a perfect mirror would reflected the light

A very rough surface scatters light in all directions

smooth surface rough surface

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 12

Page 13: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

PHONG MODEL

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 13

A simple model that can be computed rapidly

Has three components

Diffuse

Specular

Ambient

Uses four vectors

To source

To viewer

Normal

Perfect reflector

Page 14: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

IDEAL REFLECTOR

Normal is determined by local orientation

Angle of incidence = angle of reflection

The three vectors must be coplanar

r = 2 (l · n ) n - l

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 14

Page 15: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

LAMBERTIAN SURFACE

Perfectly diffuse reflector

Light scattered equally in all directions

Amount of light reflected is proportional to the vertical component

of incoming light

reflected light ~ cos θi

cos θi = l · n if vectors normalized

There are also three coefficients, kr, kb, kg that show how much of

each color component is reflected

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 15

Page 16: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

SPECULAR SURFACES

Most surfaces are neither ideal diffusers nor perfectly specular (ideal

reflectors)

Smooth surfaces show specular highlights due to incoming light being

reflected in directions concentrated close to the direction of a perfect

reflection

specular

highlight

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 16

Page 17: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

MODELING SPECULAR RELECTIONS

Phong proposed using a term that dropped off as the angle between the

viewer and the ideal reflection increased

ϕ

Ir ~ ks I cosαϕ

shininess coef

absorption coef

incoming intensity

reflected

intensity

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 17

Page 18: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

THE SHININESS COEFFICIENT

Values of α between 100 and 200 correspond to metals

Values between 5 and 10 give surface that look like plastic

cosαϕ

ϕ 90 -90

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 18

Page 19: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

AMBIENT LIGHT

Ambient light is the result of multiple interactions between (large)

light sources and the objects in the environment

Amount and color depend on both the color of the light(s) and the

material properties of the object

Add ka Ia to diffuse and specular terms

reflection coef intensity of ambient light

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 19

Page 20: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

DISTANCE TERMS

The light from a point source that reaches a surface is inversely proportional to the square of the distance between them

We can add a factor of the form 1/(ad + bd + cd2) to the diffuse and specular terms

The constant and linear terms soften the effect of the point source

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 20

Page 21: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

LIGHT SOURCES

In the Phong Model, we add the results from each light source

Each light source has separate diffuse, specular, and ambient terms to

allow for maximum flexibility even though this form does not have a

physical justification

Separate red, green and blue components

Hence, 9 coefficients for each point source

Idr, Idg, Idb, Isr, Isg, Isb, Iar, Iag, Iab

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 21

Page 22: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

MATERIAL PROPERTIES

Material properties match light source properties

Nine absorption coefficients

kdr, kdg, kdb, ksr, ksg, ksb, kar, kag, kab

Shininess coefficient α

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 22

Page 23: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

ADDING UP THE COMPONENTS

For each light source and each color component, the Phong model can

be written (without the distance terms) as

I = kd Id l · n + ks Is (v · r )α + ka Ia

For each color component, we add contributions from all sources

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 23

Page 24: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

THE COMPUTATION OF

REQUIRED VECTORS

Modified Phong model and

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 24

Page 25: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

MODIFIED PHONG MODEL

The specular term in the Phong model is problematic because it

requires the calculation of a new reflection vector and view vector for

each vertex

Blinn suggested an approximation using the halfway vector that is more

efficient

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 25

Page 26: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

THE HALFWAY VECTOR

h is normalized vector halfway between l and v

h = ( l + v )/ | l + v |

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 26

Page 27: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

USING THE HALFWAY VECTOR

Replace (v · r )α by (n · h )β

b is chosen to match shininess

Note that halfway angle is half of angle between r and v if vectors are

coplanar

Resulting model is known as the modified Phong or Blinn lighting model

Specified in OpenGL standard

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 27

Page 28: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

EXAMPLE

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 28

Only differences in

these teapots are the

parameters in the

modified Phong model

Page 29: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

COMPUTATION OF VECTORS

l and v are specified by the application

Can compute r from l and n

Problem is determining n

For simple surfaces this can be determined but how we determine n differs depending on underlying representation of surface

OpenGL leaves determination of normal to application

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 29

Page 30: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

COMPUTING REFLECTION DIRECTION

Angle of incidence = angle of reflection

Normal, light direction and reflection direction are coplaner

Want all three to be unit length

lnnlr )(2

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 30

Page 31: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

PLANE NORMALS

Equation of plane: ax + by + cz + d = 0

From Chapter 3 we know that plane is determined by

three points p0, p1, p2 or normal n and p0

Normal can be obtained by

n = (p2 - p0) × (p1 - p0)

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 31

Page 32: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

NORMAL TO SPHERE

Implicit function f(x, y, z) = 0

Normal given by gradient

Sphere f(p) = p·p - 1

n = [∂f/∂x, ∂f/∂y, ∂f/∂z]T = p

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 32

Page 33: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

PARAMETRIC FORM

For sphere

Tangent plane determined by vectors

Normal given by cross product

x = x(u, v) = cos u sin v y = y(u, v) = cos u cos v z = z(u, v) = sin u

∂p/∂u = [∂x/∂u, ∂y/∂u, ∂z/∂u]T

∂p/∂v = [∂x/∂v, ∂y/∂v, ∂z/∂v]T

n = ∂p/∂u × ∂p/∂v

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 33

Page 34: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

SHADING IN OPENGL

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 34

Page 35: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

OBJECTIVES

Introduce the OpenGL shading methods

Per vertex vs. Per fragment shading

Where to carry out

Discuss polygonal shading

Flat

Smooth

Gouraud

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 35

Page 36: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

OPENGL SHADING

Need

Normals

Material properties

Lights

State-based shading functions have been deprecated

(glNormal, glMaterial, glLight)

Get computed in application or send attributes to shaders

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 36

Page 37: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

NORMALIZATION

Cosine terms in lighting calculations can be computed using dot product

Unit length vectors simplify calculation

Usually we want to set the magnitudes to have unit length but

Length can be affected by transformations

Note that scaling does not preserved length

GLSL has a normalization function

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 37

Page 38: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

NORMAL FOR TRIANGLE

Note that right-hand rule determines outward face

p0

p2

n

plane n ·(p - p0 ) = 0

n = (p2 - p0 ) × (p1 - p0 )

normalize n n/ |n|

p p1

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 38

Page 39: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

SPECIFYING A POINT LIGHT SOURCE

For each light source, we can set an RGBA for the diffuse, specular, and

ambient components, and for the position

vec4 diffuse0 = vec4(1.0, 0.0, 0.0, 1.0); vec4 ambient0 = vec4(1.0, 0.0, 0.0, 1.0); vec4 specular0 = vec4(1.0, 0.0, 0.0, 1.0); vec4 light0_pos = vec4(1.0, 2.0, 3,0, 1.0);

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 39

Page 40: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

DISTANCE AND DIRECTION

The source colors are specified in RGBA

The position is given in homogeneous coordinates

If w = 1.0, we are specifying a finite location

If w = 0.0, we are specifying a parallel source with the given direction

vector

The coefficients in distance terms are usually quadratic

(1/(a + b*d + c*d*d)) where d is the distance from the point

being rendered to the light source

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 40

Page 41: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

SPOTLIGHTS

Derive from point source

Direction

Cutoff

Attenuation proportional to cosαϕ

θ -θ θ

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 41

Page 42: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

GLOBAL AMBIENT LIGHT

Ambient light depends on color of light sources

A red light in a white room will cause a red ambient term that disappears

when the light is turned off

A global ambient term that is often helpful for testing

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 42

Page 43: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

MATERIAL PROPERTIES

Material properties should match the terms in the light model

Reflectivities

w component gives opacity

vec4 ambient = vec4(0.2, 0.2, 0.2, 1.0); vec4 diffuse = vec4(1.0, 0.8, 0.0, 1.0); vec4 specular = vec4(1.0, 1.0, 1.0, 1.0); GLfloat shine = 100.0

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 43

Page 44: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

TRANSPARENCY

Material properties are specified as RGBA values

The A value can be used to make the surface translucent

The default is that all surfaces are opaque regardless of A

Later we will enable blending and use this feature

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 44

Page 45: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

POLYGONAL SHADING

In per vertex shading, shading calculations are done for each vertex

Vertex colors become vertex shades and can be sent to the vertex shader as a vertex attribute

Alternately, we can send the parameters to the vertex shader and have it compute the shade

By default, vertex shades are interpolated across an object if passed to the fragment shader as a varying variable (smooth shading)

We can also use uniform variables to shade with a single shade (flat shading)

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 45

Page 46: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

POLYGON NORMALS

Triangles have a single normal

Shades at the vertices as

computed by the Phong

model can be almost same

Identical for a distant viewer

(default) or if there is no

specular component

Consider model of sphere

Want different normals at each

vertex even though this

concept is not quite correct

mathematically

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 46

Page 47: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

SMOOTH SHADING

We can set a new normal at

each vertex

Easy for sphere model

If centered at origin n = p

Now smooth shading works

Note silhouette edge

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 47

Page 48: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

MESH SHADING

The previous example is not general because we knew the normal at

each vertex analytically

For polygonal models, Gouraud proposed we use the average of the

normals around a mesh vertex

n = (n1+n2+n3+n4)/ |n1+n2+n3+n4|

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 48

Page 49: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

GOURAUD AND PHONG SHADING

Gouraud Shading

Find average normal at each vertex (vertex normals)

Apply modified Phong model at each vertex

Interpolate vertex shades across each polygon

Phong shading

Find vertex normals

Interpolate vertex normals across edges

Interpolate edge normals across polygon

Apply modified Phong model at each fragment

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 49

Page 50: LIGHTING AND SHADINGcomp3080/2011/wp-content/... · SHADING Why does the image of a real sphere look like Surface orientation Light-material interactions cause each point to have

COMPARISON

If the polygon mesh approximates surfaces with a high curvatures,

Phong shading may look smooth while Gouraud shading may show

edges

Phong shading requires much more work than Gouraud shading

Until recently not available in real time systems

Now can be done using fragment shaders

Both need data structures to represent meshes so we can obtain vertex

normals

OCTOBER 3 , 2011 COMP3080 COMPUTER GRAPHICS , HKBU 50


Recommended