Computer Graphics (Basic OpenGL) Thilo Kielmann Fall 2008 Vrije - - PowerPoint PPT Presentation

▶
computer graphics basic opengl
SMART_READER_LITE
LIVE PREVIEW

Computer Graphics (Basic OpenGL) Thilo Kielmann Fall 2008 Vrije - - PowerPoint PPT Presentation

Jan 22, 2023 214 likes •520 views

Computer Graphics (Basic OpenGL) Thilo Kielmann Fall 2008 Vrije Universiteit, Amsterdam kielmann@cs.vu.nl http://www.cs.vu.nl/graphics/ Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) 20002008, Thilo Kielmann c 1

slide-1
SLIDE 1

Computer Graphics (Basic OpenGL)

Thilo Kielmann Fall 2008 Vrije Universiteit, Amsterdam kielmann@cs.vu.nl http://www.cs.vu.nl/˜graphics/

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 1

Outline for today

  • Vertices
  • Control and the window system
  • Basic elements (color, polygons, text)
  • Image formation
  • Viewing API’s

⇒ Vertices

slide-2
SLIDE 2

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 2

OpenGL’s “Atoms”: Vertices

  • a point is called a vertex

⋆ user coordinates: possibly infinite drawing pad

  • vertices (plural of vertex) are always 3D

⋆ can also be used as 2D

  • general form: glVertex*

examples: ⋆ glVertex2i(GLint x, GLint y) ⋆ glVertex3f(GLfloat x, GLfloat y, GLfloat z) ⋆ glVertex3fv(GLfloat[] vertex)

(x,y) (x,y,z) (x,y,z,w) 2 3 4 byte unsigned byte short unsigned short int unsigned int float double b ub s us i ui d f

  • mit "v" for

scalar form glVertex2( x,y ) Number of components Data Type Vector

glVertex3fv ( v )

All OpenGL calls follow this general structure.

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 3

Vertices are used to build other primitives

glBegin(GL POINTS); glVertex2f(x1,y1); glVertex2f(x2,y2); glEnd(); glBegin(GL LINES); glVertex2f(x1,y1); glVertex2f(x2,y2); glEnd();

slide-3
SLIDE 3

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 4

Example: The Sierpinksi Gasket

given v1, v2, and v3 pick p0 at random pick one of v1, v2, v3 at random p1 = ”halfway”between p0 and vertex display p1 replace p0 by p1 and continue

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 5

Plotting Sierpinski Points

void display( void ){ typedef GLfloat point2[2]; point2 vertices[3]={{0.0,0.0},{250.0,500.0},{500.0,0.0}}; point2 p ={75.0,50.0}; /* initial point inside triangle */ int j, k, rand(); for ( k=0; k<5000; k++) { j=rand() %3; /* pick a vertex at random */ p[0] = (p[0]+vertices[j][0])/2.0; p[1] = (p[1]+vertices[j][1])/2.0; glBegin(GL_POINTS); glVertex2fv(p); glEnd(); } glFlush(); /* clear buffers */ }

slide-4
SLIDE 4

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 6

Still Open Questions:

  • 1. In what colors are we drawing?
  • 2. Where on the screen does our image appear?
  • 3. How large will the image be?
  • 4. How do we create a window for the image?
  • 5. Objects at which coordinates will appear on the screen?
  • 6. How long will the image remain on the screen?

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 7

Answering these Questions: Categories of Graphics Functions

  • 1. primitive functions (objects: “what”)
  • 2. attribute functions (“how”)
  • 3. viewing functions (camera)
  • 4. transformation functions (e.g., rotation . . . )
  • 5. input functions
  • 6. control functions
slide-5
SLIDE 5

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 8

Outline for today

  • Vertices
  • Control and the window system
  • Basic elements (color, polygons, text)
  • Image formation
  • Viewing API’s

⇒ Control and the window system

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 9

OpenGL Library Structure

#include <GL/glut.h>

  • r:

#include <glut.h> glFunction() gluFunction() glutFunction()

slide-6
SLIDE 6

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 10

OpenGL Library Structure (Unix vs. Windows)

Only use GL, GLU, and GLUT calls for portable programs! (Check the documentation for our own header file.)

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 11

Control and the Window System = ⇒ GLUT

#include <GL/glut.h> int main(int argc, char** argv){ glutInit(&argc,argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(500,500); glutInitWindowPosition(0,0); glutCreateWindow("Sierpinski Gasket"); glutDisplayFunc(display); /* register display func. */ myinit(); /* application-specific inits */ glutMainLoop(); /* enter event loop */ return 0; }

slide-7
SLIDE 7

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 12

myinit() – Application-specific

void myinit(void) { glClearColor(1.0, 1.0, 1.0, 1.0); /* white background */ /* ^----- opaque background */ glColor3f(1.0, 0.0, 0.0); /* draw in red */ glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0, 500.0, 0.0, 500.0); /* ==> orthographic viewing */ glMatrixMode(GL_MODELVIEW); }

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 13

display() – Application-specific

void display( void ){ typedef GLfloat point2[2]; point2 vertices[3]={{0.0,0.0},{250.0,500.0},{500.0,0.0}}; point2 p ={75.0,50.0}; /* initial point inside triangle */ int j, k, rand(); for ( k=0; k<5000; k++) { j=rand() %3; /* pick a vertex at random */ p[0] = (p[0]+vertices[j][0])/2.0; p[1] = (p[1]+vertices[j][1])/2.0; glBegin(GL_POINTS); glVertex2fv(p); glEnd(); } glFlush(); /* clear buffers */ }

slide-8
SLIDE 8

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 14

BTW: Window Size and Aspect Ratio

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 15

Viewports

void glViewport( GLint x, GLint y, GLsizei w, GLsizei h)

slide-9
SLIDE 9

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 16

Outline for today

  • Vertices
  • Control and the window system
  • Basic elements (color, polygons, text)
  • Image formation
  • Viewing API’s

⇒ Basic elements (color, polygons, text)

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 17

The Graphics State Machine

First, attribute functions set how vertices will be displayed. Then, vertices are drawn, according to the current state. (According to all previous calls to the attribute functions.)

slide-10
SLIDE 10

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 18

RGB: Additive Color Matching

C = T1 · R + T2 · G + T3 · B

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 19

The Color Solid (Color Cube)

slide-11
SLIDE 11

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 20

Additive and Subtractive Color

RGB CMY (CMYK)

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 21

The Human Visual System

All the graphics hardware is used trying to impress the human eye. . .

slide-12
SLIDE 12

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 22

BTW: What is Light?

The Electromagnetic Spectrum:

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 23

Human (Cone) Observer Curves

standard observer curve cone sensitivity curves Color perception is individual, non-linear, non-trivial. . .

slide-13
SLIDE 13

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 24

Geometric Primitive Elements

glBegin( ... ); glVertex*( ... ); . . glEnd();

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 25

Polygon Types

The appearance of polygons depends on the attributes that have been set before. (This is the same as with lines.)

slide-14
SLIDE 14

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 26

Polygon Strips

P0 P2 P4 P6 P1 P3 P5 P7 P0 P2 P4 P6 P1 P3 P5 P7 P0 P1 P2 P3 P4 GL_TRIANGLE_STRIP GL_QUAD_STRIP GL_TRIANGLE_FAN

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 27

Polygons can be Filled

slide-15
SLIDE 15

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 28

Filling the Polygon Interior (2D)

To be filled, polygons have to be: simple and convex. A simple polygon has a well-defined interior. (a) simple (b) non-simple Convex polygon: “All points on the line seg- ment between any 2 points inside the polygon are inside the polygon.”

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 29

Filling Polygons (3D)

Polygons have to be simple, convex, and flat. This often boils down to triangles!

slide-16
SLIDE 16

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 30

Attributes for Lines and Polygons

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 31

Text (Raster Text)

slide-17
SLIDE 17

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 32

Text (Stroke Text)

Computer Graphics

