Co315 part 1

1
Computer Graphics (CO-315)
M. Sarosh Umar
Department of Computer Engineering,
Aligarh Muslim University, Aligarh
Email: saroshumar@zhcet.ac.in

2
Computer Graphics
•Computer graphics deals with all aspects
of creating images with a computer
- Hardware
- Software
- Applications
• ‗All aspects‘ generally means creation,
storage and manipulation of models and
images

3
A Survey of Computer
Graphics
•Display of Information
•Design
•Simulation and Animation
•User Interfaces

4
Graphics
•Display of Information
- Statistical data
- Cartography
- Medical Imaging (Image processing!)
- Fluid Flow
- Molecular biology
- Mathematical entities
Helps to visualize complex processes!

5
Graphics
•Design
―Every engineering product starts with the
design‖
- CAD
- Architectural

6
Graphics
•Simulation and Animation
- Flight simulator
- Games
- Education & Training
- Entertainment
- Advertisement
- VR – Stereo?

7
Graphics
•User Interfaces (HCI)
- Windows, icons, menus, pointing devices…
- Diverse Applications - Internet browsers, Word..
- Varied platforms: PCs, Mobiles, Cockpits,
Dashboards, Machines, ATMs,….
- Security!!
GUIs have rendered computers as friendly
devices

8
Example
•Where did this image come from?
•What hardware/software did we need to
produce it?

9
Preliminary Answer
•Application: The object is an artist‘s
rendition of the sun for an animation to be
shown in a domed environment
(planetarium)
•Software: Maya for modeling and
rendering but Maya is built on top of
OpenGL
•Hardware: PC with graphics card for
modeling and rendering

10
Basic Graphics System
Input devices
Output device
Image formed in FB

11
CRT
Can be used either as a line-drawing
device (calligraphic) or to display contents
of frame buffer (raster mode)

12
Computer Graphics: 1950-1960
•William Fetter coined term ―computer
graphics‖ in 1960 to describe new design
methods he was pursuing at Boeing
• In earliest days of computing
- Strip charts
- Pen plotters
- Simple displays using A/D converters to go
from computer to calligraphic CRT
•Cost of refresh for CRT too high
- Computers slow, expensive, unreliable

13
• ―Perhaps the best way to define computer graphics is
to find out what it is not. It is not a machine. It is not a
computer, nor a group of computer programs. It is not
the know-how of a graphic designer, a programmer, a
writer, a motion picture specialist, or a reproduction
specialist.
Computer graphics is all these – a consciously
managed and documented technology directed toward
communicating information accurately and
descriptively.‖
• Computer Graphics, by William A. Fetter, 1966

14
• Cool facts: Whirlwind, built in early 50‘s at MIT, cost
$4.5 million and could perform 40,000
additions/second. Mac 512K, list price $3,195 in 1984,
could do 500,000. Today, commodity PCs/mobile
phones perform approximately two or three billion
operations/second.
IBM 704 took up a whole
room and was capable of
about 4,000 arithmetic
operations/second.

15
•Wireframe graphics
- Draw only lines
•Sketchpad
•Display Processors
•Storage tube
wireframe representation
of sun object

16
Sketchpad
•Ivan Sutherland‘s PhD thesis at MIT-1963
- Recognized the potential of man-machine
interaction
- Loop
• Display something
• User moves light pen
• Computer generates new
display
- Sutherland also created
many of the now common algorithms for
computer graphics

17
Display Processor
• Rather than have the host computer try to
refresh display use a special purpose computer
called a display processor (DPU)
• Graphics stored in display list (display file) on
display processor
• Host compiles display list and sends to DPU

18
Direct View Storage Tube
•Created by Tektronix
- Did not require constant refresh
- Standard interface to computers
• Allowed for standard software
• Plot3D in Fortran
- Relatively inexpensive
• Opened door to use of computer graphics for CAD
community

