Computer Graphics

Comp Sci 3GC3

Winter 2010
Overview
 CG is about making pretty computer
generated pictures
 Many application areas
 Art, Entertainment, and Publishing
 Movie Pictures, Animation, Special Effects
 Computer Games
 Computer-aided design
 Scientific Analysis and Visualization
Computer Vision

 Computer vision deals with interpreting

images with a computer
 Image analysis (synonym)
 Image understanding
 Image interpretation.
 Extracts features from images, such as
color, shapes, texture, etc.

3
Image Processing
 Manipulating images to:
 Improve quality
 Detect lines/curves
 Detect corners
 Sharpen/blur
 Segment
 …
 Often used to facilitate computer vision
Computer Imaging
 Computer imaging deals with storing,
manipulating, and transforming images with a
computer.
 Images need first to have been input by some
means, such as a scanner, a video camera, a
digital camera, etc.
 More generally, computer imaging deals with all
aspects of processing images with a computer,
and encompasses image synthesis and analysis.
 This class deals with computer graphics – image
synthesis.

5
Course Goals Summary
 Emphasis on developing applications
 visual feedback: the great motivator
 incremental approach
 some user interface development
 learn OpenGL API
Course Goals
 Learn and utilize general principles in
computer graphics
 2D and 3D graphics concepts
 interactive graphical techniques
 how OpenGL provides the graphics
programming tools that implement these
principles
 learn how some techniques are
implemented as well as the algorithms
behind the techniques
Course Information
 Main Text:
Computer Graphics with OpenGL
Second Edition, Hearn Baker, Prentice Hall,
2004

 Supplemental Texts:
 Red Book
Course Information
 Grading
 Project(s) 50%
 Mid term 15%
 Final Exam: 35%
Development Environment
 OpenGL API
 C++
Output Primitives
 Make up computer generated images
 polylines
 connected sequence of straight lines
 vertices and line (edge) between adjacent vertices
( x0 , y0 ), ( x1 , y1 ), ( x2 , y2 ),...( xn , yn )
 pictures composed of polylines are called line
drawings, wireframe
 polygon: polyline with the first and last
points connected by a edge
 simple polygon: polygon where no two
edges cross
Output Primitives
 polylines
 simple polygon if no two edges cross
 can appear smooth if small line segments are
used
Output Primitives
 Polyline attributes:
 color
 edge thickness

 edge pattern

 blending one edge into another edge

 butt-end, rounded ends, mitered joint, trimmed
mitered joint
 only needed for thick lines
Output Primitives
 Text
 characters are bitmaps (images) that are
painted on the display
 characters are polylines/polygons
 Attributes:
 font: character shapes
 color
 size
 spacing
 orientation
Output Primitives
 Filled Region
 shape filled with a color or pattern
 boundary is a polygon
 Attributes
 pattern
 color
 attributes of the enclosing polygon
Output Primitives
 Raster Image
 composed of small (usually square) cells called
pixels
 each cell has its own color (independent of other
pixels)
 image appears smooth
 small cell size
 eye blends very well
 stored as an array of numbers
 number of rows and columns (spatial resolution)
Raster Images
 Common in Computer Graphics
 incorporate images in scenes
 result of generated (rendered) scene
 Bi-level image
 pixels can have one of two values (0 and
1) for black and white
 requires one bit to represent the intensity
of each pixel
 0: no intensity (black)
 1: full intensity (white)
Gray-scale Images
 pixels can have more than two values
 classified by the number of bits needed to
represent a pixel intensity level, pixel
depth or number of quantization levels
 n  bits have 2n possible gray levels
 2 bits/pixel = 4 gray levels
 4 bits/pixel = 16 gray levels
 8 bits/pixel = 256 gray levels
 8 bit gray-scale images are common
Gray-scale Images
 Quantization
 number of bits representing gray-scale
values
 more bits
 more gray-scale values
 higher quality
 larger image size
Color Images
 Pixel value represents a color, RGB and
Color Index (color lookup table)
 RGB: each pixel is an ordered triple
representing the intensity (amount) of red,
green, and blue that are summed together
(R,G,B)
 color depth of a pixel is the total number of
bits representing red, green, and blue
 true-color images have a depth of 24 bits
 8-bits per color
Raster Displays
 Graphics systems produce raster images
primarily because they will be displayed
with a raster display
 common display device on computers
 display surface composed of pixels
 480 rows, each containing 640 pixels for a
