computer graphic -- programming with opengl i

50
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: claude

Post on 13-Jan-2016

60 views

Category:

Documents


0 download

DESCRIPTION

Computer graphic -- Programming with OpenGL I. What is new. Website: http://www.ee.oulu.fi/~jiechen/Course.htm Lecture slides for 3 rd are online now. A Good news about VS2008. VS2008. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Computer graphic  --  Programming with OpenGL I

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

2

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

Jie chen

What is new

• Website:

http://www.ee.oulu.fi/~jiechen/Course.htm

• Lecture slides for 3rd are online now

Page 3: Computer graphic  --  Programming with OpenGL I

3

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

Jie chen

A Good news about VS2008A Good news about VS2008

Page 4: Computer graphic  --  Programming with OpenGL I

4

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

Jie chen

VS2008

• A studentstudent of University of Oulu (Oulun Yliopisto) can download her/his own freefree copies of MS Visual Studio 2008 Professional Edition (and other software) here: https://www.dreamspark.com/ – This is a Microsoft's site where user requires an MS Live accoun

t (free) and that needs to be verified to be a student account from our university. This is done using the authentication service that our university provides and can be done with an account to Paju.

• Also our IT department also links to the site as one of the software sources for students (in Finnish only) http://www.oulu.fi/tietohallinto/opiskelijoille/ohjelmistot.html

Page 5: Computer graphic  --  Programming with OpenGL I

5

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

Jie chen

Setup for VS2008• Run Visual C++ 2008. Go to Tools -> Options, then Projects and

Solutions -> VC++ Directories ->"Show directories for".– adding "include files” for the folder where you installed GLUT lib and

include folder.– adding “library files” for the folder where you installed gult32.lib.

Page 6: Computer graphic  --  Programming with OpenGL I

6

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

Jie chen

Setup for VS2008• Go to Project -> Properties. Click on Configuration Properties. Click

the "Configuration Manager" button in the upper-right corner. Change the "Active solution configuration" from "Debug" to "Release". Click close, then click OK.

• In Project -> Properties, go to Configuration Properties -> General. Where it shows the output directory as "Release", backspace the word "Release", and click OK. – This makes Visual C++ put the executable in the same directory as the

source code, so when our program needs to open a file, it looks for it in that directory.

– In this case, the program will have to load in an image file called "vtr.bmp".

• Go to Build -> Build project_name to build your project.

• Run the program by going to Debug -> Start Without Debugging. If all goes well, the test program should run.

Page 7: Computer graphic  --  Programming with OpenGL I

7

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

Jie chen

A simple example using OpenGL

Page 8: Computer graphic  --  Programming with OpenGL I

8

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 "basic shapes" program, and compile and run it (details on how to do that can be found in Lecture 3).

• Take a look at it, and hit ESC when you're done. • It should look like the following image:

Page 9: Computer graphic  --  Programming with OpenGL I

9

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 y direction pointing upward.

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

Page 10: Computer graphic  --  Programming with OpenGL I

10

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.

eyes3D points

Page 11: Computer graphic  --  Programming with OpenGL I

11

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 pixel coordinates 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, as in the above picture.

• So, when OpenGL wants to draw a triangle, it converts the three vertices into pixel coordinates and draws a "2D" triangle using those coordinates.

3D points

pixel coordinates

Page 12: Computer graphic  --  Programming with OpenGL I

12

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.

• Of course, 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 Rings

Page 13: Computer graphic  --  Programming with OpenGL I

13

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 the angle that your eye can see.

Page 14: Computer graphic  --  Programming with OpenGL I

14

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 researcher or programmer, we want to see some code.

• Take a look at main.cpp.– Let's go through the file and see if we can und

erstand what it's doing.

Page 15: Computer graphic  --  Programming with OpenGL I

15

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 i

nclude GLUT/glut.h and OpenGL/OpenGL.h; – otherwise, we include GL/glut.h.

Page 16: Computer graphic  --  Programming with OpenGL I

16

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

Jie chen

Going Through the Source Code

• It just makes it so that we don't have to type std:: a lot;– for example, so we can use cout instead of s

