opengl l01-primitives
DESCRIPTION
OpenGL L01-WarmUp+PrimitivesTRANSCRIPT
Mohammad Shaker
mohammadshaker.com
@ZGTRShaker
2014
OpenGL Graphics
L01 –WarmUP& Primitives
You Are Going to Learn OpenGL
OpenGL
Open Graphics Library
OpenGLStandard, cross-language, cross-platform API
Game Engines
Game Engines
Unreal Engine
Game Engines
FROSTBITE
Battlefield 3
FROSTBITE
Game Engines
CRY ENGINE
Game Engines
CRY ENGINE
Unity3D
Unity3D
OpenGL is..
• Library, not a programming language.
– Can be used with programming languages (C++, C#, Python, Java,.. Etc.)
• Standard. (What about XNA, DirectX?)
• Everything is a Primitive
What about OpenGL ES?
OpenGL Embedded Systems
OpenGL ESAndroid, iOS,.. etc
OpenGL2D and 3D
How can we see “3D”?
How can we see “3D”?Human Eyes
OpenGL DevelopmentC++, C# with TAO, OpenTK, SharpGL, ..etc
We’ll visit OpenTK at the end of the courseTake a look at sample project here:
http://www.codeproject.com/Articles/138452/An-Analog-Clock-Design-Using-OpenTK-in-Csharphttp://www.codeproject.com/Articles/308167/A-Basic-D-Asteroid-Game-in-openGL-with-Csharp
Preliminaries
• Headers Files• #include <GL/gl.h>
• #include <GL/glu.h>
• #include <GL/glut.h>
• Libraries
• Enumerated Types
– OpenGL defines numerous types for compatibility
GLfloat, GLint, GLenum, etc.
Setting Up OpenGL on Your Machine (C++, VS 2008)
• You are given the following files:
– Headers:
• GL.h / GLU.h / GLUT.h / GLAUX.h
– Libraries:
• OpenGL32.lib / GLU32.lib / GLUT.lib / GLAUX.lib
– DLLs:
• OpenGL32.dll / GLU32.dll / GLUT.dll
Setting Up OpenGL on Your Machine (C++, VS 2008)
• All you need to do is scatter the files on your machine correctly and link them to your project.
– Copy .h files to
C:\Program Files\Microsoft Visual Studio 9.0\VC\include
– Copy .lib files to
C:\Program Files\Microsoft Visual Studio 9.0\VC\lib
– Copy .dll files to
C:\Windows\System32
– Project Name > Right Click > Properties > Linker > Input > Additional Dependencies
And write the following:
openGL32.lib glu32.lib glut32.lib glaux.lib
OpenGL DevelopmentWe are also going to use C# with OpenTK
OpenGL Pipeline
OpenGL Graphics Pipeline
Mathematical stages
Creates the color image from the geometric and
texture
Memory of the graphics
display device
Data Types
GLUA graphics library built on top of OpenGL that comes bundled with OpenGL and provides
higher-level modeling primitives (like: curves, surfaces,.. etc.)
3D World
3D World
3D World
N E W
RULE Remember, Remember
OpenGL programming is state-machine based
OpenGLCan Work in Each State Separately
Push and Pop, as we will see
Let’s Draw Something, Anything!
Function Naming
Drawing Something
glBegin(GL_TRIANGLES);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3i(0, 1, 0);
glColor3f(0.0f, 1.0f, 0.0f);
glVertex3i(-1, -1, 0);
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3i(1, -1, 0);
glEnd();
Drawing Something
glBegin(GL_TRIANGLES);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3i(0, 1, 0);
glColor3f(0.0f, 1.0f, 0.0f);
glVertex3i(-1, -1, 0);
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3i(1, -1, 0);
glEnd();
Draw between begin and end
Drawing Something
glBegin(GL_TRIANGLES);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3i(0, 1, 0);
glColor3f(0.0f, 1.0f, 0.0f);
glVertex3i(-1, -1, 0);
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3i(1, -1, 0);
glEnd();
Draw GL_TRIANGLES between begin and end
Drawing Something
glBegin(GL_TRIANGLES);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3i(0, 1, 0);
glColor3f(0.0f, 1.0f, 0.0f);
glVertex3i(-1, -1, 0);
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3i(1, -1, 0);
glEnd();
Drawing Something
glBegin(GL_TRIANGLES);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3i(0, 1, 0);
glColor3f(0.0f, 1.0f, 0.0f);
glVertex3i(-1, -1, 0);
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3i(1, -1, 0);
glEnd();
Drawing Something
glBegin(GL_TRIANGLES);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3i(0, 1, 0);
glColor3f(0.0f, 1.0f, 0.0f);
glVertex3i(-1, -1, 0);
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3i(1, -1, 0);
glEnd();
Drawing Something
glBegin(GL_TRIANGLES);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3i(0, 1, 0);
glColor3f(0.0f, 1.0f, 0.0f);
glVertex3i(-1, -1, 0);
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3i(1, -1, 0);
glEnd();
Drawing Something
glBegin(GL_TRIANGLES);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3i(0, 1, 0);
glColor3f(0.0f, 1.0f, 0.0f);
glVertex3i(-1, -1, 0);
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3i(1, -1, 0);
glEnd();
Drawing Something
glBegin(GL_TRIANGLES);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3i(0, 1, 0);
glColor3f(0.0f, 1.0f, 0.0f);
glVertex3i(-1, -1, 0);
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3i(1, -1, 0);
glEnd();
Watch out. Draw primitives Counter-Clockwise
Drawing Something
glBegin(GL_TRIANGLES);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3i(0, 1, 0);
glColor3f(0.0f, 1.0f, 0.0f);
glVertex3i(-1, -1, 0);
glColor3f(0.0f, 0.0f, 1.0f);
glVertex3i(1, -1, 0);
glEnd();
You can change that:
glFrontFace(GL_CCW);CounterClockwise is front facing
glFrontFace(GL_CW);Clockwise is front facing
Drawing Primitives
glBegin(GL_LINES);
glVertex2f(x0,y0);
glVertex2f(x1,y1);
glEnd();
glBegin(GL_TRIANGLES);
glVertex2f(x0,y0);
glVertex2f(x1,y1);
glVertex2f(x2,y2);
glEnd();
glBegin(GL_QUADS);
glVertex2f(x0,y0);
glVertex2f(x1,y1);
glVertex2f(x2,y2);
glVertex2f(x3,y3);
glEnd();
Drawing Primitives
N E W
RULE Remember, Remember
OpenGL programming is state-machine based
Drawing Primitives - Coloring
glColor3f(0,0,1);
glBegin(GL_POLYGON);glVertex2f(-1,1);glVertex2f(-1,-1);glVertex2f(1,-1);
glEnd();
glColor3f(1,0,0);glBegin(GL_POLYGON);glVertex2f(-1,1);glVertex2f(-1,-1);glVertex2f(1,-1);
glEnd();
glColor3f(0,0,0);glBegin(GL_LINE_LOOP);glVertex2f(-1,1);glVertex2f(-1,-1);glVertex2f(1,-1);
glEnd();
glBegin(GL_POLYGON);glColor3f(0,1,0);glVertex2f(-1,1);
glColor3f(0,0,1);glVertex2f(-1,-1);
glColor3f(1,0,0);glVertex2f(1,-1);
glEnd();
Drawing Primitives - Coloring
glColor3f(0,0,1);
glBegin(GL_POLYGON);glVertex2f(-1,1);glVertex2f(-1,-1);glVertex2f(1,-1);
glEnd();
glColor3f(1,0,0);glBegin(GL_POLYGON);glVertex2f(-1,1);glVertex2f(-1,-1);glVertex2f(1,-1);
glEnd();
glColor3f(0,0,0);glBegin(GL_LINE_LOOP);glVertex2f(-1,1);glVertex2f(-1,-1);glVertex2f(1,-1);
glEnd();
glBegin(GL_POLYGON);glColor3f(0,1,0);glVertex2f(-1,1);
glColor3f(0,0,1);glVertex2f(-1,-1);
glColor3f(1,0,0);glVertex2f(1,-1);
glEnd();
OpenGL programming is state-machine based
Polygon
Polygon
• To draw a polygon, the vertices should hold:
– Do not intersect (convex)
– All in same plane
glEdgeFlag(FALSE);glVertex2f(30.0f, 0.0f);glEdgeFlag(TRUE);glVertex2f(0.0f, 20.0f);glVertex2f(0.0f, 0.0f);
Polygon
• To draw a polygon, the vertices should hold:
– Do not intersect (convex)
– All in same plane
glEdgeFlag(FALSE);glVertex2f(30.0f, 0.0f);glEdgeFlag(TRUE);glVertex2f(0.0f, 20.0f);glVertex2f(0.0f, 0.0f);
Wireframes Meshes
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
glBegin(GL_TRIANGLES);
for (int i=0; i< n; i++) {
glVertex3fv(v[i++]);
glVertex3fv(v[i++]);
glVertex3fv(v[i]);
}
glEnd();
Wireframes Meshes
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
glBegin(GL_TRIANGLES);
for (int i=0; i< n; i++) {
glVertex3fv(v[i++]);
glVertex3fv(v[i++]);
glVertex3fv(v[i]);
}
glEnd();
Wanna Play More With Primitives? Let’s Go!From CS418 Computer Graphics, John C. Hart
Points
glBegin(GL_POINTS);
glVertex2f(-.6,1.);
glVertex2f(-.6,.6);
glVertex2f(-.2,.6);
glVertex2f(-.2,-.6);
glVertex2f(-.6,-.6);
glVertex2f(-.6,-1.);
glVertex2f(.6,-1.);
glVertex2f(.6,-.6);
glVertex2f(.2,-.6);
glVertex2f(.2,.6);
glVertex2f(.6,.6);
glVertex2f(.6,1.);
glEnd();
(-1,-1) (1,-1)
(1,1)(-1,1)
Lines
glBegin(GL_LINES);
glVertex2f(-.6,1.);
glVertex2f(-.6,.6);
glVertex2f(-.2,.6);
glVertex2f(-.2,-.6);
glVertex2f(-.6,-.6);
glVertex2f(-.6,-1.);
glVertex2f(.6,-1.);
glVertex2f(.6,-.6);
glVertex2f(.2,-.6);
glVertex2f(.2,.6);
glVertex2f(.6,.6);
glVertex2f(.6,1.);
glEnd();
(-1,-1) (1,-1)
(1,1)(-1,1)
Line Strip
glBegin(GL_LINE_STRIP);
glVertex2f(-.6,1.);
glVertex2f(-.6,.6);
glVertex2f(-.2,.6);
glVertex2f(-.2,-.6);
glVertex2f(-.6,-.6);
glVertex2f(-.6,-1.);
glVertex2f(.6,-1.);
glVertex2f(.6,-.6);
glVertex2f(.2,-.6);
glVertex2f(.2,.6);
glVertex2f(.6,.6);
glVertex2f(.6,1.);
glEnd();
(-1,-1) (1,-1)
(1,1)(-1,1)
Line Loop
glBegin(GL_LINE_LOOP);
glVertex2f(-.6,1.);
glVertex2f(-.6,.6);
glVertex2f(-.2,.6);
glVertex2f(-.2,-.6);
glVertex2f(-.6,-.6);
glVertex2f(-.6,-1.);
glVertex2f(.6,-1.);
glVertex2f(.6,-.6);
glVertex2f(.2,-.6);
glVertex2f(.2,.6);
glVertex2f(.6,.6);
glVertex2f(.6,1.);
glEnd();
(-1,-1) (1,-1)
(1,1)(-1,1)
Polygon
glBegin(GL_POLYGON);
glVertex2f(-.6,1.);
glVertex2f(-.6,.6);
glVertex2f(-.2,.6);
glVertex2f(-.2,-.6);
glVertex2f(-.6,-.6);
glVertex2f(-.6,-1.);
glVertex2f(.6,-1.);
glVertex2f(.6,-.6);
glVertex2f(.2,-.6);
glVertex2f(.2,.6);
glVertex2f(.6,.6);
glVertex2f(.6,1.);
glEnd();
(-1,-1) (1,-1)
(1,1)(-1,1)
OpenGL only supports convex polygons(and really only triangles)
Quads
glBegin(GL_QUADS);
glVertex2f(-.6,1.);
glVertex2f(-.6,.6);
glVertex2f(-.2,.6);
glVertex2f(-.2,-.6);
glVertex2f(-.6,-.6);
glVertex2f(-.6,-1.);
glVertex2f(.6,-1.);
glVertex2f(.6,-.6);
glVertex2f(.2,-.6);
glVertex2f(.2,.6);
glVertex2f(.6,.6);
glVertex2f(.6,1.);
glEnd();
(-1,-1) (1,-1)
(1,1)(-1,1)
Quads
glBegin(GL_QUADS);
glVertex2f(-.6,1.);
glVertex2f(-.6,.6);
glVertex2f(-.6,-.6);
glVertex2f(-.6,-1.);
glVertex2f(.6,-1.);
glVertex2f(.6,-.6);
glEnd();
glVertex2f(-.2,.6);
glVertex2f(-.2,-.6);
glVertex2f(.2,-.6);
glVertex2f(.2,.6);
glVertex2f(.6,.6);
glVertex2f(.6,1.);
Quads
glBegin(GL_QUADS);
glVertex2f(-.6,1.);
glVertex2f(-.6,.6);
glVertex2f(.6,.6);
glVertex2f(.6,1.);
glVertex2f(-.6,-.6);
glVertex2f(-.6,-1.);
glVertex2f(.6,-1.);
glVertex2f(.6,-.6);
glVertex2f(-.2,.6);
glVertex2f(-.2,-.6);
glVertex2f(.2,-.6);
glVertex2f(.2,.6);
glEnd();
(-1,1)
(-1,-1) (1,-1)
(1,1)(-1,1)
Lines should never pass through a vertex.
Triangles
glBegin(GL_TRIANGLES);
glVertex2f(-.6,1.);
glVertex2f(-.6,.6);
glVertex2f(-.2,.6);
glVertex2f(-.2,-.6);
glVertex2f(-.6,-.6);
glVertex2f(-.6,-1.);
glVertex2f(.6,-1.);
glVertex2f(.6,-.6);
glVertex2f(.2,-.6);
glVertex2f(.2,.6);
glVertex2f(.6,.6);
glVertex2f(.6,1.);
glEnd();
(-1,-1) (1,-1)
(1,1)(-1,1)
Triangles
glBegin(GL_TRIANGLES);
glVertex2f(-.6,1.);
glVertex2f(-.6,.6);
glVertex2f(-.2,.6);
glVertex2f(-.6,1.);
glVertex2f(-.2,.6);
glVertex2f(.6,1.);
glVertex2f(-.2,.6);
glVertex2f(.2,.6);
glVertex2f(.6,1.);
glVertex2f(.2,.6);
glVertex2f(.6,.6);
glVertex2f(.6,1.);
…
glEnd(); (-1,-1) (1,-1)
(1,1)(-1,1)
Triangle Strip
glBegin(GL_TRIANGLE_STRIP);
glVertex2f(-.6,1.);
glVertex2f(-.6,.6);
glVertex2f(-.2,.6);
glVertex2f(-.2,-.6);
glVertex2f(-.6,-.6);
glVertex2f(-.6,-1.);
glVertex2f(.6,-1.);
glVertex2f(.6,-.6);
glVertex2f(.2,-.6);
glVertex2f(.2,.6);
glVertex2f(.6,.6);
glVertex2f(.6,1.);
glEnd();
(-1,-1) (1,-1)
(1,1)(-1,1)
Triangle Strip
glBegin(GL_TRIANGLE_STRIP);
glVertex2f(-.6,1.);
glVertex2f(.6,1.);
glVertex2f(-.2,.6);
glVertex2f(.2,.6);
glVertex2f(-.2,-.6);
glVertex2f(.2,-.6);
glVertex2f(.6,-1.);
glVertex2f(.6,-.6);
glEnd();
…
(-1,-1) (1,-1)
(1,1)(-1,1)
First two vertices prime the pump,then every new vertex creates a triangle
connecting it to the previous two vertices
Triangle Fan
glBegin(GL_TRIANGLE_FAN);
glVertex2f(-.2,.6);
glVertex2f(-.6,.6);
glVertex2f(-.6,1.);
glVertex2f(.6,1.);
glVertex2f(.2,.6);
glVertex2f(.2,-.6);
glVertex2f(-.2,-.6);
glEnd();
…
(-1,-1) (1,-1)
(1,1)(-1,1)
OpenGL Program Structure
OpenGL Program Structure
• Application Structure
– Configure and open window
– Initialize OpenGL state
– Register input callback functions
• render
• resize
• input: keyboard, mouse, etc.
– Enter event processing loop
OpenGL Program Structure
• Application Structure
– Configure and open window
– Initialize OpenGL state
– Register input callback functions
• render
• resize
• input: keyboard, mouse, etc.
– Enter event processing loop
void main( int argc, char** argv ){int mode = GLUT_RGB|GLUT_DOUBLE;
glutInitDisplayMode( mode );glutCreateWindow( argv[0] );
init();
glutDisplayFunc( display );glutReshapeFunc( resize ); glutKeyboardFunc( key );glutIdleFunc( idle );
glutMainLoop();}
Now Take a Breath, Have a KitKat
Resources
Resources
Advanced stuff for math geeks
And yet more resources
• The OpenGL Programming Guide, 7th Edition
• Interactive Computer Graphics: A Top-down Approach using OpenGL, 6th Edition
• The OpenGL Superbible, 5th Edition
• The OpenGL Shading Language Guide, 3rd Edition
• OpenGL and the X Window System
• OpenGL Programming for Mac OS X
• OpenGL ES 2.0
• WebGL
• The OpenGL Website: www.opengl.org• API specifications
• Reference pages and developer resources
• PDF of the OpenGL Reference Card
• Discussion forums
• The Khronos Website: www.khronos.org• Overview of all Khronos APIs
• Numerous presentations
Resources (www.nehe.gamedev.net)
Keep in touch and let’s connect
http://www.mohammadshaker.com
https://twitter.com/ZGTRShaker @ZGTRShaker
https://de.linkedin.com/pub/mohammad-shaker/30/122/128/
http://www.slideshare.net/ZGTRZGTR
https://www.goodreads.com/user/show/11193121-mohammad-shaker
https://plus.google.com/u/0/+MohammadShaker/
https://www.youtube.com/channel/UCvJUfadMoEaZNWdagdMyCRA
http://mohammadshakergtr.wordpress.com/