csc418: computer graphics tutorial 1 - university of...
TRANSCRIPT
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 ProgrammingI GLUT
C++ Quick IntroductionOpenGL
I CommandsI Hierarchical Programming
Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 2 / 31
Event-Driven Programming
We want to manipulate what we seeI Traverse SceneI Modify EnvironmentI Framerate
Graphics Programs require Graphicical User InterfacesI User Input
F MouseF Keyboard
I System InputF Window ResizingF Window MinimizationF Timers
Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 3 / 31
Event-Driven Programming
We want to manipulate what we seeI Traverse SceneI Modify EnvironmentI Framerate
Graphics Programs require Graphicical User InterfacesI User Input
F MouseF Keyboard
I System InputF Window ResizingF Window MinimizationF 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
GLUTI Used in this class!
QTI My Favorite!
GTK...
Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 5 / 31
GLUT
Set of of slots for various functionalitiesI 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 Registrationint main(int argc , char * argv []){
glutInit (& argc , argv);glutInitDisplayMode ( GLUT_DEPTH | GLUT_DOUBLE | GLUT_RGBA );glutInitWindowPosition (100 ,100);glutInitWindowSize (320 ,320);glutCreateWindow (" Window ");glutDisplayFunc ( renderFunction );glutKeyboardFunction ( keyboardFunction );glutReshapeFunc ( reshapeFunc );glutMainLoop ();
}
Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 7 / 31
GLUT: Callback Function Examples
void keyboardFunction ( unsigned char key , int x, int y){
if(key == ’p’){
printf (" Mouse position : %d %d",x,y);}
}void renderFunction (){
glClear ( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER );glClearColor (0 ,0 ,0 ,1);
drawStuff ();glutSwapBuffers ();
}
Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 8 / 31
GLUT: Use Sparingly
Designed for rapid prototyping of small applicationsLacks a variety of features
I GLUIVery C way to do things (C++ is better (will get to that later...))For personal projects use Qt
I C++ and Object OrientedI Super popular (all KDE programs)I Signal/Slots are really niceI QMLI 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 LanguageI Lots of nice features piled ontop of each other
Definitely not CI Object OrientationI ReferencesI const CorrectnessI Templates (Generics)
Combination of things seen in C and JavaDo 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 functionsI Difference is default privacy
Different syntax for accessing depending on contextConstructors 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
PointersSimilar to what you see in most other languages so far
I Pass by value / pass by referenceI 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/classesResolved 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.0f ,2.0f);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 screenPush vertex information to graphics card
I Vertex positionsI ColorsI Normals
Get pretty picturesTwo main pipelines
I Fixed PipelineI Programmable Pipeline
F Shader ProgramsF Rapidly Changing!
Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 16 / 31
OpenGL 1.1 Fixed Pipeline State Machine
The OpenGL MachineR
The OpenGL graphics system diagram, Version 1.1. Copyright 1996 Silicon Graphics, Inc. All rights reserved.
CCCCCCCCCCCCCCCCCCCCCCCCCC
CCCCCCCCCCCC
CCCC
CC
CC
CCC
CCCC
TexCoord1
TexCoord2
TexCoord3
TexCoord4
Color3
Color4Convert
RGBA to float
Index Convert
index to float
Current
Texture
Coordinates
Current
RGBA
Color
Current
Color
Index
Current
NormalNormal3
Vertex2
RasterPos2
Vertex3
RasterPos3
Vertex4
RasterPos4b
MM*b
Model View
Matrix
Stack
OBJECTCOORDINATES
EYECOORDINATES
M
Matrix
Control
MatrixMode
PushMatrix
PopMatrix
LoadIdentity
LoadMatrix
NM
M*N
Matrix
Generators
Translate
Scale
Rotate
Frustum
Ortho
EdgeFlag
Current
Edge
Flag
Current
Raster
Position
CullFace
Polygon
Rasterization
Line
Segment
Rasterization
Point
Rasterization
Bitmap
Rasterization
Pixel
Rasterization
Polygon
CullingPolygon
Mode
PolygonMode
PointSize
Enable/Disable(Antialiasing/Stipple)
Unpack
Pixels
Bitmap
DrawPixels
TexImage
PolygonStipple
Pixel
Transfer
PixelZoom
PixelTransfer
PixelStore
Texel
Generation
Texture
Memory
TexParameter
Texture
ApplicationFog
TexEnv Fog
Enable/Disable Enable/Disable
Masking
ColorMask
IndexMask
DepthMask
StencilMask
Pack
Pixels
Coverage
(antialiasing)
Application
Pixel
Ownership
Test
Alpha
Test
(RGBA only)
Scissor
Test
Stencil
Test
Depth
Buffer
Test
Clear
Values
Clear
ControlClear
ClearColor
ClearIndex
ClearDepth
ClearStencil
Blending
(RGBA only)Dithering Logic Op
Frame Buffer
Scissor AlphaFunc
StencilOp
StencilFunc
Enable/DisableEnable/Disable Enable/Disable Enable/Disable Enable/Disable Enable/Disable Enable/Disable
Enable/Disable
DepthFunc BlendFunc LogicOp
Frame Buffer
Control
DrawBuffer
Readback
Control
ReadBufferReadPixels
MultMatrix
Masking
bM
M*b Normalize
Enable/Disable
TexGenOBJECT_LINEAR
TexGenEYE_LINEAR
TexGenSPHERE_MAP
Enable/Disable
bA
A*b
Texture
Matrix
Stack
Material
Parameters
Control
ColorMaterial
Material
Enable/Disable
Light
Parameters
RGBA Lighting Equation
Color Index Lighting Equation
Material
Parameters
Light Model
Parameters
Light
Enable/Disable
LightModel
M
M−TEnable/Disable
Clamp to
[0,1]
Mask to
[0,2n−1
]
Primitive
Assembly
Begin/End
TexGen
(Lighting)
EvalMesh
EvalPoint
EvalCoord
MapGrid
Map
Grid
Application
Map
Evaluation
Divide
Vertex
Coordinates
by
w
Apply
Viewport
DepthRange
Viewport
Flatshading
POINTSRASTER POS.
LINESEGMENTS
POLYGONS
ShadeModel
Line
Clipping
Polygon
Clipping
Point
Culling
Clip
Planes
ClipPlane
Mb
b
b
(Vertex
Only)
Line
View Volume
Clipping
Polygon
View Volume
Clipping
Point
View Volume
Culling
M*b
Projection
Matrix
Stack
MM
−Tb
b
Feedback
Encoding
FeedbackBuffer
PassThrough
Selection
Control
SelectBuffer
RenderMode
Evaluator
Control
Rectangle
GenerationRect
M*b
M*b
FrontFace
FrontFace
LineStipple
Enable/Disable(Antialiasing)
PixelMap
Selection
Name
Stack
Selection
Encoding
InitNames
PopNamePushName
LoadName
Notes:1. Commands (and constants) are shown without the gl (or GL_) prefix.2. The following commands do not appear in this diagram: glAccum, glClearAccum , glHint , display list commands, texture object commands, commands for obtaining OpenGL state (glGet commands and glIsEnabled ), and glPushAttrib and glPopAttrib . Utility library routines are not shown.3. After their exectution, glDrawArrays and glDrawElements leave affected current values indeterminate.4. This diagram is schematic; it may not directly correspond to any actual OpenGL implementation.
Convert
normal coords
to float
Enable/Disable
TexSubImage
CopyPixels
CopyTexImage
CopyTexSubImage
PolygonOffset
LineWidth
Enable/Disable(Antialiasing)
CCCCCCCCCCCCCCCCCCCCCC
CCCCCCCCCCCC
CCCCCCCCCC
CCCCCCCCCCCC
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
EdgeFlagPointer
TexCoordPointer
ColorPointer
IndexPointer
NormalPointer
VertexPointer
InterLeavedArrays
EnableClientState
DisableClientState
DrawElements
ArrayElement
Vertex
Array
Control
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
CCCCCCCCCCCCCCCCCCCCCCCC
CCCCCCCCCCCC
CCCCCCCCCC
CCCCCCCCCCCC
CCCCCCCCCCCCCCCCCCCCCC
t 0
r 0
q 1
A 1
z 0
w 1
Key to OpenGL Operations
Primitives Fragments
Vertices
Feedback&
Selection
InputConversion
&CurrentValues
Texture CoordinateGeneration
Evaluators&
Vertex Arrays
Lighting
MatrixControl
Clipping, Perspective,and
Viewport ApplicationRasteriz−
ation Texturing,Fog,and
Antialiasing
Per−Fragment Operations
Frame Buffer&
Frame Buffer ControlPixels
DrawArrays
Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 17 / 31
OpenGL 4.0 / Direct3D 11 Programmable PipelineDiagram
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 versionsWe’ll be sticking to the fixed pipeline
I However, feel free to play with the programmable pipelineOpenGL comes with Core and Compatibility profiles, where Coreremoves fixed pipeline stuff
I Have to manage your own MatricesI Graphics Cards are optimized for CompatibilityI Few people use Core...
Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 20 / 31
Useful OpenGL Tutorials
Fixed Pipeline OpenGLI NeHe Tutorials
Programmable Pipeline OpenGLI Wikibooks OpenGLI arcsynthesis.org/gltutI Mike Bailey’s CS519 handouts and SIGGRAPH 2012 notes
BothI 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 InformationglEnable ( GL_DEPTH_TEST );glDisable ( GL_DEPTH_TEST );glBegin ( GL_QUADS );glEnd ();glPushMatrix ();glTransformf (0.0 ,0.5 ,0.0);glPopMatrix ();
Assert Vertex InformationglNormal3f (0.0f ,1.0f ,0.0f);glColor4f (0.0f ,0.0f ,1.0f ,1.0f);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.0f ,1.0f ,1.0f ,1.0f);glVertex3d (.5 ,.25 ,0.0);glVertex3d (.25 ,.5 ,0.0);glVertex3d (.25 ,.25 ,0.0);
glEnd ();glBegin ( GL_LINES );
glColor3f (1.0f ,0.0f ,0.0f); glVertex3d (1.0 ,0.0 ,0.0);glColor3f (0.0f ,1.0f ,0.0f); glVertex3d (0.0 ,1.0 ,0.0);
glColor3f (0.0f ,1.0f ,0.0f); glVertex3d (0.0 ,1.0 ,0.0);glColor3f (0.0f ,0.0f ,1.0f); glVertex3d (0.0 ,0.0 ,0.0);
glColor3f (0.0f ,0.0f ,1.0f); glVertex3d (0.0 ,0.0 ,0.0);glColor3f (1.0f ,0.0f ,0.0f); glVertex3d (1.0 ,0.0 ,0.0);
glEnd ();
Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 23 / 31
Transformations
We want to traverse the scene and move scene objects aroundUse linear transformations in homogeneous coordinates:
Fixed Pipeline maintains two matrices for youI Switch between modifying them with glMatrixMode
F GL_MODELVIEWF GL_PROJECTION
http://www.songho.ca/opengl/gl_transform.html
Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 25 / 31
glMatrixMode s
glMatrixMode ( GL_PROJECTION );glLoadIdentity ();glFrustum (left ,right ,bottom ,top ,nearVal , farVal );// option 1glOrtho (left ,right ,bottom ,top ,nearVal , farVal );// option 2gluPerspective (fovy , aspect , zNear , zFar);// option 3
glMatrixMode ( GL_MODELVIEW );glLoadIdentity ();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 matricesThis allows for rendering objects in a hierarchy to keep spacialcoherencyglPushMatrix()
glPopMatrix()
glMatrixMode ( GL_MODELVIEW );glLoadIdentity ();glPushMatrix (); worldToHouseSpace ();// house spaceglPushMatrix (); houseToDoorSpace ();// door spaceglPushMatrix (); doorToDoornobSpace ();// doornob spacerenderDoornob ();// doornob spaceglPopMatrix ();// Door spacerenderFrame ();// Door spaceglPopMatrix () // house space... render rest of house
Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 28 / 31
Hierarchical Matrix Stacks
another examplevoid renderForest (){
glMatrixMode ( GL_MODELVIEW );glLoadIdentity ();for(int i = 0; i <100; ++i){
glPushMatrix ();glTranslatef (i ,0.0 ,0.0);// Push ourselves to row ifor(int j = 0; j <100; ++j){
glPushMatrix ();glTranslatef (0.0 ,j ,0.0) ;// Push ourselves to row jrenderTree ();// draw tree at position i,jglPopMatrix ();
}glPopMatrix ();
}}
Michael Tao CSC418: Computer Graphics Tutorial 1 September 20, 2012 29 / 31