jgs SER332 Introduction to Graphics and Game Development Lecture 03: OpenGL Overview Javier Gonzalez-Sanchez [email protected] PERALTA 230U Office Hours: By appointment

jgs Microsoft Visual Studio 2017 Windows 10 Install and Configure

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

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 4 jgs Select Desktop Development with C++

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 5 jgs Install

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6 jgs Restart

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7 jgs Sign up (optional)

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8 jgs Settings: Visual C++ (optional)

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 9 jgs Start Page

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10 jgs Create a new project

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11 jgs Select Windows Console Application

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12 jgs Name your Project

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 13 jgs Add the code below to test your project

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 14 jgs Remove Precompiled Headers § 1. Right click in the project name and select “Properties”. § 2. Select “Not Using Precompiled Headers”

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 15 jgs Build (compile)

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 16 jgs Build succeeded

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 17 jgs Run it

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 18 jgs A console will open

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 19 jgs § https://github.com/javiergs/SER332/tree/master/Lecture03 Download the OpenGL libraries

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 20 jgs Copy DLL file to Windows/System32

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 21 jgs Copy lib and include folders to VC folder

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 22 jgs Update VC++ Directories | Include

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 23 jgs Update VC++ Directories | lib

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 24 jgs Test OpenGL | Copy code from slides 48

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 25 jgs Test OpenGL

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 26 jgs If you get a glut32.dll error,

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 27 jgs … copy the dll file to the project folder

jgs Introduction to OpenGL

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 38 jgs 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

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 39 jgs 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

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 40 jgs OpenGL Rendering Pipeline

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 41 jgs OpenGL as a State Machine § Maintain pipeline states: current color, viewing and projection transformation, polygon drawing modes, etc. 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? § Hierarchical state maintenance glPushAttrib(), glPushMatrix(), glPopAttrib(), glPopMatrix(),…

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 42 jgs OpenGL Libraries OpenGL core library (GL) #include § OpenGL32 on Windows. GL on most UNIX / LINUX systems (libGL.a) OpenGL Utility Library (GLU) #include § Provides functionality in OpenGL core but avoids having to rewrite code OpenGL Utility Toolkit (GLUT) #include § Provides functionality common to all window systems: Open a window, Get input from mouse and keyboard, Menus, Event-driven § Code is portable but GLUT lacks the functionality of a good toolkit for a specific platform

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 43 jgs 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

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 44 jgs OpenGL Syntax § GL functions glClearColor(), glEnable(), glPushMatrix() … § GLU functions gluLookAt(), gluPerspective() … § GL constants 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, …

jgs GLUT OpenGL Utility Toolkit

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 46 jgs GLUT A simplified window system toolkit § Create windows § Initialize display context § Handle basic application events: screen refreshing, timer, resize… § Handle user inputs A higher level geometric toolkit § glutSolidSphere § glutSolidCube

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 47 jgs GLUT Application Structure § Configure and open window § Initialize OpenGL state § Register input callback functions: render, resize, input (keyboard, mouse, etc.) § Enter event processing loop

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 48 jgs Installation (Windows) § Add glut.h in your include path gl.h and glu.h are included by glut.h § Add glut32.lib in your library path § Add glut32.dll in "windows\system" path

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 49 jgs 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

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 50 jgs Example 1 /** * https://github.com/javiergs/SER332/blob/master/Lecture03/main.c */ #if defined(__APPLE__) #include #else #include #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 }

jgs Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 51 Javier Gonzalez-Sanchez | SER431 | Spring 2018 | 51 // 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 }

jgs Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 52 Javier Gonzalez-Sanchez | SER431 | Spring 2018 | 52 // 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 }

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 53 jgs Example 1 500 500 (0.7,0.7) (-0.7,-0.7)

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 54 jgs 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()

Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 55 jgs Homework Start Programming!

jgs SER332 Introduction to Graphics Javier Gonzalez-Sanchez [email protected] 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.