201801 SER332 Lecture 03

SER332
Introduction to Graphics and
Game Development
Lecture 03:
OpenGL Overview
Javier Gonzalez-Sanchez
javiergs@asu.edu
PERALTA 230U
Office Hours: By appointment

Microsoft Visual Studio 2017
Windows 10
Install and Configure

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 3
Run the installation file

Select Desktop Development with C++

Install

Restart

Sign up (optional)

Settings: Visual C++ (optional)

Start Page

Create a new project

Select Windows Console Application

Name your Project

Add the code below to test your project

Remove Precompiled Headers
1. Right click in the project name and select “Properties”.
2. Select “Not Using Precompiled Headers”

Build (compile)

Build succeeded

Run it

A console will open

Download the OpenGL libraries

Copy DLL file to Windows/System32

Copy lib and include folders to VC folder

Update VC++ Directories | Include

Update VC++ Directories | lib

Test OpenGL | Copy code from slides 48

Test OpenGL

If you get a glut32.dll error,

… copy the dll file to the project folder

Xcode 9.20
macOS High Sierra

Verification
§ OpenGL and GLUT come with the OS and Xcode
installations.
§ To verify, check for:
/System/Library/Frameworks/GLUT.framework
/System/Library/Frameworks/OpenGL.framework

Create a new Project in Xcode
§ Select "File→New→New Project".
§ Choose a template for your new project under Mac OS X (not
iOS):"Application→Command Line Tool" and click "Next"
§ For the sample code, specify "Product Name" as "sampleapp",
"Company Identifier" as "sample", select "Type" "C++", and click
"Next”.
§ A window pops up to prompt you where you want to put the
new project folder.
§ Uncheck "Create local git repository for this project” Then click
"Create”.

Add Libraries
§ In the middle pane, click the "Build Phases" tab, open the "Link
Binary With Libraries" list, and click the '+' sign at the bottom left
corner of the list.
§ A list of frameworks should pop up. Scroll down the list to
"OpenGL.framework" and click "Add". Repeat for
"GLUT.framework".
§ To suppress "Deprecations" warnings for GLUT, in the middle
pane, click the "Build Settings" tab. On the second menu of
the panel, click on "All". Scroll down (or search for) "Apple
LLVM 5.1 - Custom Compiler Flags". Click to the right of "Other
C Flags" and type in "-Wno-deprecated".

Eclipse Oxygen 2 (release 4.7.2)
macOS High Sierra

Install
• Download Eclipse IDE for C/C++ Developers

Configure
§ Create File àNew à Project…
§ Choose C/C++ àC Project
§ Give a name to the project
§ Select Project type àHello World ANSI C ProjectàMacOSX
GCC

Configure
§ In order to set-up them in Eclipse, open the project properties
and go in: “C/C++ Build->Settings->MacOSX C++ Linker-
>Miscellaneous” and write this in the Linker flags text box:
-framework GLUT -framework openGL -framework Cocoa

Configure
§ Add gl.h and glut.h in the directory
§ Go to project propertiesà C/C++ general àPath and Symbols à
Include(tab)à GNU C add 2 include directories
/System/Library/Frameworks/OpenGL.framework/Versions/A/Headers
/System/Library/Frameworks/GLUT.framework/Versions/A/Headers

OpenGL
§ OpenGL basic library – most commands
§ OpenGL Utility (GLU) – some high level commands
e.g. generating complex objects, cylinder, sphere
§ OpenGL Utility Toolkit (GLUT)
windowing commands
38

What Is OpenGL?
§ Software interface to graphics hardware
§ Competitors: DirectX, Java2D and Java3D,…
§ Communicate between CPU and GPU via drivers
§ A client and server execution model

OpenGL Rendering Pipeline

OpenGL as a State Machine
§ Maintain pipeline states: current color, viewing and
projection transformation, polygon drawing modes,
etc.
§ Hierarchical state maintenance
glPushAttrib(), glPushMatrix(), glPopAttrib(), glPopMatrix(), …
glColor3f(1.0f, 0.0f, 0.0f); // <- alter current state
// Draw a cube
//What color is the cube?
glColor3f(0.0, 1.0f, 0.0f); // <- alter current state
// Draw a sphere.
// What color is the sphere?

OpenGL Libraries
OpenGL core library (GL)
§ #include <GL/gl.h>
§ OpenGL32 on Windows
§ GL on most UNIX / LINUX systems (libGL.a)
OpenGL Utility Library (GLU)
§ #include <GL/glu.h>
§ Provides functionality in OpenGL core but avoids having to rewrite
code
OpenGL Utility Toolkit (GLUT)
§ #include <GL/glut.h>
§ Provides functionality common to all window systems
o Open a window
o Get input from mouse and keyboard
o Menus
o Event-driven
§ Code is portable but GLUT lacks the functionality of a good toolkit for
a specific platform

