CS 445 / 645 Introduction to Computer Graphics

1
CS 445 / 645Introduction to Computer Graphics

• Lecture 4
• OpenGL Intro
• Assignment 1

2
X-Axis Shear

• Shear along x axis (What is the matrix for y axis
  shear?)

y
y
x
x
3
X-Axis Shear

• Shear along x axis (What is the matrix for y axis
  shear?)

y
y
x
x
4
Reflect About X Axis
x
x
5
Reflect About X Axis
x
x

• What is the matrix for reflect about Y axis?

6
Reading Assignment

• Read Chapters 1 4 of the Red Book (OpenGL
  Programming Guide)

7
OpenGL Design Goals

• SGIs design goals for OpenGL
• High-performance (hardware-accelerated) graphics
  API
• Some hardware independence
• Natural, terse API with some built-in
  extensibility
• OpenGL has become a standard because
• It doesnt try to do too much
• Only renders the image, doesnt manage windows,
  etc.
• No high-level animation, modeling, sound (!),
  etc.
• It does enough
• Useful rendering effects high performance
• It is promoted by SGI ( Microsoft,
  half-heartedly)

8
OpenGL is Not Alone

• GLUT
• The OpenGL Utility Toolkit
• Interface to windowing system and OS
• Provides handy shape primitives (torus, teapot,
  cube)
• FLTK
• Fast Light Toolkit
• Graphical User Interface (GUI) builder
• Boost
• Additional libraries that work with STL

9
The Big Picture

• Who gets control of the main control loop?
• FLTK the code that waits for user input and
  processes it
• Must be responsive to user do as I say
• GLUT the code that controls the window and
  refresh
• Must be responsive to windowing system and OS
• OpenGL the code that controls what is drawn
• Must be responsive to the program that specifies
  where objects are located. If something moves, I
  want to see it.

10
The Big Picture

• Who gets control of the main control loop?
• Answer FLTK
• Well try to hide the details from you for now
• But be aware of the conflict that exists
• FLTK must be aware of GLUT and OpenGL state at
  all times
• Must give code compute cycles when needed
• Well discuss OpenGL as if it were standalone

11
OpenGL

• Simple Example no color or lights or textures
• An array of 100 vertices (x,y,z)
• double verts1003
• An array of 30 triangles (made of three verts)
• int tri303
• An array of 10 matrix transformations
• double trans1016

12
OpenGL

• Main Loop
• While (1) do
• Determine the 10 matrix transformations
• Multiply transformations together (composite
  them)
• Apply resulting transformation to each triangle
• Render each triangle

13
Determine the 10 matrix transformations

• We know how to build the matrices by hand or
• Use the GL implementations
• glScale (theta degrees about (u, v, w) axis)
• glRotate (x, y, and z amounts)
• glTranslate (x, y, and z amounts)

14
Multiply transformations together (composite them)

• We know how to do matrix multiplication or
• Use the GL implementations
• Each call to glTranslate, glRotate, glScale.
  automatically multiplies new transformation by
  product of previous transformations, MODELVIEW
  matrix
• Remember order of matrix multiplication and why
  this is a good way to do things

15
Apply resulting transformation by each triangle

• For each triangle, access its three points
• glBegin (GL_TRIANGLES)
• glVertex (point1) glVertex(point2)
  glVertex(point3)
• glEnd()
• Multiply each point by MODELVIEW matrix
• Feed the three transformed points to a GL
  function that projects 3-D triangles to 2-D
  screen space
• PROJECTION matrix defines virtual camera
• Aspect ratio, clipping planes, camera type

16
Render

• GL renderer
• Given the 2-D coordinates of triangle vertices
• OpenGL determines which pixels to illuminate
• It repeats this for all triangles

17
OpenGL Main Loop

• Rendering is a pipelined process

Clip Coordinates
Object Coordinates
MODELVIEW matrix
PROJECTION matrix
Eye Coordinates
Perspective division
Device Coordinates
Window Coordinates
Viewport transformation
18
Immediate Mode

• This example demonstrates GLs Immediate Mode
• Every triangle is transformed immediately to
  screen space
• It is then thrown away
• If you repeat the same triangles each frame, use
  a Display List
• display list caches vertices to optimize pipeline

19
Adding Extra Features

• GL is a state machine
• There are many variables stored as globals
• What color to use glColor()
• All subsequent vertices will be assigned that
  color
• What rendering mode (wireframe or solid)
• All subsequent polygons will be rendered that way
• What matrix is active (MODELVIEW or PROJECTION)
  glMatrixMode()
• All subsequent matrix commands will affect that
  matrix

20
Adding Extra Features

• Setting different transformations to different
  triangles
• Not all triangles should be affected by same
  transformation matrix
• think of limbs of an arm
• You can change a matrix at will
• glMatrixMode (GL_MODELVIEW)
• glLoadIdentity ()
• Or you can store previous results for future use
• glPushMatrix() and glPopMatrix()
• Puts a copy of current matrix on top of stack (or
  deletes top matrix)

21
Wireframe
Wireframe with depth-cueing
22
Wireframe with antialiasing
Flat-shaded polygons
23
Smooth-shaded polygons
Texture maps and shadows
24
Close-up
With Fog
25
Modeling Transformations

• glTranslate (x, y, z)
• Post-multiplies the current matrix by a matrix
  that moves the object by the given x-, y-, and
  z-values
• glRotate (theta, x, y, z)
• Post-multiplies the current matrix by a matrix
  that rotates the object in a counterclockwise
  direction about the ray from the origin through
  the point (x, y, z)

26
Modeling Transformations

• glScale (x, y, z)
• Post-multiplies the current matrix by a matrix
  that stretches, shrinks, or reflects an object
  along the axes.

27
Matrix Multiplcations

• Certain commands affect the current matrix in
  OpenGL
• glMatrixMode() sets the current matrix
• glLoadIdentity() replaces the current matrix with
  an identity matrix
• glTranslate() postmultiplies the current matrix
  with a translation matrix
• gluPerspective() postmultiplies the current
  matrix with a perspective projection matrix
• It is important that you understand the order in
  which OpenGL concatenates matrices

28
Matrix Operations In OpenGL

• In OpenGL
• Vertices are multiplied by the MODELVIEW matrix
• The resulting vertices are multiplied by the
  projection matrix
• Example
• Suppose you want to scale an object, translate
  it, apply a lookat transformation, and view it
  under perspective projection. What order should
  you make calls?

29
Matrix Operations in OpenGL

• Problem scale an object, translate it, apply a
  lookat transformation, and view it under
  perspective
• A correct code fragment
• glMatrixMode(GL_PERSPECTIVE)
• glLoadIdentity()
• gluPerspective()
• glMatrixMode(GL_MODELVIEW)
• glLoadIdentity()
• gluLookAt()
• glTranslate()
• glScale()
• / Draw the object... /

30
Matrix Operations in OpenGL

• Problem scale an object, translate it, apply a
  lookat transformation, and view it under
  perspective
• An incorrect code fragment
• glMatrixMode(GL_PERSPECTIVE)
• glLoadIdentity()
• glTranslate()
• glScale()
• gluPerspective()
• glMatrixMode(GL_MODELVIEW)
• glLoadIdentity()
• gluLookAt()
• / Draw the object... /

31
Multiplication Order

• glMatrixMode (MODELVIEW)
• glLoadIdentity()
• glMultMatrix(N)
• glMultMatrix(M)
• glMultMatrix(L)
• glBegin(POINTS)
• glVertex3f(v)
• glEnd()

Modelview matrix successively contains I(dentity
), N, NM, NML The transformed vertex is NMLv
N(M(Lv))
32
Manipulating Matrix Stacks

• Observation Certain model transformations are
  shared among many models
• We want to avoid continuously reloading the same
  sequence of transformations
• glPushMatrix ( )
• push all matrices in current stack down one level
  and copy topmost matrix of stack
• glPopMatrix ( )
• pop the top matrix off the stack

33
Matrix Manipulation - Example

• Drawing a car with wheels and lugnuts

