CSE 411

Computer Graphics

Lecture #1 Introduction, overview and OpenGL

Prepared & Presented by Asst. Prof. Dr. Samsun M. BAŞARICI

Objectives
 Acknowledge the importance of graphics
 Know the application areas of computer
graphics
 Understand the principles of input and output
devices for computer graphics
 Install and use OpenGL

Introduction, overview and OpenGL 2

Computer Graphics Applications
 Graphs and charts
 Computer Aided Design (CAD)
 Virtual Reality Environments
 Data visualizations
 Education & Training
 Computer Art
 Entertainment
 Image processing
 Graphical User Interfaces

Introduction, overview and OpenGL 3

Graphs and charts

Introduction, overview and OpenGL 4

Graphs and charts (cont.)

Introduction, overview and OpenGL 5

Graphs and charts (cont.)

Introduction, overview and OpenGL 6

Graphs and charts (cont.)

Introduction, overview and OpenGL 7

Computer Aided Design (CAD) or
Computer Aided Drafting & Desing
(CADD)

From www.autodesk.com
Introduction, overview and OpenGL 8
Computer Aided Design (CAD)

From www.amabilis.com
Introduction, overview and OpenGL 9
Computer Aided Design (CAD)

From www.alibre.com

Introduction, overview and OpenGL 10

Computer Aided Design (CAD)
(cont.)

From www.intellicad.org Introduction, overview and OpenGL 11

Virtual Reality Environments

From www.flyit.com Introduction, overview and OpenGL 12

Data visualizations

Plotted with Maxima (maxima.sourceforge.net)

Introduction, overview and OpenGL 13
Data visualizations

From molvis.sdsc.edu/dna
Introduction, overview and OpenGL 14
Data visualizations

Aerodynamic simulation of the Ferrari F1 car body showing

pressure contours and pathlines (from www.fluent.com)
Introduction, overview and OpenGL 15
Education & Training

From www.flyit.com
Introduction, overview and OpenGL 16
Computer Art

From www.blender.org
Introduction, overview and OpenGL 17
Computer Art (cont.)

From www.blender.org
Introduction, overview and OpenGL 18
Computer Art (cont.)

From moca.virtual.museum
Introduction, overview and OpenGL 19
Entertainment

Introduction, overview and OpenGL 20

Entertainment (cont.)

Introduction, overview and OpenGL 21

Entertainment (cont.)

Introduction, overview and OpenGL 22

Entertainment (cont.)

Introduction, overview and OpenGL 23

Entertainment (cont.)

From www.microsoft.com
Introduction, overview and OpenGL 24
Image processing

From www.ph.tn.tudelft.nl
Introduction, overview and OpenGL 25
Image processing (cont.)

From www.wikipedia.org
Introduction, overview and OpenGL 26
Graphical User Interfaces

Introduction, overview and OpenGL 27

Overview of Graphics Systems
 Video Display Devices
 Raster Scan Systems
 Graphics Workstations and Viewing Devices
 Input Devices
 Hard Copy Devices
 Graphics Networks
 Graphics on the Internet
 Graphics Software

Introduction, overview and OpenGL 28

Overview
Programmer’s Model of (Interactive) Graphics

Application
Application Graphics Display
Data
Program System Device
Structure/Model

Graphics Devices
-Output Devices
(Display Screen; View Surface)
-Input Devices
(Interaction Devices)
Introduction, overview and OpenGL 29
Graphics Devices

 Output Devices
 CRT Displays

 Hard Copy Devices CPU DP Display

 Input Devices
 Locator

 Stroke
Input Hard Copy
 String (Keyboard)

 Valuator

 Choice (Button)

 Pick

Introduction, overview and OpenGL 30

Cathode Ray Tube

Illustration showing the interior of a cathode-ray tube for use in an oscilloscope.

Numbers in the picture indicate: 1.Deflection voltage electrodes 2.Electron gun
3. Electron beam 4.Focusing coil 5.Phosphor-coated inner side of the screen
Introduction, overview and OpenGL 31
from wikipedia.org
Cathode Ray Tube (cont.)

Diagram of a CRT tube from HB

Introduction, overview and OpenGL 32
Cathode Ray Tube (cont.)

Introduction, overview and OpenGL 33

from HB
Cathode Ray Tube (cont.)

Introduction, overview and OpenGL 34

