cg opengl shadows + light + texture -course 10
DESCRIPTION
Computer Graphics OpenGL- Introduce the relationship between light and shadow... How to create a textureTRANSCRIPT
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