td::cout.

Page 17: Computer graphic  --  Programming with OpenGL I

17

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 18: Computer graphic  --  Programming with OpenGL I

18

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. – The call makes sure that an object (O2) show

s up behind an object (O1).– Note that glEnable, like every OpenGL functi

on, begins with "gl".

Page 19: Computer graphic  --  Programming with OpenGL I

19

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 w

indow.

Page 20: Computer graphic  --  Programming with OpenGL I

20

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

Jie chen

Going Through the Source Code

• void gluPerspective(GLdouble fovy, GLdouble aspect,GLdouble near, GLdouble far);.– fovy =Θ=45.0: telling OpenGL the angle that user's eye can see. – Near=1.0: indicates not to draw anything with a z coordinate of s

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

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

viewing volume

Page 21: Computer graphic  --  Programming with OpenGL I

21

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

Jie chen

Going Through the Source Code

• So, why does gluPerspective begin with "glu" instead of "gl"? – gl: a OpenGL function– glu: a GLU (GL Utility) function– glut: a GLUT (GL Utility Toolkit) function– For examples:

• glRectf(-25.0, -25.0, 25.0, 25.0);• gluOrtho2D (0.0, w, 0.0, h);• glutSwapBuffers();

– We won't really worry about the difference among OpenGL, GLU, and GLUT.

• Just include “glut.h”, that is enough for Windows.

Page 22: Computer graphic  --  Programming with OpenGL I

22

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

Jie chen

Going Through the Source Code

• The drawScene function is where the 3D drawing actually occurs. – call glClear to clear information from the last ti

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

do this.

Page 23: Computer graphic  --  Programming with OpenGL I

23

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

Jie chen

Going Through the Source Code

• GL_COLOR_BUFFER_BIT:  Color Buffer– OpenGL defined constants begin

with GL_, use all capital letters, and use underscores to separate words

– The Color Buffer store the color for each pixels of the current frame.

– The color is in RGBA mode i.e., Red, Green, Blue and Alpha.

– The first 3 components (RGB) can be considered as color of a pixel.

– Alpha value can be considered as the opacity or transparency of a pixel.  

Page 24: Computer graphic  --  Programming with OpenGL I

24

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

Jie chen

Going Through the Source Code• GL_DEPTH_BUFFER_BIT:  Depth Buffer

– Depth Buffer holds the depth of each pixels of a frame. – It is also called z buffer. – Depth buffer is associated with Depth Test.– For each pixel drawn, Depth Test compare the current

depth stored in the depth buffer with the depth of the new pixel to draw.

– a pixel is drawn or not depending on result of depth test. – We usually use the depth buffer to draw nearest pixels

(p1), pixels behind are not drawn (p2).

viewing volume

p1 p2

Page 25: Computer graphic  --  Programming with OpenGL I

25

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

Jie chen

Going Through the Source Code

• More about Buffer?

– http://jerome.jouvie.free.fr/OpenGl/Lessons/Lesson5.php

Page 26: Computer graphic  --  Programming with OpenGL I

26

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

Jie chen

Going Through the Source Code

• For now, we'll ignore this.

• It'll make sense after the next lesson.

Page 27: Computer graphic  --  Programming with OpenGL I

27

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 trapezoid (Begin the substance of our pr

ogram). – Call glBegin(GL_QUADS) to tell OpenGL that we want

to start drawing quadrilaterals. – Specify the four 3D coordinates of the vertices of the tra

pezoid, in order, using calls to glVertex3f. – After drawing quadrilaterals, call glEnd().

• Note that every call to glBegin must have a matching call to glEnd.

(-0.7f, -1.5f, -5.0f) (0.7f, -1.5f, -5.0f)

(0.4f, -0.5f, -5.0f)(-0.4f, -0.5f, -5.0f)

Page 28: Computer graphic  --  Programming with OpenGL I

28

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.

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

– Calling glBegin(GL_TRIANGLES) to tell OpenGL that let us begin to draw triangles.

– Specify coordinates of the vertices.– OpenGL automatically puts the coordinates together i

