cs 445 / 645 introduction to computer graphics lecture 4 opengl intro assignment 1 lecture 4 opengl...

CS 445 / 645Introduction to Computer Graphics

Lecture 4Lecture 4

OpenGL IntroOpenGL Intro

Assignment 1Assignment 1

Lecture 4Lecture 4

OpenGL IntroOpenGL Intro

Assignment 1Assignment 1

X-Axis Shear

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


x

y

x

y

?

?

??

??

y

x

y

x

X-Axis Shear



0

0

10

1

y

xsh

y

x x

x

y

x

y

Reflect About X Axis

x x

?

?

??

??

y

x

y

x

Reflect About X Axis

What is the matrix for reflect about Y axis?What is the matrix for reflect about Y axis?What is the matrix for reflect about Y axis?What is the matrix for reflect about Y axis?

0

0

10

01

y

x

y

x

x x

Reading Assignment

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

OpenGL Design Goals

SGI’s design goals for OpenGL:SGI’s design goals for OpenGL:

• High-performance (hardware-accelerated) graphics APIHigh-performance (hardware-accelerated) graphics API

• Some hardware independence Some hardware independence

• Natural, terse API with some built-in extensibilityNatural, terse API with some built-in extensibility

OpenGL has become a standard because:OpenGL has become a standard because:

• It doesn’t try to do too muchIt doesn’t try to do too much

– Only renders the image, doesn’t manage windows, etc.Only renders the image, doesn’t manage windows, etc.

– No high-level animation, modeling, sound (!), etc.No high-level animation, modeling, sound (!), etc.

• It does enoughIt does enough

– Useful rendering effects + high performanceUseful rendering effects + high performance

• It is promoted by SGI (& Microsoft, half-heartedly)It is promoted by SGI (& Microsoft, half-heartedly)

SGI’s design goals for OpenGL:SGI’s design goals for OpenGL:

• High-performance (hardware-accelerated) graphics APIHigh-performance (hardware-accelerated) graphics API

• Some hardware independence Some hardware independence

• Natural, terse API with some built-in extensibilityNatural, terse API with some built-in extensibility

OpenGL has become a standard because:OpenGL has become a standard because:

• It doesn’t try to do too muchIt doesn’t try to do too much

– Only renders the image, doesn’t manage windows, etc.Only renders the image, doesn’t manage windows, etc.

– No high-level animation, modeling, sound (!), etc.No high-level animation, modeling, sound (!), etc.

• It does enoughIt does enough

– Useful rendering effects + high performanceUseful rendering effects + high performance

• It is promoted by SGI (& Microsoft, half-heartedly)It is promoted by SGI (& Microsoft, half-heartedly)

OpenGL is Not Alone

GLUTGLUT

• The OpenGL Utility ToolkitThe OpenGL Utility Toolkit

– Interface to windowing system and OSInterface to windowing system and OS

– Provides handy shape primitives (torus, teapot, cube)Provides handy shape primitives (torus, teapot, cube)

FLTKFLTK

• Fast Light ToolkitFast Light Toolkit

– Graphical User Interface (GUI) builderGraphical User Interface (GUI) builder

BoostBoost

• Additional libraries that work with STLAdditional libraries that work with STL

GLUTGLUT

• The OpenGL Utility ToolkitThe OpenGL Utility Toolkit

– Interface to windowing system and OSInterface to windowing system and OS

– Provides handy shape primitives (torus, teapot, cube)Provides handy shape primitives (torus, teapot, cube)

FLTKFLTK

• Fast Light ToolkitFast Light Toolkit

– Graphical User Interface (GUI) builderGraphical User Interface (GUI) builder

BoostBoost

• Additional libraries that work with STLAdditional libraries that work with STL

The Big Picture

Who gets control of the main control loop?Who gets control of the main control loop?• FLTKFLTK – the code that waits for user input and processes it – the code that waits for user input and processes it

– Must be responsive to user… Must be responsive to user… do as I saydo as I say

• GLUTGLUT – the code that controls the window and refresh – the code that controls the window and refresh

– Must be responsive to windowing system and OSMust be responsive to windowing system and OS

• OpenGLOpenGL – the code that controls what is drawn – the code that controls what is drawn

– Must be responsive to the program that specifies where Must be responsive to the program that specifies where objects are located. If something moves, I want to see it.objects are located. If something moves, I want to see it.

Who gets control of the main control loop?Who gets control of the main control loop?• FLTKFLTK – the code that waits for user input and processes it – the code that waits for user input and processes it

– Must be responsive to user… Must be responsive to user… do as I saydo as I say

• GLUTGLUT – the code that controls the window and refresh – the code that controls the window and refresh

– Must be responsive to windowing system and OSMust be responsive to windowing system and OS

• OpenGLOpenGL – the code that controls what is drawn – the code that controls what is drawn

– Must be responsive to the program that specifies where Must be responsive to the program that specifies where objects are located. If something moves, I want to see it.objects are located. If something moves, I want to see it.

The Big Picture

Who gets control of the main control loop?Who gets control of the main control loop?

• Answer: FLTKAnswer: FLTK

– We’ll try to hide the details from you for nowWe’ll try to hide the details from you for now

