Date post: | 14-Dec-2015 |
Category: |
Documents |
Upload: | kyleigh-pendlebury |
View: | 239 times |
Download: | 4 times |
1
Introduction to Computer Graphics with WebGL
Prof. John Gauch
CSCE Department
Spring 2015
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
2
Graphics Problem
•Consider a pinhole camera looking down the Z axis with lens at (0,0,0) and D=1
•What would we see on film if we had a 2x2x2 cube centered at position (0,0,2)?
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
3
Graphics Problem
•How can we write a program to create a line drawing of the input cube?
Assume we have a way to draw 2D lines given by two points (x1,y1) (x2,y2)
We must convert from 3D cube parameters into 2D line parameters somehow
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
4
Graphics Problem
•Start by looking at corners of cubeWhat is the range of x,y,z coordinates?
Xmin = -1, Xmax = 1
Ymin = -1, Ymax = 1
Zmin = 1, Zmax = 3
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
5
Graphics Problem
•Start by looking at corners of cubeWhat are their (x,y,z) coordinates?
(-1,-1,1) (1,-1,1)
(-1,-1,3) (1,-1,3)
(-1,1,1) (1,1,1)
(-1,1,3) (1,1,3)
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
6
Graphics Problem
•Start by looking at corners of cubeWhat are their projected coordinates?
xp = - x*d/z yp = -y*d/z
(1,1) (-1,1)
(1/3,1/3) (-1/3,1/3)
(1,-1) (-1,-1)
(1/3,-1/3) (-1/3,-1/3)
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
7
Graphics Problem
•Now consider the edges of cube
How many edges are there?
How can we specify these edges?
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
8
Graphics Problem
•Now consider the edges of cube
How many edges are there?
12
How can we specify these edges?
Give coordinates of 2 points per edge
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
9
Graphics Problem
•Now consider the faces of cube
How many faces are there?
How can we specify these faces?
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
10
Graphics Problem
•Now consider the faces of cube
How many faces are there?
6
How can we specify these faces?
Give coordinates of 4 points per face
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
11
Graphics Problem
•Should we draw edges or faces?
Both will require 24 points to specify cube (12*2 for edges, 6*4 for faces)
Drawing faces will actually draw each edge twice, so it is better to draw edges
Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
Draw Cube Code
const float DIST = 1.0;
int main()
{
// draw 3D cube based on min,max coordinates
cout << ”draw_cube(-1,-1,1, 1,1,3)\n";
draw_cube(-1,-1,1, 1,1,3);
}
12Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
Draw Cube Code
void draw_cube(float xmin, float ymin, float zmin,
float xmax, float ymax, float zmax)
{
// draw edges in X direction
draw_line(xmin, ymin, zmin, xmax, ymin, zmin);
draw_line(xmin, ymin, zmax, xmax, ymin, zmax);
draw_line(xmin, ymax, zmin, xmax, ymax, zmin);
draw_line(xmin, ymax, zmax, xmax, ymax, zmax);
13Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
Draw Cube Code
// draw edges in Y direction
draw_line(xmin, ymin, zmin, xmin, ymax, zmin);
draw_line(xmin, ymin, zmax, xmin, ymax, zmax);
draw_line(xmax, ymin, zmin, xmax, ymax, zmin);
draw_line(xmax, ymin, zmax, xmax, ymax, zmax);
// draw edges in Z direction
draw_line(xmin, ymin, zmin, xmin, ymin, zmax);
draw_line(xmin, ymax, zmin, xmin, ymax, zmax);
draw_line(xmax, ymin, zmin, xmax, ymin, zmax);
draw_line(xmax, ymax, zmin, xmax, ymax, zmax);
}
14Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
Draw Cube Code
void draw_line(float x1, float y1, float z1,
float x2, float y2, float z2)
{
// perform perspective projection
float x1p = - x1 * DIST / z1;
float y1p = - y1 * DIST / z1;
float x2p = - x2 * DIST / z2;
float y2p = - y2 * DIST / z2;
// draw 2D line
draw_line(x1p, y1p, x2p, y2p);
}
15Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
Draw Cube Code
void draw_line(float x1, float y1,
float x2, float y2)
{
// print draw message
cout << setprecision(2) << fixed;
cout << "draw\t" << x1 << "\t" << y1 << "\t"
<< x2 << "\t" << y2 << "\n";
}
16Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
Program Output
•What would we see if we have a 2x2x2 cube centered at position (0,0,2)?
•Our program should print the (x,y) end points for the 12 lines
17Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
Program Output
draw_cube(-1,-1,1, 1,1,3)
draw 1.00 1.00 -1.00 1.00
draw 0.33 0.33 -0.33 0.33
draw 1.00 -1.00 -1.00 -1.00
draw 0.33 -0.33 -0.33 -0.33
draw 1.00 1.00 1.00 -1.00
draw 0.33 0.33 0.33 -0.33
draw -1.00 1.00 -1.00 -1.00
draw -0.33 0.33 -0.33 -0.33
draw 1.00 1.00 0.33 0.33
draw 1.00 -1.00 0.33 -0.33
draw -1.00 1.00 -0.33 0.33
draw -1.00 -1.00 -0.33 -0.33
18Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
How long are these lines on the the screen?
Program Output
•This is what the cube looks like:
19Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
Program Output
•What do you think will happen if we move the cube in X or Y?
•What would we see if we have a 2x2x2 cube centered at position (3,3,2)?
20Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
Program Output
draw_cube(2,2,1, 4,4,3)
draw -2.00 -2.00 -4.00 -2.00
draw -0.67 -0.67 -1.33 -0.67
draw -2.00 -4.00 -4.00 -4.00
draw -0.67 -1.33 -1.33 -1.33
draw -2.00 -2.00 -2.00 -4.00
draw -0.67 -0.67 -0.67 -1.33
draw -4.00 -2.00 -4.00 -4.00
draw -1.33 -0.67 -1.33 -1.33
draw -2.00 -2.00 -0.67 -0.67
draw -2.00 -4.00 -0.67 -1.33
draw -4.00 -2.00 -1.33 -0.67
draw -4.00 -4.00 -1.33 -1.33
21Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
How did these lines move on the screen?
Program Output
•This is what the two cubes look like:
22Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
Program Output
•What do you think will happen if we move the cube in Z?
•What would we see if we have a 2x2x2 cube centered at position (21,21,21)?
23Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
Program Output
draw_cube(20,20,20, 22,22,22)
draw -1.00 -1.00 -1.10 -1.00
draw -0.91 -0.91 -1.00 -0.91
draw -1.00 -1.10 -1.10 -1.10
draw -0.91 -1.00 -1.00 -1.00
draw -1.00 -1.00 -1.00 -1.10
draw -0.91 -0.91 -0.91 -1.00
draw -1.10 -1.00 -1.10 -1.10
draw -1.00 -0.91 -1.00 -1.00
draw -1.00 -1.00 -0.91 -0.91
draw -1.00 -1.10 -0.91 -1.00
draw -1.10 -1.00 -1.00 -0.91
draw -1.10 -1.10 -1.00 -1.00
24Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
How long are these lines on the screen?
Program Output
•This is what the three cubes look like:
25Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
Conclusion
•We went through the steps needed to produce a line drawing of a 2x2x2 cubeFind the 8 corners of cubeDefine 12 line segments for cube edgesPerform perspective projection Print the 2D line segments
26Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015
Conclusion
•Our program was not very flexible We hard coded viewing direction We hard coded the focal length DWe can only handle 3D cubesOur cubes were aligned with x,y,z axesWe are only creating a line drawingWe are not removing hidden lines
27Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015