OpenGL and Related APIs
GLUT
GLU
GL
GLX, AGL
or WGL
X, Win32, Mac O/S
software and/or hardware
application program
OpenGL Motif
widget or similar

OpenGL Syntax
§ functions have prefix gl and initial capital letters for each word
glClearColor(), glEnable(), glPushMatrix() …
§ glu for GLU functions
gluLookAt(), gluPerspective() …
§ constants begin with GL_, use all capital letters
GL_COLOR_BUFFER_BIT,
GL_PROJECTION,
GL_MODELVIEW …
§ Extra letters in some commands indicate the number and
type of variables
glColor3f(), glVertex3f() …
§ OpenGL data types
GLfloat, GLdouble, GLint, GLenum, …

Part 2
GLUT: OpenGL Utility Toolkit

GLUT: OpenGL Utility Toolkit
§ A simplified window system toolkit
o Create windows
o Initialize display context
o Handle basic application events: screen refreshing, timer, resize…
o Handle user inputs
§ A higher level geometric toolkit
o glutSolidSphere, glutSolidCube,…
§ Application Structure
o Configure and open window
o Initialize OpenGL state
o Register input callback functions
• render
• resize
• input: keyboard, mouse, etc.
o Enter event processing loop

Installation (Windows)
§ glut.h – in your include path
gl.h and glu.h are included by glut.h
§ glut32.lib in your library path
§ glut32.dll in “windowssystem” path

GLUT Window Management
§ glutInit (&argc, argv); //Glut initialization
§ glutCreateWindow ("Example"); //Create a window
§ glutDisplayFunc (myDisplay) //callback function
§ glutMainLoop() // activate the display window
§ glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB | …)
// set initial options
§ glutInitWindowPosition (x, y); // integer
§ glutInitWindowSize (width, height ); // integer

Example 1
/**
* https://github.com/javiergs/SER332/blob/master/Lecture03/main.c
*/
#if defined(__APPLE__)
#include <GLUT/glut.h>
#else
#include <GL/glut.h>
#endif
// main
void main(int argc, char** argv){
glutInit(&argc, argv); // glut init
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(500,500); // actual window size
glutInitWindowPosition(0,0); // window location
glutCreateWindow("simple");
myInit();
glutDisplayFunc(myDisplay);
glutMainLoop(); //event loop
}

// myInit
void myInit() {
glClearColor(0.764f, 0.129f, 0.282f, 1.0); // maroon
glColor3f(1.0f, 0.843f, 0.0f); // gold
// projection transformations
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-1.0, 1.0, -1.0, 1.0); // units inside
}

// myDisplay
void myDisplay() {
glClear(GL_COLOR_BUFFER_BIT); // clear the window
glBegin(GL_POLYGON); // fill connected polygon
glVertex2f(-0.7, 0.7); // vertices of the square
glVertex2f( 0.6, 0.7);
glVertex2f(-0.7, -0.6);
glEnd();
glBegin(GL_POLYGON); // fill connected polygon
glVertex2f( 0.7, 0.6); // vertices of the square
glVertex2f(-0.6, -0.7);
glVertex2f( 0.7, -0.7);
glEnd();
glFlush(); //forces issued commands to execute
}

Example 1
500
500
(0.7,0.7)
(-0.7,-0.7)

Double Buffering
§ Double buffering is necessary for almost all OpenGL applications:
§ Render into back buffer
§ Swap buffers when finished rendering a frame: The old back
buffer becomes the front buffer that is displayed. The old front
buffer becomes the back buffer that is rendered into.
§ What happens when you do not use double buffering?
§ flickering artifacts, tearing artifacts
§ Commands:
§ glutInitDisplayMode( GLUT_RGBA | GLUT_DOUBLE );
§ glutSwapBuffers(); //instead of glFlush()

Homework
Start Programming!

SER332 Introduction to Graphics
Javier Gonzalez-Sanchez
javiergs@asu.edu
Spring 2018
Disclaimer. These slides can only be used as study material for the class SER332 at ASU. They cannot be distributed or used for another purpose.

201801 SER332 Lecture 03

Recommended

Recommended

More Related Content

Similar to 201801 SER332 Lecture 03

Similar to 201801 SER332 Lecture 03 (20)

More from Javier Gonzalez-Sanchez

More from Javier Gonzalez-Sanchez (20)

Recently uploaded

Recently uploaded (20)

201801 SER332 Lecture 03