Visible-surface detection Methods + Illumination

Models & surface-rendering models

Chen Jing-Fung (2006/12/8) Assistant Research Fellow,

Digital Media Center, National Taiwan Normal University

Ch9: Computer Graphics with OpenGL 3th, Hearn Baker Ch11-6: Computer Graphics with OpenGL 3th, Hearn Baker Ch10: Computer Graphics with OpenGL 3th, Hearn Baker

Visible-surface

• Visible-surface detection – Polygon’s vertices & plane have some

relationship

– Back-face detection

– Back-face removals

– Concave Polygons

– Depth-Buffer method

Visible-surface detection

• How to describe the surface? – Object-space

• Compare objects or parts of objects in the scene – We should label as visible – Advantage: effectively locate visible surfaces in the

same case

– Image-space • Visibility is decided each pixel position’s point (the

closest to viewer) on the projection plane • Most interface is only image-space

Object- & Image- space

• The major differences is in the basic approaches about the various visible-surface detection algorithms – Sorting method

• Based on facilitate depth (interval distance) which used to divide surfaces in a scene

– Coherence method • Using the regularities in a scene

Polygon’s vertices & plane

• Using three points resolve a plane – Each intercept between the plane

and the axis • x-axis: A/D, y-axis: B/D, z-axis: C/D

(x1,y1,z1)

(x2,y2,z2) (x3,y3,z3)

plane: 0Ax By Cz D

any plane function: 0Ax By Cz D

( / ) ( / ) ( / ) 1, k=1,2,3k k kA D x B D y C D z

Cramer’s rule: 1 1

2 2

3 3

1

1

1

y z

A y z

y z

1 1

2 2

3 3

1

1

1

x z

B x z

x z

1 1

2 2

3 3

1

1

1

x y

C x y

x y

1 1 1

2 2 2

3 3 3

x y z

D x y z

x y z

NPlane

Back-face detection (object-space)

• Simplify the back-face test (right-hand)

– N is a polygon surface’s normal vector

– Vview is a viewing direction vector from our camera position

Vview

N=(A,B,C)

Back face: Vview．N > 0

Our monitor: xv

yv

zv

Vview

N=(A,B,C)

If plane Vview // zv axis,

plane: 0Ax By Cz D

C=0, cannot see any face

C<0, we label any polygon as a back face

Back-face removals

• In general, back-face removal can eliminate about partly or completely of polygon surfaces – Convex surface:

• All hidden surfaces – C > 0

– Concave surface: • Like to combine two convex objects

0C

0C

C=0, cannot see any face

C < 0, we label any polygon as a back face

One face is be partially hidden by other faces of the object

C > 0, hidden surface

OpenGL and Concave Polygons

• A tessellator object in the GLU library can tessellate a given polygon into flat convex polygons – Draw a simple polygon without holes

• basic idea is to describe a contour mytess = gluNewTess(); //include

gluTessBeginPolygon(mytess, NULL); //send them off to be rendered

gluTessBeginContour(mytess);// draw contour (outside)

for(i=0; i < n_vertices; i++)

glTessVertex(mytess,vertex[i],vertex[i]);

gluTessEndContour();

gluTessEndPolygon(mytess);

gluTessProperty()

http://pheatt.emporia.edu

• Tessellation algorithm in OpenGL is based on the winding rule to set the winding number

gluTessProperty(mytess, GLU_TESS_WINDING_RULE,*); GLU_TESS_WINDING_ODD GLU_TESS_WINDING_NONZERO GLU_TESS_WINDING_POSITIVE GLU_TESS_WINDING_NEGATIVE GLU_TESS_WINDING_ABS_GEQ_TWO

Depth-Buffer method

• A common image-space approach for detecting visible surfaces is depth-buffer method – One pixel position at a time appear to

the surface – Also called to z-buffer method

• Object depth is usually measured along z axis of a viewing system

Depth buffer

• Three surfaces and view plane overlap pixel position (x,y) on the view plane – The visible surface has the smallest