Stroke text can be treated like all other graphics objects.

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 33

Fonts in GLUT

Stroke fonts: (have to be scaled)

glutStrokeCharacter( GLUT STROKE MONO ROMAN, int k) glutStrokeCharacter( GLUT STROKE ROMAN, int k)

Bitmap fonts:

glRasterPos2i(rx, ry); glutBitmapCharacter(GLUT BITMAP 8 BY 13, k); rx += glutBitmapWidth(GLUT BITMAP 8 BY 13, k);

slide-18
SLIDE 18

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 34

Outline for today

  • Vertices
  • Control and the window system
  • Basic elements (color, polygons, text)
  • Image formation
  • Viewing API’s

⇒ Image formation

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 35

Making Images: Objects and Viewers

An image seen by three different viewers: Goal in computer graphics (here): View synthetic objects like physical objects!

slide-19
SLIDE 19

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 36

A Camera System

the camera is the viewer with a light source

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 37

Scene with a Single Point Source

slide-20
SLIDE 20

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 38

Ray Tracing

  • Ray tracing can produce very realistic images

(including shadows and reflections of objects on each other)

  • However, ray tracing is very compute intensive

(takes too long for interactive graphics) (at least without specialized hardware)

  • We will use simpler (faster) models, along with OpenGL

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 39

Image Formation: The Pinhole Camera

(yp, −d ) d (y, z) z y

sideview

slide-21
SLIDE 21

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 40

Pinhole Camera: Angle of View

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 41

The Synthetic Camera Model

slide-22
SLIDE 22

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 42

Image Formation with the Synthetic Camera

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 43

Imaging with the Synthetic Camera

slide-23
SLIDE 23

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 44

Clipping

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 45

Outline for today

  • Vertices
  • Control and the window system
  • Basic elements (color, polygons, text)
  • Image formation
  • Viewing API’s

⇒ Viewing API’s

slide-24
SLIDE 24

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 46

API: Modeling and Renderer

This course is (mostly) about rendering.

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 47

Programming Interface (API)

slide-25
SLIDE 25

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 48

2D API: The Pen-Plotter Model

Functions:

moveto(x,y); lineto(x,y); moveto(0,1); lineto(0.5, 1.866); lineto(1.5, 1.866); lineto(1.5, 0.866); lineto(1,0); moveto(1,1); lineto(1.5, 1.866); ...

Too low-level abstraction . . .

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 49

Three-Dimensional APIs

  • Objects
  • Viewer
  • Light sources
  • Material properties
slide-26
SLIDE 26

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 50

API: Camera Specification

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 51

Viewing (2D)

Defining a relation between objects and camera → projection 2D-viewing (just clipping): viewing/clipping rectangle

slide-27
SLIDE 27

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 52

3D Viewing

scene perspective view

  • rthogonal view

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 53

3D Clipping

Viewing rectangle is z = 0. OpenGl’s default clipping volume is the 2 × 2 × 2 volume (−1, −1, −1) to (1, 1, 1)

slide-28
SLIDE 28

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 54

Orthographic View

Projection vectors are orthogonal to the projection plane. (From vertex (x, y, z) to (x, y, 0).) Default camera: also “sees” what is behind it.

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 55

Using glOrtho

void glOrtho(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, GLdouble near, GLdouble far) void gluOrtho2D(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top)

slide-29
SLIDE 29

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 56

Matrix Modes

  • OpenGL has two modes:

a) changing projection b) drawing objects

  • More in Lectures 4 and 5 (math)

glMatrixMode(GL PROJECTION); glLoadIdentity(); gluOrtho2D(0.0, 500.0, 0.0, 500.0); glMatrixMode(GL MODELVIEW);

(compare myinit() )

Computer Graphics (Basic OpenGL, Input and Interaction), ((57)) c 2000–2008, Thilo Kielmann 57

Summary

What to remember:

  • Vertices and other primitives
  • The synthetic camera
  • Orthographic viewing
  • GLUT and the window system

Next week:

  • Input and Interaction