19
•Raster Graphics
•Beginning of graphics standards
• GKS: European effort
– Becomes ISO 2D standard
• Core: North American effort
– 3D but fails to become ISO standard
•Workstations and PCs

20
Raster Graphics
•Image produced as an array (the raster)
of picture elements (pixels) in the frame
buffer

21
Raster Graphics
•Allows us to go from lines and wire frame
images to filled polygons

22
PCs and Workstations
•The distinction between workstations and
PCs, no longer remains although
historically they evolved from different
roots
- Early workstations characterized by
• Networked connection: client-server model
• High-level of interactivity
- Early PCs included frame buffer as part of user
memory
• Easy to change contents and create images

23
Realism comes to computer graphics
smooth shading environment
mapping
bump mapping

24
•Special purpose hardware
- Silicon Graphics geometry engine
• VLSI implementation of graphics pipeline
•Industry-based standards
- PHIGS
- RenderMan
•Networked graphics: X Window System
•Human-Computer Interface (HCI)

25
•OpenGL API
•Completely computer-generated feature-
length movies (Toy Story) are successful
•New hardware capabilities
- Texture mapping
- Blending
- Accumulation, stencil buffers

26
Computer Graphics: 2000-
•Photorealism
•Graphics cards for PCs dominate market
- Nvidia, ATI
•Game boxes and game players determine
direction of market
•Computer graphics routine in movie
industry: Maya, Lightwave
•Programmable pipelines

27
Graphics Hardware
•Random
Scan
Graphics
h/w
converts
signals
from the
control unit
into the
image the
user sees

28
Vector Graphics Hardware
V E C T O R
Display Controller
move 10 20
line 20 40
...
char O
char R
Display list
Continuous & smooth
lines
No filled objects
Random scan
Refresh speed
depends on
complexity of the
scene

29
Raster Graphics Hardware
Video Controller
Jaggies (stair casing)
Filled objects
(Anti)aliasing
R A S T E R
Refresh speed independent of
scene complexity
Pixel
Scan conversion
Resolution
Bit planes
0 0 0 0 0 0
0 7 7 7 6
0 7 7 7
0 0 0
0 0
0
Frame buffer

30
Colour Lookup Table
0 0 0 0 0 0
0 7 7 7 6
0 7 7 7
0 0 0
0 0
0
Frame buffer
0 0 0
102 255 53
255 255 204
255 102 153
102 0 51
R G B
0
1
2
4
7
...
colour
index
CLUT:
pixel = code
True colour:
pixel = R,G,B

31
Graphics Standards
• CGA: 320x200 (LO,16colors) 640x200 (HI, 4c)
• Common standard: VGA (Video Graphics
Array)
• Basic VGA display: 640x480 pixels
• Variations: XVGA(1024x768), SXGA
(1280x1024), UXGA(1600x1200)
• HDTV: 720 or 1080 lines (progressive or
interlaced) 1920x1080 and 1280x720
• Latest: 4K (4096x2160)
• Resolution and Dot Pitch

Hardware Issues (Display
Technology)
• Different output devices may be used - monitors, printers,
plotters
• Most common is the Cathode Ray Tube (CRT)
monitor
- Horizontal and vertical deflectors focus an electron
beam emitted by an electron gun on any spot on a
phosphor coated screen
- The maximum number of points, or pixels that can be
displayed without overlap is called the resolution, e.g.
1024x768, 800x600 etc.
- Colour systems have groups of 3 different phosphors,
for red, green and blue (the primary colours)
- The CRT uses a combination of these phosphors to emit
different coloured light

Phosphors
• Once struck by the electron beam most phosphors
relax back to the ground state by emitting a
photon of light
• This light is called fluorescence, which normally
decays in under a millisecond
• Some molecules may be further excited, and emit
a light call phosphorescence, which decays
slower, but still rapidly (15-20 milliseconds)
• Therefore, the screen must be refreshed by
redrawing the image