– But be aware of the conflict that existsBut be aware of the conflict that exists

• FLTK must be aware of GLUT and OpenGL state at all timesFLTK must be aware of GLUT and OpenGL state at all times

– Must give code compute cycles when neededMust give code compute cycles when needed

• We’ll discuss OpenGL as if it were standaloneWe’ll discuss OpenGL as if it were standalone

Who gets control of the main control loop?Who gets control of the main control loop?

• Answer: FLTKAnswer: FLTK

– We’ll try to hide the details from you for nowWe’ll try to hide the details from you for now

– But be aware of the conflict that existsBut be aware of the conflict that exists

• FLTK must be aware of GLUT and OpenGL state at all timesFLTK must be aware of GLUT and OpenGL state at all times

– Must give code compute cycles when neededMust give code compute cycles when needed

• We’ll discuss OpenGL as if it were standaloneWe’ll discuss OpenGL as if it were standalone

OpenGL

Simple Example Simple Example – no color or lights or textures…– no color or lights or textures…

• An array of 100 vertices (x,y,z)An array of 100 vertices (x,y,z)

– double verts[100][3]double verts[100][3]

• An array of 30 triangles (made of An array of 30 triangles (made of three verts)three verts)

– int tri[30][3]int tri[30][3]

• An array of 10 matrix transformationsAn array of 10 matrix transformations

– double trans[10][16]double trans[10][16]

Simple Example Simple Example – no color or lights or textures…– no color or lights or textures…

• An array of 100 vertices (x,y,z)An array of 100 vertices (x,y,z)

– double verts[100][3]double verts[100][3]

• An array of 30 triangles (made of An array of 30 triangles (made of three verts)three verts)

– int tri[30][3]int tri[30][3]

• An array of 10 matrix transformationsAn array of 10 matrix transformations

– double trans[10][16]double trans[10][16]

ponm

lkji

hgfe

fcba

OpenGL

Main LoopMain Loop

• While (1) do…While (1) do…

– Determine the 10 matrix transformationsDetermine the 10 matrix transformations

– Multiply transformations together (composite them)Multiply transformations together (composite them)

– Apply resulting transformation to each triangleApply resulting transformation to each triangle

– Render each triangleRender each triangle

Main LoopMain Loop

• While (1) do…While (1) do…

– Determine the 10 matrix transformationsDetermine the 10 matrix transformations

– Multiply transformations together (composite them)Multiply transformations together (composite them)

– Apply resulting transformation to each triangleApply resulting transformation to each triangle

– Render each triangleRender each triangle

Determine the 10 matrix transformations

We know how to build the matrices by hand or…We know how to build the matrices by hand or…

• Use the GL implementationsUse the GL implementations

– glScale (theta degrees about (u, v, w) axis)glScale (theta degrees about (u, v, w) axis)

– glRotate (x, y, and z amounts)glRotate (x, y, and z amounts)

– glTranslate (x, y, and z amounts)glTranslate (x, y, and z amounts)

We know how to build the matrices by hand or…We know how to build the matrices by hand or…


– glScale (theta degrees about (u, v, w) axis)glScale (theta degrees about (u, v, w) axis)

– glRotate (x, y, and z amounts)glRotate (x, y, and z amounts)

– glTranslate (x, y, and z amounts)glTranslate (x, y, and z amounts)

Multiply transformations together (composite them)

We know how to do matrix multiplication or…We know how to do matrix multiplication or…


– Each call to glTranslate, glRotate, glScale…. automatically Each call to glTranslate, glRotate, glScale…. automatically multiplies new transformation by product of previous multiplies new transformation by product of previous transformations, transformations, MODELVIEWMODELVIEW matrix matrix

– Remember order of matrix multiplication and why this is a Remember order of matrix multiplication and why this is a good way to do thingsgood way to do things

We know how to do matrix multiplication or…We know how to do matrix multiplication or…


– Each call to glTranslate, glRotate, glScale…. automatically Each call to glTranslate, glRotate, glScale…. automatically multiplies new transformation by product of previous multiplies new transformation by product of previous transformations, transformations, MODELVIEWMODELVIEW matrix matrix

– Remember order of matrix multiplication and why this is a Remember order of matrix multiplication and why this is a good way to do thingsgood way to do things

Apply resulting transformation by each triangle

• For each triangle, access its three pointsFor each triangle, access its three points

– glBegin (GL_TRIANGLES)glBegin (GL_TRIANGLES)

– glVertex (point1); glVertex(point2); glVertex(point3)glVertex (point1); glVertex(point2); glVertex(point3)

– glEnd();glEnd();

• Multiply each point by MODELVIEW matrixMultiply each point by MODELVIEW matrix

• Feed the three transformed points to a GL function that projects 3-D Feed the three transformed points to a GL function that projects 3-D triangles to 2-D screen spacetriangles to 2-D screen space

– PROJECTIONPROJECTION matrix defines virtual camera matrix defines virtual camera

Aspect ratio, clipping planes, camera typeAspect ratio, clipping planes, camera type

• For each triangle, access its three pointsFor each triangle, access its three points

– glBegin (GL_TRIANGLES)glBegin (GL_TRIANGLES)