depth value

View plane

xv

yv

zv Depthvalue=0.0 -> near

Depthvalue = 1.0 -> far (x,y)

z

z

z

y

z

x

P

baP

P

P

P

Pzyx ,,),,( pseudodepth

Possible data type to hold face data

Class face{

int nVerts; //number of vertices in vertex-array

Point *pt; //array of vertices in real screen coord’s

float *depth; //array of vertex depths

Plane plane; //data for the plane of the face

Exface extent; //the extent of the face

//other properties

};

Ch13: Computer Graphics 2th, F. S. Hill Jr.

Depth-Buffer Algorithm

• Initialize the depth buffer and frame buffer so that for all buffer positions (x,y)

• Process each polygon in a scene, one at a

time – For each projected (x,y) pixel position of a

polygon, calculate the depth z (if not allready known)

– If z < depthBuff(x,y), compute the surface color at that position and set

depthBuff (x,y) = 1.0, frameBuff (x,y) = backgndColor

depthBuff (x,y) = z, frameBuff (x,y) = surfColor(x,y)

Basic flow of depth-buffer algorithm

• pseudocode for (each face F)

for (each pixel (x,y) covering the face){

depth = depth of F at (x,y);

if (depth < d[x][y]) { //F is closest so far

c = color of F at (x,y) //set the pixel color at (x,y) to c

d[x][y] = depth; //updata the depth buffer

}

}

A-Buffer Method

• Extension of above depth-buffer ideas is A-Buffer procedure – Combined with antialiasing, area-averaging and

visiblity-detection method – Developed at Lucasfilm Studios to include in

the surface-rendering system called REYES (Renders Everything You Ever Saw)

– The buffer region is referred to as the accumulation buffer

• Store a variety of surface data and depth values

Two fields in A-buffer method

• Each position in the A-buffer has two fields: – Depth field

• Stores a real-number value (+,- or 0)

– Surface data field • Stores surface data or a pointer

Two buffer representations about A-buffer

• A single surface overlaps the pixel, the surface depth, color and other information – Buffer list

• More than one surface overlaps the pixel, a linked list of surface data (also can list the priority)

depth≧0 RGB and other info

depth<0 Surf1 info

Surf2 info …

A-buffer

• Summary the surface information in A-buffer – RGB intensity components

– Opacity parameter (percent of transparency)

– Depth

– Percent of area coverage

– Surface identifier

– Other surface-rendering parameters

Design a pick-buffer program in OpenGL

• Interactive to select objects – Pointing screen positions (ps. We cann’t

use OpenGL to directly pick at any position) • Design pick window to form a revised view

volume • Assign integer ID to point a object • Intersect those objects and the revised

view volume which are stored in a pick-buffer array

Picking a screen’s procedure

• Create and display a scene • Pick a screen position and the mouse

callback function – Set up a pick buffer – Activate the picking operations (selection mode) – Initialize an ID name stack for object ID – Save the current viewing and geometric-

transformation matrix – Specify a pick window for the mouse input

– Assign identifiers to objects and reprocess the screen using revised view volumne. (pick information is stored in pick buffer)

– Restore the original viewing and geometric-transformation matrix

– Determine the number of objects that have been picked and return to the normal rendering mode

– Process the pick information

• Pick-buffer – This buffer array store the integer

information for each object

– Several records of information store in pick buffer • Depending on the size and location of the

pick window

glSelectBuffer (pickBuffSize, pickBuffer);

Each record in pick-buffer’s information

• The stack position of the object which is the number of identifiers in the name stack up to and including the position of the picked object

• Min depth of the picked object • Max depth of the same object • The list of the identifies in the name stack

from the first (bottom) identifier to the identifier for the picked object

Range = 0.0~1.0 multiplied by 232-1

• The OpenGL picking operations are activated with – Means a scene is processed through the

viewing pipeline (not stored in frame buffer)

– A record each object have been displayed in normal rendering mode is placed in pick-buffer

• This command returns the number of picked object (record in the pick-buffer)

glRenderMode (GL_SELECT);

After mouse hit

• To return to the normal rendering mode (the default)

• third option (GL_FEEDBACK) – Store object coordinates without

displaying

glRenderMode (GL_RENDER);

Buffer depth test demo

OpenGL visibility-detection function

• Back-face removal – Where mode can be changed

• GL_FRONT: remove the back faces – The viewing position is inside a building

• GL_BACK: remove the front faces – The viewing position moves outside the building

• GL_FRONT_AND_BACK :remove both front and back faces

– Eliminate all polygon surfaces in a scene

– Another front-facing view function • glFrontFace()

glEnable (GL_CULL_FACE);

glCullFace (mode);

glDisable(GL_CULL_FACE);

OpenGL Depth-Buffer Functions

• Using the OpenGL depth-buffer visibility-detection routines – First, modify the GLUT initialization

function (still frame)

– Depth buffer values can be initialized • Refresh buffer of the background color

glutInitDisplayMode ( GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH );

glClear (GL_DEPTH_BUFFER_BIT);

• The OpenGL depth-buffer visibility-detection routines are activated

glEnable (GL_DEPTH_TEST); glPolygonMode (GL_FRONT_AND_BACK,GL_LINE);

glColor3f (0.0,0.0,0.0);

//--object’s description--

glBegin(GL_POLYGON); glVertex3fv (v1); glEdgeFlag (GL_FALSE); glVertex3fv (v2); glEdgeFlag (GL_TRUE); glVertex3fv (v3); glEnd();

v1

v2 v3

• The depth-buffer visibility testing use other initial value for the max-depth

– The depth buffer is initialized with the default value 1.0 (maximum depth-buffer in OpenGL)

– This function can be used to speed up the depth-buffer routines

• That is like many distant objects behind the foreground objects

glClearDepth (maxDepth);

glClear(GL_DEPTH_BUFFER_BIT);

minimum depth-buffer in OpenGL = 0.0

Projection application

• Projection coordinates in OpenGL – normalize the range -1.0~1.0

– The depth values between near and far are normalized to the range 0.0~1.0 • Default: Near: 0.0; far:1.0

– Any value can be set

including nearnormdepth>farnormdepth

glDepthRange (nearnormdepth, farnormdepth)

Other option about depth-buffer in OpenGL

– Parameter testCondition can be assigned

8 symbolic constants • GL_LESS (default), GL_GREATER,

GL_EQUAL, GL_NOTEQUAL, GL_LEQUAL, GL_GEQUAL, GL_NEVER (no point), GL_ALWAYS (all points).

– They are used to compare each incoming pixel z value with present z value in the depth-buffer

– GL_LESS: the depth-value is less than current value in the depth-buffer

glDepthFunc (testCondition);

Set the depth-buffer state

• Set the state of the depth-buffer to read-only or read-write

– writeState = GL_TRUE (default): read-

write

– writeState = GL_FALSE: only can retrieve values

glDepthMask (writeState);

The advantage of the setting state

• The feature is useful in complicated background v.s. different foreground objects can be displayed – Disable the background write mode and

process foreground • Allow to generate a series of frames with different

foreground objects • Or one object in different positions for an animation

sequence. • Therefore, only depth values for the background are

saved

OpenGL Depth-Cueing Function

• Varity brightness of an object is like object’s distance function from the viewing position

• Can set different values for dmax and dmin

glEnable (GL_FOG);

glFogi (GL_FOG_MODE, GL_LINEAR); minmax

max)(dd

dddfdepth

Depth-cueing method

glFogf (GL_FOG_START, minDepth);

glFogf (GL_FOG_END, maxDepth);

Default: dmax=1.0, dmin=0.0

Approaches to infinity

• There are many complex pictures which could be compose to the simple component – Tesselations could based on a single

regular polygon • Only a triangle, square and hexagon tile the

plane

Drawing simple tesselations

• Consider how to draw in an application the 3-gon tillings – The 3-gon version

• Row : draw those side-by-side equilateral triangles which are all the same orientation

• Other row must be offset horizontally by ½ the base of the triangle (each line is drawn only once)

• Clipping can be used to chop off the tilings at the borders of the desired window

Drawing simple tesselations

• Code fragment

for i=1~ rowsnum

for j=1 ~ colsnum

if i=Odd

offset+=shift

else offset = 0

Triangle (j*colWidth+offset, i*rowWidth, 1);

Illumination Models & surface-rendering models

Ch10: Computer Graphics with OpenGL 3th, Hearn Baker

40

outline

• Basic illumination models

• Polygon rendering methods

• OpenGL lights

41

Basic illumination models

• Ambient light

• Diffuse reflection

• Specular reflection

• Combine diffuse & specular reflection

• Light refraction

42

Ambient light

• Ambient light set a general brightness level in a scene – object combine all background lighting ~ the

global diffuse reflections • Assuming that only monochromatic lighting

– Intensity parameter Ia – Ambient light’s reflections

• a simply form of diffuse reflection • Independent of viewing direction & spatial

orientation of a surface

43

Diffuse reflection (1)

• Diffuse reflection model – Assume the incident light is scattered

with equal intensity in all directions (ideal diffuse reflectors) • the reflected radiant light energy is

calculated with Lambert’s cosine law

area projected

time unit perenergy radiantIntensity

cos~ constant

cosN

NdA

44

Diffuse reflection (2)

• Radiant energy from a surface area element dA in direction ψN relative to the surface normal direction is proportional to cos ψN – a monochromatic light source, kd:0.0~1.0

ψN ψN

Radiant-energy direction

N

Incident light Highly reflective surface kd=1.0

Absorbs the incident light kd=0.0

dA

45

Lighting & reflection (1) • Background lighting effects

– Every surface is fully illuminated by the ambient light Ia

– Ambient lighting contribution to the diffuse reflection at any point

– Produces a abnormally flat shading Iambdiff=kdIa kd:0.0~1.0

abnormally flat shading …

46

Lighting & reflection (2)

• Modeling the amount of incident light (Il,incident) on a surface (A) from a light source with intensity (Il)

• The diffuse reflections A

A cosθ θ Incident light

N

θ

Il,incident=Il cosθ

Il,diff=kdIl,incident=kdIl cosθ

Incoming light ⊥ the surface => θ= 0°, Il,diffuse=kdIl

cosθ≦0.0, light source is behind the surface

47

• Diffuse reflections from a spherical surface

• Point light source color = white

• Diffuse reflectivity coefficient : 0 <= kd <= 1

θ N L

To light source

cosθ=N．L

,

( ), if 0

0.0, if 0

d l

l diff

k II

N L N L

N L

source surf

source surf

P PL

P P

48

• Combine the ambient & point-source intensity calculations the total diffuse reflection – Ambient-

reflection coefficient ka

( ), if 0

, if 0

a a d l

diff

a a

k I k II

k I

N L N L

N L

49

Specular reflection

http://accad.osu.edu/~waynec/history/tree/images/turner.jpg

50

• The specular reflection direction for a position on an illuminated surface

N L R

V θ θ

φ

N: normal surface vector R: ideal specular reflection Rs L: the direction toward the point light source V: point to viewer

An ideal reflector (perfect mirror)

Il,incident = Rs & we would see reflected light when V and R coincide

51

Specular-refection function

• The variation of specular intensity with angle of incidence is described by Fresnel’s laws of reflection – Spectral-reflection function W(θ) – The intensity of the light source Il

– φ: between the viewing angle (V) and R

, ( ) cos sn

l spec lI W I N

L R V

θ θ φ

52

cos sn

53

• Approximate variation of the specular-reflection coefficient for different materials, as a function of the angle of incidence – W(θ): 0.0~1.0 – In general, W(θ) tends to

increase (θ=0°->90°°) – θ=90°, W(θ)=1

• All of the incidence is reflected

Ex: glass, -θ=0°->4% of the incident light on a glass surface -and most of the rangeθ-> < 10%

Specular-reflection coefficient

54

• Many opaque materials’ specular-reflection is nearly constant – Set ks=W(θ), ks:0.0~1.0

– R? can be computed from L and N

,

( ) , if 0 and 0

0.0, if 0 or 0

sn

s ll spec

k II

V R V R N L

V R N L

Simple specular-reflection function (1) θ

θ

R + L = (2N．L) N

=> R = (2N．L) N - L

55

Simple specular-reflection function (2)

• We replace V．R with N．H – Replace cosφ with cosα

– Advantage • For nonplanar surfaces, N．H requires less

computation than V．R because R related with N

– Viewer and light source is sufficiently far • V, L and H are all constant

N L R

V

α

φ

H

L VH

L VHalfway vector

If α > 90°, N．H = negative and set Il,spec=0.0

56

,

( ) , if 0

0.0, if 0

sn

s ll spec

k II

N H N H

N H

57

Combined diffuse and specular reflection

• A single point light source

• Multiple light sources ( ) ( ) s

diff spec

n

a a d l s l

I I I

k I k I k I

N L N H

, ,

1

1

[ ]

[ ( ) ( ) ]s

n

ambdiff l diff l spec

l

nn

a a l d l s l

l

I I I I

k I I k k

N L N H

58

Wire-frame Ambient lighting

Diffuse reflections from ambient lighting + a single point source

Diffuse and specular reflections from ambient lighting + a single point source

59

Light refraction (1)

60

Light refraction (2)

i

r

ir

sinsin

ηair~ 1

ηglass~ 1.61

• Snell’s law

– Different material

have different refracted coefficience (ηmaterial)

61

Polygon rendering methods

• Flat surface rendering

• Gouraud surface rendering

• Phong surface rendering

62

Flat surface rendering • Flat surface rendering is also called

constant-intensity surface rendering – In general, flat surface rendering provides an

accurate display • Polygon is one polyhedron’s face (flat face)

• All light sources are sufficiently far, N．L = constant

• The viewing position is also sufficiently far, V．R = constant

,

( ) , if 0 and 0

0.0, if 0 or 0

sn

s ll spec

k II

V R V R N L

V R N L

glShadeModel(GL_FLAT)

63

Gouraud surface rendering

N

• Gouraud surface rendering is also called intensity-interpolation surface rendering – Linear interpolates vertex intensity – Each polygon section of a tessellated curved

surface • Determine the average unit normal vector at each

vertex of the polygon • Apply an illumination model to obtain the light

intensity at that position • Linearly interpolate the vertex intensities over the

projected area

4321

4321

NNNN

NNNNN

glShadeModel(GL_SMOOTH)

64

Two surface rendering

mesh

Using Flat surface rendering

Using Gouraud surface rendering

glEnable(GL_COLOR_MATERIAL); //object’s color

65

Phong surface rendering • Phong surface rendering is also called

normal-vector interpolation rendering – Each polygon section of a tessellated curved

surface • Determine the average unit normal vector at each

vertex • Linearly interpolate the vertex normal over the

projected area • Apply an illumination model at positions along scan

lines to calculate pixel intensities

21 )()1()( NNN

N’

3 2'( ) (1 ) ( ) N N N

66

OpenGL lights

• OpenGL light-source function – light-source position

– Light-source colors

• OpenGL global lighting parameters

• OpenGL surface-property function

• OpenGL Spotlights

67

OpenGL light-source function

• Multiple point light sources can be included in OpenGL scene description which has various properties. – Function name’s suffix code: i (int) or f (float) – v (vector):

• propertyValue use v to represent a pointer to an array

• lightName: GL_LIGHT0,…,GL_LIGHT7 • lightProperty: can be assigned one of ten symbolic

property constants

glLight*(lightName, lightProperty, propertyValue);

68

OpenGL light-source position

// light1 is designated as a local source at (2.0,0.0,3.0)

GLfloat light1PosType [ ] = {2.0, 0.0, 3.0, 1.0}

//light2 is a distant source with light emission in –y axis

GLfloat light2PosType [ ] = {0.0, 1.0, 0.0, 0.0}

glLightfv(GL_LIGHT1, GL_POSITION, light1PosType);

glEnable(GL_LIGHT1); // turn on light1

….

69

OpenGL Light-source colors

• Light-source colors (R,G,B,A) – The symbolic color-property

• GL_AMBIENT, GL_DIFFUSE and GL_SPECULAR GLfloat color1 [ ] = {0.0, 0.0, 0.0, 1.0}//black

GLfloat color2 [ ] = {1.0, 1.0, 1.0, 1.0}//white

glLightfv (GL_LIGHT3, GL_AMBIENT, color1);

…

70

• Radial-intensity attenuation coefficients with dl as the distance from a light-source position – Three OpenGL property constants

• GL_CONSTANT_ATTENUATION, GL_LINEAR_ATTENUATION and GL_QUADRATIC_ATTENUATION

• Each coefficients a0, a1, a2 <- which can be designated

Energylight = 1

dl

Energylight = 1/dl2

glLightfv (GL_LIGHT6, GL_CONSTANT_ATTENUATION, 1.5); …

a0

71

OpenGL global lighting parameters

• OpenGL lighting parameters can be specified at the global level – Besides the ambient color for individual light

sources, we can also set it to be background lighting as a global value

• Ex: set background lighting to a low-intensity dark-blue color and an alpha value = 1.0

glLightModel* (paramName, ParamValue);

globalAmbient [ ] = {0.0, 0.0, 0.3, 1.0}

glLightModelfv(GL_LIGHT_MODEL_AMBIENT, globalAmbient);

Default global Ambient color = (0.2,0.2,0.2,1.0) //dark gray

72

OpenGL surface-property function

• Reflection coefficients and other optical properties for surfaces – Parameter surFace

• GL_FRONT, GL_BACK or GL_FRONT_AND_BACK – Parameter surfProperty is a symbolic constant identifying a

surface parameter • Isurf, ka, ks, or ns

– Parameter propertyValue is set to the corresponding value with surfProperty

• All properties are specified as vector values • Beside ns(the specular-reflection exponent)

glMaterial*(surFace, surfProperty, propertyValue);

73

Ambient & diffuse realization • The ambient and diffuse coefficients

should be assigned the same vector values – GL_AMBIENT_AND_DIFFUSE

• To set the specular-reflection exponent – GL_SHININESS

• The range of the value : 0 ~ 128 diffuseCoeff [ ] = {0.2, 0.4, 0.9, 1.0};//light-blue color

specularCoeff [ ] = {1.0, 1.0, 1.0, 1.0};//white light

glMaterialfv (GL_FRONT_AND_BACK, GL_AMBIENT_AND_DIFFUSE, diffuseCoeff); glMaterialfv(GL_FRONT_AND_BACK, GL_SPECULAR, specularCoeff); glMaterialfv(GL_FRONT_AND_BACK, GL_SHININESS, 25.0);

74

OpenGL Spotlights • Spotlights is directional light sources

– Three OpenGL property constants for directional effects • GL_SPOT_DIRECTION, GL_SPOT_CUTOFF

and GL_SPOT_EXPONENT – Ex: θl = 30°, cone axis= x-axis and the attenuation

exponent = 2.5

θl

Light source

α

To object vertex

Vobj

cone axis

GLfloat dirVector [ ] = {1.0, 0.0, 0.0};

glLightfv(GL_LIGHT4, GL_SPOT_DIRECTION, dirVector);

glLightf(GL_LIGHT4, GL_SPOT_CUTOFF, 30.0);

glLightf(GL_LIGHT4, GL_SPOT_EXPONENT, 2.5);

demo