Phosphors
•Phosphors may be characterised by their
persistence
- (time to decay of emitted light)
•High persistence cheap and good for text,
bad for animation (original IBM PC
monitor)
•Low persistence, good for animation, but
needs a high refresh rate or flicker can be
observed

36
Output Devices
•CRT (Random scan & Raster scan)

37
Output Devices
•Shadow Mask CRT

38
Output Devices
•Direct View Storage Tube
•Nixie Tubes
•LEDs
•Plasma Panel
•LCD
Nixie tube

40
What’s Liquid Crystal (LC)
• Intermediary substance between a liquid and solid
state of matter e.g. soapy water
• Light passing through liquid crystal changes when it
is stimulated by an electrical charge.

42
Introduction to Liquid
Crystal Displays
•Consists of an array of tiny segments
(called pixels) that can be manipulated to
present information.
•Uses polarization of light to display objects.
•Use only ambient light to illuminate the
display.
•Common wrist watch, pocket calculator,
computer screen, ATMs, TVs,…..

39
Different types of LCDs
Passive Matrix LCDs (PMLCD) and Active
Matrix LCDs (AMLCD)
• Passive Twisted Nematic Displays (TNLCD)
• Super Twisted nematic LCD (STNLCD)
• Thin Film Transistor LCD (TFT LCD)
• Reflective LCD
• Rear Projection LCD
• IPS (In plane switching)
• AMOLED (Active matrix Organic LED)

44
Operating Principle
•Parallel arrangement of liquid crystal
molecules along grooves
•Liquid crystal molecules line up parallel
along the grooves when they come into
contact with grooved surface in a fixed
direction

45
Polarization of light
• When unpolarized light passes through a polarizing filter, only one
plane of polarization is transmitted. Two polarizing filters used
together transmit light differently depending on their relative
orientation.
Online Offline
Operating Principle

46
Molecules movement
Offline (no voltage is applied)
• Along the upper plate:
Molecules point in direction
‗a‘
• Along the lower plate:
Molecules align in direction
‗b‘
• The liquid crystals are
forced into a twisted
structural arrangement
Operating Principle

47
Light movement
Offline (no voltage is applied)
• Light travels through the twisted
arrangement of the molecules
• The light also "twists" as it
passes through the twisted liquid
crystals
• Light bends 90 degrees as it
follows the twist of the molecules.
• Polarized light pass through the
lower polarizer
Operating Principle

48
Molecules movement
Online (voltage is applied)
• Liquid crystal molecules
straighten out of their helix
pattern
• Molecules rearrange
themselves vertically (Along
with the electric field)
• No twisting thoughout the
movement
• The liquid crystals are forced
into a straight structural
arrangement. (Electric force)
Operating Principle

49
Light movement
Online (voltage is applied)
• Light passes straight through
along the arrangement of
molecules.
• Polarized light cannot pass
through the lower polarizer.
• Screen darkens.
Operating Principle

50
Offline Online
Sequences of offline
and online mode
Offline
• Surrounding light is
polarized on the upper
plate.
• Light moves along with
liquid crystals and twisted
at right angle.
• Light passes through the
plate polarizer
• Screen appears
transparent.
Operating Principle

51
Sequences of offline
and online mode
Online
• Surrounding light is polarized on
the upper plate.
• Light moves along with liquid
crystals which moves straight
along the electric field.
• Molecules and lights are
perpendicular to the lower
polarizer
• Light cannot pass through the
plate and screen appears dark.
Operating Principle
Offline Online

52
Construction of
Liquid Crystal Display
• Two bounding plates (usually
glass slides), each with a
transparent conductive coating
(such as indium tin oxide) that
acts as an electrode;
• A polymer alignment layer :
undergoes a rubbing process as
grooves.
• Spacers to control the cell gap
precisely;
• Two crossed polarizers (the
polarizer and the analyzer);
• Polarizers are usually
perpendicular to each other.
Operating Principle