– glVertex (point1); glVertex(point2); glVertex(point3)glVertex (point1); glVertex(point2); glVertex(point3)

– glEnd();glEnd();

• Multiply each point by MODELVIEW matrixMultiply each point by MODELVIEW matrix

• Feed the three transformed points to a GL function that projects 3-D Feed the three transformed points to a GL function that projects 3-D triangles to 2-D screen spacetriangles to 2-D screen space

– PROJECTIONPROJECTION matrix defines virtual camera matrix defines virtual camera

Aspect ratio, clipping planes, camera typeAspect ratio, clipping planes, camera type

Render

GL rendererGL renderer

• Given the 2-D coordinates of triangle verticesGiven the 2-D coordinates of triangle vertices

– OpenGL determines which pixels to illuminateOpenGL determines which pixels to illuminate

• It repeats this for all trianglesIt repeats this for all triangles

GL rendererGL renderer

• Given the 2-D coordinates of triangle verticesGiven the 2-D coordinates of triangle vertices

– OpenGL determines which pixels to illuminateOpenGL determines which pixels to illuminate

• It repeats this for all trianglesIt repeats this for all triangles

OpenGL Main Loop

Rendering is a pipelined processRendering is a pipelined processRendering is a pipelined processRendering is a pipelined process

Object Coordinates Eye

Coordinates

Clip Coordinates

Device CoordinatesWindow

Coordinates

MODELVIEWmatrix

PROJECTIONmatrix

Perspective division

Viewporttransformation

Immediate Mode

This example demonstrates GL’s This example demonstrates GL’s Immediate ModeImmediate Mode

• Every triangle is transformed immediately to screen spaceEvery triangle is transformed immediately to screen space

• It is then thrown awayIt is then thrown away

• If you repeat the same triangles each frame, use a If you repeat the same triangles each frame, use a Display Display ListList

– display list cache’s vertices to optimize pipelinedisplay list cache’s vertices to optimize pipeline

This example demonstrates GL’s This example demonstrates GL’s Immediate ModeImmediate Mode

• Every triangle is transformed immediately to screen spaceEvery triangle is transformed immediately to screen space

• It is then thrown awayIt is then thrown away

• If you repeat the same triangles each frame, use a If you repeat the same triangles each frame, use a Display Display ListList

– display list cache’s vertices to optimize pipelinedisplay list cache’s vertices to optimize pipeline

Adding Extra Features

GL is a GL is a state machinestate machine

• There are many variables stored as ‘globals’There are many variables stored as ‘globals’

– What color to use – What color to use – glColor()glColor()

All subsequent vertices will be assigned that colorAll subsequent vertices will be assigned that color

– What rendering mode (wireframe or solid)What rendering mode (wireframe or solid)

All subsequent polygons will be rendered that wayAll subsequent polygons will be rendered that way

– What matrix is active (MODELVIEW or PROJECTION) – What matrix is active (MODELVIEW or PROJECTION) – glMatrixMode()glMatrixMode()

All subsequent matrix commands will affect that matrixAll subsequent matrix commands will affect that matrix

GL is a GL is a state machinestate machine

• There are many variables stored as ‘globals’There are many variables stored as ‘globals’

– What color to use – What color to use – glColor()glColor()

All subsequent vertices will be assigned that colorAll subsequent vertices will be assigned that color

– What rendering mode (wireframe or solid)What rendering mode (wireframe or solid)

All subsequent polygons will be rendered that wayAll subsequent polygons will be rendered that way

– What matrix is active (MODELVIEW or PROJECTION) – What matrix is active (MODELVIEW or PROJECTION) – glMatrixMode()glMatrixMode()

All subsequent matrix commands will affect that matrixAll subsequent matrix commands will affect that matrix

Adding Extra Features

Setting different transformations to different trianglesSetting different transformations to different triangles

• Not all triangles should be affected by same transformation matrixNot all triangles should be affected by same transformation matrix

– think of limbs of an armthink of limbs of an arm

• You can change a matrix at willYou can change a matrix at will

– glMatrixMode (GL_MODELVIEW)glMatrixMode (GL_MODELVIEW)

– glLoadIdentity ();glLoadIdentity ();

• Or you can store previous results for future useOr you can store previous results for future use

– glPushMatrix()glPushMatrix() and and glPopMatrix()glPopMatrix()

– Puts a copy of current matrix on top of stack (or deletes top matrix)Puts a copy of current matrix on top of stack (or deletes top matrix)

Setting different transformations to different trianglesSetting different transformations to different triangles

• Not all triangles should be affected by same transformation matrixNot all triangles should be affected by same transformation matrix

– think of limbs of an armthink of limbs of an arm

• You can change a matrix at willYou can change a matrix at will

– glMatrixMode (GL_MODELVIEW)glMatrixMode (GL_MODELVIEW)

– glLoadIdentity ();glLoadIdentity ();

• Or you can store previous results for future useOr you can store previous results for future use

– glPushMatrix()glPushMatrix() and and glPopMatrix()glPopMatrix()

– Puts a copy of current matrix on top of stack (or deletes top matrix)Puts a copy of current matrix on top of stack (or deletes top matrix)