n groups of three.– Each group of three coordinates represents one trian

gle.

Page 29: Computer graphic  --  Programming with OpenGL I

29

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

Jie chen

Going Through the Source Code

• Finally, we 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.

Page 30: Computer graphic  --  Programming with OpenGL I

30

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

Jie chen

Going Through the Source Code

• Finish drawing triangles -> call glEnd().• Note that we could have drawn the four triangles using fo

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

• There are other things we can pass to glBegin in addition to GL_TRIANGLES and GL_QUADS, but triangles and quadrilaterals are the most common things to draw.

Page 31: Computer graphic  --  Programming with OpenGL I

31

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 move the scene to the window.

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

Page 32: Computer graphic  --  Programming with OpenGL I

32

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. – start by initializing GLUT.– In the call to glutInitWindowSize and set the window

to be 400x400. – Call glutCreateWindow to tell OpenGL what title we

want for the window. – Call initRendering to initialize OpenGL rendering.

Page 33: Computer graphic  --  Programming with OpenGL I

33

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 to handle keypresses and drawing and resizing the window.

• One important thing: – we're not allowed to draw anything except insi

de the drawScene function that we explicitly give to GLUT

Page 34: Computer graphic  --  Programming with OpenGL I

34

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

Jie chen

Going Through the Source Code

• Call glutMainLoop, which tells GLUT to do its thing. – capture key and mouse input – draw the scene by calling our drawScene function – do some other stuff

• glutMainLoop like a defective boomerang, never returns. – GLUT just takes care of the rest of our program's execution.

• After the call, 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.

• And that's how our first OpenGL program works.

Page 35: Computer graphic  --  Programming with OpenGL I

35

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

Jie chen

More details about this example

Page 36: Computer graphic  --  Programming with OpenGL I

36

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

Jie chen

OpenGL function format

glVertex4f(x,y,z,w)

belongs to GL library

function name

x,y,z,w are floats

glVertex4fv(p)

p is a pointer to an array

dimensions

gl: a OpenGL functionglu: a GLU (GL Utility) functionglut: a GLUT (GL Utility Toolkit) function

Page 37: Computer graphic  --  Programming with OpenGL I

37

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

Jie chen

OpenGL function format

glVertex4f(x,y,z,w)

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

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

glVertex2f(1, 2) -> glVertex4f(1, 2, 0, 1)

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

i.e., z =0 and w=1

i.e., w=1

Page 38: Computer graphic  --  Programming with OpenGL I

38

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

Jie chen

OpenGL function formatglVertex3f(x,y,z)

Page 39: Computer graphic  --  Programming with OpenGL I

39

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

Page 40: Computer graphic  --  Programming with OpenGL I

40

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 41: Computer graphic  --  Programming with OpenGL I

41

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 polygon

nonconvex polygon

p1

p2

Page 42: Computer graphic  --  Programming with OpenGL I

42

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 polygons which do not satisfy these conditio

ns?– 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 or quadrangle

nonsimple polygonnonconvex polygon

Page 43: Computer graphic  --  Programming with OpenGL I

43

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

Jie chen

Polygon Issues

• Subdividing – to Improve a Polygonal Approximation to a Su

rface using approximating triangles

20 triangles 80 triangles 320 triangles

Page 44: Computer graphic  --  Programming with OpenGL I

44

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 45: Computer graphic  --  Programming with OpenGL I

45

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

Jie chen

Polygon Issues

• Do something huge!

Page 46: Computer graphic  --  Programming with OpenGL I

46

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 lig

hting • 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 47: Computer graphic  --  Programming with OpenGL I

47

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 small polygons in regions of high curvature

• Avoid T-intersections in our 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 48: Computer graphic  --  Programming with OpenGL I

48

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.

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

• pixel: the smallest visible element that 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.

pixel

Page 49: Computer graphic  --  Programming with OpenGL I

49

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 Buffer

CRT Raster

8

8

8

Page 50: Computer graphic  --  Programming with OpenGL I

50

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

Jie chen

• The end of this lecture!