Raster Scan Display

Introduction, overview and OpenGL 35

Random Scan Display (cont.)

Draws the component lines of an object in any specified order.

Introduction, overview and OpenGL 36
 Interlacing

1
2
3
4
5
6
7
8
First, all points on the even-numbered (solid) scan lines are displayed; then
all points along the odd-numbered (dashed) lines are displayed.
Color Cathode Ray Tube

Introduction, overview and OpenGL 38

 Color Cathode Ray Tube (cont.)

Illustration showing the interior of a cathode-ray tube for color televisions and monitors.
Numbers in the picture indicates:
1.Electron guns 2.Electron beams 3. Mask for separating beams for red, green and
blue part of displayed image 4. Phosphor layer with red, green, and blue zones
5.Close-up of the phosphor-coated inner side of the screen
Introduction, overview and OpenGL 39
from wikipedia.org
Cathode Ray Tube

Aperture grille CRT close-up

from wikipedia.org

Introduction, overview and OpenGL 40

Phosphor
 Persistence: How long a phosphor continues to emit light after the
electron beam is removed

 The persistence of a phosphor is defined as the time it takes for

emitted light to decay to 1/10 of its original intensity

Persistence Refresh rate

Is higher persistence always better ?

No !!!
Why ?

Introduction, overview and OpenGL 41

Persistence need refreshing
Intensity

10 %
Time
persistence
 Fluorescence
 Phosphorescence

Refresh rate
 # of times/sec a picture is redrawn
required to be flicker-free
 60 Hz for raster scan displays
 For refresh displays, it depends on picture complexity !!!
Why ?
 Sharpness
inter-dot distance
dot pitch dot size, spot size

energy
1 spot size
Resolution = 1 / spot size
0.5 ~ 0.6
However, informally
distance # of points / scan line
# of lines / frame
electron beam
Addressability = 1 / inter-dot distance
Aspect Ratio
 The aspect ratio of vertical points to horizontal points neces-
sary to produce equal length of lines in both direction on screen
4/3 = 1.33...

l
Note
Sometimes, aspect ratio is stated in terms of the ratio of hori-
zontal to vertical points
3/4 = 0.75
Flat-Panel Displays: Plasma

Introduction, overview and OpenGL 45

Flat-Panel Displays

Introduction, overview and OpenGL 46

 LCD ( Liquid Crystal Display )
Basics

Viewing
direction

Reflective Horizontal Horizontal Liquid- Vertical Vertical

layer polarizer grid wires crystal grid wires polarizer
layer
Flat-Panel Displays: LCD

Introduction, overview and OpenGL 48

Color TFT (Thin Film Transistor) LCD
Color ? Color Filter

Liquid Crystal

TFT

TFT (Thin Film Transistor)

• using a transistor at each grid point
• causing the crystals to change their state quickly
• controlling the degree to which the state has been changed
• holding the state until it changes
Three Dimensional Viewing
Devices
 For the display of 3D scenes
 Reflects a CRT image from a vibrating,
flexible mirror
 Allows to walk around an object or scene and
view it from different sides

Introduction, overview and OpenGL 50

 3D Display System

Operation of a three-dimensional display system using a vibrating mirror that

Introduction, overview and OpenGL 51
changes focal length to match the depths of points in a scene.
Stereoscopic and Virtual-Reality
Systems
 Not true 3D images, but provides a 3D effect.
 Uses two views of a scene along the lines of
right and left eye. Gives perception of a
scene depth when right view is seen from
right eye and left scene is seen from left eye
(stereoscopic effect). Display each view at
alternate refresh cycles.

Introduction, overview and OpenGL 52

Glasses for viewing a
stereoscopic scene in 3D.
(Courtesy of XPAND, X6D USA
Inc.)

Introduction, overview and OpenGL 53

Architecture of a simple raster-
graphics system

Introduction, overview and OpenGL 54

Architecture of a raster system

with a fixed portion of the system memory reserved for the frame
buffer.

Introduction, overview and OpenGL 55

Basic video-controller refresh
operations

Introduction, overview and OpenGL 56

Architecture of a raster-graphics
system with a display processor.

Introduction, overview and OpenGL 57

A character defined as a
rectangular grid of pixel positions.

Introduction, overview and OpenGL 58

A character defined as an outline
shape.