53
• Small footprint (approx 1/6 of CRT)
• Light weight (typ. 1/5 of CRT)
• power consumption (typ. 1/4 of CRT)
• Completely flat screen - no geometrical
errors
• Crisp pictures - digital and uniform
colors
• No electromagnetic emission
• Fully digital signal processing possible
• Large screens (~100 inches)
• Low contrast and luminance (typ.
1:1000)
• Low luminance (typ. 200 cd/m2)
• Poor performance in sunlight
Maximum luminosity : 50%
of CRT as 50% of light is
blocked by the upper
polarizer.
Properties of LCD Display

54
Advantage of LCD over CRT
• Smaller size—AMLCDs occupy approximately 60
percent less space than CRT displays—an
important feature when office space is limited.
• Lower power consumption—AMLCDs typically
consume about half the power and emit much
less heat than CRT displays.
• Lighter weight—AMLCDs weigh approximately
70 percent less than CRT displays of comparable
size.
• No electromagnetic fields—AMLCDs do not
emit electromagnetic fields and are not
susceptible to them. Thus, they are suitable for
use in areas where CRTs cannot be used.
• Longer life—AMLCDs have a longer useful life
than CRTs; however, they may require
replacement of the backlight.

55
Display Addressing
• Addressing is the process by which pixels are turned on
and off in order to create an image.
• There are two main types of addressing, direct and
multiplexing.
• Direct addressing is convenient for displays where there
are only a few elements that have to be activated. With
direct addressing, each pixel in the display has its own
drive circuit. A microprocessor must individually apply a
voltage to each element. A common application of direct
addressing is the traditional seven segment liquid
crystal display, found in wristwatches and similar devices.

56
Display Addressing
• In multiplex addressing, a larger number of pixels are
involved. When the elements are in a regular order, they
can be addressed by their row and column instead of
each element being driven separately. This reduces the
complexity of the circuitry because each pixel no longer
needs its own driver circuit.
• If you have a 10x10 matrix of pixels, with direct addressing,
you need 100 individual drivers. However, if you use
multiplex addressing, you only need 20 drivers, one for
each row and one for each column.
• This is a tremendous advantage, especially as displays
become larger and larger.

57
Display Addressing
Optical Response
• Twisted nematic displays can switch between light and dark
states, or somewhere in between (grayscale).
• Electro-distortional curve is shown as follows :
• The electro-distortional response determines the transmission
of light through the cell.
• Different light intensity of an image projected on the screen is
determined by different voltage supply. Thus the level of
blocking of light may vary.

58
Construction
A) Thin Film Transistor (TFT)
• Constructed on a glass surface using a photolithographic
process.
• The source and gate are the control electrodes. The drain
electrode connects to the liquid crystal pixel. The thin layer
of amorphous silicon is the semiconducting material that
allows the TFT to function. The capacitor is attached to the
pixel electrode, but is not an integral part of the TFT.

59
Construction
B) Alpha-numeric display
• Digital letters can be displayed by blocking the lights in
different plates we place.
• For applications such as digital watches and calculators,
a mirror is used under the bottom polarizer. With no
voltage applied, ambient light passes through the cell,
reflects off the mirror, reverses its path, and re-emerges
from the top of the cell, giving it a silvery appearance.
• When the electric field is on, the aligned LC molecules do
not affect the polarization of the light. The analyzer
prevents the incident light from reaching the mirror
and no light is reflected, causing the cell to be dark.
When the electrodes are shaped in the form of
segments of numbers and letters they can be turned on
and off to form an alpha-numeric display.

60
Construction
C) Back lighting systems
• Alpha-numeric displays are not very bright because the
light must pass through multiple polarizers which
severely cut down on the intensity of the light, in
addition to the various layers of the display which are only
semi-transparent. Therefore a more intense source is
employed in the form of a back lighting system.
For brighter displays
• CCFL: Cold Cathode Fluorescent Lamps are mounted on
opposite edges or an array is used for larger displays
• Disadvantage : very power intensive
• WLED: White LEDs – Used on most TVs, Monitors
• RGB LED: Used on professional graphics editing LCDs