total of 307,000 pixels
 1024 rows, each containing 1280 pixels for
a total of 1,310,720 pixels
Raster Displays
 More pixels representing a given size screen
 higher resolution
 larger amount of memory representing a scene
 Built in coordinate system
 relates a given pixel to a physical location on the
screen

sx Typical for graphics displays

for x increases from left to
(sx1, sy1) right and y increases from
top to bottom
sy
Frame Buffer
 Memory containing pixel values
 Frame buffer commonly part of the
graphics card
 Frame buffer must be connected to the
raster display device (monitor)
 Pixel values are related to displayed
intensity
Frame buffer
System Frame Scan
CPU Memory Buffer Converter
monitor

System Bus

I/O devices

 Graphics program executes in CPU, filling the

frame buffer with values to display
 Frame
Buffers
 A frame buffer may be thought of as computer
memory organized as a two-dimensional array with
each (x,y) addressable location corresponding to one
pixel.
 Bit Planes or Bit Depth is the number of bits
corresponding to each pixel.
 A typical frame buffer resolution might be
 640 x 480 x 8
 1280 x 1024 x 8
 1280 x 1024 x 24
The RGB Color Model
 There are separate frame buffers for
each of our basic colors (Red, Green,
and Blue).
 Requires lots of memory for the frame
buffer
1-Bit Memory, Monochrome
Display (Bitmap Display)

1 bit
2 levels

Electron
Gun
 3-Bit Color
3
Display
red

green
blue

COLOR: black red green blue yellow cyan magenta white

R 0 1 0 0 1 0 1 1
G 0 0 1 0 1 1 0 1
B 0 0 0 1 0 1 1 1
 True Color Display
24 bitplanes, 8 bits
8 per color gun.
 242 = 16,777,216
8

8 Red

Green
Blue
 Deeper Frame Buffers
 Some frame buffers have 96 or more bits per pixel. What are
they all for? We start with 24 bits for RGB.
 Alpha channel: an extra 8 bits per pixel, to represent
“transparency.” Used for digital compositing. That’s 32 bits.
 A Z-buffer, used to hold a “depth” value for each pixel. Used for
hidden surface 3-D drawing. 16 bits/pixel of “z” brings the total
to 48 bits.
 Double buffering:
 For clean-looking flicker-free real time animation.
 Two full frame buffers (including alpha and z).
 Only one at a time is visible—you can toggle instantly.
 Draw into the “back buffer” (invisible), then swap.
 Can be faked with off-screen bitmaps (slower.)
 2 x 48 = 96.
 Color Index
 Another method of relating pixel values with
color values
 Pixel value is an index into a color lookup
table (LUT)
 Allows for more colors to be displayed while
keeping the frame buffer size from getting
too big.
 Color Map Look-Up
Tables

y RED
max
GREEN
255
BLUE
1
1
0
y 0
0 67 Pixel displayed
0
1 1001 1010 0001
0
67 100110100001 at x', y'
R G B
Pixel in
bit map 0
0 at x', y'
0 x x
max

Frame buffer Look-up table Display

Figure similar to 1.40 in hill

 Color Map Look-Up
 Tables
If color depth = b bits,
 and each LUT entry is w bits wide
 Then the system can display 2w colors,
any 2b at one time
Scan Converter
 Changes digital pixel values to an
analog voltage (intensity) values
 Converts memory address into a
physical location on the display screen
Output Devices
• Stereoscopic viewing glasses: the user wears them to perceive
stereoscopic view of 3D scenes displayed on screen
– Used in screen-based Virtual Reality (VR)
– Has high resolution
– Limited head-movement
• Head-mounted display (HMD): two small TV screens are
embedded in a rack and placed in front of the two eyes.
– It allows full-freedom head movement,
and gives the feel of immersion
– Widely used in Virtual Reality (VR)
– A tracking system is used to report
the position of HMD in 3D space.
• Plotter
• Printer
 Output Devices
 Wide Screen
Input Devices
 Keyboard
 Mouse
 Trackball: a 2D input device, usually
used on a mouse or a lap-top computer.
 Space ball: hand held, non-movable. It
uses a strain gauge to detect pull, push,
and twist applied to the ball, and
translate them into 3D locations. Used
for navigation in virtual environments,
CAD, etc.
 Head Mounted Display: Although it is
primarily a display device, it can also
track position and orientation
 Joystick: similar to the space ball. Can
be movable and non-movable.
Input Devices
 Data glove: a glove with sensors. Used to