Wireframe

Wireframe with depth-cueing

Wireframe with antialiasing

Flat-shaded polygons

Smooth-shaded polygons

Texture maps and shadows

Close-up

With Fog

Modeling Transformations

glTranslate (x, y, z)glTranslate (x, y, z)• Post-multiplies the current matrix by a matrix that moves Post-multiplies the current matrix by a matrix that moves

the object by the given x-, y-, and z-valuesthe object by the given x-, y-, and z-values

glRotate (theta, x, y, z)glRotate (theta, x, y, z)• Post-multiplies the current matrix by a matrix that rotates Post-multiplies the current matrix by a matrix that rotates

the object in a counterclockwise direction about the ray the object in a counterclockwise direction about the ray from the origin through the point (x, y, z)from the origin through the point (x, y, z)

glTranslate (x, y, z)glTranslate (x, y, z)• Post-multiplies the current matrix by a matrix that moves Post-multiplies the current matrix by a matrix that moves

the object by the given x-, y-, and z-valuesthe object by the given x-, y-, and z-values

glRotate (theta, x, y, z)glRotate (theta, x, y, z)• Post-multiplies the current matrix by a matrix that rotates Post-multiplies the current matrix by a matrix that rotates

the object in a counterclockwise direction about the ray the object in a counterclockwise direction about the ray from the origin through the point (x, y, z)from the origin through the point (x, y, z)

Modeling Transformations

glScale (x, y, z)glScale (x, y, z)

• Post-multiplies the current matrix by a matrix that stretches, Post-multiplies the current matrix by a matrix that stretches, shrinks, or reflects an object along the axes.shrinks, or reflects an object along the axes.

glScale (x, y, z)glScale (x, y, z)

• Post-multiplies the current matrix by a matrix that stretches, Post-multiplies the current matrix by a matrix that stretches, shrinks, or reflects an object along the axes.shrinks, or reflects an object along the axes.

Matrix Multiplcations

Certain commands affect the current matrix in OpenGLCertain commands affect the current matrix in OpenGL• glMatrixMode()glMatrixMode() sets the current matrix sets the current matrix

• glLoadIdentity()glLoadIdentity() replaces the current matrix with an identity replaces the current matrix with an identity matrixmatrix

• glTranslate()glTranslate() postmultipliespostmultiplies the current matrix with a translation the current matrix with a translation matrixmatrix

• gluPerspective() gluPerspective() postmultipliespostmultiplies the current matrix with a the current matrix with a perspective projection matrixperspective projection matrix

It is important that you understand the order in which It is important that you understand the order in which OpenGL concatenates matricesOpenGL concatenates matrices

Certain commands affect the current matrix in OpenGLCertain commands affect the current matrix in OpenGL• glMatrixMode()glMatrixMode() sets the current matrix sets the current matrix

• glLoadIdentity()glLoadIdentity() replaces the current matrix with an identity replaces the current matrix with an identity matrixmatrix

• glTranslate()glTranslate() postmultipliespostmultiplies the current matrix with a translation the current matrix with a translation matrixmatrix

• gluPerspective() gluPerspective() postmultipliespostmultiplies the current matrix with a the current matrix with a perspective projection matrixperspective projection matrix

It is important that you understand the order in which It is important that you understand the order in which OpenGL concatenates matricesOpenGL concatenates matrices

Matrix Operations In OpenGL

In OpenGL:In OpenGL:

• Vertices are multiplied by the Vertices are multiplied by the MODELVIEWMODELVIEW matrix matrix

• The resulting vertices are multiplied by the projection matrixThe resulting vertices are multiplied by the projection matrix

Example: Example:

• Suppose you want to scale an object, translate it, apply a lookat Suppose you want to scale an object, translate it, apply a lookat transformation, and view it under perspective projection. What order transformation, and view it under perspective projection. What order should you make calls?should you make calls?

In OpenGL:In OpenGL:

• Vertices are multiplied by the Vertices are multiplied by the MODELVIEWMODELVIEW matrix matrix

• The resulting vertices are multiplied by the projection matrixThe resulting vertices are multiplied by the projection matrix

Example: Example:

• Suppose you want to scale an object, translate it, apply a lookat Suppose you want to scale an object, translate it, apply a lookat transformation, and view it under perspective projection. What order transformation, and view it under perspective projection. What order should you make calls?should you make calls?

Matrix Operations in OpenGL

Problem: scale an object, translate it, apply a lookat transformation, and view Problem: scale an object, translate it, apply a lookat transformation, and view it under perspectiveit under perspective

A A correctcorrect code fragment: code fragment:

glMatrixMode(GL_PERSPECTIVE);glMatrixMode(GL_PERSPECTIVE);

glLoadIdentity();glLoadIdentity();

gluPerspective(…);gluPerspective(…);

glMatrixMode(GL_MODELVIEW);glMatrixMode(GL_MODELVIEW);


gluLookAt(…);gluLookAt(…);

glTranslate(…);glTranslate(…);

glScale(…);glScale(…);

/*/* Draw the object... Draw the object... */*/


A A correctcorrect code fragment: code fragment:










Matrix Operations in OpenGLProblem: scale an object, translate it, apply a lookat transformation, and view Problem: scale an object, translate it, apply a lookat transformation, and view

it under perspectiveit under perspective

An An incorrectincorrect code fragment: code fragment:











An An incorrectincorrect code fragment: code fragment:










Multiplication Order

glMatrixMode (MODELVIEW);glMatrixMode (MODELVIEW);


glMultMatrix(N);glMultMatrix(N);

glMultMatrix(M);glMultMatrix(M);

glMultMatrix(L);glMultMatrix(L);

glBegin(POINTS);glBegin(POINTS);

glVertex3f(v);glVertex3f(v);

glEnd();glEnd();

glMatrixMode (MODELVIEW);glMatrixMode (MODELVIEW);


glMultMatrix(N);glMultMatrix(N);

glMultMatrix(M);glMultMatrix(M);

glMultMatrix(L);glMultMatrix(L);

glBegin(POINTS);glBegin(POINTS);

glVertex3f(v);glVertex3f(v);

glEnd();glEnd();

Modelview matrix successively contains:I(dentity), N, NM, NML

The transformed vertex is:NMLv = N(M(Lv))

Manipulating Matrix Stacks

Observation: Certain model transformations are shared Observation: Certain model transformations are shared among many modelsamong many models

We want to avoid continuously reloading the same We want to avoid continuously reloading the same sequence of transformationssequence of transformations

glPushMatrix ( )glPushMatrix ( ) • push all matrices in current stack down one level and copy topmost push all matrices in current stack down one level and copy topmost

matrix of stackmatrix of stack

glPopMatrix ( )glPopMatrix ( )• pop the top matrix off the stackpop the top matrix off the stack

Observation: Certain model transformations are shared Observation: Certain model transformations are shared among many modelsamong many models

We want to avoid continuously reloading the same We want to avoid continuously reloading the same sequence of transformationssequence of transformations

glPushMatrix ( )glPushMatrix ( ) • push all matrices in current stack down one level and copy topmost push all matrices in current stack down one level and copy topmost

matrix of stackmatrix of stack

glPopMatrix ( )glPopMatrix ( )• pop the top matrix off the stackpop the top matrix off the stack

Matrix Manipulation - Example

Drawing a car with wheels and lugnutsDrawing a car with wheels and lugnutsDrawing a car with wheels and lugnutsDrawing a car with wheels and lugnuts

draw_wheel( );for (j=0; j<5; j++) {

glPushMatrix ();glRotatef(72.0*j, 0.0, 0.0, 1.0);glTranslatef (3.0, 0.0, 0.0);draw_bolt ( );

glPopMatrix ( );}

Matrix Manipulation - ExampleMatrix Manipulation - Example



glPopMatrix ( );

Global – Bottom Up

Start RotTrans

Matrix Manipulation - ExampleMatrix Manipulation - Example



glPopMatrix ( );

Local – Top Down

Start Rot Trans

OpenGL: Conventions

Functions in OpenGL start with Functions in OpenGL start with glgl

• Most functions just Most functions just gl gl (e.g., (e.g., glColor()glColor()) )

• Functions starting with Functions starting with gluglu are utility functions (e.g., are utility functions (e.g., gluLookAt()gluLookAt()))

• Functions starting with Functions starting with glxglx are for interfacing with the X are for interfacing with the X Windows system (e.g., in gfx.c)Windows system (e.g., in gfx.c)

Functions in OpenGL start with Functions in OpenGL start with glgl

• Most functions just Most functions just gl gl (e.g., (e.g., glColor()glColor()) )

• Functions starting with Functions starting with gluglu are utility functions (e.g., are utility functions (e.g., gluLookAt()gluLookAt()))

• Functions starting with Functions starting with glxglx are for interfacing with the X are for interfacing with the X Windows system (e.g., in gfx.c)Windows system (e.g., in gfx.c)

OpenGL: Conventions

Function names indicate argument type and numberFunction names indicate argument type and number

• Functions ending with Functions ending with ff take floats take floats

• Functions ending with Functions ending with ii take ints take ints

• Functions ending with Functions ending with bb take bytes take bytes

• Functions ending with Functions ending with ubub take unsigned bytes take unsigned bytes

• Functions that end with Functions that end with vv take an array. take an array.

ExamplesExamples• glColor3f()glColor3f() takes 3 floats takes 3 floats

• glColor4fv() glColor4fv() takes an array of 4 floatstakes an array of 4 floats

Function names indicate argument type and numberFunction names indicate argument type and number

• Functions ending with Functions ending with ff take floats take floats

• Functions ending with Functions ending with ii take ints take ints

• Functions ending with Functions ending with bb take bytes take bytes

• Functions ending with Functions ending with ubub take unsigned bytes take unsigned bytes

• Functions that end with Functions that end with vv take an array. take an array.

ExamplesExamples• glColor3f()glColor3f() takes 3 floats takes 3 floats

• glColor4fv() glColor4fv() takes an array of 4 floatstakes an array of 4 floats

OpenGL: Conventions

Variables written in CAPITAL lettersVariables written in CAPITAL letters

• Example: GLUT_SINGLE, GLUT_RGBExample: GLUT_SINGLE, GLUT_RGB

