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

SER332 Lecture 02

SER332 Lecture 02

Introduction to Graphics and Game Development
Concepts
(201804)

Javier Gonzalez-Sanchez

January 11, 2018
Tweet

More Decks by Javier Gonzalez-Sanchez

Other Decks in Programming

Transcript

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

    View full-size slide

  2. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 2
    jgs
    Frame Buffer
    § Frame Buffer: memory used to store the image
    § Images are 2-dimensional arrays
    § Color is typically encoded as red-green-blue triple (RGB): 8 bit red, 8 bit
    green, 8 bit blue.

    View full-size slide

  3. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 3
    jgs
    Frame Buffer
    Resolution
    § Image: dimensions of the array
    § Monitor: number of points that can be displayed without overlap,
    e.g. 1600 x 1200
    Display
    § Video Controller copies values: frame buffer to monitor

    View full-size slide

  4. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 4
    jgs
    bits per pixel
    Depth
    § number of bits per pixel in the (frame) buffer
    § typical: 3 * 8 = 24 bits for the color = true-color system
    § more bits for High Dynamic Range (HDR) displays
    § more bits for general purpose calculations:
    alpha (8bit), stencil(8bit), z-buffer(8 bits)

    View full-size slide

  5. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 5
    jgs
    Architecture
    Monitor
    Video
    Controller

    View full-size slide

  6. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 6
    jgs
    Key ideas

    View full-size slide

  7. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 7
    jgs
    Define
    Rendering:
    § The process of generating an image from a 2D or 3D model (or models in
    what collectively could be called a scene file), by means of computer
    programs.
    Rasterisation:
    § The task of taking an image described in a vector graphics format
    (shapes) and converting it into a raster image (pixels or dots)

    View full-size slide

  8. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 8
    jgs
    CRT Terms
    § Refresh Rate
    frequency at which an image is redrawn
    60 Hz (CRT) / better 75 – 120 Hz
    § Raster scan
    § Horizontal Retrace before new scan line
    § Vertical Retrace before new frame

    View full-size slide

  9. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 9
    jgs
    CRT Terms
    Scan Line
    Pixel
    § picture element
    Aspect Ratio
    § 4:3 most monitors
    § 16:9 HDTV
    § 16:10 some monitors (show 2 pages of text side by side)

    View full-size slide

  10. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 10
    jgs
    Double Buffering
    while (not finished){
    render frame t+1 in the back buffer
    display image t in the front buffer
    switch front and back buffer
    increase frame counter t
    }
    § Rendering is actively done by the software
    § Display is done by the monitor

    View full-size slide

  11. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 11
    jgs
    Test Yourself
    How many bits (total) for the frame buffer?
    § Double buffering
    § 8bit for RGBA
    § 8bit stencil
    § 8bit z-buffer

    View full-size slide

  12. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 12
    jgs
    Test Yourself
    How many bits (total) for the frame buffer?
    § Double buffering
    § 8bit for RGBA
    § 8bit stencil
    § 8bit z-buffer
    Answer:
    ( (8 + 8 + 8) * 2 + 8 + 8 + 8) * 1600 * 1200

    View full-size slide

  13. Javier Gonzalez-Sanchez | SER332 | Spring 2018 | 13
    jgs
    Homework
    Review Math, Geometry, and Programming
    Start planning:
    you are going to create a 3D shape connecting 50 points using lines.
    What object are you going to create?
    a car, a house, a robot, an spaceship, a ...

    View full-size slide

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