$30 off During Our Annual Pro Sale. View Details »

13. Object selection

Tatsuya Yatagawa
June 04, 2021

13. Object selection

Tatsuya Yatagawa

June 04, 2021


  1. 13. Object selection
    Tatsuya Yatagawa

    View Slide

  2. Object selection in OpenGL

    Using selection buffer

    This is available in legacy OpenGL (without shader), but it is
    rather complicated and unintuitive.

    Write labels to off-screen buffer

    If shader program is available, it is more intuitive.

    Draw a label (i.e., an index to identify the object) on screen.

    It’s easy! You can do it just by not calling “glfwSwapBuffers.”

    If target buffer is off-screen buffer, it does not affect visible
    Computer Graphics Course @Waseda University 2

    View Slide

  3. Workflow to object selection

    1. Detect mouse click (by mouse event callback).
    2. Write object index as pixel color (to off-screen buffer).
    3. Pick up pixel values using glReadPixels.
    4. Check pixel value and identify selected object.
    Computer Graphics Course @Waseda University 3

    View Slide

  4. Write selection label as pixel color

    Pass selection label as uniform variable
    Computer Graphics Course @Waseda University
    Set “selectID” as positive index if in selection mode. Otherwise set -1.

    View Slide

  5. Process in shader programs

    Vertex shader

    Nothing is changed. Perform coordinate transformation.

    Fragment shader
    Computer Graphics Course @Waseda University
    Transform “selectID” to floating point number in
    [0, 1] when ID is positive.
    Note: float outputs are automatically converted to UINT8 by multiplying 255.

    View Slide

  6. Pick up pixel values



    1st: X coordinate of upper left pixel of buffer area to be read.

    2nd: Y coordinate of upper left pixel of buffer area to be read.

    3rd: Width of buffer area to be read.

    4th: Height of buffer area to be read.

    5th: Color format of buffer data (typically GL_RGBA).

    6th: Scalar type of buffer data (typically GL_UNSIGNED_BYTE).

    7th: Pointer to data array in which the read data is stored.
    Computer Graphics Course @Waseda University 6

    View Slide

  7. Pick up pixel value(s)

    Straightforward approach

    Read entire buffer, and pick up its value at clicked pixel.

    Data transfer between RAM and GPU memory is time consuming.

    Reading entire buffer is not efficient.
    Computer Graphics Course @Waseda University
    Be careful that Y coordinate is inversed!

    View Slide

  8. Pick up pixel value(s)

    More efficient approach

    Only read value at clicked pixel!
    Computer Graphics Course @Waseda University 8

    View Slide

  9. Whole code for object selection
    Computer Graphics Course @Waseda University 9

    View Slide

  10. Result

    Object index is printed when each cube is clicked
    Computer Graphics Course @Waseda University 10

    View Slide

  11. Exercise 13-1

    Select cube faces rather than whole cube. Then,
    highlight only the selected face. When non-cube region
    is clicked, highlight entire cube.

    You should draw only a single cube (do not have to draw
    multiple cubes as in the example).
    Computer Graphics Course @Waseda University 11

    View Slide