7. Course Outcomes
CO1 :: Classify and describe various Computer Graphics tools and
techniques.
CO2 :: Analyze and apply various algorithms of 2D Transformations on
different type of objects.
CO3 :: Determine and apply appropriate 2D clipping algorithms and
various projection techniques on different types of objects.
CO4 :: demonstrate and apply various algorithms of 3D
Transformations and various projection techniques on different types
of objects.
CO5 :: observe and differentiate various visibility and shading
techniques and models.
CO6 :: describe and represent Bezier and B-spline curves with
properties.
8. Program Outcomes
• PO1
Engineering knowledge:Apply the knowledge of mathematics, science, engineering
fundamentals, and an engineering specialization to the solution of complex
engineering problems.
• PO2
Problem analysis::Identify, formulate, research literature, and analyze complex
engineering problems reaching substantiated conclusions using first principles of
mathematics, natural sciences, and engineering sciences.
• PO3
Design/development of solutions::Design solutions for complex engineering
problems and design system components or processes that meet the specified
needs with appropriate consideration for the public health and safety, and the
cultural, societal, and environmental considerations.
• PO4
Conduct investigations of complex problems::Use research-based knowledge and
research methods including design of experiments, analysis and interpretation of
data, and synthesis of the information to provide valid conclusions.
9. Program Outcomes
• PO5
Modern tool usage::Create, select, and apply appropriate techniques,
resources, and modern engineering and IT tools including prediction and
modeling to complex engineering activities with an understanding of the
limitations.
• PO6
The engineer and society::Apply reasoning informed by the contextual
knowledge to assess societal, health, safety, legal and cultural issues and the
consequent responsibilities relevant to the professional engineering practice.
• PO7
Environment and sustainability::Understand the impact of the professional
engineering solutions in societal and environmental contexts, and demonstrate
the knowledge of, and need for sustainable development.
• PO8
Ethics::Apply ethical principles and commit to professional ethics and
responsibilities and norms of the engineering practice.
10. Program Outcomes
• PO9
Individual and team work::Function effectively as an individual, and as a member or
leader in diverse teams, and in multidisciplinary settings.
• PO10
Communication::Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend
and write effective reports and design documentation, make effective presentations,
and give and receive clear instructions.
• PO11
Project management and finance::Demonstrate knowledge and understanding of the
engineering, management principles and apply the same to one’s own work, as a
member or a leader in a team, manage projects efficiently in respective disciplines and
multidisciplinary environments after consideration of economic and financial factors.
• PO12
Life-long learning::Recognize the need for, and have the preparation and ability to
engage in independent and life-long learning in the broadest context of technological
change.
• PO13
Competitive Skills::Ability to compete in national and international technical events
and building the competitive spirit alongwith having a good digital footprint.
11. Unit I: Introduction to Computer Graphics and OpenGL
Unit II: Rasterization and Transformations
Unit III: 2D viewing pipeline
Unit IV: 3D viewing pipeline
Unit V: Visibility and Shading
Unit VI: Discrete Techniques and Object Representation
What we are going to study in this Subject?
23. Graphics
A graphic is an image or pictorial representation of an
object.
Examples: A line drawn on a paper, an arrow, a
geometrical figure, a caricature or a clicked picture
Graphics are not new. The earliest graphics known to us
are stone age cave paintings (40,000–10,000 B.C.)
25. Computer Graphics
…offers methods and techniques for generating and manipulating eye catching images
with the assistance of a computer
…allows the creation, display, and storage of pictures with help of a computer
Computer graphics can either be
Two-dimensional (2D) Three-dimensional (3D)
represent plain objects gives a realistic touch to an object representation
27. Different content is seen on the
display space of Toyota's concept
vehicle Fun-Vii.
The whole body of the concept
car can be used as a display
space, with the body colour and
display content changeable at
will.
This allows the vehicle to function
as a terminal for displaying
messages, advertising or other
information.
Toyota's concept vehicle Fun-Vii
45. 1951: Whirlwind computer
1955: SAGE (Semi-Automatic Ground Equipment)
1959: Design Augmented by Computers-1 (DAC-1), a CAD (computer-aided design) system
1961: first graphical computer game
1963: Sketchpad
1966: VICAR (Video Image Communication and Retrieval
1970: Bézier curves
1970s: 3D computer-graphic animation
1981: Paintbox
1980s: Desktop publishing
(designing things on your own small office computer)
Aldus PageMaker (1985) and QuarkXPress (1987)
1990: The first version of Adobe PhotoShop
1993: Mosaic, the first web browser to show text and images side-by-side
1995: Toy Story, CGI graphics in moviemaking.
1995: The GIMP (GNU Image Manipulation Program)
1999: SVG (Scalable Vector Graphics) to provide higher-quality images on the Web
2007: iPhone and iPod Touch with touchscreen graphical user interfaces
48. A display device (commonly called a display or screen) is an output device for presentation
of information in visual form.
Various types of Display Devices:
I) Cathode-ray tubes (CRT) Displays
• Raster-scan CRTs
• Random-scan CRTs
• Color CRT displays
II) Direct View Storage Tube (DVST)/
Memory Storage Tube Displays
III) Flat Panel Monitors
• Emissive Devices
• Non-Emissive Devices
• Thin Film Electroluminescent Displays
• Plasma Panel Displays
• Liquid Cristal Displays(LCDs)
51. Cathode Ray Tube (CRT) Displays
…one of the earliest electronic displays is the cathode ray tube (CRT), which was made commercial in 1922.
… CRT is a specialized vacuum tube in which images are produced when an electron beam strikes a phosphor-
coated screen.
…the earliest CRTs were monochrome and were used primarily in oscilloscopes and black and white televisions.
…the first commercial colour CRT was produced in 1954.
…CRTs were the single most popular display technology used in television sets and computer monitors for over
half a century.
…it was not until the 2000s that LCDs began to gradually replace them.
Oscilloscopes are a common type of test instrument used to capture, analyze and troubleshoot electrical or real
world physical signals.
In 1897 he built the first
cathode-ray tube (CRT) and
cathode-ray tube oscilloscope.
Karl Ferdinand Braun
(a German inventor)
Television sets, computers, automated teller
machines, video game machines, video
cameras, monitors, oscilloscopes and radar
displays all contain cathode-ray tubes.
In 1907 he used a CRT in
the receiver of a television
system
Boris Rosing
(the Russian scientist)
Inventors/Contributors:
53. - Beam of electrons (-)directed from cathode to phosphor-coated (fluorescent) screen (anode (+))
- Electron beam is directed by magnetic focusing anode and deflection coils in vacuum tube
– Intensity knob: regulates the flow of electrons by controlling the voltage at the control grid
|-- high voltage reduces the electron density and thus brightness
|-- low voltage increases the electron density and thus brightness
– Focusing anode/system forces the electron beam to converge to a point on the monitor screen
|-- Can be electrostatic (lens) or magnetic (field)
- Deflection directs the electron beam horizontally or vertically to any point on the screen
|-- Can be controlled by electric (deflection plates) or magnetic fields (deflection coils)
|-- Magnetic coils: two pairs (top/bottom, left/right) of tube neck
|-- Electric plates: two pairs (horizontal, vertical)
- Phosphor(an organic compound) emits photon of light, when hit by an electron, of varied
persistence (long 15-20 ms for texts / short < 1ms for animation)
Image maintenance
– Positive charge distribution to store picture information
– Refresh CRT: refreshes the display constantly to maintain phosphor glow.
Refresh rate (50-60 Hz / 72-76 Hz) to avoid flicker / trail
(Image from “Computer Graphics C
Version” by Donald Hearn and Pauline
Baker)
54. Characteristics of Cathode-Ray Tube (CRT)
– Intensity is proportional to the number of electrons repelled in beam per second (brightness)
– Resolutionis the maximum number of points that can be displayed without overlap;
….is expressed as number of horizontal points by number of vertical points;
….points are called pixels (picture elements); example: resolution 1024 x 768 pixels.
….typical resolution is 1280 x 1024 pixels.
Pros
• High contrast
• Excellent color
• No native resolution; Able to display many
different resolutions and refresh rates
• No input lag
• No ghosting and smearing artifacts during fast
motion
• Nearly zero color, saturation, contrast or brightness
distortion.
• Excellent viewing angle.
• Allows the use of light guns/pens.
• Can be used or stored in both extreme hot and
cold temperature conditions without harm to the
system
Cons
• Large size and weight
• High power consumption( 2-10 times in comparison to LCD
monitor)
• Produces noticeable flicker at refresh rates lower than 85 Hz.
• The glass envelopes contains toxic lead and barium as X-ray
radiation shielding. The phosphors can also contain toxic
elements such as cadmium.
• Sensitive to magnetic interference, which can cause the
image to shimmer or the colors to shift.
62. Flat Panel Monitors
The term Flat-panel display refers to a class of video devices that have reduced volume,
weight and power requirements compared to a CRT.
They are thinner than CRTs.
Flat Panel Monitors
Emissive displays Non-emissive displays
(or emitters)
…converts electrical energy into light
• Plasma panels
• Thin-Film Electroluminescent Displays
• Light-emitting diodes
…use optical effects to convert sunlight
or light from some other source into
graphics patterns.
(or nonemitters)
• Liquid-Crystal Displays (LCDs)
63. PLASMA PANEL DISPLAYS …also called gas-discharge displays.
• Constructed by filling the region between two
glass plates with a mixture of gases that usually
includes neon.
• A series of vertical conducting ribbons is placed
on one glass panel, and a set of horizontal
ribbons is built into the other glass panel.
• Firing voltages applied to a pair of horizontal and
vertical conductors cause the gas at the
intersection of the two conductors to break down
into a glowing plasma of electrons and ions.
• Picture definition is stored in a refresh buffer, and
the firing voltages are applied to refresh the pixel
positions 60 times per second.
Tip: a conductor is an object or type of material that allows the flow of
electrical current in one or more directions.
64. THIN-FILM ELECTROLUMINESCENT DISPLAYS
• Thin-film electroluminescent displays are similar in
construction to a plasma panel.
• The difference is that the region between the glass
plates is filled with a phosphor, such as zinc sulphide
doped with manganese, instead of a gas.
• When a sufficiently high voltage is applied to a pair of
crossing electrodes, the phosphor becomes a
conductor in the area of the intersection of the two
electrodes.
• Electrical energy is then absorbed by the manganese
atoms, which then release the energy as a spot of
light similar to the glowing plasma effecting a plasma
panel.
• Electroluminescent displays require more power
than plasma panels, and good colour and grayscale
displays are hard to achieve.
65. • A third type of emissive device is the light-emitting diode (LED).
• A matrix of diodes is arranged to form the pixel positions in the display, and picture
definition is stored in a refresh buffer.
• As in scan-line refreshing of a CRT, information is read from the refresh buffer and
converted to voltage levels that are applied to the diodes to produce the light
patterns in the display.
LIGHT-EMITTING DIODES (LED)
66. • These non-emissive devices produce a picture by passing polarized light from the surroundings or from
an internal light source through a liquid-crystal material that can be aligned to either block or transmit
the light.
• Flat-panel displays commonly use nematic (threadlike) liquid-crystal compounds that tend to keep the
long axes of the rod-shaped molecules aligned.
• Two glass plates, each containing a light polarizer at right angles to the-other plate, sandwich the liquid-
crystal material.
• Rows of horizontal transparent conductors are built into
one glass plate, and columns of vertical conductors are
put into the other plate.
• The intersection of two conductors defines a pixel
position.
• ON State: Normally, the molecules are aligned as shown
in the "on state" of Fig. Polarized light passing through
the material is twisted so that it will pass through the
opposite polarizer. The light is then reflected back to the
viewer.
• OFF State: To turn off the pixel, we apply a voltage to the
two intersecting conductors to align the molecules so
that the light is not twisted.
Liquid Crystal Displays (LCDs)
68. February 11, 2024 Computer Graphics 69
Light wave has two components:
1. Electrical Component
2. Magnetic Component
Both of these are mutually perpendicular to each other ie, makes 90 degree angle with each other.
69. February 11, 2024 Computer Graphics 70
Polarization of light: means movement of light component in one direction
70. February 11, 2024 Computer Graphics 71
Colour Filter: along with transistors and capacitors (attached with colour filter) controls
the intensity of light and gives that colour to that light.
Electrodes: a conductor through which electricity enters. Certain voltage is applied on
these electrodes because of which molecules of crystals twist or untwist
71. February 11, 2024 Computer Graphics 72
Cold cathode fluorescent lamps (CCFLs)
A backlight is a form of illumination used in liquid crystal displays (LCDs). As LCDs do not
produce light by themselves (unlike, for example cathode ray tube (CRT) displays), they
need illumination (ambient light or a special light source) to produce a visible image.
Liquid Crystals: Nematic liquid crystal produces a 90-degree shift in the polarization of the
light passing through when there is no electric field present. When a voltage is applied, an
electric field is produced in the liquid, affecting the orientation of the molecules. Nematic
comes from a Greek prefix nemato meaning threadlike and is used here because the
molecules in the liquid align themselves into a threadlike shape.
77. OpenGL terrain generator using fractals
Terrain is the vertical and horizontal dimension of land surface
78.
79.
80.
81. I REPRESENTATION OF OBJECTS ON THE SCREEN
- Points, Lines, Curves
- Geometrical Objects
- Circle
- Ellipse
- Rectangle
- Polygons, Polylines
- Transformations – 2D
- Windowing and Viewport
- Mapping of Objects
- Curves and Surfaces
- Bezier Curves
- Projections
- Hidden Surface Removal
- Rendering
- Light Effects
- Shades and Shadows
- Textures
- Ray Tracing
- Illumination
82. Goal of standardized software is portability (ie, one thing
designed for one system can be used on other system).
Also re-writing of code is not required.
Number of Graphics software standards came into
existence. Some of these are as follows:
1. GKS (Graphics Kernel System) 1984 : First software
standard accepted by ISO including ANSI --- First 2D
then extended to 3D
2. PHIGS (Programmer’s Hierarchical Interactive
Graphics System):
• It was extension of GKS.
• New features like rendering, colour
specifications, picture manipulation were
added.
3. GL (Graphics Libraries) by Silicon Graphics Inc. (SGI)
• SGI’s Graphics became increasingly popular
• They came up with set of routines called GL
(Graphics Libraries)
• Became popular in Graphics Community
• Disadvantage: ….These were platform
dependent (On the other hand, OpenGL is
platform independent)
4. Open Inventor
5. Virtual Reality Modelling Language (VRML)
6. Java 2D : Create 2D scenes within Java applets
7. Java 3D : Produce 3D web displays
8. RenderMan Interface by Pixar Corporation:
Produces scenes by using lightning models
9. Mathematica (provides Graphics Libraries)
10. Matlab (provides Graphics Libraries)
11. Maple (provides Graphics Libraries)
III SOFTWARE STANDARDS
83. OpenGL (Open Graphics Library) is the computer industry's standard application program
interface ( API ) for defining 2-D and 3-D graphic images.
OpenGL is a cross-language, multi-platform application programming interface (API) for
rendering 2D and 3D vector graphics. OpenGL is designed as a streamlined, hardware-
independent interface to be implemented on many different hardware platforms.
Tip: An application programming interface (API) is a set of routines, protocols, and tools for building software applications.
• This interface consists of about 150 distinct
commands that we use to specify the objects and
operations needed to produce interactive three-
dimensional applications.
• With OpenGL, we can build up any desired model
from a small set of geometric primitives - points,
lines, and polygons.
What is OpenGL ?
85. • GL (Graphic Library)
• Lowest level: vertex, matrix manipulation
• Eg:- glVertex3f(point.x, point.y, point.z)
• GLU (Graphic Library Utility)
• Provides functions/routines for setting up:
• Viewing and Projection Matrices
• Displaying quadrics and B-Splines
• Processing Surface-rendering operations
• Helper functions for shapes, transformations
• Eg:- gluPerspective( fovy, aspect, near, far )
• GLUT (Graphic Library Utility Toolkit)
• Highest level: Window and interface management
• Provides library of functions for interacting with any scree-windowing system.
• Contains functions for describing quadric curves and surfaces.
• Eg:- glutInitWindowSize()
OpenGL Hierarchy
86. Things used in OpenGL Program:
Basic Operations:
• Primitive functions – it includes main functions (like - line drawing,
polygon, triangle, etc.)
• Symbolic Constants
• Built-in Data types
OpenGL Libraries
Header Files
For Windows,
#include <windows.h>
#include <GL/gl.h>
#include <GL/glu.h> For Apple OSX systems,
#include <GL/glut.h> #include <GLUT/glut.h>
Need to create a Window
OpenGL program is case sensitive. Eg: We need to write GL in capitals
Several system libraries are there…Depends upon the type of computer
we are using. Eg:
- AppleGL (AGL) – For Apple Systems – Prefix agl
- Windows-to-OpenGL (WGL) – For Windows systems
- Presentation Manager to OpenGL (PGL) – for IBM OS/2 - Prefix pgl
87. PRIMITIVE FUNCTIONS
Function names are prefixed with gl and each Component name with a Capital letter
Eg:
glBegin(with set of primitives)
glClear()
glEnd()
glCopyPixel()
glPolygonMode()
glBegin(GL_LINES);
glVertex2i(180,15);
glVertex2i(10,145);
glEnd();
• GL_POINTS
• GL_LINES
• GL_TRIANGLES
• GL_QUADS
Some Primitives are:
88. SYMBOLIC CONSTANTS
• Hundreds of symbolic constants are available in OpenGL
• Written in CAPITAL letters
Eg:
GL_2D
GL_RGB
GL_POLYGON
DATA TYPES
Special built-in data types are there in OpenGL
Eg:
GLbyte
GLshort
GLint
GLfloat
GLdouble
GLboolean
89. OpenGL WINDOW
To create any graphics display/object using OpenGL, we first need to setup a DISPLAY WINDOW
(rectangular area where our picture will be displayed)
100
50
300
400
Monitor Screen
OpenGL Display Window
90. Writing OpenGL Program:
To initialize GLUT:
glutInit(&argc, argv);
To create Display Window:
glutCreateWindow(“My First OpenGL Window”);
What a Display Window is to contain?
glutDisplayFunc(lineSegment);
Display Window is not yet on the screen
All Display Windows we have created are activated by using the following function:
glutMainLoop();
It must be put at the last in the program
argv is a pointer to an array of null terminated strings, and argc
says how large this array is.
These are automatically passed to you when you start your
program and enter main().
argv[0] is a pointer to a string which holds the name of the
executable file, including full path. argv[1] is the first argument
you pass to you program when starting it, and so on.
Like this:
c: est.exe hello world
Then argc=3
argv[0]=“c: est.exe”
argv[1]=“hello”
argv[2]=“world”
91. Positioning a Window
glutInitWindowPosition(50,100);
initial
Specifying the Window Size:
glutInitWindowSize(400, 300);
For Display Window, we can choose a background colour (eg. White) :
glClearColor(1.0, 1.0, 1.0, 0);
R G B Alpha Value
0 = Totally Transparent Object
1 = Opaque Object
To actually put display
window on screen with
the colour values, we
need to invoke one more
function
glClearColor(GL_COLOR_BUFFER_BIT);
glClearColor specifies the red, green, blue, and alpha values used by glClear to clear the color buffers.
Values specified by glClearColor are clamped to the range [0,1]01.
92. Setting Object Color:
glColor3f(0.0, 0.4, 0.2);
indicates that we are specifying 3 RGB colour components using floating point values
glMatrixMode(GL_PROJECTION);
gluOrtho2D(0.0, 200.0, 0.0, 150. 0);
OpenGL works for 3D
To Display Line Segment (say) in 2D, we still have to use 3D viewing operations.
For this, we need following two functions:
X Values Y Values
The glMatrixMode function specifies which matrix is the current matrix.
93. #include<iostream>
#include<GL/freeglut.h>
void init()
{ glClearColor(0.0, 0.0, 0.0, 0.0); // Set display window colour to white
glMatrixMode(GL_PROJECTION); // Set Projection Parameters
gluOrtho2D(0.0, 250.0, 0.0, 150.0); //Values of xMin, yMin, xMax, yMax
}
void Line()
{ glClear(GL_COLOR_BUFFER_BIT);
glColor3f(1.0, 1.0, 1.0);
glBegin(GL_LINES);
glVertex2i(180,15);
glVertex2i(10,145);
glEnd();
glFlush();
}
int main(int argc, char **argv)
{
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(400, 300);
glutInitWindowPosition(50, 100);
glutCreateWindow(“Line Drawing");
init();
glutDisplayFunc(Line);
glutMainLoop();
return 0;
}
OpenGL Program to plot a line
Output
Bit mask to select a single
buffered window.
Bit mask to select an
RGBA mode window.