• usually constantsusually constants

• use the bitwise or command (x | y) to combine constantsuse the bitwise or command (x | y) to combine constants

Variables written in CAPITAL lettersVariables written in CAPITAL letters

• Example: GLUT_SINGLE, GLUT_RGBExample: GLUT_SINGLE, GLUT_RGB

• usually constantsusually constants

• use the bitwise or command (x | y) to combine constantsuse the bitwise or command (x | y) to combine constants

OpenGL: Simple Use

Open a window and attach OpenGL to itOpen a window and attach OpenGL to it

Set projection parameters (e.g., field of view)Set projection parameters (e.g., field of view)

Setup lighting, if anySetup lighting, if any

Main rendering loopMain rendering loop

• Set camera pose with Set camera pose with gluLookAt() gluLookAt()

– Camera position specified in world coordinatesCamera position specified in world coordinates

• Render polygons of modelRender polygons of model

– Simplest case: vertices of polygons in world coordinatesSimplest case: vertices of polygons in world coordinates




Main rendering loopMain rendering loop

• Set camera pose with Set camera pose with gluLookAt() gluLookAt()

– Camera position specified in world coordinatesCamera position specified in world coordinates

• Render polygons of modelRender polygons of model

– Simplest case: vertices of polygons in world coordinatesSimplest case: vertices of polygons in world coordinates

OpenGL: Simple Use


• glutCreateWindow() or FLTK window methodglutCreateWindow() or FLTK window method


• glutCreateWindow() or FLTK window methodglutCreateWindow() or FLTK window method

OpenGL: Perspective Projection


Typically, we use a Typically, we use a perspective projectionperspective projection

• Distant objects appear smaller than near objects Distant objects appear smaller than near objects

• Vanishing point at center of screenVanishing point at center of screen

• Defined by a Defined by a view frustumview frustum (draw it) (draw it)

Other projections: Other projections: orthographicorthographic, , isometricisometric


Typically, we use a Typically, we use a perspective projectionperspective projection

• Distant objects appear smaller than near objects Distant objects appear smaller than near objects

• Vanishing point at center of screenVanishing point at center of screen

• Defined by a Defined by a view frustumview frustum (draw it) (draw it)

Other projections: Other projections: orthographicorthographic, , isometricisometric

Setting up CameraglMatrixMode(GL_MODELVIEW);glMatrixMode(GL_MODELVIEW);


gluLookAt(gluLookAt( eyeX, eyeY, eyeZ, eyeX, eyeY, eyeZ, lookX, lookY, lookZ, lookX, lookY, lookZ, upX, upY, upZ);upX, upY, upZ);

• eye[XYZ]: camera position in world coordinateseye[XYZ]: camera position in world coordinates

• look[XYZ]: a point centered in camera’s viewlook[XYZ]: a point centered in camera’s view

• up[XYZ]: a up[XYZ]: a vectorvector defining the camera’s vertical defining the camera’s vertical

Creates a matrix that transforms points in world coordinates to Creates a matrix that transforms points in world coordinates to camera coordinatescamera coordinates

• Camera at originCamera at origin

• Looking down -Z axisLooking down -Z axis

• Up vector aligned with Y axisUp vector aligned with Y axis



gluLookAt(gluLookAt( eyeX, eyeY, eyeZ, eyeX, eyeY, eyeZ, lookX, lookY, lookZ, lookX, lookY, lookZ, upX, upY, upZ);upX, upY, upZ);

• eye[XYZ]: camera position in world coordinateseye[XYZ]: camera position in world coordinates

• look[XYZ]: a point centered in camera’s viewlook[XYZ]: a point centered in camera’s view

• up[XYZ]: a up[XYZ]: a vectorvector defining the camera’s vertical defining the camera’s vertical

Creates a matrix that transforms points in world coordinates to Creates a matrix that transforms points in world coordinates to camera coordinatescamera coordinates

• Camera at originCamera at origin

• Looking down -Z axisLooking down -Z axis

• Up vector aligned with Y axisUp vector aligned with Y axis

OpenGL: Perspective Projection

In OpenGL: In OpenGL: • Projections implemented by Projections implemented by projection matrixprojection matrix

• gluPerspective()gluPerspective() creates a perspective creates a perspective projection matrix:projection matrix:

glSetMatrix(GL_PROJECTION);glSetMatrix(GL_PROJECTION);

glLoadIdentity(); //glLoadIdentity(); //load an identity matrixload an identity matrix

gluPerspective(vfov, aspect, near, far);gluPerspective(vfov, aspect, near, far);

Parameters to Parameters to gluPerspective()gluPerspective()::• vfovvfov: vertical field of view: vertical field of view

• aspectaspect: window width/height: window width/height

• nearnear, , farfar: distance to near & far clipping planes: distance to near & far clipping planes

In OpenGL: In OpenGL: • Projections implemented by Projections implemented by projection matrixprojection matrix

• gluPerspective()gluPerspective() creates a perspective creates a perspective projection matrix:projection matrix:

glSetMatrix(GL_PROJECTION);glSetMatrix(GL_PROJECTION);