61
Drawbacks of LCD
• Limited viewing angle, causing color, saturation, contrast
and brightness to vary.
• Uneven backlighting in some (mostly older) monitors,
causing brightness distortion, especially toward the edges.
• Black levels may appear unacceptably bright because
individual liquid crystals cannot completely block all light
from passing through.
• Display motion blur on moving objects caused by slow
response times (>8 ms)
• Eye-strain is being caused by flicker effect. This problem is
worse on many of the new LED backlit monitors, because
the LEDs have a faster turn-on/turn-off time than a CCFL
lamp.

62
Drawbacks of LCD
• Only one native resolution. Displaying any other resolution
either requires a video scaler, causing blurriness and jagged
edges; or running the display at native resolution using 1:1
pixel mapping, causing the image either not to fill the screen
(letterboxed display), or to run off the lower right edge of the
screen.
• Fixed bit depth, many cheaper LCDs are only able to display
262,000 colors. 8-bit S-IPS panels can display 16 million
colors and have significantly better black level, but are
expensive and have slower response time.
• Low refresh rate – affects gaming and 3D graphics
• Dead or stuck pixels may occur during manufacturing or
through use.

63
Drawbacks of LCD
• Subject to burn-in effect, although the cause differs from
CRT and the effect may not be permanent, a static image
can cause burn-in in a matter of hours.
• In a constant-on situation, thermalization may occur, in
which part of the screen overheats and looks discoloured
• Loss of brightness and much slower response times in low
temperature environments (In sub-zero environments, LCD
screens may cease to function without the use of
supplemental heating).
• Loss of contrast in high temperature environments.
• Not usually designed to allow easy replacement of the
backlight.

64
Drawbacks of LCD
• Poor display in direct sunlight, often completely unviewable.
Transflective LCDs provide a large improvement by
reflecting natural light, but are dimmer when relying on the
backlight and so they have only been adopted for specific
outdoor uses.
• Cannot be used with light guns/pens.
• Hard to read when wearing polarized sunglasses.

Input devices
•Text entry devices
- Keyboard
- Handwriting and speech recognition

Input devices
•2D positioning and pointing devices
- Mouse
- Trackball
- Joystick
- Touchscreen
- Light pen
- Digitizing tablet
 Touch pad
 Eyegaze
 Cursor keys
 Keymouse

What is a touch screen?
• An electronic visual
display that locates
the coordinates of a
users touch within
display area
• Works
independently of
what is being
displayed on screen[7]

When is it Applicable?
• It allows users to interact
directly with what is being
displayed, rather than
indirectly using a mouse or
keyboard
• Can be used without any
intermediate device
• Found in modern
smartphones, video games,
kiosks, navigation systems,
etc. . .
[1]

Brief History
• Invented by E.A. Johnson (Royal
Radar Est.) around 1965 for air
traffic control
• HP-150 home computer using
infrared technology in 1983
• 1993 Apple‘s Newton and
IBM‘s Simon
• 2002 Microsoft‘s Windows XP
Tablet
• 2007 Apple‘s iPhone (Multi-touch)
[6]

Touch Screen Technology
•Four different technologies used to make
touch screens today:
• Resistive
• Capacitive
• Surface Acoustic Wave (SAW)
• Infrared LED or Optical

Resistive Touch Screens
•Two layers of
conductive material
•Touch creates
contact between
resistive layers
completing circuit
[2]

Resistive Touch Screens
•Voltage in circuit
changes based on
position
•Controller determines
location based on
voltages
•Any material can
trigger sensors
[2]

