Introduction to Computer Graphics

							   Introduction to
Computer Graphics


                Xiaoyu Zhang



        Cal State San Marcos
What is Computer Graphics?
   Technically, it’s about the production,
    manipulation and display of images using
    computers
   Practically, it’s about movies, games, art,
    science, training, advertising, design, …




                      Cal State San Marcos
What is Computer Graphics?
   Imaging = representing 2D images
   Modeling = representing 3D objects
   Rendering = constructing 2D images from 3D
    models
   Animation = simulating changes over time




                       Cal State San Marcos
  2D Graphics




                                              Sprites in games: Images are
Compositing in movies: images are             built by overlaying characters
created in layers, and then combined          and objects on a background
                             Cal State San Marcos
Computer Graphics in Movies




                                    • High quality and artistry
                                    • Big budgets
                                    • Complicated models and high
                                      quality rendering




                                      (adapted from MIT CS 6.837)
             Cal State San Marcos
Video Games
• Focus on interactivity
• Cost-effective solution
• Highly tuned for performance
• Drive the commodity graphics hardware technology




                                                     (adapted from MIT CS 6.837)
                              Cal State San Marcos
Computer Aided Design




  • Reduces the design cycle
  • Drives the high-end hardware market




                                                      (adapted from MIT CS 6.837)

                               Cal State San Marcos
  Medical Imaging




• Emphasize precision and correctness
• Focus on presentation and interpretation
 of data
• Construction of models from acquired data



                                   Cal State San Marcos   (adapted from MIT CS 6.837)
Scientific Visualization




• Handles vast amount of data
• Requires high-performance computation and graphics

                                                       (adapted from MIT CS 6.837)

                              Cal State San Marcos
About This Course
   Broad introduction to Computer Graphics
     Algorithms
     Software
     Hardware
   2D Graphics
     Drawing lines and curves, clipping, transformations
   3D Graphics
     Viewing, transformations, lighting, texture mapping
     3D Modeling: describing volumes and surfaces and drawing them
       effectively
     Programmable pipeline, shaders
   OpenGL
   Other interesting stuffs
     Raytracing, animation, …

                             Cal State San Marcos
Prerequisites
   Good programming skills in C (or C++)
   Basic Data Structures
       Linked lists
       Arrays


   Simple Linear Algebra
   Some Geometry and Calculus

                       Cal State San Marcos
Software Infrastructure
   OpenGL for 3D rendering
       Provides an API for drawing objects specified in 3D
       Included as part of Windows, available for Linux and other platforms

   GLUT will be the GUI toolkit
       Simple but limited
            Support mouse and keyboards.
            Only popup menu, no widgets like buttons, scroll bar … etc
       You are welcome to use other interface toolkits, for example GLUI, SDL,
        FLTK, QT etc.
       See class web page under resources

   Visual studio will be the programming environment for grading
       Available on campus machines


                                     Cal State San Marcos
References
   The OpenGL Programmer’s Guide (the
    Redbook)
         The definitive references. Version 1.1
          available online, the newest version 2
          (edition 5) can be purchased.
   Additional resources can be found on course
    webpage


                         Cal State San Marcos
Introduction
   Graphics System
   Raster Image
   Frame buffer
   Light & Color
   Graphics pipeline and hardware




                     Cal State San Marcos
Basic Graphics System




                                         Output device

  Input devices
                  Image stored in FB

                  Cal State San Marcos
Raster Images
   Frame buffer stores an image as an array
    (the raster) of picture elements (pixels)




                     Cal State San Marcos
What is a pixel?
   A pixel is not...
     a box
     a disk
     a teeny tiny little light
   A pixel is a
    point...
     it has no dimension
     it occupies no area
     it can have a coordinate


    A pixel is more than just a
    point, it is a sample

                             Cal State San Marcos
