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 cube ­What 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 cube ­What 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 cube ­What are their projected coordinates? xp = - x*d/zyp = -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); } 12 Angel 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); 13 Angel 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); } 14 Angel 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); } 15 Angel 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"; } 16 Angel 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 17 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Program Output draw_cube(-1,-1,1, 1,1,3) draw draw draw draw draw draw draw draw draw draw draw draw Angel 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: 19 Angel 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)? 20 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Program Output draw_cube(2,2,1, 4,4,3) draw draw draw draw draw draw draw draw draw draw draw draw Angel 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: 22 Angel 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)? 23 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Program Output draw_cube(20,20,20, 22,22,22) draw draw draw draw draw draw draw draw draw draw draw draw Angel 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: 25 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Conclusion We went through the steps needed to produce a line drawing of a 2x2x2 cube ­Find the 8 corners of cube ­Define 12 line segments for cube edges ­Perform perspective projection ­Print the 2D line segments 26 Angel 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 D ­We can only handle 3D cubes ­Our cubes were aligned with x,y,z axes ­We are only creating a line drawing ­We are not removing hidden lines 27 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015