OpenGL L01-Primitives

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

Setting Up OpenGL with VS 2008http://nehe.gamedev.net

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

[email protected]

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/