control a virtual hand for grasping,
dropping, and moving an object in a
virtual environment.
 Image scanner: input still picture, photo,
or slides as images into computer.
 Touch panel: highly transparent and
embedded over a display surface.
 Digital camera: directly stores photo
shots as images on a diskette.
 Digital video recorder: input a video clip
in digital form; often used for tele-
conferencing.
 Laser range scanner: input discrete and
scattered points on a 3D surface model
from which a digital one can be built.
Input Devices
 Motion Capture: input full-
body, facial, hand movements
OpenGL
 What is OpenGL?
 Industry standard
 stable
 reliable and portable
 evolving
 scalable
 easy to use
 well-documented API
OpenGL
 Industry standard
 An independent consortium, the OpenGL
Architecture Review Board, guides the OpenGL
specification. With broad industry support,
OpenGL is the only truly open, vendor-neutral,
multi-platform graphics standard
 Currently the board includes representatives from
3Dfx, 3Dlabs, ATI, Compaq, Evans & Sutherland,
Hewlett-Packard, IBM, Intel, NVIDIA, Microsoft,
SGI, Sun.
OpenGL
 Stable
 OpenGL implementations have been
available for many years on a wide variety
of platforms. Additions to the specification
are well controlled, evaluated, and tested
prior to new version release. Backward
compatibility requirements ensure that
existing applications do not become
obsolete.
OpenGL
 Reliable and Portable
 All OpenGL applications produce consistent
visual display results on any OpenGL API-
compliant hardware, regardless of
operating system or windowing system.
OpenGL
 Evolving
 Because of its thorough and forward-
looking design, OpenGL allows new
hardware innovations to be accessible
through the API via the OpenGL extension
mechanism. In this way, innovations
appear in the API in a timely fashion,
letting application developers and
hardware vendors incorporate new
features into their normal product release
cycles.
OpenGL
 Scalable
 OpenGL API-based applications can run on
systems ranging from consumer electronics
to PCs, workstations, and supercomputers.
As a result, applications can scale to any
class of machine that the developer
chooses to target.
OpenGL
 Easy to use
 OpenGL is well structured with an intuitive
design and logical commands.
 OpenGL routines typically result in fewer
lines of code than similar programs
generated with other graphics libraries or
packages
 OpenGL drivers encapsulate information
about the underlying hardware, freeing the
application developer from having to
design for specific hardware features
OpenGL
 Well-documented
 Numerous books have been published
about OpenGL
 a great deal of sample code is readily
available
 information about OpenGL inexpensive and
easy to obtain
OpenGL
 OpenGL does not contain any window
system operations
 opening a window
 handling window events
 communicating with the user
 communicating with the window manager
 ...
OpenGL
 Defining OpenGL as only a rendering
system makes OpenGL window system
independent
 Learning native window system
interfaces can be overwhelming
 Windows, X, Motif, …
 Main OpenGL Web Site
 Maximal Portability

 Display device independent

 Window system independent
 Operating system independent
Without a standard API (such as OpenGL) - impossible to port

(100, 50) Line(100,50,150,80) - device/lib 1

(150, 100) Moveto(100,50) - device/lib 2

Lineto(150,100)
 Window-based programming

 Most of the modern graphics systems are

window-based
Window based environment
Non-window based environment
 Window system independent

 OpenGL is window system independent

 No window management functions (create
windows, resize windows, event handling,
etc)
 This is to ensure the application’s portability
 Creates some headache though – just a pure
OpenGL program won’t work anywhere.
 More APIs are needed

 X window system: GLX

 Apple Macintosh: AGL
 Microsoft Windows: WGL
These libraries provide full-blown functionality to create
Graphics User Interface (GUI) such as sliders, buttons,
, menus,… etc.

Problem – you need to learn and implement them all to

write a true portable software
 Use GLUT (OpenGL Utility Toolkit)

 For fast prototyping, we can use GLUT to interface

with different window systems

 GLUT is a window independent API – programs

written using OpenGL and GLUT can be ported to X
windows, MS windows, and Macintosh with no effort

 GLUT does not contain all the bells and whistles

though (no sliders, no dialog boxes, no menu bar,
etc)
 GLUT Basics

Application Structure
 Configure and open window (GLUT)
 Initialize OpenGL state (OpenGL)
 Register input callback functions (GLUT)
 Render

 Resize

 Input: keyboard, mouse, etc

 Enter event processing loop (GLUT)

