Introduction to OpenGL

Largely based on a lecture by

Prof. G. Wolberg, CCNY

By Nick Gnedin

2

If You Want to Learn How to Do This…

… You are in a wrong place!

3

Overview

•What is OpenGL?

•Object Modeling•Lighting and Shading

•Computer Viewing

•Rendering

•Texture Mapping

•Homogeneous Coordinates

What Is OpenGL?

5

The Programmer’s Interface

•Programmer sees the graphics system through an interface: the Application Programmer Interface (API)

6

SGI and GL

•Silicon Graphics (SGI) revolutionized the graphics workstation by implementing the pipeline in hardware (1982)

•To use the system, application programmers used a library called GL

•With GL, it was relatively simple to program three dimensional interactive applications

7

OpenGL

•The success of GL lead to OpenGL in 1992, a platform-independent API that was

- Easy to use- Close enough to the hardware to get excellent

performance- Focused on rendering- Omitted windowing and input to avoid window

system dependencies

8

OpenGL Evolution

•Controlled by an Architectural Review Board (ARB)

- Members include SGI, Microsoft, Nvidia, HP, 3DLabs,IBM,…….

- Relatively stable (present version 1.4)• Evolution reflects new hardware capabilities

– 3D texture mapping and texture objects– Vertex programs

- Allows for platform specific features through extensions

- See www.opengl.org for up-to-date info

9

OpenGL Libraries

•OpenGL core library- OpenGL32 on Windows- GL on most Unix/Linux systems

•OpenGL Utility Library (GLU)- Provides functionality in OpenGL core but

avoids having to rewrite code

•Links with window system- GLX for X window systems- WGL for Windows- AGL for Macintosh

10

Software Organization

GLUT

GLU

GL

GLX, AGLor WGL

X, Win32, Mac O/S

software and/or hardware

application program

OpenGL Motifwidget or similar

11

Windowing with OpenGL

•OpenGL is independent of any specific window system

•OpenGL can be used with different window systems

- X windows (GLX)- MFC- …

•GLUT provide a portable API for creating window and interacting with I/O devices

12

API Contents

•Functions that specify what we need to form an image

- Objects- Viewer (camera)- Light Source(s)- Materials

•Other information- Input from devices such as mouse and keyboard- Capabilities of system

13

OpenGL State

•OpenGL is a state machine

•OpenGL functions are of two types- Primitive generating

• Can cause output if primitive is visible• How vertices are processed and appearance of primitive

are controlled by the state

- State changing• Transformation functions• Attribute functions

14

OpenGL function format

gl Ver t ex3f ( x, y, z)

belongs to GL library

function name

x, y, z are f l oat s

gl Ver t ex3f v( p)

p is a pointer to an array

15

OpenGL #defines

•Most constants are defined in the include files gl . h, gl u. h and gl ut . h

- Note #i ncl ude <gl ut . h> should automatically include the others

- Examples- gl Begi n( GL_POLYGON)

- gl Cl ear ( GL_COLOR_BUFFER_BI T)

• include files also define OpenGL data types: Gl f l oat , Gl doubl e,….

Object Modeling

17

OpenGL Primitives

GL_QUAD_STRI PGL_QUAD_STRI P

GL_POLYGONGL_POLYGON

GL_TRI ANGLE_STRI PGL_TRI ANGLE_STRI P GL_TRI ANGLE_FANGL_TRI ANGLE_FAN

GL_POI NTSGL_POI NTS

GL_LI NESGL_LI NES

GL_LI NE_LOOPGL_LI NE_LOOP

GL_LI NE_STRI PGL_LI NE_STRI P

GL_TRI ANGLESGL_TRI ANGLES

18

Example: Drawing an Arc

•Given a circle with radius r, centered at (x,y), draw an arc of the circle that sweeps out an angle θ.