Introduction, overview and OpenGL 59

Input Devices/Method
 Physical Devices
 Logical Devices
 Input Mode
 Request mode
 Event mode
 Sample mode

Introduction, overview and OpenGL 60

 Input Devices

 Input devices
 Keyboards, button boxes, dials
 Mouse devices
 Trackballs and spaceballs
 Joysticks
 Data gloves
 Digitizers
 Image scanners
 Touch panels
 Light pens
 Voice systems

Introduction, overview and OpenGL 61

Physical Devices

 Keyboards

Introduction, overview and OpenGL 62

Physical Devices (cont.)

 Dials

Introduction, overview and OpenGL 63

Physical Devices (cont.)
 Touch Panels

Introduction, overview and OpenGL 64

Physical Devices (cont.)

 Light Pen

Introduction, overview and OpenGL 65

Physical Devices (cont.)

 Graphics Tablets

Introduction, overview and OpenGL 66

Physical Devices (cont.)

 3D-Tablet

Introduction, overview and OpenGL 67

Physical Devices (cont.)
 Joystick / Mouse / Trackball

Introduction, overview and OpenGL 68

Physical Devices (cont.)
 Button

Introduction, overview and OpenGL 69

Physical Devices (cont.)

 Voice Systems

Introduction, overview and OpenGL 70

Logical Devices
 Locator
 Stroke
 String
 Valuator
 Choice
 Pick

Introduction, overview and OpenGL 71

Locator Devices / Stroke Devices

Introduction, overview and OpenGL 72

String Devices

y+

(a)

y - axis

(b)
Introduction, overview and OpenGL 73
Valuator Devices

1 90

0.5

0 0
180
0 5000
-0.5

-1 270

Introduction, overview and OpenGL 74

Choice Devices

 Button

 Menu Selection

Introduction, overview and OpenGL 75

 Hard-copy Devices

 Hard-copy devices
 Plotters
 2D moving pen with stationary paper
 1D pen and 1D moving paper
 Printers
 Impact devices
 Inked ribbon
 Non impact devices
 Laser, ink-jet, xerographic, electrostatic, electrothermal.

Introduction, overview and OpenGL 76

 Graphics Software

 Graphics software
 Special purpose
 For non programmers
 CAD, CAM, painting, animation
 General programming packages
 C, C++, Java, …
 Library of graphics functions (OpenGL)
 Picture components (lines, shapes, …)
 Transformations (color, texture, shading, rotating, …)

Introduction, overview and OpenGL 77

Coordinate Representations

 To generate a picture using a programming

package, we first need to give the geometric
descriptions of the objects – location and
shape
 For example, a box is specified by the
positions of its corners, a sphere is specified
by its center position and radius

Introduction, overview and OpenGL 78

Coordinate Representation

 Cartesian coordinates
 Modeling coordinates (local, master)
in the reference frame of each object
 World coordinates
in the scene reference frame
 Viewing coordinates
view we want of a scene
 Normalized (device) coordinates
normalized between –1 and 1 or 0 and 1
 Device coordinates (screen coordinates)

Introduction, overview and OpenGL 79

A Cartesian reference frame

with origin at the lower-left corner of a video monitor.

Introduction, overview and OpenGL 80
 Coordinate System Transformations

The transformation sequence from modeling coordinates to device coordinates for a three-
dimensional scene. Object shapes can be individually defined in modeling-coordinate reference
systems. Then the shapes are positioned within the world-coordinate scene. Next, world-
coordinate specifications are transformed through the viewing pipeline to viewing and projection
coordinates and then to normalized coordinates. At the final step, individual device drivers
transfer the normalized-coordinate representation of the scene to the output devices for display.
Introduction, overview and OpenGL 81
Coordinate Transformations

 (xmc, ymc, zmc) → (xwc, ywc, zwc) → (xvc, yvc, zvc)

→ (xpc, ypc, zpc) → (xnc, ync, znc) → (xdc, ydc)

Introduction, overview and OpenGL 82

Example OpenGL Window

A 400 by 300 display window at position (50, 100) relative to the top-left
corner of the video display.
Introduction, overview and OpenGL 83
Example Display Window

Introduction, overview and OpenGL 84

