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

2. OpenGL window

2. OpenGL window


Tatsuya Yatagawa

April 06, 2021


  1. 2. OpenGL window Tatsuya Yatagawa

  2. Workflow to show up a window ◼ Reference code ◼

    https://github.com/tatsy/OpenGLCourseJP/tree/maste r/src/open_window ◼ Workflow 1. Initialize GLFW 2. Create OpenGL window 3. Create OpenGL context 4. Initialize OpenGL features 5. Render loop ◼ Clear buffers ◼ Draw objects Computer Graphics Course @Waseda University Common (sometimes changed) Variable
  3. Initialize GLFW ◼ glfwInit ◼ Arguments: no arguments ◼ Outputs:

    Boolean (true: success, false: failed) ◼ Code ◼ Note ◼ L22: check initialization success ◼ If failed, print a message to console window Computer Graphics Course @Waseda University
  4. Create OpenGL window ◼ glfwCreateWindow ◼ Arguments: ◼ Window width

    (int) ◼ Window height (int) ◼ Window title (const char*) ◼ Parameter for full screen mode (set NULL) ◼ Parameter for context sharing (set NULL) ◼ Outputs: Pointer to OpenGL window (GLFWwindow*) Computer Graphics Course @Waseda University
  5. Create OpenGL window ◼ Code ◼ Note ◼ L28-29: create

    a window ◼ Check success at L30. If failed, print an error message. ◼ After glfwCreateWindow call, you must call glfwTerminate regardless of its success. Computer Graphics Course @Waseda University
  6. Create OpenGL context ◼ glfwMakeContextCurrent ◼ Arguments: ◼ Pointer to

    OpenGL window (GLFWwindow*) ◼ Outputs: no output ◼ What is OpenGL context? ◼ Set of parameters and data for OpenGL ◼ Parameters for target buffer (= set of pixels) ◼ Data for vertices, textures to specify a scene ◼ In this course, you will make only one context ◼ You don’t care about it seriously ◼ For multithread or multi-window systems, you need to manage multiple contexts. Computer Graphics Course @Waseda University
  7. Create OpenGL context ◼ Code Computer Graphics Course @Waseda University

    ◼ Note ◼ It’s so simple. Nothing to be cared about.
  8. Variable parts in source code ◼ Code Computer Graphics Course

    @Waseda University
  9. Initialize OpenGL features ◼ Depends on what you show in

    display ◼ Initialization here is for software side settings ◼ c.f.) glfwInit initializes hardware side settings ◼ Typical settings ◼ Color for filling backgrounds (now only this one) ◼ Enable features (depth testing, face culling, textures) ◼ Create shader program and vertex buffers Computer Graphics Course @Waseda University
  10. Setup background color ◼ glClearColor ◼ Strictly, it’s not background

    color, but is for filling color buffers. ◼ Arguments: ◼ 1st, 2nd, 3rd: red, green and blue components ◼ 4th: alpha channel (transparency, specify 1.0) ◼ For each of them, 0 is minimum, 1 is maximum (float types) ◼ Outputs: no outputs ◼ Quick intro to color space ◼ RGB color ◼ Specified by three channels, i.e., R (red), G (green), B (blue) ◼ Other color spaces? (not supported by OpenGL) ◼ CMYK (for printing), HSV (color editing), Lab (perceptual) Computer Graphics Course @Waseda University
  11. Setup background color ◼ Code Computer Graphics Course @Waseda University

    ◼ Note ◼ You should (must) make a method for OpenGL initialization
  12. Render loop ◼ Code Computer Graphics Course @Waseda University

  13. Render loop Computer Graphics Course @Waseda University ◼ glfwWindowShouldClose ◼

    Check if window closing operation is queued ◼ Arguments: ◼ Window pointer to check its close (GLFWwindow*) ◼ Outputs: boolean (can be closed or not) Loop continues while close operation is not queued
  14. Rendering (just fill with a color) Computer Graphics Course @Waseda

  15. Rendering (just fill with a color) Computer Graphics Course @Waseda

    University ◼ glClear ◼ Clear (= fill with values) buffers specified ◼ Arguments: ◼ Buffers to be cleared (int) ◼ Outputs: no outputs ◼ Notice ◼ For color buffer, value specified by glClearColor is used ◼ glClearColor does not clear color buffer (name is bit confusing)
  16. Rendering Computer Graphics Course @Waseda University ◼ Other processes (typically

    not changed) ◼ glfwSwapBuffers ◼ Swap render buffers (to prevent flickering) ◼ glfwPollEvents ◼ Process queued interaction events (window resize, keyboard and mouse operations)
  17. Double buffering ◼ Trick to prevent flickering ◼ Prepare two

    different render buffers ◼ Draw something to hidden buffer, and swap after finished ◼ Important for heavy drawing processes Computer Graphics Course @Waseda University Single Double Start Start Finish Finish Drawing Drawing
  18. Front buffer & Back buffer ◼ GLFW uses two buffers

    by default ◼ Front buffer & back buffer ◼ Modern APIs (DirectX, Vulkan) can use buffers more than three (which is called “swap chain”) ◼ Target buffer is specified by glDrawBuffer (GL_BACK is default) Computer Graphics Course @Waseda University
  19. Practice ◼ Practice 2-1 ◼ Check what happens if glClearColor’s

    arguments are changed. Especially, what happens if you specify non-one value for 4th argument of glClearColor (will it change window transparency?) ◼ Practice 2-2 ◼ Check what happens if glClear is not called Computer Graphics Course @Waseda University
  20. Draw triangle ◼ Reference code ◼ https://github.com/tatsy/OpenGLCourseJP/tree/master/src/hello _triangle ◼ Updates

    ◼ Add a process to draw a triangle in paintGL Computer Graphics Course @Waseda University
  21. Draw triangle ◼ Code snippet Computer Graphics Course @Waseda University

  22. Start and finish drawing ◼ glBegin ◼ Notify OpenGL that

    geometry data will be specified ◼ Arguments: ◼ Type of primitives you draw ◼ GL_TRIANGLES: triangles ◼ GL_LINES: polylines defined by series of edges ◼ GL_LINE_STRIP: polylines defined by series of vertices ◼ GL_QUADS: quadrangles ◼ glEnd ◼ Notify OpenGL that data specification is finished ◼ Arguments: no arguments Computer Graphics Course @Waseda University
  23. Specify vertex data ◼ glVertex2f ◼ Arguments: ◼ X and

    Y coordinates of a vertex ◼ glColor3f ◼ Arguments: ◼ Red, green and blue components of vertex color (min: 0, max: 1) Computer Graphics Course @Waseda University Call above methods three times to specify a triangle!
  24. Result Computer Graphics Course @Waseda University

  25. Result Computer Graphics Course @Waseda University (-0.5, -0.5) (-0.5, 0.5)

    (0.5, -0.5)
  26. Practice ◼ Practice 2-3 ◼ Check what happens if you

    specify vertex color only once at the beginning ◼ Practice 2-4 ◼ Check what happens if you change vertex colors (test more than 3 combinations) ◼ Practice 2-5 ◼ Check what happens if you change vertex positions (test at least one case where absolute value of X/Y coordinate is more than 1) Computer Graphics Course @Waseda University
  27. Colors in OpenGL ◼ Lifetime of color specification ◼ Specified

    color is kept until next glColor3f call. → same color is used when you call it only once ◼ Color interpolation ◼ OpenGL need to know which pixel is inside triangle. ◼ Pixel locations inside triangle is calculated by interpolating 3 corners of triangle. ◼ Other data for vertices (color, normal, etc.) are also interpolated → interpolated colors are shown without doing anything Computer Graphics Course @Waseda University