COS 397 Computer Graphics
Svetla Boytcheva
AUBG, Spring 2013
Lecture 1
Coordinate Systems
Outline
•
•
•
•
•
•
Course Organization
Introduction
Image Formation
Vector vs. Raster Graphics
Graphics Formats
Coordinate Systems
4/9/2015
Course Organization
• Lectures - Tuesday
• Practical Sessions - Friday
• Course Materials
– dotLRN
• Assignments
–
–
–
–
–
4/9/2015
Course Projects
Homework Assignments (4)
Quizzes (4)
MidTerm Exam
Final Exam
Course Materials
• dotLRN
• Used resources:
– “Fundamentals of Computer Graphics” by Peter Shirley, Michael
Ashikhmin and Steve Marschner, Publisher: A K Peters; 3rd
Revised edition
– “Interactive Computer Graphics: A Top-Down Approach Using
OpenGL” by Edward Ange, Publisher: Addison Wesley; 5th edition
– "Computer Graphics with Open GL" by Donald D. Hearn , M.
Pauline Baker and Warren Carithers. Publisher: Prentice Hall; 4th
edition
– "Interactive Computer Graphics: A Top-Down Approach with
Shader-Based OpenGL" by Edward Angel and Dave Shreiner
.Publisher: Addison-Wesley; 6th edition
– “OpenGL Programming Guide: The Official Guide to Learning
OpenGL, Versions 3.0 and 3.1” (7th Edition) by Dave Shreiner
4/9/2015
Software
• C++ Programming Language
• Code Blocks
– http://www.codeblocks.org/
• http://www.codeblocks.org/downloads/binaries
• Multiplatform IDE, GNU GCC Compiler, Debugger
– Windows 2000/XP/Vista/7//8
• codeblocks-12.11mingw-setup.exe
– Linux 32-bit
– Linux 64-bit
– Mac OS X
• Free
• OpenGL Library
– Java
– C++
– Objective C, C#
4/9/2015
OpenGL
• What is OpenGL?
– Provides lower-level graphics API (Application Programming
Interface)
• Programming Languages
– Java
– C++
– Objective C, C#
• Versions
– OpenGL 3.0
– Mac only supports 3.2
– We will need minimal functionality provided by OpenGL 2.0
4/9/2015
OpenGL in C++
• Cross-Platform
– GLFW  up to date
– Free GLUT not compatible with mac
– GLUT  outdated
• Native
– Windows: WGL
– Linux: GLX
– Mac: CGL (NSOpen GL with Object C++)
4/9/2015
OpenGL in Java
• Java OpneGL (JOGL)
– Fits wit SWING /ATW libraries
– More complex
– Last stable version is obsolete
• Lightweight Java Game Library (LWJGL)
– Minimalistic and easy to use
– Stable and well maintained
4/9/2015
GLFW
• Minimalistic and easy to use
• Stable and well maintained
• Download:
– http://www.glfw.org/
– Version 2.7.7
– Binary archive for 32-bit Windows
• Rename folder “lib-mingw” to “lib”
• More about settings – next class
4/9/2015
The Camera
4/9/2015
The Image Plane
4/9/2015
Polygonal Models
4/9/2015
Pixel Discretization
4/9/2015
Color Scheme
• RGB
– Red
– Green
– Blue
• CMYK
– Cyan
– Magenta
– Yellow
– Black
4/9/2015
RGB
Yellow
(255,255,0)
Green
(0,255,0)
Red
(255,0,0)
Cyan
(0,255,255)
Blue
(0,255,0)
Red
(255,0,0)
Magenta
(255,0,255)
Raster Rendering
For each polygon:
Compute illumination
Project to image plane
Fill in pixels
4/9/2015
Vector v. Raster Graphics
Vector Graphics
• Plotters, laser displays
• “Clip art,” illustrations
• PostScript, PDF, SVG
• Low memory (display list)
• Easy to draw line
• Solid/gradient/texture fills
4/9/2015
Raster Graphics
• TV’s, monitors, phones
• Photographs
• GIF, JPG, etc.
• High memory (frame
buffer)
• Hard to draw line
• Arbitrary fills
Graphics
• Vector
– smooth continuous primitives
• Raster
– Discrete primitives (usually in grid)
• Advantages
• Disadvantages
4/9/2015
Example
• Spasm, convulsion (jap. Keiren)
4/9/2015
Vector After Scaling
4/9/2015
Raster After Scaling
4/9/2015
Vector Graphics
• Advantages
– Zoom Precision
– Ideal for graphics and text
• Disadvantages
– Not suitable for compound objects with many details/parts
– Nightmare for photorealistic images
4/9/2015
Raster Graphics
• Advantages
– Do not depend on the amount of content
– Ideal for photorealistic images
• Disadvantages
– Problem with oblique lines
– Rough result in scaling
– Inconvenient for graphics and text
4/9/2015
Rasterization
• Vector Data transformation to Raster Data
– Before the output to the raster device
– Rasterization should be made as later as possible in graphics
processing
• Rule
– Every image that you can see on PC or mobile device display is
raster graphics
Vectorization
• Raster Data transformation to Vector Data
– In case we need vector processing (for example, image recognition,
edges …)
– Heavy algorithms (time, efforts, resources consuming), sometimes
bad and unusable results
– Vectorization is applied only if there is not available alternative
solution
Vector – Raster Transformation
Vector
processing
Vector
Data
Vector
Device
4/9/2015
Raster
processing
rasterization
Raster
Data
Raster
Device
Raster Images
• (Spatial) Resolution
– horizontal pixels x vertical pixels
• Image Aspect Ratio
– width/height
– HDTV = 1920/1080 = 1.78 = 16:9
• Pixel Aspect Ratio
– (H/V) / (height/width) = (H/V) x (1/A)
– Square pixels are 1:1
• Color resolution
– Bits per pixel
– 24 bpp = 8 bits red, green and blue
– 8 bpp = 3 bits red, green, 2 bits blue
4/9/2015
Image File Formats
Format Fidelity
Complexity
Use
BMP
Uncompressed
Simple, Microsoft
Easy to process,
windows icons
PPM
Uncompressed
Simple, open,
dated
Easy to process, unix
icons
GIF
Compressed
Lossless (LZW)
Only 256 colors
Charts, graphs,
diagrams, text
JPG
(Exif)
Compressed Lossy
(DCT)
Blocky, edges ring Photographs
TIFF
Compressed
Lossless (LZW)
Flexible but
complex structure
Fax, scanning,
artwork
PNG
Compressed
Lossless (zlib)
Flexible but
complex structure
Distributing images
SVG
Uncompressed
Flexible
Vector/Line Art
4/9/2015
Color Palettes
• Store all RGB colors used in
any image pixel in a table
• Store index to color in each
pixel to compress data size
=
4/9/2015
97 97
217
97 97
217
97 97
217
97 97
217
97 97
217
97 97
217
97 97
217
97 97
217
255
153 0
97 97
217
97 97
217
97 97
217
255
153 0
97 97
217
97 97
217
255
153 0
255
153 0
255
153 0
255
153 0
255
153 0
97 97
217
97 97
217
255
153 0
97 97
217
97 97
217
97 97
217
255
153 0
97 97
217
97 97
217
97 97
217
97 97
217
97 97
217
97 97
217
97 97
217
97 97
217
0
0
0
or 0
0
0
0
0
1
0
0
0
1
0
0
1
1
1
1
1
0
0
1
0
0
0
1
0
0
0
0
0 where:
0
0=
0
1=
0
Viewing
3D Lighting
Information
3D Geometric
Models
Rendering
3D Animation
Definition
Texture
Information
4/9/2015
Image Storage
and Display
Coordinate systems
• Cartesian
• Polar
• Spheric
4/9/2015
Cartesian coordinate system
• (x, y, z) – 3D Point position
• (x, y) – 2D Point position
4/9/2015
3-D Coordinates
• Points represented
by 4-vectors
• Need to decide
orientation of
coordinate axes
Right Handed Coord. Sys.
z
x
 y
 
