CSC418: Computer Graphics Tutorial 1

Michael Tao

September 20, 2012

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 1 / 31

Plan for Today (and next Week)

Event-Driven Programming
I GLUT
C++ Quick Introduction
OpenGL
I Commands
I Hierarchical Programming

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 2 / 31

Event-Driven Programming

We want to manipulate what we see

I Traverse Scene
I Modify Environment
I Framerate

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 3 / 31

Event-Driven Programming

We want to manipulate what we see

I Traverse Scene
I Modify Environment
I Framerate
Graphics Programs require Graphicical User Interfaces
I User Input
F Mouse
F Keyboard
I System Input
F Window Resizing
F Window Minimization
F Timers

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 3 / 31

Simple Event-Driven Program

int main ()
{
while ( true )
{
...
if ( event . happened () )
{
doEventCode () ;
}
...
}
}

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 4 / 31

Packages To Use

GLUT
I Used in this class!
QT
I My Favorite!
GTK
...

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 5 / 31

GLUT

Set of of slots for various functionalities

I What to render?
I What to do when window reshaped?
I What to do when key pressed?
I What to do when mouse pressed?
Called Callback Registration

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 6 / 31

GLUT

Functional slots defined by Callback Registration

int main ( int argc , char * argv [])
{
glutInit (& argc , argv ) ;
g l u t I n i t D i s p l a y M o d e ( GLUT_DEPTH | GLUT_DOUBLE | GLUT_RGBA ) ;
g l u t I n i t W i n d o w P o s i t i o n (100 ,100) ;
g l u t I n i t W i n d o w S i z e (320 ,320) ;
g l u t C r e a t e W i nd o w ( " Window " ) ;
g lu tD is p la yF un c ( render Function ) ;
g l u t K e y b o a r d F u n c t i o n ( k e y b o a r d F u n c t i on ) ;
g lu tR es h ap eF un c ( reshapeFunc ) ;
glutMainLoop () ;

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 7 / 31

GLUT: Callback Function Examples

void k e y b o a r d F u n c ti o n ( u n s i g n e d char key , int x , int y )

{
if ( key == ’p ’)
{
printf ( " Mouse position : % d % d " ,x , y ) ;
}

}
void rende rFunctio n ()
{
glClear ( G L _ C O L O R _ B UF F E R _ B I T | G L _D EP TH _ BU FF ER ) ;
glClearColor (0 ,0 ,0 ,1) ;

drawStuff () ;
g lu tS wa p Bu ff er s () ;
}

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 8 / 31

GLUT: Use Sparingly

Designed for rapid prototyping of small applications

Lacks a variety of features
I GLUI
Very C way to do things (C++ is better (will get to that later...))
For personal projects use Qt
I C++ and Object Oriented
I Super popular (all KDE programs)
I Signal/Slots are really nice
I QML
I We won’t be using this in this class

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 9 / 31

C++ Quick Introduction

Incredibly Complicated Language

I Lots of nice features piled ontop of each other
Definitely not C
I Object Orientation
I References
I const Correctness
I Templates (Generics)
Combination of things seen in C and Java
Do you guys want to hear about this?

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 10 / 31

C++: Classes

Basically structs with member functions

I Difference is default privacy
Different syntax for accessing depending on context
Constructors and Destructors

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 11 / 31

C++: Classes

struct Foo () {
Foo ( int a_ =0) : a ( a_ ) {}
int f () { return 1;}
int a ;
static int g () { return 3;}
}
class Bar () {
public :
Bar () : myfoo ( new Foo (4) ) {}
~ Bar () { delete myfoo ;}
Foo * myfoo ;
int g () { return -1;}
}
Foo foo ;
Bar * bar_ptr = new Bar () ;
bar_ptr - > myfoo . a = foo . f () ;
foo . a = bar_ptr - > g () ;
int a = Foo :: g () ;

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 12 / 31

C++: References and const

Pointers
Similar to what you see in most other languages so far
I Pass by value / pass by reference
I Except we explicitly declare when to do what
const provides security over modification

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 13 / 31

C++: References and const

int f ( Foo & foo )

{
return foo . a = 3;
}
int g ( const Foo & foo )
{
h ( a ) ; // h has to be h ( const Foo &)
return foo . a ;
}
const x = 0;
const Foo ;
const * const Foo = & foo ;

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 14 / 31

C++: Templates

Allow for generic typing of functions/classes

Resolved at compilation

template < typename T>

T mymax ( const T & a , const T & b )
{
return (a > b ) ? a : b ;
}
int a = mymax (3 ,4) ;
float b = mymax (1.0 f ,2.0 f ) ;
double c = mymax (1.0 ,2.0) ;
std :: string str = mymax ( std :: string ( " foo " ) , std :: string ( " bar " ) ) ;

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 15 / 31

OpenGL

OpenGL is how we draw things on the screen

Push vertex information to graphics card
I Vertex positions
I Colors
I Normals
Get pretty pictures
Two main pipelines
I Fixed Pipeline
I Programmable Pipeline
F Shader Programs
F Rapidly Changing!

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 16 / 31

OpenGL 1.1 Fixed Pipeline State Machine

EnableClientState
DisableClientState

The OpenGL Machine

EdgeFlagPointer R
TexCoordPointer

CCCC
ColorPointer
Vertex
MapGrid

CCCC
IndexPointer Array

CCCC
NormalPointer Control
VertexPointer
InterLeavedArrays
CCCC
CCCC
CCCC Evaluator

ArrayElement CCCC
CCCC
EvalMesh
EvalPoint
Grid
Application
Control

DrawElements
DrawArrays CCCC
CCCC
CCCC CCC
CCC
CCCC
Map

CCC
Evaluation

CCCC EvalCoord

CCC The OpenGL graphics system diagram, Version 1.1. Copyright  1996 Silicon Graphics, Inc. All rights reserved.
CCCC
CCCC CCC
CCCC CCC
CCC
CCCC
Map

CCCC CCC
Enable/Disable

CCCC CCC
CCCC CCC
CCC
CCCC Current
CCC
CC CCC
EdgeFlag Edge

CC CCC
Flag
Enable/Disable

t 0
CC
CC CCC
CCC
CC CCC
TexCoord1 TexGen

CC CCC
OBJECT_LINEAR

CC CCC
TexGen b A*b
A

CC CCC
TexCoord2 r 0 EYE_LINEAR

CC CCC
TexGen

CC CCC
SPHERE_MAP
Texture
TexCoord3 q 1
CC CCC Matrix

CC Current
CCC TexGen
Stack

Vertices
TexCoord4 Texture

CC
CC
Coordinates
CC
CC
CC CC CC
Evaluators
CC
Color3 A 1 CC
CC CC
CC CC &
CC
CC CC
Enable/Disable
CC CC
Vertex Arrays
Convert

CC
Current

CC
ColorMaterial
CC CC
CC
CC
Color4 RGBA Material
RGBA to float

CC CC C CC
Color

CC CC C CC
Material
Texture Coordinate
CC CC C CC
Parameters
LightModel
Generation
CC CC C CC
Control Input
C&
Conversion C
C C
Current Begin/End
Convert
Index

CC CC C C
Color Light Light Material Light Model
index to float

CC CC C C
Index Enable/Disable Parameters Parameters Parameters
Current
CC
CC CC
CC C C
C C
Values Lighting
CC CC C C
Enable/Disable

CC CC C C
Clamp to
Primitive

C C
RGBA Lighting Equation [0,1]
Assembly

C
Convert
Current

CC CC
Normal3 normal coords b M*b Normalize Mask to
Normal M

CC CC
to float
Color Index Lighting Equation [0,2n−1]

CC
CC CC
CC CC
CC
Matrix
CC CC
M−T
Vertex2
z 0 Enable/Disable Control
CC CC
FrontFace
RasterPos2 M (Lighting) Clipping, Perspective,
CC CC and
Vertex3
CC CC Rasteriz−
CC CC Viewport Application
w 1
RasterPos3

CC CC
ation Texturing, Per−Fragment Operations
Vertex4 OBJECT M EYE Fog,
b M*b Feedback
RasterPos4 COORDINATES M COORDINATES and
& Frame Buffer
Antialiasing
Selection &
Pixels Frame Buffer Control
Rectangle
Rect
Generation

Primitives Fragments
Model View
Matrix
Stack
Key to OpenGL Operations
Enable/Disable
(Antialiasing/Stipple)
MatrixMode ClipPlane
Matrix FrontFace PolygonOffset
PushMatrix PolygonMode
Control CullFace
PopMatrix
b
M
M−Tb
LoadIdentity Polygon
Polygon Polygon
LoadMatrix Rasterization
Culling Mode
Projection Viewport
Clip
Matrix DepthRange Enable/Disable
M*N ShadeModel Planes
M Stack (Antialiasing)
N LineStipple
LineWidth
Polygon
MultMatrix POLYGONS Polygon
b M M*b View Volume
Clipping Divide Line
Clipping
Translate Flatshading Vertex Segment
Line Apply
Scale LINE Line Coordinates Rasterization
Matrix b M*b View Volume Viewport
SEGMENTS Clipping by TexParameter
Rotate Clipping Enable/Disable
Generators (Vertex w
Frustum Enable/Disable
Only) Point (Antialiasing) Enable/Disable Enable/Disable Enable/Disable
Ortho POINTS Point Enable/Disable Enable/Disable StencilOp Enable/Disable Enable/Disable Enable/Disable Enable/Disable
b M*b View Volume PointSize TexEnv Fog
RASTER POS. Culling Scissor AlphaFunc StencilFunc DepthFunc BlendFunc LogicOp
Culling

Coverage
Point Texel Texture Pixel Alpha Depth
Fog (antialiasing) Scissor Stencil Blending
Rasterization Generation Application Ownership Test Buffer Dithering Logic Op
Application Test Test (RGBA only)
Current Test (RGBA only) Test
Raster
Position

RenderMode

Clear
Clear
Control
Notes: Selection Feedback
Bitmap
Selection
Rasterization
1. Commands (and constants) are shown without the Encoding Control Encoding Masking

gl (or GL_) prefix.

Clear
2. The following commands do not appear in this PassThrough PixelZoom Values
DepthMask
PolygonStipple StencilMask
diagram: glAccum, glClearAccum, glHint, Selection
SelectBuffer Name FeedbackBuffer Bitmap
display list commands, texture object commands, Stack Unpack Pixel
DrawPixels ClearStencil
commands for obtaining OpenGL state Pixels Rasterization
ClearDepth
TexImage Pixel
(glGet commands and glIsEnabled), and Texture ClearIndex
InitNames TexSubImage Transfer
ClearColor Masking
Frame Buffer Frame Buffer
glPushAttrib and glPopAttrib. Utility library LoadName Memory
Control
PopName
routines are not shown. PushName
PixelStore

3. After their exectution, glDrawArrays and PixelTransfer ColorMask

DrawBuffer
IndexMask
glDrawElements leave affected current values PixelMap

Readback
indeterminate. Control
4. This diagram is schematic; it may not directly
CopyPixels
correspond to any actual OpenGL implementation. ReadPixels
Pack
ReadBuffer
CopyTexImage
Pixels
CopyTexSubImage

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 17 / 31

OpenGL 4.0 / Direct3D 11 Programmable Pipeline
Diagram

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 18 / 31

OpenGL 4.3 Programmable Pipeline Diagram

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 19 / 31

OpenGL is sort of a jumbled mess..

Too many changes and subtle differences between versions

We’ll be sticking to the fixed pipeline
I However, feel free to play with the programmable pipeline
OpenGL comes with Core and Compatibility profiles, where Core
removes fixed pipeline stuff
I Have to manage your own Matrices
I Graphics Cards are optimized for Compatibility
I Few people use Core...

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 20 / 31

Useful OpenGL Tutorials

Fixed Pipeline OpenGL

I NeHe Tutorials
Programmable Pipeline OpenGL
I Wikibooks OpenGL
I arcsynthesis.org/gltut
I Mike Bailey’s CS519 handouts and SIGGRAPH 2012 notes
Both
I Lighthouse3D
Note: Tutorials tend to jump between different OpenGL specifications

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 21 / 31

OpenGL: The Fixed Pipeline

What can we do?

Assert State Information

glEnable ( GL_DEPTH_TEST ) ;
glDisable ( GL_DEPTH_TEST ) ;
glBegin ( GL_QUADS ) ;
glEnd () ;
glPushMatrix () ;
glTransformf (0.0 ,0.5 ,0.0) ;
glPopMatrix () ;

Assert Vertex Information

glNormal3f (0.0 f ,1.0 f ,0.0 f ) ;
glColor4f (0.0 f ,0.0 f ,1.0 f ,1.0 f ) ;
glVertex3d (1.0 ,0.0 ,0.0) ;

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 22 / 31

Simple Example

glBegin ( GL_TRIANGLES ) ;
glColor4f (1.0 f ,1.0 f ,1.0 f ,1.0 f ) ;
glVertex3d (.5 ,.25 ,0.0) ;
glVertex3d (.25 ,.5 ,0.0) ;
glVertex3d (.25 ,.25 ,0.0) ;
glEnd () ;
glBegin ( GL_LINES ) ;
glColor3f (1.0 f ,0.0 f ,0.0 f ) ; glVertex3d (1.0 ,0.0 ,0.0) ;
glColor3f (0.0 f ,1.0 f ,0.0 f ) ; glVertex3d (0.0 ,1.0 ,0.0) ;

glColor3f (0.0 f ,1.0 f ,0.0 f ) ; glVertex3d (0.0 ,1.0 ,0.0) ;

glColor3f (0.0 f ,0.0 f ,1.0 f ) ; glVertex3d (0.0 ,0.0 ,0.0) ;

glColor3f (0.0 f ,0.0 f ,1.0 f ) ; glVertex3d (0.0 ,0.0 ,0.0) ;

glColor3f (1.0 f ,0.0 f ,0.0 f ) ; glVertex3d (1.0 ,0.0 ,0.0) ;
glEnd () ;

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 23 / 31

Simple Example

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 24 / 31

Transformations

We want to traverse the scene and move scene objects around

Use linear transformations in homogeneous coordinates:

Fixed Pipeline maintains two matrices for you

I Switch between modifying them with glMatrixMode
F GL_MODELVIEW
F GL_PROJECTION
http://www.songho.ca/opengl/gl_transform.html

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 25 / 31

Transformations

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 26 / 31

glMatrixMode s

glMatrixMode ( GL_PROJECTION ) ;
glLoa dIdentit y () ;
glFrustum ( left , right , bottom , top , nearVal , farVal ) ; // option 1
glOrtho ( left , right , bottom , top , nearVal , farVal ) ; // option 2
gluPe rspectiv e ( fovy , aspect , zNear , zFar ) ; // option 3

glMatrixMode ( GL_MODELVIEW ) ;
glLoa dIdentit y () ;
gluLookAt ( eyeX , eyeY , eyeZ , centerX , centerY , centerZ , upX , upY , upZ ) ;
glRotatef ( angle ,x ,y , z ) ;
glTranslate (x ,y , z ) ;
glScale (x ,y , z ) ;

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 27 / 31

Hierarchical Matrix Stacks

Fixed Pipeline stores a stack for both matrices

This allows for rendering objects in a hierarchy to keep spacial
coherency
glPushMatrix()
glPopMatrix()

glMatrixMode ( GL_MODELVIEW ) ;
glLoa dIdentit y () ;
glPushMatrix () ; w o r l d T oH o u s e S p a c e () ; // house space
glPushMatrix () ; ho u s e T oD o o r S p a c e () ; // door space
glPushMatrix () ; d o o r T o Do o r n o b S p a c e () ; // doornob space
renderDoornob () ; // doornob space
glPopMatrix () ; // Door space
renderFrame () ; // Door space
glPopMatrix () // house space
... render rest of house

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 28 / 31

Hierarchical Matrix Stacks

another example
void renderForest ()
{
glMatrixMode ( GL_MODELVIEW ) ;
glLoa dIdentit y () ;
for ( int i = 0; i <100; ++ i )
{
glPushMatrix () ;
glTranslatef (i ,0.0 ,0.0) ; // Push ourselves to row i
for ( int j = 0; j <100; ++ j )
{
glPushMatrix () ;
glTranslatef (0.0 , j ,0.0) ; // Push ourselves to row j
renderTree () ; // draw tree at position i , j
glPopMatrix () ;
}
glPopMatrix () ;
}
}

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 29 / 31

Forest

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 30 / 31

Questions?

Questions?

Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 31 / 31