Digital Images
   Computers work with discrete pieces of information
   How do we digitize a continuous image? Sampling!
       Break the continuous space into small areas, pixels
       Use a single value for each pixel - the pixel value (intensity,
        color, …)
       No longer continuous in space or intensity
   This process is fraught with danger, as we shall see

        Continuous


          Discrete
                          Pixels: Picture Elements
                                 Cal State San Marcos
Picturing an Image as a 2D
Function
   An ideal image can be
    viewed as a function, I(x,
    y), that gives an intensity
    for any given coordinate
    (x, y). We could plot this
    function as a height field.
    This plot would lowest at
    dark points in the image
    and highest at bright
    points.


                            Cal State San Marcos
Sampling an Image
   An image is actually a
    sample of the function
    at the pixel locations.
   Pixels are stored in
    memory as arrays of
    numbers representing
    the intensity of the
    underlying function
   Insufficient sampling
    causes aliases
                         Cal State San Marcos
Pixel Grids
   Pixel Centers: Address pixels by integer coordinates (i, j)
   Pixel Center Grid: Set of lines passing through pixel centers
   Pixel Domains: Rectangular Semi-open areas surrounding
    each pixel center
                            Pi , j  (i  1 / 2, i  1 / 2)  ( j  1 / 2, j  1 / 2)

   Pixel Domain Grid: Set of lines formed by domain boundaries




        Pixel center grid                                                  Pixel domain grid
                                            Cal State San Marcos
Calligraphic and Raster
Display
   Calligraphic (Vector) Display Devices draw
    polygons and line segments directly: e.g. Plotters
       Store images as collections of geometric primitives, e.g.
        Lines, polygons, circles, …
       Called vector images for historical reasons
       Postscript (PDF) is the most famous vector image format
   Raster Display Devices display images as a
    regular grid of samples (pixels).
       Rendering requires rasterization algorithms to quickly
        convert geometric primitives into pixels.

                              Cal State San Marcos
Display Devices: Monitor
   Raster Cathode Ray
    Tubes (CRTs) are the most
    common display device
       Capable of high resolution.
       Good color fidelity.
       High contrast (100:1).
       High update rates.
   Electron beam scanned in
    regular pattern of horizontal
    scan lines.

   At each pixel in scan line,
    intensity of electron beam
    modified by the pixel value
    in the frame buffer.
                                Cal State San Marcos
Color CRT
   Color CRTs have three different colors of phosphor
    and three independent electron guns.
   Shadow Masks allow each gun to irradiate only one
    color of phosphor.




                        Cal State San Marcos
LCD
   Liquid Crystal Displays (LCDs) becoming more
    popular and reasonably priced
       Flat panels
       Flicker free
       Decreased viewing angle
   Works as follows:
       Random access to LCD cells.
       Electrical signals control the polarization of the LCD Cells
       Thus turn on or off the light passing through the panel
        using polarizing filters.
       Sub-pixel color filter masks used for RGB.

                               Cal State San Marcos
Raster Images and
Framebuffer
   Raster images are stored in the frame buffer.
   Frame buffers are composed of VRAM (video
    RAM).
   VRAM is dual-ported memory capable of
       Random access
       Simultaneous high-speed serial output: built-in serial shift
        register can output entire scan line at high rate
        synchronized to pixel clock.
   How big is the frame buffer?


                              Cal State San Marcos
Sampling Issues
   Can only store a finite number of pixels
      Resolution: Pixels per inch, or dpi (dots per inch from printers)
      Storage space goes up with square of resolution
            600dpi has 4× more pixels than 300dpi
   Can only store a finite range of intensity values
      Typically referred to as depth - number of bits per pixel
            Directly related to the number of colors available
      Also concerned with the minimum and maximum intensity –
       dynamic range
      Both film and digital cameras have highly limited dynamic
       range
   The big question is: What is enough resolution and enough
    depth?
                                     Cal State San Marcos
True-Color Frame Buffers




   Each pixel requires at least 3 bytes. One byte for each
    primary color: RGB.
   Each pixel can be one of 2^24 = 16 million colors
   Frame buffer size (1280 * 1024): 1280*1024*3 = 3.75 MB
                           Cal State San Marcos