z
1 
 
y
x
Left Handed Coord. Sys.
z
+z (lhc)
y
x
+z (rhc)
y
4/9/2015
x
Algorithm “for dummies”
• Point all the axises
– Turn hands until they guess
– With which hand do, this is the system
Y Z
X
4/9/2015
Z Y
X
Снимка: FreeDigitalPhotos.net
What is the orientation of is this system?
Z
X
Y
4/9/2015
2-D Points
 .4 
 .8 
 
(1,1)
• Represents points and
vertices as column vectors:
x
 y
 
(-1,-1)
4/9/2015
2-D Points
(1,1)
• Represents points and
vertices as column vectors:
• Transform polygonal object
by transforming its vertices
x
 y
 
(-1,-1)
4/9/2015
Polar coordinate system
O
α
x
y
r
Y
P
x  r cos
x  r cos

y  r cos(90   )
y  r sin 
4/9/2015
X
2-D Rotation
• Pick a point (x,y)
• Assume polar coords
x = r cos q, y = r sin q
r 
q 
 
Spherical Coordinate System
P
4/9/2015
Z
r
O
y
Y
z
β
x
α
X
Q
x  OQ cos  (r cos  ) cos
x  r cos cos 
y  OQ sin   (r cos  ) sin 
z  r sin 
 y  r sin  cos 
z  r sin 
4/9/2015
Other Coordinate Systems
4/9/2015
Demo
• Code Blocs + GLFW project
4/9/2015
Readings
– Polar coordinates
http://scidiv.bellevuecollege.edu/dh/ccal/CC9.1.pdf
– Spherical Coordinates
http://mathworld.wolfram.com/SphericalCoordinates.html
4/9/2015
Questions?
4/9/2015