computer graphic -- programming with opengl i · window is resized. – w and h are the new width...

46
C O M P U T E R G R A P H I C S Jie chen Computer graphic -- Programming with OpenGL I

Upload: others

Post on 09-Aug-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

C O M P U T E R G R A P H I C S

Jie chen

Computer graphic-- Programming with OpenGL I

Page 2: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

2

C O M P U T E R G R A P H I C S

Jie chen

A simple example using OpenGL

• Download the example code "basic shapes" , and compile and run it

• Take a look at it, and hit ESC when you're done.

• It shows the following image:

Page 3: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

3

C O M P U T E R G R A P H I C S

Jie chen

Overview of How the Program Works

• How does the program work? – The basic idea is that we tell OpenGL

the 3D coordinates of all of the vertices of our shapes.

– OpenGL uses the standard x and y axes, with the positive x direction pointing toward the right and the positive ydirection pointing upward.

– In 3D we need another dimension, the z dimension. The positive z direction points out of the screen.

Page 4: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

4

C O M P U T E R G R A P H I C S

Jie chen

Overview of How the Program Works

• How does OpenGL use these 3D coordinates?

• It simulates the way that our eyes work. Take a look at the following picture.

Page 5: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

5

C O M P U T E R G R A P H I C S

Jie chen

Overview of How the Program Works

• OpenGL converts all of the 3D points to pixelcoordinates before it draws anything.

• To do this, it draws a line from each point in the scene to your eye and takes the intersection of the lines and the screen rectangle

• Draw a triangle: it converts the three vertices into pixel coordinates and draws a "2D" triangleusing those coordinates.

Page 6: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

6

C O M P U T E R G R A P H I C S

Jie chen

Overview of How the Program Works

• The user's "eye" is always at the origin and looking in the negative z direction.

• OpenGL doesn't draw anything that is behind the "eye". (After all, it isn't the all-seeing eye of Sauron.)

The eye of Sauron,The Lord of the Ringsz direction

Page 7: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

7

C O M P U T E R G R A P H I C S

Jie chen

Overview of How the Program Works

• How far away is the screen rectangle from your eye?

• It doesn't matter. – No matter how far away the screen rectangle

is, a given 3D point will map to the same pixel coordinates.

– All that matters is angle that your eye can see.

Perspective projection: all projectors meet at the center of projection (COP)

P

P’

Page 8: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

8

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code

• All of this stuff about pixel coordinates is great and all, but as programmers, we want to see some codes.

• Take a look at main.cpp.– the code is free.

Page 9: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

9

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code

• Take a look at main.cpp.– The second thing you'll notice is that it's

heavily commented.– Let's go through the file.

Page 10: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

10

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code

• First, we include our header files. – Pretty standard stuff for C++. – If we're using a Mac, we want our program to

include GLUT/glut.h and OpenGL/OpenGL.h; – Linux/Unix/Windows, include GL/glut.h.

Page 11: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

11

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code

• We'll have this line near the top of main.cpp in all of our programs.

• By this line, we don't have to type std:: a lot;– for example, so we can use cout instead

of std::cout.

Page 12: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

12

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code

• This function handles any keys pressed by the user.

• For now, all that it does is quit the program when the user presses ESC, by calling exit.

• The function is passed the x and y coordinates of the mouse, but we don't need them.

Page 13: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

13

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code• The initRendering function initializes our

rendering parameters. – For now, it doesn't do much. – We'll pretty much always want to call

glEnable(GL_DEPTH_TEST) when we initialize rendering. – The call makes sure that an object shows up behind

an object in front of it that has already been drawn, which we want to happen.

– Note that glEnable, like every OpenGL function, begins with "gl".

Page 14: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

14

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code

• The handleResize function is called whenever the window is resized.– w and h are the new width and height of the window.

• There are a couple of things to notice.– When we pass 45.0 to gluPerspective, we're telling OpenGL

the angle that the user's eye can see. – The1.0 indicates not to draw anything with a z coordinate of

greater than -1. This is so that when something is right next to our eye, it doesn't fill up the whole screen.

– The 200.0 tells OpenGL not to draw anything with a z coordinate less than -200. We don't care very much about stuff that's really far away.

Page 15: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

15

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code

• The handleResize function is called whenever the window is resized.– w and h are the new width and height of the window. – The content of handleResize will be not change much in our

other projects, so you don't have to worry about it too much.• There are a couple of things to notice.

– When we pass 45.0 to gluPerspective, we're telling OpenGL the angle that the user's eye can see.

– The1.0 indicates not to draw anything with a z coordinate of greater than -1. This is so that when something is right next to our eye, it doesn't fill up the whole screen.

– The 200.0 tells OpenGL not to draw anything with a z coordinate less than -200. We don't care very much about stuff that's really far away.

(-1, -200)

Page 16: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

16

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code

• gluPerspective– gl: OpenGL library– glu : a GLU (GL Utility) function. – glut: GL Utility Toolkit. – Don't worry about the difference among

OpenGL, GLU, and GLUT.

Page 17: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

17

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code

• drawScene for 3D drawing. – glClear to clear information from the last time

we drew. – In most OpenGL program, you'll want to do

this.

Page 18: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

18

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code

• transformations • For now, ignore this

Page 19: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

19

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code• begin the substance of our program. • This part draws the trapezoid.

– glBegin(GL_QUADS) to tell OpenGL to start drawing quadrilaterals.

– glVertex3f, specify the four 3D coordinates of the vertices. • "3“ means three coordinates• "f" means in float format• All of the "f"'s after the vertex coordinates force the compiler to treat

the numbers as floats. – glEnd(): stop after drawing quadrilaterals

• Every call to glBegin must have a matching call to glEnd.

Page 20: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

20

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code• begin the substance of our program.

Page 21: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

21

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code• glBegin/glEnd calls are nowadays deprecated after

OpenGL 3.0 standard. – They will probably keep working in the foreseeable future.

• The OpenGL 3.0 specification marks several features as deprecated, including the venerable glBegin/glEndmechanism, display lists, matrix and attribute stacks, and the portion of the fixed function pipe subsumed by shaders (lighting, fog, texture mapping, and texture coordinate generation). – http://www.opengl.org/registry/

Page 22: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

22

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code• Draw the pentagon.

– split it up into three triangles, which is pretty standard for OpenGL.

– glBegin(GL_TRIANGLES) to tell OpenGL to draw triangles.

– tell it the coordinates of the vertices of the triangles.– OpenGL automatically puts the coordinates together

in groups of three.– Each group of three coordinates represents one

triangle.

1 23

Page 23: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

23

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code

• draw the triangle. • We haven't called glEnd() to tell OpenGL

that we're done drawing triangles yet, so it knows that we're still giving it triangle coordinates.

1 23

Page 24: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

24

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code

• glEnd(): finish drawing triangles• To draw the above four triangles using four calls

to glBegin(GL_TRIANGLES) and four glEnd(). However, this makes the program slower, and you shouldn't do it.

• we can pass other geometry shape to glBeginbesides GL_TRIANGLES and GL_QUADS, but triangles and quadrilaterals are the most common

1 23

Page 25: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

25

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code

• This line makes OpenGL actually movethe scene to the window.

• We'll call it whenever we're done drawing a scene.

Page 26: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

26

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code• main function. • We start by initializing GLUT.• It will appear in all of our programs, don't have to

worry too much about it. – glutInitWindowSize, set the window to be 400x400. – glutCreateWindow, tell it what title for the window. – initRendering, initialize OpenGL rendering.

Page 27: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

27

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code

• point GLUT to the functions that we wrote to handle keypresses and drawing and resizing the window.

• One important thing to note: we're not allowed to draw anything except inside the drawScene function that we explicitly give to GLUT, or inside functions that drawScene calls (or functions that they call, etc.).

Page 28: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

28

C O M P U T E R G R A P H I C S

Jie chen

Going Through the Source Code

• glutMainLoop, tells GLUT to do its thing. – tell GLUT to capture key and mouse input, to draw the scene

when it has to by calling our drawScene function.• glutMainLoop, like a defective boomerang, never

returns. – GLUT just takes care of the rest of our program's execution.

• return 0 so that the compiler doesn't complain about the main function not returning anything, but the program will never get to that line.

• that's how our first OpenGL program works.

Page 29: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

29

C O M P U T E R G R A P H I C S

Jie chen

OpenGL function format

glVertex3f(x,y,z,w)

belongs to GL library

function name

x,y,z,w are floats

glVertex3fv(p)

p is a pointer to an array

dimensions

Page 30: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

30

C O M P U T E R G R A P H I C S

Jie chen

OpenGL function format

glVertex3f(x,y,z,w)

• x,y and z are coordinates and w is a factor, so the real coordinates is (x/w, y/w, z/w). • The default values of z and w are z =0 and w=1, respectively.• For examples:

glVertex3f(1, 2, -3, 3) -> glVertex3f(1/3, 2/3, -1, 1)

glVertex3f(1, 2, -3) -> glVertex3f(1, 2, -3, 1)

glVertex3f(1, 2) -> glVertex3f(1, 2, 0, 1)

Page 31: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

31

C O M P U T E R G R A P H I C S

Jie chen

OpenGL PrimitivesglVertex3f(x,y,z)

Page 32: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

