1 Introduction to Computer Graphics with WebGL Prof. John Gauch CSCE Department Spring 2015 Angel...

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)?


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


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


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)


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)


7

Graphics Problem

•Now consider the edges of cube

How many edges are there?

How can we specify these edges?


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


9

Graphics Problem

•Now consider the faces of cube

How many faces are there?

How can we specify these faces?


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


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


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);


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);

}


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);

}


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";

}


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


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


How long are these lines on the the screen?

Program Output

•This is what the cube looks like:


Program Output

•What do you think will happen if we move the cube in X or Y?



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


How did these lines move on the screen?

Program Output

•This is what the two cubes look like:


Program Output

•What do you think will happen if we move the cube in Z?



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


How long are these lines on the screen?

Program Output

•This is what the three cubes look like:


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


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


1 Introduction to Computer Graphics with WebGL Prof. John Gauch CSCE Department Spring 2015 Angel...

Documents

Transcript of 1 Introduction to Computer Graphics with WebGL Prof. John Gauch CSCE Department Spring 2015 Angel...