Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SER332 Lecture 03

SER332 Lecture 03

SER332 Lecture 01 by Javier Gonzalez
Published January 9, 2018 in Programming

Introduction to Graphics and Game Development
OpenGL Overview
(201804)

B546a9b97d993392e4b22b74b99b91fe?s=128

Javier Gonzalez
PRO

January 16, 2018
Tweet

More Decks by Javier Gonzalez

Other Decks in Programming

Transcript

  1. jgs SER332 Introduction to Graphics and Game Development Lecture 03:

    OpenGL Overview Javier Gonzalez-Sanchez javiergs@asu.edu PERALTA 230U Office Hours: By appointment
  2. jgs Microsoft Visual Studio 2017 Windows 10 Install and Configure

  3. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 3 jgs

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

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

    Install
  6. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6 jgs

    Restart
  7. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7 jgs

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

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

    Start Page
  10. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10 jgs

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

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

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

    Add the code below to test your project
  14. 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”
  15. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 15 jgs

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

    Build succeeded
  17. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 17 jgs

    Run it
  18. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 18 jgs

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

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

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

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

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

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

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

    Test OpenGL
  26. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 26 jgs

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

    … copy the dll file to the project folder
  28. jgs Introduction to OpenGL

  29. 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
  30. 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
  31. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 40 jgs

    OpenGL Rendering Pipeline
  32. 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(),…
  33. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 42 jgs

    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: 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
  34. 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
  35. 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, …
  36. jgs GLUT OpenGL Utility Toolkit

  37. 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
  38. 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
  39. 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
  40. 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
  41. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 50 jgs

    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 }
  42. 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 }
  43. 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 }
  44. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 53 jgs

    Example 1 500 500 (0.7,0.7) (-0.7,-0.7)
  45. 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()
  46. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 55 jgs

    Homework Start Programming!
  47. jgs 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.