SER332 Lecture 03

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

Introduction to Graphics and Game Development
OpenGL Overview
(201804)

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
   

   View Slide

2. jgs
   Microsoft Visual Studio 2017
   Windows 10
   Install and Configure
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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”
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. jgs
    Introduction to OpenGL
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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(),…
    

    View Slide

33. 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
    

    View Slide

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
    

    View Slide

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, …
    

    View Slide

36. jgs
    GLUT
    OpenGL Utility Toolkit
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    #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
    }
    

    View Slide

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
    }
    

    View Slide

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
    }
    

    View Slide

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

    View Slide

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()
    

    View Slide

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

    View Slide

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.
    

    View Slide