Sample Program
#include <GL/glut.h>
#include <GL/gl.h>

Void main(int argc, char** argv)

{
int mode = GLUT_RGB|GLUT_SINGLE;
glutInitDisplayMode(mode);
glutInitWindowSize(500,500);
glutCreateWindow(argv[0]);
init();
glutDisplayFunc(display);
glutReshapeFunc(resize);
glutKeyboardFunc(key);
glutMainLoop();
}
 Sample Program
#include <GL/glut.h>
#include <GL/gl.h>

Void main(int argc, char** argv)

{
int mode = GLUT_RGB|GLUT_SINGLE;
glutInitDisplayMode(mode); Specify the display
glutInitWindowSize(500,500); Mode – RGB or color
glutCreateWindow(“Simple”); Index, single or double
init(); Buffer
glutDisplayFunc(display);
glutReshapeFunc(resize);
glutKeyboardFunc(key);
glutMainLoop();
}
 Sample Program
#include <GL/glut.h>
#include <GL/gl.h>

Void main(int argc, char** argv)

{
int mode = GLUT_RGB|GLUT_SINGLE;
glutInitDisplayMode(mode);
glutInitWindowSize(500,500); Create a window
glutCreateWindow(“Simple”); Named “simple”
init(); with resolution
500 x 500
glutDisplayFunc(display);
glutReshapeFunc(resize);
glutKeyboardFunc(key);
glutMainLoop();
}
 Sample Program
#include <GL/glut.h>
#include <GL/gl.h>

Void main(int argc, char** argv)

{
int mode = GLUT_RGB|GLUT_SINGLE;
glutInitDisplayMode(mode);
glutInitWindowSize(500,500);
glutCreateWindow(“Simple”);
init(); Your OpenGL initialization
glutDisplayFunc(display); code (Optional)
glutReshapeFunc(resize);
glutKeyboardFunc(key);
glutMainLoop();
}
 OpenGL Initialization

 Set up whatever you are going to use

For example:

void init(void)
{
glClearColor(0,0,0,1);
glEnable(GL_LIGHT0); Don’t worry
glEnable(GL_LIGHTING); what they are
… for now…
}
 Sample Program
#include <GL/glut.h>
#include <GL/gl.h>

Void main(int argc, char** argv)

{
int mode = GLUT_RGB|GLUT_SINGLE;
glutInitDisplayMode(mode);
glutInitWindowSize(500,500);
glutCreateWindow(“Simple”);
init();
glutDisplayFunc(display); Register your call back
glutReshapeFunc(resize); functions
glutKeyboardFunc(key);
glutMainLoop();
}
 Callback functions?
 Most of window-based programs are
event-driven
– which means do nothing until an event
happens, and then do the specific thing

 Events – key press, mouse button press and

release, window resize, etc.
 Event Queue
Keyboard
Event queue ….

MainLoop Mouse

Window

Mouse_callback() Keypress_callback() window_callback()

{ { {
…. …. ….
{ { {
 glutDisplayFunc(void (*func)(void) )

Void main(int argc, char** argv)

{
…
glutDisplayFunc(display);
glutReshapeFunc(resize);
glutKeyboardFunc(key);
… void display() – a function
}
Provided by you. It will be
Called when pixels in the
window need to be refreshed.
 glutReshapeFunc(void (*func)(void) )

Void main(int argc, char** argv)

{
…
glutDisplayFunc(display);
glutReshapeFunc(resize);
glutKeyboardFunc(key);
…
}
void resize () – a function
provided by you. It will be
Called when the window
changes size.
 And many more …

 glutKeyboardFunc() – register the callback that

will be called when a key is pressed
 glutMouseFunc() – register the callback that will
be called when a mouse button is pressed
 glutMotionFunc() – register the callback that will
be called when the mouse is in motion while a buton
is pressed
 glutIdleFunc() – register the callback that will be
called when nothing is going on (no event)
 glutMainLoop()

Void main(int argc, char** argv)

{

…
glutMainLoop(); The program goes into a infinite loop
waiting for events
}
 Put it all together
#include <GL/glut.h>
#include <GL/gl.h>

Void main(int argc, char** argv)

{
int mode = GLUT_RGB|GLUT_SINGLE;
glutInitDisplayMode(mode);
glutInitWindowSize(500,500);
glutCreateWindow(“Simple”);
init();
glutDisplayFunc(display);
glutReshapeFunc(resize);
glutKeyboardFunc(key);
glutMainLoop();
}