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)

Javier Gonzalez-Sanchez

January 16, 2018
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. jgs
    Introduction to OpenGL

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  36. jgs
    GLUT
    OpenGL Utility Toolkit

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide