CG OpenGL Shadows + Light + Texture -course 10

Shadows + Light +Texture

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

Digital Media Center, National Taiwan Normal University

Ch10: Computer Graphics with OpenGL 3th, Hearn Baker Ch6: Interactive Computer Graphics 3th, Addison Wesley Ch7: Interactive Computer Graphics 3th, Addison Wesley

2

outline

• How to construct the object’s shadow in a scene

• Camera’s walking in a scene

• Several kinds about light

3

shadows

• Create simple shadows is an interesting application of projection matrices – Shadows are not geometric objects in

OpenGL – Shadows can realistic images and give

many visual clues to the spatial relationships among objects in a scene

4

How to create the object’s shadow

• Starting from a view point

• Lighting source is also required (infinitely light) – If light source is at the center of

projection, there are no visible shadows (shadows are behind the objects)

5

Polygon’s shadow

• Consider the shadow generated by the point source – Assume the shadow falls on the

surface (y=0)

– Then, the shadow polygon is related to original polygon • Shadow ~ origin

x

y

z

(xl,yl,zl)

6

• Find a suitable projection matrix and use OpenGL to compute the vertices of the shadow polygon – (x,y,z) in space -> (xp, yp, zp) in

projection plane

– Characteristic: • All projectors pass through the origin and all

projected polygon through the vertical to y-axis

is projected to

x

y

z

(xl,yl,zl)

7

• Shadow point and polygon point are projected from x-axis to y-axis

• Project from z-axis to y-axis

x

y

z

(xl,yl,zl)

y

x (xp,-d)

yp = -d

(x,y) px x

d y

/p

xx

y d

y

z (zp,-d)

yp = -d

(z,y) pz z

d y

/p

zz

y d

8

Homogeneous coordinates

• Original homogeneous coordinates:

1001

0

0100

0010

0001

1

z

y

x

d

z

y

x

p

p

p

Perspective projection matrix: shadow projection Matrix

/p

xx

y d

/p

zz

y d

yp = y

GLfloat m[16];

for(i=0;i<16;i++) m[i]=0.0;

m[0]=m[5]=m[10]=1.0; m[7]=-1.0/light[1];

GLfloat light[3]={0.0, 10.0, 0.0}; light[0]=10.0*sin((6.28/180.0)*theta); light[2]=10.0*cos((6.28/180.0)*theta);

Our light can be moved by design

9