Graphics Functions

 Graphics Output Primitives

 Character strings, lines, filled color areas (usually
polygons)
 Basic tools for constructing pictures
 Attributes
 Color, line style, text style, area filling patterns
 Geometric Transformations
 Change size, position or orientation of an object

Introduction, overview and OpenGL 85

Graphics Functions
 Viewing Transformations
 Select a view of the scene, type of projection to
be used, location of the view on the video monitor
 Input functions
 Control and process data flow from interactive
devices
 Control operations
 Clear the screen display area, initialize
parameters

Introduction, overview and OpenGL 86

Introduction to OpenGL
 First part of Silicon Graphics graphics
workstations (formerly GL)
 De facto graphics standard
 Became hardware independent in early
1990s and named as OpenGL
 Developed especially for 3D scenes
 2D scenes as projections where z-coordinate
is 0.

Introduction, overview and OpenGL 87

OpenGL

 Graphics rendering API (Application

Programmer’s Interface)
 A software interface to graphics hardware
 Generation of high-quality color images
composed of geometric and image primitives
 Window system independent
 Operating system independent
 Close to the hardware
 Algorithms and implementations are important

Introduction, overview and OpenGL 88

OpenGL and the Windowing
System
 OpenGL is concerned only with rendering
 It is window system independent
 No input functions
 OpenGL must interact with the underlying OS
and windowing system
 Need minimal interface which may be system
dependent
 Done through additional libraries: AGL (Apple), GLX (X-
Window), WGL(Windows)

Introduction, overview and OpenGL 89

GLU and GLUT
 GLU (OpenGL Utility Library)
 Part of OpenGL
 Provides NURBS (splines), etc.
 GLUT (OpenGL Utility Toolkit)
 A portable windowing API
 Not officially part of OpenGL
 Extremely useful for helping to create images quickly
without worrying about the underlying windowing
system being used

Introduction, overview and OpenGL 90

The OpenGL version 4 pipeline.

Introduction, overview and OpenGL 91

Basic OpenGL Syntax

 Function names are prefixed with gl for core

library, glu for GLU, glut for GLUT library
 glBegin, glClear, gluOrtho2D,glutInit
 Constants
 GL_2D, GL_RGB, GLUT_SINGLE
 Data types
 GLbyte, GLshort, GLint, GLfloat, GLdouble

Introduction, overview and OpenGL 92

OpenGL Command Formats

glVertex3fv( v )

Number of Data Type Vector

components b - byte omit “v” for
ub - unsigned byte
2 - (x,y) scalar form
s - short
3 - (x,y,z)
us - unsigned short
4 - (x,y,z,w) glVertex2f( x, y )
i - int
ui - unsigned int
f - float
d - double

Introduction, overview and OpenGL 93

Display Window

Introduction, overview and OpenGL 94

Sample Program

#include <GL/glut.h>
// (or others, depending on the system
in use)

void init (void)

{
glClearColor (1.0, 1.0, 1.0, 0.0);
// Set display-window color to white.

glMatrixMode (GL_PROJECTION);
// Set projection parameters.
gluOrtho2D (0.0, 200.0, 0.0,150.0);
}
Introduction, overview and OpenGL 95
Sample Program (cont.)
void lineSegment (void)
{
glClear (GL_COLOR_BUFFER_BIT);
// Clear display window.

glColor3f (1.0, 0.0, 0.0);

// Set line segment color to red.
glBegin (GL_LINES);
glVertex2i (180, 15);
// Specify line-segment geometry.
glVertex2i (10, 145);
glEnd ( );

glFlush ( );
// Process all OpenGL routines as quickly as
possible.
} Introduction, overview and OpenGL 96
Sample Program (cont.)
void main (int argc, char** argv)
{
glutInit (&argc, argv); // Initialize GLUT.
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
// Set display mode.
glutInitWindowPosition (50, 100);
// Set top-left display-window position.
glutInitWindowSize (400, 300);
// Set display-window width and height.
glutCreateWindow ("An Example OpenGL Program");
// Create display window.
init ( );
// Execute initialization procedure.
glutDisplayFunc (lineSegment);
// Send graphics to display window.
glutMainLoop ( );
// Display everything and wait.
}
Introduction, overview and OpenGL 97
Output

Introduction, overview and OpenGL 98

Specifying Geometric Primitives

 Primitives are specified using

glBegin( primType );
glVertex…
…
glEnd();
 primType determines how vertices are combined