32

C O M P U T E R G R A P H I C S

Jie chen

OpenGL Primitives

GL_POINTSGL_POINTS GL_LINESGL_LINES

GL_LINE_LOOPGL_LINE_LOOPGL_LINE_STRIPGL_LINE_STRIP

OpenGL automatically puts the coordinates together in groups of two.

OpenGL automatically puts the coordinates one by one.

Page 33: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

33

C O M P U T E R G R A P H I C S

Jie chen

OpenGL Primitives

GL_QUAD_STRIPGL_QUAD_STRIP GL_POLYGONGL_POLYGON

GL_TRIANGLE_STRIPGL_TRIANGLE_STRIP GL_TRIANGLE_FANGL_TRIANGLE_FANGL_TRIANGLESGL_TRIANGLES

Page 34: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

34

C O M P U T E R G R A P H I C S

Jie chen

Polygon Issues• OpenGL will only display polygons correctly that are

– Simple: edges cannot cross– Convex: All points on line segment between two points in a

polygon are also in the polygon– Flat: all vertices are in the same plane

• User program can check if above true– OpenGL will produce output if these conditions are violated but it

may not be what is desired• Triangles satisfy all conditions

nonsimple polygonnonconvex polygon

p1

p2

Page 35: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

35

C O M P U T E R G R A P H I C S

Jie chen

Polygon Issues• How can we plot those polygon which does not satisfy these

conditions?– nonsimple polygon : edges DO cross– nonconvex polygon : There are points on line segment between two

points in a polygon are NOT in the polygon– Flat: all vertices are NOT in the same plane

• Solution: divide them using Triangles because triangles satisfy all conditions

nonsimple polygon nonconvex polygon

1 23

Page 36: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

36

C O M P U T E R G R A P H I C S

Jie chen

Polygon Issues

• Subdividing: improve a polygonal approximation to a surface using approximating triangles

20 triangles 80 triangles 320 triangles

Page 37: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

37

C O M P U T E R G R A P H I C S

Jie chen

Polygon Issues

• Do something huge!

Demo

Page 38: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

38

C O M P U T E R G R A P H I C S

Jie chen

Polygon Issues

• Do something huge!

Page 39: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

39

C O M P U T E R G R A P H I C S

Jie chen

Hints for polygonizing surfaces

• Keep polygon orientations consistent– all clockwise or all counterclockwise– important for polygon culling and two-sided

lighting

Page 40: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

40

C O M P U T E R G R A P H I C S

Jie chen

Hints for polygonizing surfaces

• Watch out for any nontriangular polygons – three vertices of a triangle are always on a

plane; any polygon with four or more vertices might not

Page 41: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

41

C O M P U T E R G R A P H I C S

Jie chen

Hints for polygonizing surfaces• There's a trade-off between the

display speed and the image quality– few polygons render quickly but

might have a jagged appearance; millions of tiny polygons probably look good but might take a long time to render

– use large polygons where the surface is relatively flat, and smallpolygons in regions of highcurvature

Page 42: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

42

C O M P U T E R G R A P H I C S

Jie chen

Hints for polygonizing surfaces

• Try to avoid T-intersections in your models – there's no guarantee that the line

segments AB and BC lie on exactly the same pixels as the segment AC

– this can cause cracks to appear in the surface

Page 43: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

43

C O M P U T E R G R A P H I C S

Jie chen

Some terms

• Rendering: the process by which a computer creates images from models.

• models, or objects: constructed from geometric primitives - points, lines, and polygons - that are specified by their vertices.

Page 44: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

44

C O M P U T E R G R A P H I C S

Jie chen

Some terms• pixel: the smallest visible element the display

hardware can put on the screen. The final rendered image consists of pixels drawn on the screen.

• Bitplane: an area of memory that holds one bit of information (for instance, what color it is supposed to be) for every pixel on the screen.

• framebuffer : Organized by the bitplanes. It holds all the information that the graphics display needs to control the color and intensity of all the pixels on the screen.

Page 45: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

45

C O M P U T E R G R A P H I C S

Jie chen

24-bit true color

pixel

Bitplane

DAC: digital-to-analog converter

0 1 0 0 1 0 1 1

1 0 1 0 1 1 0 0

0 0 0 0 1 0 1 0

8 bit DAC

8 bit DAC

8 bit DAC

registers

Blue 75

Green 172

Red 10

Color Guns

Frame BufferCRT Raster

8

8

8

0 1 0

0 1 0

1 1

Page 46: Computer graphic -- Programming with OpenGL I · window is resized. – w and h are the new width and height of the window. – The content of handleResize will be not change much

46

C O M P U T E R G R A P H I C S

Jie chen

• The end of this lecture!