Why Resistive?
• Advantages:
- Cost-effective and low power
- Requirements
- Activated by any object
- Accurate
• Disadvantages:
- Polyester surface can be damaged
- Only 75% light transmission
- Lower endurance (~35 million touches)

Resistive
Summary
•8‖ resistive touch screen will cost about
$60
- 4 and 5 wire touch screens don‘t need
controllers
- For those that do, they cost less than $5
•Any object can be used to activate the
screen
•Not able to register multiple touches
•~75% of light is transferred through
(12.5% per layer)

Capacitive Touch Screens
•Glass panel with
conductive layer
(Indium Tin Oxide)
•Small amount of
voltage applied to four
corners of touch screen
[2]

Capacitive Touch Screens
•Touch draws minute
amount of current
creating voltage drop
•Coordinates of point
of contact calculated
by controller
[2]

Why Capacitive?
•Advantages:
- Durable surface material
- High endurance (~255 million touches)
- Very accurate
- Good optical quality
•Disadvantages:
- Triggered only by bare finger or active stylus

Capacitive
Summary
•8‖ capacitive touch screen costs about
$100
- Controllers can be bought for less than $5
•Only conductive objects can be used to
activate
•Able to register multiple touches

Surface Acoustic Wave
Touch Screens
•Surface consists of glass overlay with
transmitting and receiving transducers
[2]

Touch Screens
• Electrical signals sent to the transmitting
transducers converts to ultrasonic waves
• Waves are directed across screen by
reflectors then directed to receiving
transducers
[2]

Touch Screens
• When finger touches screen it absorbs waves
• Received values are compared to stored
digital maps to calculate x and y coordinates
[2]

Why SAW?
•Advantages:
- Best optical quality
- High surface durability and seal
- Activated by multiple sources
•Disadvantages:
- Expensive
- Contaminates on screen can cause false-
touches

Summary
screen

• Uses infrared LEDs and matching photodetectors
• Touching screen interrupts LEDs
[2]
Infrared/Optical
Touch Screens

Infrared/Optical
Touch Screens
•Cameras detect reflected LED caused
by touch
•Controller able to calculate coordinates
from camera data
[8]

Infrared/Optical
Touch Screens
- Advantages:
• High optical clarity
• Durable surface
• Supports multi-touch
• Can scale to large sizes
- Disadvantages:
• Expensive
• Cameras can get out of alignment

Infrared/Optical
Summary
•8‖ infrared touch screen costs about $160
screen
•Outdoor applications and Point of Sales

Type Examples Price(DigiKey) Tool for Input Multi-touch
Resistive
$10 (3.5‖)
$60 (8‖)
$150 (19‖)
Any object No
Capacitive
$100 (8‖)
$160 (19‖)
$310 (32‖)
Finger or
active stylus
Yes
SAW
$500 (15‖)
$850 (19‖)
*includes touch screen
and LCD monitor
Any object Yes
Infrared/
Optical
$130 (8‖)
$250 (19‖)
$320 (26‖)
Any object Yes
[1]
[1]
[1]
[1]

Input devices
•3D positioning and pointing devices
- Cockpit and virtual controls
- 3D mouse
• roll, pitch, yaw
- Dataglove
- VR helmets
- Whole body tracking

Output devices
•3D Printers
- 3D printing is making it easier and faster to
produce complex objects with multiple moving
parts and intricate design
- Additive processes are used, in which
successive layers of material are laid down
under computer control
- Additive Manufacturing (AM)
- Photopolymers with UV Lasers
- STL (STereoLithography) file format

Output devices
•Applications:
•Architecture, construction (AEC), industrial
design, automotive, aerospace,
military, engineering, dental and medical
industries, biotech (human tissue
replacement), fashion, footwear, jewelry,
eyewear, education, geographic information
systems, food, and many other fields

Output devices
•Large 3D Printing (2014)

Co315 part 1

More Related Content

Similar to Co315 part 1 (20)

Recently uploaded (20)

Co315 part 1