Syllabus   Blank Homework   Quizzes  
Notes   Labs   Scores   Blank


Lecture Notes
Dr. Tong Yu, Sept. 2013
All the materials presented here are adopted from the textbook and the listed references.
    1. Introduction
    2. Line Drawing
    3. Drawing Objects
    4. More Drawing Tools
    5. Vertex Array
    6. Normal Vectors and Polygonal Models of Surfaces
    7. Viewing I -- Affine Transformations
    8. Viewing II -- Projections
    9. Color
    10. Lighting
    11. Blending, antialiasing, fog ..
    12. Display Lists, Bitmaps and Images
    Appendix. Games and SDL

    Color

    1. Color Perception

    2. The Trichromatic Theory of Vision

      G. Palmer, 1797     T. Young, 1801, Helmholtz

      • Humans perceive color in 3 components: Red, Green, Blue,

      • The retina of the eye contains several kinds of light-sensitive receptors called cones and rods.

      • Human eyes contain three kinds of cones, sensitive to red, green and blue light respectively.

      • Rods, the fourth kind of light-sensitive cell, are mostly used for vision in very light levels and peripherals vision and detection of motion; they also have the ability to distinguish different colors.
        Additive colors
          Subtractive colors

    3. The Opponent Theory of Vision

      Ewald Hering, 1878

      • Humans perceive light in 3 opposing components:
        1. light versus dark
        2. red versus green
        3. blue versus yellow

      • The theory reflects the way the cells in the retina process color into signals sent to the brain

    4. Television Colors

      • The National Television Systems Committee ( NTSC ) of US has defined an RGB system based upon three types of phosphor that emit light in the red, green, and blue regions of the spectrum. RGB components are normalized in the range [0, 1]; R = G = B = 1 => white
      • NTSC RGB color components are not used for actual television signal transmission. Instead YIQ is used, to maintain compatibility with black-and-white systems.
      • YIQ system:
      • Y -- captures the luminance ( brightness )
      • I -- captures flesh tones and near flesh tones
      • Q -- captures other colors

        Y = 0.299R + 0.587G + 0.114B
        I = 0.596R - 0.274G - 0.322B
        Q = 0.211R - 0.523G + 0.896B

      • Outside US, YUV and YDbDr are widely used Y = 0.299R + 0.587G + 0.114B
        U = -0.147R - 0.289G + 0.436B = 0.492 ( B- Y )
        V = 0.615R - 0.515G - 0.100B = 0.877 ( R - Y )

        Y = 0.299R + 0.587G + 0.114B
        Dr = -0.450R - 0.883G + 1.333B = 3.059U
        Db = -1.333R + 1.116G - 0.217B = -2.169V

    5. Computer graphics -- based on the trichromatic theory

      • Red, green, blue -- primary colors

      • For a given color with intensity C, one tries to mix intensities of red, green, blue lights so as to create a color that is visually indistinguishable from color C
          C = rR + gG + bB
        It has been experimentally verified that all colors can be expressed as a linear combination of red, green and blue in this way.

      • When colors are combined, they act as a vector space,
        i.e.
          C1 + C2 = (r1 + r2)R + (g1 + g2)G + (b1 + b2)B

      • A computer-graphics monitor emulates visible colors by lighting pixels with a combination of red, green and blue
    6. Computer Color

    7. Representation of RGB Colors

      • 24-bit color → 16,777,216 colors ( true color )
        32-bit color: 8-bits for each of R, G, B, the remaining 8 bits may be used for an alpha ( α ) value

      • RGBA mode : Red, Green, Blue, Alpha

      • the memory for all the pixels is called the memory buffer

      • Color cube

          The Color Cube in Black and White

          glColor3f( 1.0, 0.0, 0.0 ); //full red, no green, no blue

          glBegin( GL_POINT );
              glVertex3fv( point_array );
          glEnd();

    8. HSL System

      • HSL system specifies color in hue, saturation, and luminance

      • hue ( chromaticity ) of a light is its dominant color

      • lightness (how white the light is)

      • saturation ( chroma or colorfulness ) of a color measures how much white content is in the color (i.e. it describes the purity of a color )

      • Typically, in the HSL system, hue is measured between 0 and 360o
      • pure red -- H = 00
      • pure green -- H = 1200
      • pure blue -- H = 2400

        So, if H = 600, we have a color of a mixture of red and green ( i.e. yellow )

      • If R > G > B, and are in [0, 1]

        H = G - B
        R - B
        x 60

      • Lightness L is calcuated by

        L = Max + Min
        2
        where Max = max { R, G, B },       Min = min { R, G, B }

      • Saturation S

        S = Max - Min
        Max + Min
             if Max + Min ≤ 1
        S =     Max - Min    
        2 - (Max + Min)
             if Max + Min ≥ 1

      • Advantages: more intuitive in defining colors

      • Disadvantages: does not physically map to displaying colors of a monitor
    9. RGBA vs. Color-index Mode

    10. RGBA Display Mode

      In RGBA mode, the hardware sets aside a certain number of bitplanes each of the R, G, B, and A components

        16 bit-planes, 4 bit-planes for each color

      Example: if a system has 8-bits for R component,

        Integers stored: 0, 1, 2, ..., 255
        0, 1, ..., 255 in the bitplanes would correspond to

          0.0 / 255 = 0.0, 1.0/ 255, 2.0/255, ..., 255.0/255 = 1.0

      Dithering

      • a technique to combine some colors to create the effect of other colors

      • Example: dithering black and white to create gray
        1. 50% gray
        2. 19% gray
        3. 69% gray

        glEnable ( GL_DITHER );
        glDisable( GL_DITHER );

      Use glColor*() to specify a color.

    11. Color-Index Display Mode

      • Color lookup table ( CLUT or LUT ) or color map is used to represent color.
          Index       Red       Green       Blue  
          0      
          1      
          2      
          3      
          .      
          .      
          255      

      • Each pixel's color is specified by a color index, which references the red, green blue values in CLUT; the values are used to paint the pixel.

      • Number of simultaneously available colors is limited by the size of the color map, which is always a power of 2.
        e.g. 256 ( 28 ) or 4096 ( 212 )

      • Prefer to use color-index mode when:

        1. porting an existing application that makes significant use of color-index mode,

        2. has only a small number of bitplanes.
          e.g. 8 bitplanes, 3 bits for each of R, G, 2 bits for B, can only give coarse shade of colors

        3. can be useful for various tricks, such as color-map animation and drawing in layers

      • In general, use RGBA mode wherever possible.

      • Use glIndex*() to specify a color. ( e.g. glIndexd ( 25 ); Note: OpenGL does not have any function to load values into CLUT; OS does that automatically. )
    12. Specifying a color and a shading model

      Shading is the process of altering a color based on its
      angle to lights and its distance from lights to create a photorealistic
      effect. It is performed during the rendering process.


      No shading, uses edge lines
      to separate faces

      No shading, no edge lines, difficult
      to tell one face from another
       
      With shading, colors altered based
      on the angle of face to light source

      Specifying a color in RGBA mode:

      glColor3*()
      glColor4*()
      The suffix 3 and 4 are to indicate if you supply an alpha value in addition to the red, green, blue values. If no alpha is supplied, it's automatically defaulted to 1.0

      Gouraud shading


      Flat shading
       
      Smooth shading
    13. Also called intensity interpolation shading or color interpolation shading.
    14. Requires the colors of all vertices of a polygon be known in advance.
    15. Computes a normal N for each vertex of the polygon.
    16. From N computes an intensity I for each vertex of the polygon.
    17. From bi-linear interpolation computes an intensity Ii for each pixel.
    18. Paints pixel to shade corresponding to Ii.

      Ia = I1 - ( I1 - I2 ) * ( y1 - ys ) / ( y1 - y2 )
      Ib = I1 - ( I1 - I3 ) * ( y1 - ys ) / ( y1 - y3 )
      Ip = Ia - ( Ib - Ia ) * ( xb - xp ) / ( xb - xa )
    19. Phong Shading

    20. Also known as 'normal-vector interpolation-shading'.
    21. Interpolates the surface normal vector N, rather than the intensity.
    22. Not supported by OpenGL.
    23. A line or a filled polygon primitive can be drawn with a single color (flat shading) or with many different colors (smooth shading, also called Gouraud shading).

      /*
       * smooth.cpp
       * This program demonstrates smooth shading.
       * A smooth shaded polygon is drawn in a 2-D projection.
       */
      #include <GL/glut.h>
      #include <stdlib.h>
      
      void init(void) 
      {
         glClearColor (1.0, 1.0, 1.0, 0.0);
         glShadeModel (GL_SMOOTH);
      }
      
      void triangle(void)
      {
         glBegin (GL_TRIANGLES);
         glColor3f (1.0, 0.0, 0.0);
         glVertex2f (5.0, 5.0);
         glColor3f (0.0, 1.0, 0.0);
         glVertex2f (25.0, 5.0);
         glColor3f (0.0, 0.0, 1.0);
         glVertex2f (5.0, 25.0);
         glEnd();
      }
      
      void display(void)
      {
         glClear (GL_COLOR_BUFFER_BIT);
         triangle ();
         glFlush ();
      }
      
      void reshape (int w, int h)
      {
         glViewport (0, 0, (GLsizei) w, (GLsizei) h);
        glMatrixMode (GL_PROJECTION);
         glLoadIdentity ();
         if (w <= h)
            gluOrtho2D (0.0, 30.0, 0.0, 30.0 * (GLfloat) h/(GLfloat) w);
         else
            gluOrtho2D (0.0, 30.0 * (GLfloat) w/(GLfloat) h, 0.0, 30.0);
         glMatrixMode(GL_MODELVIEW);
      }
      int main(int argc, char** argv)
      {
         glutInit(&argc, argv);
         glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
         glutInitWindowSize (500, 500); 
         glutInitWindowPosition (100, 100);
         glutCreateWindow (argv[0]);
         init ();
         glutDisplayFunc(display); 
         glutReshapeFunc(reshape);
         glutMainLoop();
         return 0;
      }