Download presentation

Presentation is loading. Please wait.

Published byKyleigh Pendlebury Modified over 3 years ago

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

Similar presentations

OK

1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.

1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.

© 2018 SlidePlayer.com Inc.

All rights reserved.

To make this website work, we log user data and share it with processors. To use this website, you must agree to our Privacy Policy, including cookie policy.

Ads by Google