Indexed Frame buffers




   Each pixel uses one byte
   Each byte is an index into a color map
   Color-map animations – color-map can be changed
   Each pixel may be one of 2^24 colors, but only 256 color be
    displayed at a time
   Frame buffer size: (1280 * 1024): 1280*1024 = 1.25 MB
                            Cal State San Marcos
Single Buffering Raster Displays




   Display synchronized with CRT sweep
   Update frame buffer while it’s being scanned
   Generally, updates are visible



                          Cal State San Marcos
Double Buffering




   Adds a second frame buffer
   Swaps during vertical blanking
   Updates are invisible


                        Cal State San Marcos
Elements of Image Formation
   Objects
   Viewer (camera)
   Light source(s)

   Attributes that govern how
    light interacts with the
    materials in the scene
   Note the independence of
    the objects, the viewer, and
    the light source(s)


                             Cal State San Marcos
Light & Color
   Light is electromagnetic wave in the visible spectrum
   The frequency of light determines its “color”
       Frequency, wavelength, energy all related




                               Cal State San Marcos
Three-Color Theory
   Human visual system has two types of
    sensors
       Rods: monochromatic, night vision
       Cones
         Color sensitive
         Three types of cones
         Only three values (the tristimulus
        values) are sent to the brain
   Need only match these three values
       Need only three primary colors
                             Cal State San Marcos
Color receptors
   There are three types of
    cones, referred to as S, M,
    and L.
   They are roughly equivalent
    to blue, green, and red
    sensors, respectively.
   Their peak sensitivities are
    located at approximately
    430nm, 560nm, and 610nm
    for the "average" observer



                            Cal State San Marcos
Trichromacy
   By experience, it is possible
    to match almost all colors
    using only three primary
    sources - the principle of
    trichromacy
   In practical terms, this
    means that if you show
    someone the right amount
    of each primary, they will
    perceive the right color
   This was how
    experimentalists knew there
    were 3 types of cones
                             Cal State San Marcos
The Math of Trichromacy
   Write primaries as R, G and B
       We won’t precisely define them yet
   Many colors can be represented as a mixture
    of R, G, B: M=rR + gG + bB (Additive
    matching)
   Gives a color description system - two people
    who agree on R, G, B need only supply (r,
    g, b) to describe a color

                         Cal State San Marcos
 Rendering
• Rendering is the conversion of a 3D scene into a 2D raster image:




• The scene composed of models in three space.
  Models are composed of primitives, supported by the rendering system.
• Models entered by hand or created by a program.
• The image drawn on monitor, printed on laser printer, or written to a raster in
  memory or a file.
  require us to consider device independence


                                    Cal State San Marcos
Rendering pipeline
   Rendering can be implemented in either hardware
    or software
   Hardware (Graphics Accelerator)
       Fast
       Interactive
       Lower in realism
   Software
       Slow
       Flexible
       High quality

                           Cal State San Marcos
Rendering Primitives
   Models composed of, or converted to a large number of geometric
    primitives.
   The only rendering primitives typically supported in hardware are
       Points (single pixels)
       Line Segments
       Polygons (often restricted to convex polygons).

   Modeling primitives include these, but also
       Piecewise polynomial (spline) curves
       Piecewise polynomial (spline) surfaces
       Implicit surfaces (quadrics …)
       Other...

   A software renderer may support modeling primitives directly, or may
    convert into polygonal or linear approximations for hardware rendering.


                                   Cal State San Marcos
   Graphics Pipeline
      Classically, ``model'' to ``scene'' to ``image'' rendering is
       broken into finer steps, called the graphics pipeline.
        Part of the pipeline often implemented in graphics
         hardware to get interactive speeds.




application                                                    display
 program


                               Cal State San Marcos