draw_wheel( ) for (j0 jlt5 j)
glPushMatrix () glRotatef(72.0j, 0.0, 0.0,
1.0) glTranslatef (3.0, 0.0, 0.0) draw_bolt
( ) glPopMatrix ( )
34
Matrix Manipulation - Example
draw_wheel( ) for (j0 jlt5 j)
glPushMatrix () glRotatef(72.0j, 0.0, 0.0,
1.0) glTranslatef (3.0, 0.0, 0.0) draw_bolt
( ) glPopMatrix ( )
Global Bottom Up
Start
Rot
Trans
35
Matrix Manipulation - Example
draw_wheel( ) for (j0 jlt5 j)
glPushMatrix () glRotatef(72.0j, 0.0, 0.0,
1.0) glTranslatef (3.0, 0.0, 0.0) draw_bolt
( ) glPopMatrix ( )
Local Top Down
Start
Rot
Trans
36
OpenGL Conventions

• Functions in OpenGL start with gl
• Most functions just gl (e.g., glColor())
• Functions starting with glu are utility functions
  (e.g., gluLookAt())
• Functions starting with glx are for interfacing
  with the X Windows system (e.g., in gfx.c)

37
OpenGL Conventions

• Function names indicate argument type and number
• Functions ending with f take floats
• Functions ending with i take ints
• Functions ending with b take bytes
• Functions ending with ub take unsigned bytes
• Functions that end with v take an array.
• Examples
• glColor3f() takes 3 floats
• glColor4fv() takes an array of 4 floats

38
OpenGL Conventions

• Variables written in CAPITAL letters
• Example GLUT_SINGLE, GLUT_RGB
• usually constants
• use the bitwise or command (x y) to combine
  constants

39
OpenGL Simple Use

• Open a window and attach OpenGL to it
• Set projection parameters (e.g., field of view)
• Setup lighting, if any
• Main rendering loop
• Set camera pose with gluLookAt()
• Camera position specified in world coordinates
• Render polygons of model
• Simplest case vertices of polygons in world
  coordinates

40
OpenGL Simple Use

• Open a window and attach OpenGL to it
• glutCreateWindow() or FLTK window method

41
OpenGL Perspective Projection

• Set projection parameters (e.g., field of view)
• Typically, we use a perspective projection
• Distant objects appear smaller than near objects
• Vanishing point at center of screen
• Defined by a view frustum (draw it)
• Other projections orthographic, isometric

42
Setting up Camera

• glMatrixMode(GL_MODELVIEW)
• glLoadIdentity()
• gluLookAt( eyeX, eyeY, eyeZ, lookX,
  lookY, lookZ, upX, upY, upZ)
• eyeXYZ camera position in world coordinates
• lookXYZ a point centered in cameras view
• upXYZ a vector defining the cameras vertical
• Creates a matrix that transforms points in world
  coordinates to camera coordinates
• Camera at origin
• Looking down -Z axis
• Up vector aligned with Y axis

43
OpenGL Perspective Projection

• In OpenGL
• Projections implemented by projection matrix
• gluPerspective() creates a perspective
  projection matrix
• glSetMatrix(GL_PROJECTION)
• glLoadIdentity() //load an identity matrix
• gluPerspective(vfov, aspect, near, far)
• Parameters to gluPerspective()
• vfov vertical field of view
• aspect window width/height
• near, far distance to near far clipping planes

44
OpenGL Lighting

• Setup lighting, if any
• Simplest option change the current color between
  polygons or vertices
• glColor() sets the current color
• Or OpenGL provides a simple lighting model
• Set parameters for light(s)
• Intensity, position, direction falloff (if
  applicable)
• Set material parameters to describe how light
  reflects from the surface
• Wont go into details now check the red book if
  interested

45
OpenGL Specifying Geometry

• Geometry in OpenGL consists of a list of vertices
  in between calls to glBegin() and glEnd()
• A simple example telling GL to render a triangle
• glBegin(GL_POLYGON)
• glVertex3f(x1, y1, z1)
• glVertex3f(x2, y2, z2)
• glVertex3f(x3, y3, z3)
• glEnd()
• Usage glBegin(geomtype) where geomtype is
• Points, lines, polygons, triangles,
  quadrilaterals, etc...

46
Primitive Types

• GL_POINTS
• GL_LINE
• S _STRIP _LOOP
• GL_TRIANGLE
• S _STRIP _FAN
• GL_QUAD
• S _STRIP
• GL_POLYGON

47
GL_POLYGON

• List of vertices defines polygon edges
• Polygon must be convex

48
Non-planar Polygons

• Imagine polygon with non-planar vertices
• Some perspectives will be rendered as concave
  polygons
• These concave polygons may not rasterize correctly

49
OpenGL More Examples

• Example GL supports quadrilaterals
• glBegin(GL_QUADS)
• glVertex3f(-1, 1, 0)
• glVertex3f(-1, -1, 0)
• glVertex3f(1, -1, 0)
• glVertex3f(1, 1, 0)
• glEnd()
• This type of operation is called immediate-mode
  rendering each command happens immediately

50
OpenGL Drawing Triangles

• You can draw multiple triangles between
  glBegin(GL_TRIANGLES) and glEnd()
• float v13, v23, v33, v43
• ...
• glBegin(GL_TRIANGLES)
• glVertex3fv(v1) glVertex3fv(v2)
  glVertex3fv(v3)
• glVertex3fv(v1) glVertex3fv(v3)
  glVertex3fv(v4)
• glEnd()
• Each set of 3 vertices forms a triangle
• What do the triangles drawn above look like?
• How much redundant computation is happening?

51
OpenGL Triangle Strips

• An OpenGL triangle strip primitive reduces this
  redundancy by sharing vertices
• glBegin(GL_TRIANGLE_STRIP)
• glVertex3fv(v0)
• glVertex3fv(v1)
• glVertex3fv(v2)
• glVertex3fv(v3)
• glVertex3fv(v4)
• glVertex3fv(v5)
• glEnd()
• triangle 0 is v0, v1, v2
• triangle 1 is v2, v1, v3 (why not v1, v2, v3?)
• triangle 2 is v2, v3, v4
• triangle 3 is v4, v3, v5 (again, not v3, v4, v5)

v2
v4
v0
v5
v1
v3
52
OpenGL More Examples

• Example GL supports quadrilaterals
• glBegin(GL_QUADS)
• glVertex3f(-1, 1, 0)
• glVertex3f(-1, -1, 0)
• glVertex3f(1, -1, 0)
• glVertex3f(1, 1, 0)
• glEnd()
• This type of operation is called immediate-mode
  rendering each command happens immediately

53
OpenGL Front/Back Rendering

• Each polygon has two sides, front and back
• OpenGL can render the two differently
• The ordering of vertices in the list determines
  which is the front side
• When looking at the front side, the vertices go
  counterclockwise
• This is basically the right-hand rule
• Note that this still holds after perspective
  projection

54
OpenGL Drawing Triangles

• You can draw multiple triangles between
  glBegin(GL_TRIANGLES) and glEnd()
• float v13, v23, v33, v43
• ...
• glBegin(GL_TRIANGLES)
• glVertex3fv(v1) glVertex3fv(v2)
  glVertex3fv(v3)
• glVertex3fv(v1) glVertex3fv(v3)
  glVertex3fv(v4)
• glEnd()
• Each set of 3 vertices forms a triangle
• What do the triangles drawn above look like?
• How much redundant computation is happening?

55
OpenGL Triangle Strips

• An OpenGL triangle strip primitive reduces this
  redundancy by sharing vertices
• glBegin(GL_TRIANGLE_STRIP)
• glVertex3fv(v0)
• glVertex3fv(v1)
• glVertex3fv(v2)
• glVertex3fv(v3)
• glVertex3fv(v4)
• glVertex3fv(v5)
• glEnd()
• triangle 0 is v0, v1, v2
• triangle 1 is v2, v1, v3 (why not v1, v2, v3?)
• triangle 2 is v2, v3, v4
• triangle 3 is v4, v3, v5 (again, not v3, v4, v5)

v2
v4
v0
v5
v1
v3
56
Double Buffering

• Avoids displaying partially rendered frame buffer
• OpenGL generates one raster image while another
  raster image is displayed on monitor
• glxSwapBuffers (Display dpy, Window, w)
• glutSwapBuffers (void)