Orthogonal view with clipping box

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT); /* set up standard orthogonal view with clipping */ /* box as cube of side 2 centered at origin */ glMatrixMode (GL_PROJECTION); glLoadIdentity (); glOrtho(-2.0, 2.0, -2.0, 2.0, -5.0, 5.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(1.0,1.0,1.0,0.0,0.0,0.0,0.0,1.0,0.0); // view plane up vector at y-axis (0.0,1.0,0.0)

10

Polygon & its shadow

/* define unit square polygon */ glColor3f(1.0, 0.0, 0.0);/* set drawing/fill color to red*/ glBegin(GL_POLYGON); glVertex3f(…); … glEnd(); glPushMatrix(); //save state glTranslatef(light[0], light[1],light[2]); //translate back glMultMatrixf(m); //project glTranslatef(-light[0], -light[1],-light[2]); //return origin //shadow object glColor3f(0.0,0.0,0.0); glBegin(GL_POLYGON); glVertex3f(…);… glEnd(); glPopMatrix(); //restore state

How to design the different size between original polygon & its shadow?

11

Special key parameter

void SpecialKeys(int key, int x, int y){ if(key == GLUT_KEY_UP){ theta += 2.0; if( theta > 360.0 ) theta -= 360.0; //set range’s boundary } if(key == GLUT_KEY_DOWN){ theta -= 2.0; if( theta < 360.0 ) theta += 360.0; } glutPostRedisplay(); }

demo x

y

z

12

How to design walking object?

• Walking direction?

• Viewer (camera) parameter

• Reshape projected function

13

Viewer (camera) moving (1)

• Viewer move the camera in a scene by depressing the x, X, y, Y, z, Z keys on keyboard

void keys(unsigned char key, int x, int y){

if(key == ‘x’) viewer[0] -= 1.0; if(key == ‘X’) viewer[0] += 1.0; if(key == ‘y’) viewer[1] -= 1.0; if(key == ‘Y’) viewer[1] += 1.0; if(key == ‘z’) viewer[2] -= 1.0; if(key == ‘Z’) viewer[2] += 1.0;

glutPostRedisplay(); }

Walking in a scene. What problem happen if object is walked far away?

14

Viewer (camera) moving (2)

• The gluLookAt function provides a simple way to reposition and reorient the camera

void display(void){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity(); gluLookAt(viewer[0],viewer[1],viewer[2],0.0,0.0,0.0,0.0,1.0,0.0); /* rotate cube */ glRotatef(theta[0], 1.0, 0.0, 0.0); glRotatef(theta[1], 0.0, 1.0, 0.0); glRotatef(theta[2], 0.0, 0.0, 1.0); colorcube(); glFlush(); glutSwapBuffers(); }

15

Viewer (camera) moving (3)

• Invoke glFrustum in the reshape callback to specify the camera lens

void myReshape(int w, int h){ glViewport(0, 0, w, h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); if(w<=h) glFrustum(-2.0, 2.0, -2.0 * (GLfloat) h/ (GLfloat) w, 2.0* (GLfloat) h / (GLfloat) w, 2.0, 20.0); else glFrustum(-2.0, 2.0, -2.0 * (GLfloat) w/ (GLfloat) h, 2.0* (GLfloat) w / (GLfloat) h, 2.0, 20.0); glMatrixMode(GL_MODELVIEW); }

demo

16

Light & surface

• Light reflection method is very complicated – Describe that light source is reflected from an

actual surface

– Maybe depends an many factors • Light source’s direction, observer’s eye and the

normal to the surface – Surface characteristics can also consider that its

roughness or surface’s color … (surface’s texture)

17

• Set a sphere model to cyan – Result

• the sphere seem like a circle

• We want to see a sphere – Material + light + viewer + surface

orientation • The material’s color can be designed

to a gradual transformation

Why do shading?

18

Lighting phenomenon

• Light sources – Point light sources

• Infinitely distant light sources • Radial intensity attenuation

– Directional light sources and spotlight effects • Angular intensity attenuation

• Surface lighting effects

19

Point light sources

• The simplest model for an object and its light source – Light rays are generated along radially

diverging paths from the single-color source position

• light source is a single color – The light source’s size is smaller than object

– We can use an illumination model to calculate the light direction to a selected object surface’s position

20

Infinitely distant light sources

• A large light source (sun) that is very far from a scene like a point light source

• Large light source is small different to point light source – When remote the point light source, the

object is illuminated at only one direction

– In constant to sun which is very far so it shines everywhere

21

Radial intensity attenuation (1)

• As radiant energy from a light source travels outwards through space, its amplitude at any distance dl from the source is decreased by the factor 1/dl

2 Energylight = 1

dl

Energylight = 1/dl2

dl’

Energylight = 1/dl’ 2

22

Radial intensity attenuation (2)

• General form to the object about the infinity light source and point light source

2

210

,10.1

ll

radattenl

dadaa

f

if source is at infinity

if source is local

23

Directional light sources and spotlight effects

• A local light source can easily be modified to produce a directional, or spotlight, beam of light. – The unit light-direction vector defines the axis

of a light cone, the angle θl defines the angular extent of the circular cone

θl

Light source

Vlight

Light direction vector

24

spotlight effects

θl

Light source

Cone axis vector

• Denote Vlight in the light-source direction and Vobj in the direction from the light position to an object position

α

To object vertex

Vlight

Vobj

Vobj .Vlight = cos α

00 <θl<= 900

cos α >= cosθl

if Vobj .Vlight < cosθl -> the object is outside the light cone

25

Angular intensity attenuation

• For a directional light source, we can degrade the light intensity angularly about the source as well as radially out from the point-source position. – Light intensity decreasing as we move

farther from the cone axis – Common angular intensity-attenuation

function for a directional light source

la

angattenf cos)( 0

26

Attenuation function

– al (attentuation exponent) is assigned

positive value • (al: the greater value in this function)

– Angle φis measured from the cone axis • Along the cone axis, φ=0o fangatten(φ)=1.0

la

angattenf cos)( 0

27

Combination above different light sources

• To determine the angular attenuation factor along a line from the light position to a surface position in a scene

la

lightobj

radattenlf

)(

0.0

0.1

,

VV

if source is not a spotlight

otherwise

if Vobj .Vlight = cos α < cosθl

28

Surface lighting effects

• Besides light source can light to object, object also can reflect lights – Surfaces that are rough so tend to

scatter the reflected light • when object exist more faces of surface,

more directions can be directed by the reflected light

29

Specular reflection

• Some of the reflected light is concentrated into a highlight called specular reflection – The lighting effect is more outstanding

on shiny surfaces

30

Summary light & surface

• Surface lighting effects are produced by a combination of illumination from light sources and reflections from other surfaces Surface is not directly

exposed to a light source may still be visible due to the reflected light from nearby objects.

The ambient light is the illumination effect produced by the reflected light from various surfaces

31

Homework

• Walking in a scene – Hint: Object

walking or walking above floor

– Example: color cube

demo

void polygon(int a, int b, int c , int d){ glBegin(GL_POLYGON); glColor3fv(colors[a]); glNormal3fv(normals[a]); glVertex3fv(vertices[a]); glColor3fv(colors[b]); glNormal3fv(normals[b]); glVertex3fv(vertices[b]); glColor3fv(colors[c]); glNormal3fv(normals[c]); glVertex3fv(vertices[c]); glColor3fv(colors[d]); glNormal3fv(normals[d]); glVertex3fv(vertices[d]); glEnd(); }

Texture

Ch10: Computer Graphics with OpenGL 3th, Hearn Baker Ch7: Interactive Computer Graphics 3th, Addison Wesley

33

Mapping methods

• Texture mapping

• Environmental maps

• The complex domain’s figure

34

Simple buffer mapping

• How we design program which can both write into and read from buffers.

• (Generally, two factors make these operations different between reading and writing into computer memory)

– First, read or write a single pixel or bit

– Rather, extend to read and write rectangular blocks of pixels (called bit blocks)

35

• Our program would follow user controlling when user assign to fill polygon, user key some words or user clear the window

• Therefore, both the hardware and software support a set of operations – The set of operations work on rectangular

blocks of pixels • This procedure is called bit-block transfer • These operations are raster operations (raster-ops)

Example: read & write

I love

OpenGL monitor

36

bit-block transfer (bitblt)

• Take an n*m block from the source buffer and to copy it into another buffer (destination buffer)

source

n m

destination

Frame buffer

Write_block(source,n,m,x,y,destination,u,v); • source and destination are the buffer

• the n*m source block which lower-left corner is at (x,y) to the destination buffer at a location (u,v)

• the bitblt is that a single function call alters the destination block

37

raster operations (raster-ops)

• The mode is the exclusive OR or XOR mode

XOR

Source pixel (s)

Color buffer

Read pixel (d)

Destination pixel (d’)

s d d’

0 0 0

0 1 1

1 0 1

1 1 0

True table d’ = d ⊕ s

glEnable(GL_COLOR_LOGIC_OP)

glLogicOp(GL_XOR)

38

Erasable Line

• What is Erasable Line ?

• How to implement?

39

Drawing erasable lines • Why line can erasable

– Line color and background color are combined togrther

• How to do – First, we use the mouse to get the first endpoint and

store it.

– Then, get the second point and draw a line segment in XOR mode

xm=x/500.; ym=(500-y)/500.;

xmm = x/500.; ymm=(500-y)/500.;

glColor3f(1.0,0.0,0.0); glLogicOp(GL_XOR); glBegin(GL_LINES); glVertex2f(xm,ym); glVertex2f(xmm,ymm); glEnd(); glLogicOp(GL_COPY); glFlush();

40

Texture mapping

• Texture mapping which describe a pattern map to a surface

• describe texture: parametric compute

Ch7: Interactive Computer Graphics 3th, Addison Wesley

textures

Regular pattern

41

Texture elements

• Texture elements which can be put in a array T(s,t) – This array is used to show a continuous

rectangular 2D texture pattern – Texture coordinates (s, t) which are

independent variables • With no loss of generality, scale (s, t) to the

interval (0, 1)

42

Texture maps (1)

• Texture map on a geometric object where mapped to screen coordinates for display – Object in spatial coordinates [(x,y,z) or

(x,y,z,w)] & texture elements (s,t) • The mapping function:

x = x(s,t), y = y(s,t), z = z(s,t), w = w(s,t)

• The inverse function: s = s(x,y,z,w), t = t(x,y,z,w)

43

Texture maps (2)

• If the geometric object in (u,v) surface (Ex: sphere…) – Object’s coordination (x,y,z) - > (u,v) – Parametric coordinates (u,v) can also be

mapped to texture coordinates – Consider the projection process from

worldcoordination to screencoordination • xs = xs(s,t), ys = ys(s,t)

44

Texture maps (3)

Ch7: Interactive Computer Graphics 3th, Addison Wesley

First, determine the map from texture coordinate to geometric coordinates. The mapping from this rectangle to an arbitrary region in 3D space

Second, owing to the nature of the rendering process, which works on a pixel-by-pixel

Third, we can use the texture maps to vary the object’s shape

45

Linear mapping function (1)

• 2D coordinated map

s

t

(rmax,smax)

(rmin,smin)

(umax,vmax)

(umin,vmin) ys

xs

)(

)(

minmax

minmax

minmin

minmax

minmax

minmin

vvtt

ttvv

uuss

ssuu

46

Linear mapping function (2)

• Cylinder coordination

s

t

hvz

vry

urx

/

)2sin(

)2cos(

u and v ~ (0,1)

=> s = u, t = v

47

Linear mapping function (3)

• Texture mapping with a box

s

t

Left Bottom

Back

Front

Right Top

48

Pixel and geometric pipelines

• OpenGL’s texture maps rely on its pipeline architecture

Geometric processing

Pixel operations

rasterization display vertices

pixels

49

Texture mapping in OpenGL (1)

• OpenGL contained the functionality to map 1D and 2D texture to one- through 4D graphical objects

• The key issue on texture mapping – The pixel pipeline can be mapped onto

geometric primitives.

Geometric processing

Pixel operations

vertices

pixels

50

Texture mapping in OpenGL (2)

• In particular, texture mapping is done as primitives are rasterized

• This process maps 3D points to locations (pixels) on the display

• Each fragment that is generated is tested for visibility (with z-buffer)

51

2D texture mapping (1)

• Support we have a 512*512 image my_texels

• Specify this array is too be used as a 2D texture

– tarray size is the same the width*height – The value components is the (1-4) of color components

(RGBA) or 3 (RGB) – The format (RGBA) = 4 or 3 (RGB) – In processor memory, tarry’s pixels are moved through

the pixel pipeline (** not in the frame buffer) – The parameters level and border give us fine control

GLubye my_texels[512][512]

glTexImage2D(GL_TEXTURE_2D, level, components, width, height, border, format,type,tarry);

Ex: glTexImage2D(GL_TEXTURE_2D, 0, 3, 512, 512, 0, GL_RGB,GL_UNSIGNED_BYTE,my_texels);

52

2D texture mapping (2)

• Enable texture mapping

• Specify how the texture is mapped onto a geometric object

glEnable(GL_TEXTURE_2D);

s

t

1

1

(0,0)

(512,512)

glTexCoord2f(s,t); glVertex2f(x,y,z);

glBegin(GL_QUAD);

glTexCoord2f(0.0,0.0); glVertex2f(x1,y1,z1); …. glEnd();

53

2D texture mapping (3)

• Mapping texels to pixels

s

t

ys

xs

s

t

ys

xs

Magnification: large Minification: min

glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);

glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);

54

Texture objects

• Texture generation in frame buffer

Texture unit 0 Texture unit 1

Texture unit 2

Fragment

Frame buffer

55

Environmental maps

• Mapping of the environment Object in environment

Projected object

Intermediate surface

T(s,t)

glTexGeni(GL_S,GL_TEXTURE_GEN_MODE,GL_SPHERE_MAP); glTexGeni(GL_T,GL_TEXTURE_GEN_MODE,GL_SPHERE_MAP);

glEnable(GL_TEXTURE_GEN_S); glEnable(GL_TEXTURE_GEN_T);

56

The complex domain’s figure

• The mandelbrot set

x

y z =x + iy

x

y

Complex plane Paths from complex recurrence

z0 z1=F(z0)

z3=F(z2) z2=F(z1)

z1=x1+iy1

z2=x2+iy2

z1+z2=(x1+x2)+i(y1+y2)

z1z2 = x1x2-y1y2+i(x1y2+x2y1)

|z|2=x2+y2

The complex plane’s function w=F(z)

A complex recurrence zk+1=F(zk)

Attractors: zk+1=zk2

Attractors general: zk+1=zk

2+c

57

Pixels & display

demo

The area centered at -0.75+i0.0

If |zk|>4, break

0~255 -> Rarray