COS 397 Computer Graphics

Svetla Boytcheva

AUBG, Spring 2013

Lecture 1

Coordinate Systems

04/19/23

Outline

• Course Organization• Introduction• Image Formation• Vector vs. Raster Graphics• Graphics Formats• Coordinate Systems

Course Organization

• Lectures - Tuesday• Practical Sessions - Friday• Course Materials

– dotLRN

• Assignments– Course Projects– Homework Assignments (4)– Quizzes (4)– MidTerm Exam– Final Exam

04/19/23

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

04/19/23

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#

04/19/23

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

04/19/23

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++)

04/19/23

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

04/19/23

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

04/19/23

The Camera

04/19/23

The Image Plane

04/19/23

Polygonal Models

04/19/23

Pixel Discretization

04/19/23

Color Scheme

• RGB– Red– Green– Blue

• CMYK– Cyan

– Magenta

– Yellow

– Black

04/19/23

RGB

Yellow(255,255,0)

Green(0,255,0)

Cyan(0,255,255)

Blue(0,255,0)

Magenta(255,0,255)

Red(255,0,0)

Red(255,0,0)

Raster Rendering

For each polygon: Compute illumination Project to image plane Fill in pixels

For each polygon: Compute illumination Project to image plane Fill in pixels

04/19/23

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

Raster Graphics

• TV’s, monitors, phones• Photographs• GIF, JPG, etc.• High memory (frame

buffer)• Hard to draw line• Arbitrary fills

04/19/23

Graphics

• Vector– smooth continuous primitives

• Raster– Discrete primitives (usually in grid)

• Advantages• Disadvantages

04/19/23

痙攣Example

• Spasm, convulsion (jap. Keiren)

04/19/23

Vector After Scaling

04/19/23

Raster After Scaling

04/19/23

Vector Graphics

• Advantages – Zoom Precision – Ideal for graphics and text

• Disadvantages– Not suitable for compound objects with many details/parts– Nightmare for photorealistic images

04/19/23

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

04/19/23

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

Raster Raster DataData

Raster Raster DataData

Vector Vector DeviceDeviceVector Vector DeviceDevice

Vector Vector DataData

Vector Vector DataData

Raster Raster DeviceDeviceRaster Raster DeviceDevice

Vector Vector processingprocessing

Vector Vector processingprocessing

Raster Raster processingprocessing

Raster Raster processingprocessing

rasterizationrasterizationrasterizationrasterization

rasterization

rasterization

rasterization

rasterization

04/19/23

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

04/19/23

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

04/19/23

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

97 97 217

97 97 217

97 97 217

97 97 217

97 97 217

97 97 217

255 153 0

97 97 217

255 153 0

255 153 0

97 97 217

97 97 217

97 97 217

97 97 217

255 153 0

97 97 217

97 97 217

97 97 217

97 97 217

255 153 0

97 97 217

97 97 217

97 97 217

97 97 217

255 153 0

97 97 217

255 153 0

97 97 217

255 153 0

255 153 0

97 97 217

97 97 217

97 97 217

97 97 217

97 97 217

or=

0 0 0 0 00 1 1 1 00 0 1 0 00 0 1 0 00 0 1 0 00 1 1 1 00 0 0 0 0

1=

0=

where:

04/19/23

Viewing

04/19/23

3D Geometric Models

3D Lighting Information

3D Animation Definition

Rendering

Texture Information

Image Storage and Display

Coordinate systems

• Cartesian • Polar• Spheric

04/19/23

Cartesian coordinate system

• (x, y, z) – 3D Point position• (x, y) – 2D Point position

04/19/23

3-D Coordinates

• Points representedby 4-vectors

• Need to decideorientation ofcoordinate axes

1

x

y

z

y

z

x

x

z

y

Right Handed Coord. Sys.

Left Handed Coord. Sys.

xy

+z (rhc)

+z (lhc)

04/19/23

Algorithm “for dummies”

• Point all the axises– Turn hands until they guess– With which hand do, this is the system

X X XX

Z ZZ ZY YY Y

Снимка: FreeDigitalPhotos.net04/19/23

What is the orientation of is this system?

ZZ

YYXX

04/19/23

2-D Points

• Represents points andvertices as column vectors:

(-1,-1)

(1,1)

.4

.8

x

y

04/19/23

2-D Points

• Represents points andvertices as column vectors:

• Transform polygonal object by transforming its vertices

(-1,-1)

(1,1)

x

y

04/19/23

αα

rr

PP

OO

yy

xx

sin

cos

)90cos(

cos

ry

rx

ry

rx

XX

YY

Polar coordinate system

04/19/23

2-D Rotation

• Pick a point (x,y)• Assume polar coords

x = r cos , y = r sin

r

Spherical Coordinate System

04/19/23

PP

αα

rr

OOyy xx

ββzz

QQ

sin

cossin

coscos

sin

sin)cos(sin

cos)cos(cos

rz

ry

rx

rz

rOQy

rOQx

YY

ZZ

XX

04/19/23

Other Coordinate Systems

04/19/23

Demo

• Code Blocs + GLFW project

04/19/23

Readings

– Polar coordinateshttp://scidiv.bellevuecollege.edu/dh/ccal/CC9.1.pdf

– Spherical Coordinates http://mathworld.wolfram.com/SphericalCoordinates.html

04/19/23

Questions?

04/19/23