glLoadIdentity(); //glLoadIdentity(); //load an identity matrixload an identity matrix

gluPerspective(vfov, aspect, near, far);gluPerspective(vfov, aspect, near, far);

Parameters to Parameters to gluPerspective()gluPerspective()::• vfovvfov: vertical field of view: vertical field of view

• aspectaspect: window width/height: window width/height

• nearnear, , farfar: distance to near & far clipping planes: distance to near & far clipping planes

OpenGL: Lighting


Simplest option: change the Simplest option: change the current colorcurrent color between between polygons or verticespolygons or vertices• glColor() sets the current colorglColor() sets the current color

Or OpenGL provides a simple lighting model:Or OpenGL provides a simple lighting model:• Set parameters for light(s)Set parameters for light(s)

– Intensity, position, direction & falloff (if applicable) Intensity, position, direction & falloff (if applicable)

• Set Set materialmaterial parameters to describe how light reflects from the parameters to describe how light reflects from the surfacesurface

Won’t go into details now; check the red book if Won’t go into details now; check the red book if interestedinterested


Simplest option: change the Simplest option: change the current colorcurrent color between between polygons or verticespolygons or vertices• glColor() sets the current colorglColor() sets the current color

Or OpenGL provides a simple lighting model:Or OpenGL provides a simple lighting model:• Set parameters for light(s)Set parameters for light(s)

– Intensity, position, direction & falloff (if applicable) Intensity, position, direction & falloff (if applicable)

• Set Set materialmaterial parameters to describe how light reflects from the parameters to describe how light reflects from the surfacesurface

Won’t go into details now; check the red book if Won’t go into details now; check the red book if interestedinterested

OpenGL: Specifying Geometry

Geometry in OpenGL consists of a list of vertices in Geometry in OpenGL consists of a list of vertices in between calls to between calls to glBegin()glBegin() and and glEnd()glEnd()• A simple example: telling GL to render a triangleA simple example: telling GL to render a triangle

glBegin(GL_POLYGON);glBegin(GL_POLYGON);

glVertex3f(x1, y1, z1);glVertex3f(x1, y1, z1);



glEnd();glEnd();

• Usage: Usage: glBegin(glBegin(geomtypegeomtype)) where geomtype is: where geomtype is:

– Points, lines, polygons, triangles, quadrilaterals, etc...Points, lines, polygons, triangles, quadrilaterals, etc...

Geometry in OpenGL consists of a list of vertices in Geometry in OpenGL consists of a list of vertices in between calls to between calls to glBegin()glBegin() and and glEnd()glEnd()• A simple example: telling GL to render a triangleA simple example: telling GL to render a triangle

glBegin(GL_POLYGON);glBegin(GL_POLYGON);




glEnd();glEnd();

• Usage: Usage: glBegin(glBegin(geomtypegeomtype)) where geomtype is: where geomtype is:

– Points, lines, polygons, triangles, quadrilaterals, etc...Points, lines, polygons, triangles, quadrilaterals, etc...

Primitive Types

GL_POINTSGL_POINTS

GL_LINEGL_LINE

• {S | _STRIP | _LOOP}{S | _STRIP | _LOOP}

GL_TRIANGLEGL_TRIANGLE

• {S | _STRIP | _FAN}{S | _STRIP | _FAN}

GL_QUADGL_QUAD

• {S | _STRIP}{S | _STRIP}

GL_POLYGONGL_POLYGON

GL_POINTSGL_POINTS

GL_LINEGL_LINE

• {S | _STRIP | _LOOP}{S | _STRIP | _LOOP}

GL_TRIANGLEGL_TRIANGLE

• {S | _STRIP | _FAN}{S | _STRIP | _FAN}

GL_QUADGL_QUAD

• {S | _STRIP}{S | _STRIP}

GL_POLYGONGL_POLYGON

GL_POLYGON

List of vertices defines polygon edgesList of vertices defines polygon edges

Polygon must be convexPolygon must be convex

List of vertices defines polygon edgesList of vertices defines polygon edges

Polygon must be convexPolygon must be convex

Non-planar Polygons

Imagine polygon with non-planar verticesImagine polygon with non-planar vertices

Some perspectives will be rendered as concave Some perspectives will be rendered as concave polygonspolygons

These concave polygons may not rasterize These concave polygons may not rasterize correctlycorrectly

Imagine polygon with non-planar verticesImagine polygon with non-planar vertices

Some perspectives will be rendered as concave Some perspectives will be rendered as concave polygonspolygons

These concave polygons may not rasterize These concave polygons may not rasterize correctlycorrectly

OpenGL: More Examples

Example: GL supports quadrilaterals:Example: GL supports quadrilaterals:

glBegin(GL_QUADS);glBegin(GL_QUADS);

glVertex3f(-1, 1, 0); glVertex3f(-1, 1, 0);

glVertex3f(-1, -1, 0);glVertex3f(-1, -1, 0);

glVertex3f(1, -1, 0);glVertex3f(1, -1, 0);

glVertex3f(1, 1, 0);glVertex3f(1, 1, 0);

glEnd();glEnd();• This type of operation is called This type of operation is called immediate-mode renderingimmediate-mode rendering; ;

