1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. Program Output draw_cube(-1,-1,1, 1,1,3) draw1.001.00-1.001.00 draw0.330.33-0.330.33 draw1.00-1.00-1.00-1.00 draw0.33-0.33-0.33-0.33 draw1.001.001.00-1.00 draw0.330.330.33-0.33 draw-1.001.00-1.00-1.00 draw-0.330.33-0.33-0.33 draw1.001.000.330.33 draw1.00-1.000.33-0.33 draw-1.001.00-0.330.33 draw-1.00-1.00-0.33-0.33 18 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 How long are these lines on the the screen?

19. Program Output This is what the cube looks like: 19 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

20. 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

21. 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 21 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 How did these lines move on the screen?

22. Program Output This is what the two cubes look like: 22 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

23. 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

24. 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 24 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 How long are these lines on the screen?

25. Program Output This is what the three cubes look like: 25 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

26. 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

27. 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