Graphics Systems

• This is from Angel: Interactive Computer Graphics
• A graphics system normally consists of a number of components.
  • Hardware
    • Input devices.
    • Output Devices
    • GPU
    • CPU
  • Software
    • Some form of library to interact with the hardware (we normally don't write our code at the raw hardware level)
    • Some form of library to perform common graphics functions, but we will start without much of one in the beginning.
• These generally fit as follows
  • 
  • Signals from the input device are delivered to the CPU (usb, ...)
  • The OS sends a message to the program that something has happened.
  • The program responds by sending commands to the GPU through the Graphics Library.
• The CRT or Cathode Ray Tube
  • There was a screen painted with phosphor
    • When the phosphor was "excited" or charged it would glow for a while.
    • and then it would fade.
  • There was an electron gun.
    • This would shoot electrons at the phosphor screen to make it glow.
  • The electron gun had deflectors which aimed it at different portions of the screen.
  • 
  • This would occur in a series of scan lines
    • 
    • The entire process needed to repeat before the phosphor faded.
  • The data, that told the gun to fire or not was stored in a special memory called the Frame Buffer.
    • Each location represents a dot on the screen
    • Or a picture element, or PIXEL
    • The simplest was a 1 bit per pixel.
    • To display a dot on the screen, place a 1 in the proper location in the frame buffer.
    • The frame buffer corresponds to the size of the screen width and height.
  • As time passed, the gun could "shoot" at different intensities.
    • This would be the equivalent to gray scale.
    • The frame buffer was modified to hold values between 0 and some maximum.
    • Typically the max would be 255 (why not 256?)
    • 0 would be black (no electrons, no glow)
    • Max would be white - or full glow.
    • A 640 x 480 - 256 gray scale frame buffer would need 640x480x8 bits (about 2.5 megabits) or 300 kilobytes.
    • "In 1974 Evans & Sutherland released the first commercial frame buffer, costing about $15,000. It was capable of producing resolutions of up to 512 by 512 pixels in 8-bit gray scale, and became a boon for graphics researchers who did not have the resources to build their own frame buffer.", Wikipedia.
  • in early systems, the cost of a frame buffer was a major expense.
  • Eventually three different phosphor dots were placed at each location on the screen
    • red, green, blue dots.
    • And a different gun for each.
    • This allowed for three color displays
    • Usually there were 8 bits per color
    • 24 or 32 bits per pixel.
  • Resolution increases the amount of memory required.
  • The next problem is related to drawing to the FB while it is used to draw to the screen.
    • Step 1, draw a vertical line (shown in red)
    • 
    • Step 2, erase the frame buffer
    • Step 3, draw a diagonal line (shown in green)
    • 
    • You would expect two different images, but a third is possible
    • 
  • to solve this problem, a second frame buffer was introduced.
    • One buffer is used to display the picture - ie feed the gun
    • A second is used to draw the picture.
    • The graphics program, via the API then tells the display to swap the frame buffers.
    • This makes for much smoother animation
    • And no "bad" displays
    • But doubles the memory requirement.
    • This is known as "double buffering"
  • Finally, other memory was added for advanced techniques
    • Alpha buffer for transparency
    • Depth buffer for hidden surface removal.
• This is still the basis for how displays work today.
  • Gone are the CRT's
  • But LED's, LCD's and other devices for the most part rely on the same basic frame buffer technology.
  • 
  • There are additional frames for moving parts (like the mouse cursor)
  • And many advanced techniques.
• Most graphics are specified as vectors
  • Lines are specified, not in terms of pixels but in terms of an arbitrary coordinate system.
  • Think two points for a line.
  • More advanced shapes (polygons) are constructed from lines.
  • The Graphics System (GPU or Library) is responsible for Rasterization or scan conversion from the infinite space to the finite space of the frame buffer.
  • We will eventually study some of the algorithms used for scan conversion.
• We have two basic ways to draw things.
  • With vector graphics
    • We specify points for graphics primitives such as lines, circles, polygons

      <svg    xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="3.0in" height="3.0in"
              viewBox="38 38 2052 1816">
      <g style="stroke-width:.025in; fill:none">
      <ellipse transform="translate(283,283) rotate(-0.00000000)" rx="236" ry="236"
              style="fill:#ffff00;stroke:#ffff00;stroke-width:8;"/>
      <polyline points="755,850 1417,236 2078,850" style="stroke:#803000;
              stroke-width:8; stroke-linejoin:miter; stroke-linecap:butt; "/>
      <rect x="755" y="850" width="1322" height="992" rx="0" 
               style="stroke:#ff0000;stroke-width:8;
               stroke-linejoin:miter; stroke-linecap:butt;
      <polyline points="1653,472 1653,283 1889,283 1889,661"
               style="stroke:#000000;stroke-width:8;
               stroke-linejoin:miter; stroke-linecap:butt; "/>
      <text xml:space="preserve" x="944" y="1181" fill="#000000" 
                 font-family="Times" font-style="normal" font-weight="normal"
                 font-size="215" text-anchor="start">My</text>
      <text xml:space="preserve" x="944" y="1527" fill="#000000"  
                 font-family="Times" font-style="normal" font-weight="normal" 
                 font-size="215" text-anchor="start">House</text>
      </g>
      </svg>
      	     

    • This is written in SVG: Salable Vector Graphics.
    • 
    • Vector graphics can be scaled and will "look" better when enlarged.
    • Most vector graphics files are smaller than raster graphics files.
    • Modification is quite easy, as long as you know the language.
    • Most of our work will be with vector graphics.
  • With raster graphics
    • 
    • This is stored in png format.
    • Converting this to a very primitive format (PPM ascii) yields this file
    • Complex images in a raster format can be quicker to display.
    • Some image rendering techniques occur in rasterized images or during the rasterization process.
      • Ray tracing is a raster method
      • Some hidden surface removal methods (z-buffering)