each command happens immediatelyeach command happens immediately







glEnd();glEnd();• This type of operation is called This type of operation is called immediate-mode renderingimmediate-mode rendering; ;

each command happens immediatelyeach command happens immediately

OpenGL: Drawing TrianglesYou can draw multiple triangles between You can draw multiple triangles between glBegin(GL_TRIANGLES)glBegin(GL_TRIANGLES) and and glEnd()glEnd()::

float v1[3], v2[3], v3[3], v4[3];float v1[3], v2[3], v3[3], v4[3];

......

glBegin(GL_TRIANGLES);glBegin(GL_TRIANGLES);

glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3);glVertex3fv(v1); glVertex3fv(v2); glVertex3fv(v3);


glEnd();glEnd();

Each set of 3 vertices forms a triangleEach set of 3 vertices forms a triangle• What do the triangles drawn above look like?What do the triangles drawn above look like?

• How much redundant computation is happening?How much redundant computation is happening?

You can draw multiple triangles between You can draw multiple triangles between glBegin(GL_TRIANGLES)glBegin(GL_TRIANGLES) and and glEnd()glEnd()::


......




glEnd();glEnd();



OpenGL: Triangle StripsAn OpenGL An OpenGL triangle striptriangle strip primitive reduces this redundancy by sharing vertices: primitive reduces this redundancy by sharing vertices:

glBegin(GL_TRIANGLE_STRIP);glBegin(GL_TRIANGLE_STRIP);

glVertex3fv(v0);glVertex3fv(v0);






glEnd();glEnd();

• triangle 0 is v0, v1, v2triangle 0 is v0, v1, v2

• triangle 1 is v2, v1, v3 (triangle 1 is v2, v1, v3 (why not v1, v2, v3?why not v1, v2, v3?))


• triangle 3 is v4, v3, v5 (again, triangle 3 is v4, v3, v5 (again, notnot v3, v4, v5) v3, v4, v5)

An OpenGL An OpenGL triangle striptriangle strip primitive reduces this redundancy by sharing vertices: primitive reduces this redundancy by sharing vertices:








glEnd();glEnd();





v0v2

v1v3

v4

v5

OpenGL: More ExamplesExample: GL supports quadrilaterals:Example: GL supports quadrilaterals:






glEnd();glEnd();

• This type of operation is called This type of operation is called immediate-mode renderingimmediate-mode rendering; ; each command happens immediatelyeach command happens immediately







glEnd();glEnd();

• This type of operation is called This type of operation is called immediate-mode renderingimmediate-mode rendering; ; each command happens immediatelyeach command happens immediately

OpenGL: Front/Back Rendering

Each polygon has two sides, front and backEach polygon has two sides, front and back

OpenGL can render the two differentlyOpenGL can render the two differently

The ordering of vertices in the list determines The ordering of vertices in the list determines which is the front side:which is the front side:

• When looking at the When looking at the frontfront side, the vertices go side, the vertices go counterclockwisecounterclockwise

– This is basically the right-hand ruleThis is basically the right-hand rule

– Note that this still holds after perspective projectionNote that this still holds after perspective projection

Each polygon has two sides, front and backEach polygon has two sides, front and back

OpenGL can render the two differentlyOpenGL can render the two differently

The ordering of vertices in the list determines The ordering of vertices in the list determines which is the front side:which is the front side:

• When looking at the When looking at the frontfront side, the vertices go side, the vertices go counterclockwisecounterclockwise

– This is basically the right-hand ruleThis is basically the right-hand rule

– Note that this still holds after perspective projectionNote that this still holds after perspective projection

OpenGL: Drawing Triangles



......




glEnd();glEnd();





......




glEnd();glEnd();



OpenGL: Triangle StripsAn OpenGL An OpenGL triangle striptriangle strip primitive reduces this redundancy by sharing primitive reduces this redundancy by sharing

vertices:vertices:








glEnd();glEnd();





An OpenGL An OpenGL triangle striptriangle strip primitive reduces this redundancy by sharing primitive reduces this redundancy by sharing vertices:vertices:








glEnd();glEnd();





v0v2

v1v3

v4

v5

Double Buffering

Avoids displaying partially rendered frame bufferAvoids displaying partially rendered frame buffer

OpenGL generates one raster image while another OpenGL generates one raster image while another raster image is displayed on monitorraster image is displayed on monitor

glxSwapBuffers (Display *dpy, Window, w)glxSwapBuffers (Display *dpy, Window, w)

glutSwapBuffers (void)glutSwapBuffers (void)

Avoids displaying partially rendered frame bufferAvoids displaying partially rendered frame buffer

OpenGL generates one raster image while another OpenGL generates one raster image while another raster image is displayed on monitorraster image is displayed on monitor

glxSwapBuffers (Display *dpy, Window, w)glxSwapBuffers (Display *dpy, Window, w)

glutSwapBuffers (void)glutSwapBuffers (void)

cs 445 / 645 introduction to computer graphics lecture 4 opengl intro assignment 1 lecture 4 opengl...

Documents

matrix transformationswe

y axis shear

matrix multiplication

vertices x

x axisxxreflect

x axiswhat

opengl introassignment

opengl state