Introduction, overview and OpenGL 99

Geometric Primitive Types

Introduction, overview and OpenGL 100

Geometric Primitive Types (cont.)
 GL_POINTS : Draws a point at each of the n vertices.

 GL_LINES : Draws a series of unconnected line

segments. Segments are drawn between v0 and v1,
between v2 and v3, and so on. If n is odd, the last
segment is drawn between vn-3 and vn-2, and vn-1 is
ignored.

Introduction, overview and OpenGL 101

Geometric Primitive Types (cont.)
 GL_LINE_STRIP : Draws a line segment from v0 to
v1, then from v1 to v2, and so on, finally drawing the
segment from vn-2 to vn-1. Thus, a total of n-1 line
segments are drawn. Nothing is drawn unless n is larger
than 1. There are no restrictions on the vertices
describing a line strip (or a line loop); the lines can
intersect arbitrarily.

 GL_LINE_LOOP : Same as GL_LINE_STRIP, except

that a final line segment is drawn from vn-1 to v0,
completing a loop.

Introduction, overview and OpenGL 102

Geometric Primitive Types (cont.)
 GL_TRIANGLES : Draws a series of triangles
(three-sided polygons) using vertices v0, v1, v2, then v3,
v4, v5, and so on. If n isn't an exact multiple of 3, the
final one or two vertices are ignored.

 GL_TRIANGLE_STRIP : Draws a series of triangles

(three-sided polygons) using vertices v0, v1, v2, then v2,
v1, v3 (note the order), then v2, v3, v4, and so on. The
ordering is to ensure that the triangles are all drawn with
the same orientation so that the strip can correctly form
part of a surface. Preserving the orientation is important
for some operations, such as culling. (See "Reversing
and Culling Polygon Faces") n must be at least 3 for
anything to be drawn.

Introduction, overview and OpenGL 103

Geometric Primitive Types (cont.)
 GL_TRIANGLE_FAN :Same as
GL_TRIANGLE_STRIP, except that the vertices are v0,
v1, v2, then v0, v2, v3, then v0, v3, v4, and so on.

 GL_QUADS : Draws a series of quadrilaterals

(four-sided polygons) using vertices v0, v1, v2, v3, then
v4, v5, v6, v7, and so on. If n isn't a multiple of 4, the
final one, two, or three vertices are ignored.

Introduction, overview and OpenGL 104

Geometric Primitive Types (cont.)
 GL_QUAD_STRIP : Draws a series of quadrilaterals
(four-sided polygons) beginning with v0, v1, v3, v2, then
v2, v3, v5, v4, then v4, v5, v7, v6, and so on (see Figure
2-7). n must be at least 4 before anything is drawn. If n is
odd, the final vertex is ignored.

 GL_POLYGON :Draws a polygon using the

points v0, ... , vn-1 as vertices. n must be at least 3, or
nothing is drawn. In addition, the polygon specified must
not intersect itself and must be convex. If the vertices
don't satisfy these conditions, the results are
unpredictable.

Introduction, overview and OpenGL 105

Valid and Invalid Polygons

Introduction, overview and OpenGL 106

 Next Lecture

Graphics Output Primitives

Introduction, overview and OpenGL 107

 References
 Donald Hearn, M. Pauline Baker, Warren R. Carithers, “Computer
Graphics with OpenGL, 4th Edition”; Pearson, 2011
 Jonas Gomez, Luiz Velho, Maria Costa Sousa, “Computer Graphics:
Theory and Practice”, CRC Press, 2012
 Sumanta Guha, “Computer Graphics Through OpenGL: From Theory to
Experiments”, CRC Press, 2010
 Jeffrey J. McConnell, “Computer Graphics: Theory into Practice”, Jones
& Bartlett Pub., 2005
 Kelvin Sung, Peter Shirley, Steven Baer, “Essentials of Interactive
Computer Graphics: Concepts and Implementation”, CRC Press,
2008
 Richard S. Wright, Nicholas Haemel, Graham Sellers, Benjamin
Lipchak, “OpenGL SuperBible: Comprehensive Tutorial and
Reference”, Addison-Wesley, 2010
 Edward Angel, “Interactive Computer Graphics. A Top-Down
Approach Using OpenGL”, Addison-Wesley, 2005
Introduction, overview and OpenGL 108