Vertex Processing
   Much of the work in the pipeline is in converting
    object representations from one coordinate system
    to another
       Object coordinates
       Camera (eye) coordinates
       Screen coordinates
   Every change of coordinates is equivalent to a
    matrix transformation
   Vertex processor also computes vertex colors

                            Cal State San Marcos
    Modeling transformations
   We start with 3-D models
    defined in their own model
    space (MCS)

   Modeling transformations
    orient models within a common
    coordinate frame called world
    space (WCS)

   All objects, light sources, and
    the viewer live in world space

   Transformations are
    represented as matrices
                                 Cal State San Marcos
Viewing Transformation
   Another change of
    coordinate systems
   Maps points from world
    space into eye space (VCS)
   Viewing position is
    transformed to the origin
   Viewing direction is oriented
    along some axis
   A viewing volume is defined
    for clipping


                             Cal State San Marcos
Lighting
   lighting is computed for
    each vertex to
    determine its color of
    each point in the scene.
    Lighting depends on
       Light sources
           Color, position,
            direction, shape …
       Surface properties
           Normal
           Material properties

                                  Cal State San Marcos
Projection
   The projection step
    maps all of 3-D objects
    onto the 2D/3D screen
    space (NDCS).
       Greatly simplified by the
        fact that viewing
        transformations map the
        eye to the origin and the
        viewing direction to -z axis.
       There are parallel projection
        and perspective projections


                                Cal State San Marcos
Primitive Assembly
Vertices must be collected into geometric
 objects before clipping and rasterization can
 take place
     Line segments
     Polygons
     Curves and surfaces




                       Cal State San Marcos
Clipping
   The right picture shows the
    view volume that is visible
    for a perspective projection
    window, called viewing
    frustum.
   It is determined by a near
    and far cutting planes and
    four other planes
   Anything outside of the
    frustum is not shown on the
    projected image, and
    doesn’t need to be rendered                           far
   The process of remove                          near
    invisible objects from
    rendering is called clipping
                            Cal State San Marcos
Rasterization
   Also called “scan conversion”,
    converts primitives into fragments in
    SCS.
   Fragments are “potential pixels”
     Have a location in frame bufffer
     Color and depth attributes
   Vertex attributes are interpolated over
    objects by the rasterizer.
   Further operations may be applied to
    fragments




                            Cal State San Marcos
Fragment Processing
   Fragments are processed to determine the
    color of the corresponding pixel in the frame
    buffer
   Colors can be determined by texture mapping
    or other fragment processing
   Fragments may be blocked by other
    fragments closer to the camera
       Hidden-surface removal

                         Cal State San Marcos
The Programmer’s Interface
   Programmer sees the graphics system
    through a software interface: the Application
    Programmer Interface (API)




                      Cal State San Marcos
API Contents
   Functions that specify what we need to
    form an image
       Objects
       Viewer
       Light Source(s)
       Materials
   Other information
       Input from devices such as mouse and
        keyboard
       Capabilities of system
                          Cal State San Marcos
  Programmable Graphics Pipeline

                                                          Graphics State




                             Vertex
                            Vertex                 Assembly                               Pixel
                                                                                         Pixel                    Video
Application               Processor
                          Processor              & Rasterization                       Processor
                                                                                       Processor                 Memory
              Vertices                Xformed,                           Fragments                  Final
                (3D)                     Lit                            (pre-pixels)               pixels       (Textures)
                                      Vertices                                                 (Color, Depth)
                                        (2D)



   CPU                                                              GPU                        Render-to-texture



             Note:                                               Here’s what’s cool:
                  Vertex processor does all                              Can now program vertex
                   transform and lighting                                  processor!
                  Pipe widths vary                                       Can now program pixel
                        Intra-GPU pipes wider than                        processor!
                         CPUGPU pipe
                        Thin GPUCPU pipe
                                                 Cal State San Marcos
Summary
   Read textbook chapter 1.
   Try to download GLUT and run included
    examples.
   Next time: 2D Graphics
       Rasterization and clipping
       Read textbook 7.1 – 7.10




                          Cal State San Marcos