.20for

),sin,cos(),( 00

πθθθ

≤≤++= ryrxyx

19

The Line Strip Primitive

voi d dr awAr c( f l oat x, f l oat y, f l oat r ,f l oat t 0, f l oat sweep)

{f l oat t , dt ; / * angl e * /i nt n = 30; / * # of segment s * /i nt i ;

t = t 0 * PI / 180. 0; / * r adi ans * /dt = sweep * PI / ( 180* n) ; / * i ncr ement * /

gl Begi n( GL_LI NE_STRI P) ;f or ( i =0; i <=n; i ++, t += dt )

gl Ver t ex2f ( x + r * cos( t ) , y + r * s i n( t ) ) ;gl End( ) ;

}

20

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 must check if above true• Triangles satisfy all conditions

nonsimple polygon nonconvex polygon

21

Attributes

•Attributes are part of the OpenGL and determine the appearance of objects

- Color (points, lines, polygons)- Size and width (points, lines)- Stipple pattern (lines, polygons)- Polygon mode

• Display as filled: solid color or stipple pattern• Display edges

22

RGB color

• Each color component stored separately (usually 8 bits per component)

• In OpenGL color values range from 0.0 (none) to 1.0 (all).

Lighting and Shading

24

Lighting Principles

•Lighting simulates how objects reflect light- material composition of object- light’s color and position- global lighting parameters

• ambient light• two sided lighting

- available in both color indexand RGBA mode

25

Types of Lights

•OpenGL supports two types of Lights- Local (Point) light sources- Infinite (Directional) light sources

• In addition, it has one global ambient light that emanates from everywhere in space (like glowing fog)

•A point light can be a spotlight

26

Spotlights

•Have: - Direction (vector)

- Cutoff (cone opening angle)

- Attenuation with angle

θ−θ φ

27

Moving Light Sources

•Light sources are geometric objects whose positions or directions are user-defined

•Depending on where we place the position (direction) setting function, we can

- Move the light source(s) with the object(s)- Fix the object(s) and move the light source(s)- Fix the light source(s) and move the object(s)- Move the light source(s) and object(s) independently

28

Steps in OpenGL shading

1. Enable shading and select model

2. Specify normals3. Specify material properties

4. Specify lights

29

Normals

• In OpenGL the normal vector is part of the state

• Usually we want to set the normal to have unit length so cosine calculations are correct

p0

p1

p2

p

Note that right-hand rule determines outward face

30

Polygonal Shading

•Shading calculations are done for each vertex; vertex colors become vertex shades

•By default, vertex colors are interpolated across the polygon (so-called Phongmodel)

•With flat shading the color at the first vertex will determine the color of the whole polygon

31

Polygon Normals

Consider model of sphere:

• Polygons have a single normal• We have different normals at

each vertex even thoughthis concept is not quite

correct mathematically

32

Smooth Shading

•We can set a new normal at each vertex

•Easy for sphere model - If centered at origin n = p

•Now smooth shading works

•Note silhouette edge

33

Mesh Shading

•The previous example is not general because we knew the normal at each vertex analytically

•For polygonal models, Gouraud proposed to use the average of normals around a mesh vertex

|n||n||n||n|

nnnnn

4321

4321

++++++=

34

Gouraud and Phong Shading

• Gouraud Shading- Find average normal at each vertex (vertex normals)- Apply Phong model at each vertex- Interpolate vertex shades across each polygon

• Phong shading- Find vertex normals- Interpolate vertex normals across edges- Find shades along edges- Interpolate edge shades across polygons

35

Comparison

• If the polygon mesh approximates surfaces with a high curvatures, Phong shading may look smooth while Gouraud shading may show edges

• Phong shading requires much more work than Gouraud shading

- Usually not available in real time systems

• Both need data structures to represent meshes so we can obtain vertex normals

36

Front and Back Faces

• The default is shade only front faces which works correct for convex objects

• If we set two sided lighting, OpenGL will shaded both sides of a surface

• Each side can have its own properties

back faces not visible back faces visible

37

Material Properties

• Define the surface properties of a primitive (separate materials for front and back)

- Diffuse

- Ambient

- Specular

- Shininess

- Emission

38

Emissive Term

•We can simulate a light source in OpenGL by giving a material an emissive component

•This color is unaffected by any sources or transformations

39

Transparency

•Material properties are specified as RGBA values

•The A (also called alpha-value) value can be used to make the surface translucent

•The default is that all surfaces are opaque

40

Transparency

Computer Viewing

42

Camera Analogy

•3D is just like taking a photograph (lots of photographs!)

camera

tripod model

viewingvolume

43

OpenGL Orthogonal (Parallel) Projection

near and f ar measured from camera

44

OpenGL PerspectiveProjection

45

Projections

Orthogonal/Parallel Perspective

46

Clipping

• Just as a real camera cannot “see” the whole world, the virtual camera can only see part of the world space

- Objects that are not within this volume are said to be clipped out of the scene

Rendering

48

Rendering Process

49

Hidden-Surface Removal

• We want to see only those surfaces in front of other surfaces

• OpenGL uses a hidden-surface method called the z-buffer algorithm that saves depth information as objects are rendered so that only the front objects appear in the image

50

Rasterization

• If an object is visible in the image, the appropriate pixels must be assigned colors

- Vertices assembled into objects- Effects of lights and materials must be

determined- Polygons filled with interior colors/shades- Must have also determined which objects are

in front (hidden surface removal)

51

Double Buffering

12

48

16

12

48

16FrontBuffer

BackBuffer

Display

52

Immediate and Retained Modes

• In a standard OpenGL program, once an object is rendered there is no memory of it and to redisplay it, we must re-execute the code for creating it

- Known as immediate mode graphics- Can be especially slow if the objects are complex and

must be sent over a network

• Alternative is define objects and keep them in some form that can be redisplayed easily

- Retained mode graphics- Accomplished in OpenGL via display lists

53

Display Lists

•Conceptually similar to a graphics file- Must define (name, create)- Add contents- Close

• In client-server environment, display list is placed on server

- Can be redisplayed without sending primitives over network each time

54

Display Lists and State

•Most OpenGL functions can be put in display lists

•State changes made inside a display list persist after the display list is executed

• If you think of OpenGL as a special computer language, display lists are its subroutines

•Rule of thumb of OpenGL programming: Keep your display lists!!!

55

Hierarchy and Display Lists

•Consider model of a car- Create display list for chassis- Create display list for wheel

gl NewLi st ( CAR, GL_COMPI LE ) ;gl Cal l Li st ( CHASSI S ) ;gl Tr ansl at ef ( … ) ;gl Cal l Li st ( WHEEL ) ;gl Tr ansl at ef ( … ) ;gl Cal l Li st ( WHEEL ) ;

…gl EndLi st ( ) ;

•Consider model of a car- Create display list for chassis- Create display list for wheel

gl NewLi st ( CAR, GL_COMPI LE ) ;gl Cal l Li st ( CHASSI S ) ;gl Tr ansl at ef ( … ) ;gl Cal l Li st ( WHEEL ) ;gl Tr ansl at ef ( … ) ;gl Cal l Li st ( WHEEL ) ;

…gl EndLi st ( ) ;

56

Antialiasing

•Removing the Jaggiesgl Enabl e( mode )

• GL_POI NT_SMOOTH

• GL_LI NE_SMOOTH

• GL_POLYGON_SMOOTH

Texture Mapping

58

The Limits of Geometric Modeling

•Although graphics cards can render over 10 million polygons per second, that number is insufficient for many phenomena

- Clouds- Grass- Terrain- Skin

59

Modeling an Orange

•Consider the problem of modeling an orange (the fruit)

•Start with an orange-colored

sphere: too simple

•Replace sphere with a more

complex shape:- Does not capture surface characteristics (small

dimples)- Takes too many polygons to model all the dimples

60

Modeling an Orange (2)

•Take a picture of a real orange, scan it, and “paste” onto simple geometric model

- This process is called texture mapping

•Still might not be sufficient because resulting surface will be smooth

- Need to change local shape- Bump mapping

61

Three Types of Mapping

•Texture Mapping- Uses images to fill inside of polygons

•Environmental (reflection mapping)- Uses a picture of the environment for texture

maps- Allows simulation of highly specular surfaces

•Bump mapping- Emulates altering normal vectors during the

rendering process

62

Texture Mapping

geometric model texture mapped

63

Environment Mapping

64

Bump Mapping

65

Where does mapping take place?

• Mapping techniques are implemented at the end of the rendering pipeline

- Very efficient because few polygons pass down the geometric pipeline

66

Is it simple?

•Although the idea is simple---map an image to a surface---there are 3 or 4 coordinate systems involved

2D image

3D surface

67

Texture Mapping

parametric coordinates

texture coordinates

world coordinatesscreen coordinates

68

Basic Strategy

• Three steps to applying a texture1. specify the texture

• read or generate image• assign to texture• enable texturing

2. assign texture coordinates to vertices• Proper mapping function is left to application

3. specify texture parameters• wrapping, filtering

69

Texture Mapping

s

t

x

y

z

image

geometry screen

70

• Based on parametric texture coordinates specified at each vertex

s

t 1, 10, 1

0, 0 1, 0

(s, t) = (0.2, 0.8)

(0.4, 0.2)

(0.8, 0.4)

A

B C

a

bc

Texture Space Object Space

Mapping a Texture

Homogeneous Coordinates

72

A Single Representation

If we define 0•P = 0 and 1•P =P then we can write

v=α1v1+ α2v2 +α3v3 = [α1 α2 α3 0 ] [v1 v2 v3 P0] T

P = P0 + β1v1+ β2v2 +β3v3= [β1 β2 β3 1 ] [v1 v2 v3 P0] T

Thus we obtain the four-dimensional homogeneous coordinate representation

v = [α1 α2 α3 0 ] T

p = [β1 β2 β3 1 ] T

73

Homogeneous Coordinates

The general form of four dimensional homogeneous coordinates is

p=[x y z w] T

We return to a three dimensional point (for w≠0) byx←x/w

y←y/w

z←z/w

If w=0, the representation is that of a vectorNote that homogeneous coordinates replaces points in

three dimensions by lines through the origin in four dimensions

74

Homogeneous Coordinates and Computer Graphics

•Homogeneous coordinates are key to all computer graphics systems

- All standard transformations (rotation, translation, scaling) can be implemented by matrix multiplications with 4 x 4 matrices

- Hardware pipeline works with 4 dimensional representations

- For orthographic viewing, we can maintain w=0for vectors and w=1 for points

- For perspective we need a perspective division

75

Change of Coordinate Systems

•Consider two representations of a the same vector with respect to two different bases. The representations are

v=α1v1+ α2v2 +α3v3 = [α1 α2 α3] [v1 v2 v3] T

=β1u1+ β2u2 +β3u3 = [β1 β2 β3] [u1 u2 u3] T

a=[α1 α2 α3 ]b=[β1 β2 β3]

where

76

Representing second basis in terms of first

Each of the basis vectors, u1,u2, u3, are vectors that can be represented in terms of the first basis

u1 = γ11v1+γ12v2+γ13v3

u2 = γ21v1+γ22v2+γ23v3

u3 = γ31v1+γ32v2+γ33v3

v

77

Matrix Form

The coefficients define a 3 x 3 matrix

and the basis can be related by

see text for numerical examples

a=MTb

���

�

�

���

�

�

γγγγγγγγγ

3231

232221

131211

33

M =

78

Change of Frames

• We can apply a similar process in homogeneous coordinates to the representations of both points and vectors

• Consider two frames

• Any point or vector can be represented in each

(P0, v1, v2, v3)(Q0, u1, u2, u3)

P0 v1

v2

v3

Q0

u1u2

u3

79

Representing One Frame in Terms of the Other

u1 = γ11v1+γ12v2+γ13v3u2 = γ21v1+γ22v2+γ23v3u3 = γ31v1+γ32v2+γ33v3Q0 = γ41v1+γ42v2+γ43v3 +P0

Extending what we did with change of bases

defining a 4 x 4 matrix

����

�

�

����

�

�

1γγγ0γγγ0γγγ0γγγ

434241

333231

232221

131211

M =

80

Working with Representations

Within the two frames any point or vector has a representation of the same form

a=[α1 α2 α3 α4 ] in the first frameb=[β1 β2 β3 β4 ] in the second frame

where α4 = β4 = 1 for points and α4 = β4 = 0 for vectors and

The matrix M is 4 x 4 and specifies an affine transformation in homogeneous coordinates

a=MTb

81

Affine Transformations

•Every linear transformation is equivalent to a change in frames

•Every affine transformation preserves lines

•However, an affine transformation has only 12 degrees of freedom because 4 of the elements in the matrix are fixed and are a subset of all possible 4 x 4 linear transformations

82

Notation

We will be working with both coordinate-free representations of transformations and representations within a particular frameP,Q, R: points in an affine spaceu, v, w: vectors in an affine spaceα, β, γ: scalarsp, q, r: representations of points-array of 4 scalars in homogeneous coordinates

u, v, w: representations of points-array of 4 scalars in homogeneous coordinates

83

Object Translation

Every point in object is displaced by same vector

object Object translation

84

Translation Using Representations

Using the homogeneous coordinate representation in some frame

p=[ x y z 1]T

p’=[x’ y’ z’ 1]T

d=[dx dy dz 0]T

Hence p’ = p + d orx’=x+dxy’=y+dyz’=z+dz

note that this expression is in four dimensions and expressesthat point = vector + point

85

Translation Matrix

We can also express translation using a 4 x 4 matrix T in homogeneous coordinatesp’=Tp where

T = T(dx, dy, dz) =

This form is better for implementation because all affine transformations can be expressed this way and multiple transformations can be concatenated together

����

�

�

����

�

�

1000

d100

d010

d001

z

y

x

86

Rotation (2D)

• Consider rotation about the origin by θ degrees- radius stays the same, angle increases by θ

x’ = x cos θ – y sin θy’ = x sin θ + y cos θ

x = r cos φy = r sin φ

x = r cos (φ + θ)y = r sin (φ + θ)

87

Rotation about the z-axis

• Rotation about z axis in three dimensions leaves all points with the same z

- Equivalent to rotation in two dimensions in planes of constant z

- or in homogeneous coordinates

p’=Rz(θ)p

x’ = x cos θ – y sin θy’ = x sin θ + y cos θz’ = z

88

Rotation Matrix

����

�

�

����

�

�

θθθ−θ

1000

0100

00 cossin

00sin cos

R = Rz(θ) =

89

Scaling

����

�

�

����

�

�

1000

000

000

000

z

y

x

s

s

s

S = S(sx, sy, sz) =

x’=sxxy’=syyz’=szz

p’=Sp

Expand or contract along each axis (fixed point of origin)

90

Reflection

corresponds to negative scale factors

originalsx = -1 sy = 1

sx = -1 sy = -1 sx = 1 sy = -1

91

Concatenation

• We can form arbitrary affine transformation matrices by multiplying together rotation, translation, and scaling matrices

• Because the same transformation is applied to many vertices, the cost of forming a matrix M=ABCD is not significant compared to the cost of computing Mp for many vertices p

• The difficult part is how to form a desired transformation from the specifications in the application

92

General Rotation About the Origin

θ

x

z

yv

A rotation by θ about an arbitrary axiscan be decomposed into the concatenationof rotations about the x, y, and z axes

R(θ) = Rz(θz) Ry(θy) Rx(θx)

θx θy θz are called the Euler angles

Note that rotations do not commuteWe can use rotations in another order butwith different angles

93

Rotation About a Fixed Point other than the Origin

Move fixed point to originRotateMove fixed point back

M = T(-pf) R(θ) T(pf)

94

Shear

• Helpful to add one more basic transformation• Equivalent to pulling faces in opposite directions

95

Shear Matrix

Consider simple shear along x axis

x’ = x + y cot θy’ = yz’ = z

����

�

�

����

�

� θ

1000

0100

0010

00cot 1

H(θ) =

96

Quaternions

• Extension of imaginary numbers from two to four dimensions

• Requires one real and three imaginary components i, j, k

• Quaternions can express rotations on sphere smoothly and efficiently. Process:

- Model-view matrix → quaternion- Carry out operations with quaternions

- Quaternion → Model-view matrix

q=q0+q1i+q2j+q3k