7/28/2019 cg-raster

1/72

1/2/2013 4:42:02 PM cg-raster.ppt 1

Outline

Raster Displays

Image Format

RGB Color

Physics of Color and Color Perception

Advanced topics, will not be on exams

Brief introduction to openGL

Read 3.1, 3.2, 3.3, 3.4 (Optional Chapter 21)

7/28/2019 cg-raster

2/72

1/2/2013 4:42:02 PM cg-raster.ppt 2

Milestones of this Class

MilestonesDue Date

CAP4730

Due Date

CAP5726

Programming Project 1 February 22 February 15

Programming Project 2 March 29 March 15

Midterm Exam March 6 March 6

Programming Project 3 April 26 April 5

Programming Project 4 Optional/April26

April 26

Final Exam May 3 May 3

7/28/2019 cg-raster

3/72

1/2/2013 4:42:02 PM cg-raster.ppt 3

Block Diagram of a Raster Display

Most computer graphics images are shown tothe user on a raster display

7/28/2019 cg-raster

4/72

1/2/2013 4:42:02 PM cg-raster.ppt 4

Display Process

7/28/2019 cg-raster

5/72

1/2/2013 4:42:02 PM cg-raster.ppt 5

Video Monitor Displays - CRTs

frame

buffer(6 planes)

DAC's

scan controllerx

y

y

x

deflectioncoils

electronbeamguns

red

green

bluespot

pixelvalue

7/28/2019 cg-raster

6/72

1/2/2013 4:42:01 PM cg-raster.ppt 6

Video Monitor Displays Flat Panels

Transmissive: LCD: Liquid crystal display

Emissive: Light Emitting Diode (LED)

7/28/2019 cg-raster

7/72

7

Input Devices

Images can also be generated by inputdevices

Commonly used ones are cameras and scanners

Cameras typically use a Bayer mosaic array Some use three separate arrays (3CCD cameras)

Scanners use a moving 1-D array of sensors

We will not go into details of cameras andscanners beyond what we need for this class.

7/28/2019 cg-raster

8/72

1/2/2013 4:42:01 PM cg-raster.ppt 8

An Abstract Model of Displays and Input Devices

We assume that the pixels are laid out in arectangular array

It is also called a raster

Adopted convention in the textbook For a display with nx columns and ny rows of pixels,

the bottom-left element pixel is (0, 0) and the top-right

pixel is (nx-1, ny-1)

A pixel is indexed by (x, y), indicating the column androw of the pixel

7/28/2019 cg-raster

9/72

1/2/2013 4:42:01 PM cg-raster.ppt 9

Example

7/28/2019 cg-raster

10/72

1/2/2013 4:42:01 PM cg-raster.ppt 10

Digital Images

Mathematically, an image can be representedby a 2-D matrix

Each entry (i, j) represents the pixel value at thecorresponding location

The value of a pixel can have different types,depending on the image types

Binary

Unsigned char

Int

Float

A vector (Color image, for example)

7/28/2019 cg-raster

11/72

1/2/2013 4:42:01 PM cg-raster.ppt 11

Image as a File

Image formats TIFF

GIF

JPEG PBM/PPM

PNG

7/28/2019 cg-raster

12/72

1/2/2013 4:42:01 PM cg-raster.ppt 12

Image as a File cont.

Image file consists of two parts Header

Type of the image

Size of the image Color map (optional)

Data

Uncompressed

Compressed

7/28/2019 cg-raster

13/72

1/2/2013 4:42:00 PM cg-raster.ppt 13

Portable Pixel Map

ASCII PPM format P3

Width

Height

Max

Then pixel values in ASCII

Binary PPM format P6

Width

Height

Max

Then pixel values in binary

7/28/2019 cg-raster

14/72

7/28/2019 cg-raster

15/72

7/28/2019 cg-raster

16/72

7/28/2019 cg-raster

17/72

1/2/2013 4:42:00 PM cg-raster.ppt 17

Image Sequences

There are many different kinds of formats formovie or video sequences

avi

mpeg

An easy way to generate a video sequence is

to concatenate images together

Animated gif is such a format

Can be done easily using convert

7/28/2019 cg-raster

18/72

1/2/2013 4:41:59 PM cg-raster.ppt 18

Visualization of Images

ImageMagick package (installed on linprog) convert

display

animate available at

http://www.simplesystems.org/ImageMagick/

7/28/2019 cg-raster

19/72

1/2/2013 4:41:59 PM cg-raster.ppt 19

RGB Color

In computer graphics colors arecommonly represented by red-green-blue triplet

Called the RGB color space

The range is from zero to one Zero is fully off

One is fully on

In images, the values are often

quantized For example, the most common size is

one byte for each component with 24bits in total

7/28/2019 cg-raster

20/72

1/2/2013 4:41:59 PM cg-raster.ppt 20

RGB Color Representations

True Color Index Color

7/28/2019 cg-raster

21/72

1/2/2013 4:41:59 PM cg-raster.ppt 21

Gamma Correction of Display Devices

Display devices arenon-linear with

respect to input

aintensity)(maximum

intensitydisplayed

7/28/2019 cg-raster

22/72

1/2/2013 4:41:59 PM cg-raster.ppt 22

The Alpha Channel

In computer graphics, we often need topartially overwrite the contents of a pixel

For example, we may want to composite the

foreground and background

This is done using the alpha channel, which

specifies the transparency of the pixel

bf ccc )1(

7/28/2019 cg-raster

23/72

7/28/2019 cg-raster

24/72

7/28/2019 cg-raster

25/72

1/2/2013 4:41:58 PM cg-raster.ppt 25

Physics of GraphicsSource emits photons

Photons travel in a

straight line

When they hit an object, they:

bounce off in a new direction

or are absorbed

And then some

reach the

eye/camera.

7/28/2019 cg-raster

26/72

1/2/2013 4:41:58 PM cg-raster.ppt 26

Physics of Color

Light is electromagnetic radiation Different colors correspond to radiation of different

wavelengths

Intensity of each wavelength specified by amplitude

We perceive electromagneticradiation within the 380-800nm range, the tiny piece of spectrum between infra-red andultraviolet

7/28/2019 cg-raster

27/72

1/2/2013 4:41:58 PM cg-raster.ppt 27

Color and Wavelength

Most light we see is not just a single wavelength,but a combination of many wavelengths like below

This profile is often referred to as a spectrum, or

spectral power distribution.

7/28/2019 cg-raster

28/72

1/2/2013 4:41:58 PM cg-raster.ppt 28

The Eye

7/28/2019 cg-raster

29/72

1/2/2013 4:41:58 PMcg-raster.ppt 29

Color is Human Sensation

Cone and rod receptors in the retina Rod receptor is mostly for luminance perception

Three different types of cone receptors in the

fovea of retina, responsible for colorrepresentation

Each type is sensitive to different wavelengths

7/28/2019 cg-raster

30/72

1/2/2013 4:41:57 PMcg-raster.ppt 30

Cone Receptors

There are three types of cones, referred to asS, M, and L

They are roughly corresponding to blue, green,

and red sensors, respectively Their peak sensitivities are located at

approximately 430nm, 560nm, and 610nm for

the "average" observer

7/28/2019 cg-raster

31/72

1/2/2013 4:41:57 PMcg-raster.ppt 31

Tristimulus Color Theory

The human response to a spectral radiance(light) is given by

)()()()()()( dAlLdAmMdAsS

(see Fig. 21.2)

7/28/2019 cg-raster

32/72

1/2/2013 4:41:57 PMcg-raster.ppt 32

CIE Standard

CIE International

Commission on

Illumination

Human perception

based standard (1931),

established using

color matchingexperiment

7/28/2019 cg-raster

33/72

1/2/2013 4:41:57 PMcg-raster.ppt 33

CIE Standard

CIE tristimulus values

)()(683Z

)()(683)()(683

800

380

800

380

800

380

dAz

dAyYdAxX

(see Fig. 21.5)

7/28/2019 cg-raster

34/72

1/2/2013 4:41:57 PMcg-raster.ppt 34

CIE xyY Space

Chromaticity diagram (thesame color of the varying

intensity, Y, should all end

up at the same point)

ZYX

Yy

ZYX

Xx

7/28/2019 cg-raster

35/72

1/2/2013 4:41:57 PMcg-raster.ppt 35

Color Gamut

The range of color representation of display devices

7/28/2019 cg-raster

36/72

1/2/2013 4:41:56 PMcg-raster.ppt 36

RGB (Monitors)

The de facto standard

7/28/2019 cg-raster

37/72

1/2/2013 4:41:56 PMcg-raster.ppt 37

CMY(K): Printing

Cyan, Magenta, Yellow (Black) CMY(K) A subtractive color model

dye color absorbs reflects

cyan red blue and green

magenta green blue and red

yellow blue red and greenblack all none

7/28/2019 cg-raster

38/72

1/2/2013 4:41:56 PM

cg-raster.ppt 38

HSV

This color model is based on polar coordinates,not Cartesian coordinates

l ( )

7/28/2019 cg-raster

39/72

1/2/2013 4:41:56 PM

cg-raster.ppt 39

Examples (RGB, HSV, Luv)

7/28/2019 cg-raster

40/72

1/2/2013 4:41:56 PM

cg-raster.ppt 40

OpenGL Pipeline

O GL A hit t

7/28/2019 cg-raster

41/72

1/2/2013 4:41:56 PM

cg-raster.ppt 41

OpenGL Architecture

O GL R d

7/28/2019 cg-raster

42/72

1/2/2013 4:41:55 PM

cg-raster.ppt 42

OpenGL as a Renderer

Geometric primitives Points, lines and polygons

Image Primitives

Images and bitmaps

Separate pipeline for images and geometry

Linked through texture mapping

Rendering depends on state

Colors, materials, light sources, etc.

R l t API

7/28/2019 cg-raster

43/72

1/2/2013 4:41:55 PM

cg-raster.ppt 43

Relate APIs

AGL, GLX, WGL Glue between OpenGL and windowing systems

GLU (OpenGL Utility Library)

Part of OpenGL

NURBS, tessellators, quadric shapes, etc

GLUT (OpenGL Utility Toolkit)

Portable windowing API

Not officially part of OpenGL

O GL d R l t d API

7/28/2019 cg-raster

44/72

1/2/2013 4:41:55 PM cg-raster.ppt 44

OpenGL and Related APIs

P li i i

7/28/2019 cg-raster

45/72

1/2/2013 4:41:55 PM cg-raster.ppt 45

Preliminaries

Header Files #include

#include

#include

Libraries

Enumerated types

OpenGL defines numerous types for

compatibility GLfloat, GLint, GLenum, etc.

M k fil

7/28/2019 cg-raster

46/72

1/2/2013 4:41:55 PM cg-raster.ppt 46

Makefile

GLUT B i

7/28/2019 cg-raster

47/72

1/2/2013 4:41:55 PM cg-raster.ppt 47

GLUT Basics

Application Structure Configure and open window

Initialize OpenGL state

Register input callback functions render

resize

input: keyboard, mouse, etc.

Enter event processing loop

GLUT F k

7/28/2019 cg-raster

48/72

1/2/2013 4:41:54 PM cg-raster.ppt 48

GLUT Framework

S l P

7/28/2019 cg-raster

49/72

1/2/2013 4:41:54 PM cg-raster.ppt 49

Sample Program

OpenGL Initiali ation

7/28/2019 cg-raster

50/72

1/2/2013 4:41:54 PM cg-raster.ppt 50

OpenGL Initialization

Set up whatever state youre going to use

GLUT Callback Functions

7/28/2019 cg-raster

51/72

1/2/2013 4:41:54 PM cg-raster.ppt 51

GLUT Callback Functions

Routine to call when something happens

window resize or redraw

user input

animation

Register callbacks with GLU

glutDisplayFunc(display);

glutMouseFunc(mouse);

glutKeyboardFunc(ssd_keyboard);

glutReshapeFunc(reshape); void glutIdleFunc ( void(*)(void) callback )

void glutTimerFunc ( unsigned int msec, void(*)(int

data) callback, int data)

Rendering Callback

7/28/2019 cg-raster

52/72

1/2/2013 4:41:54 PM cg-raster.ppt 52

Rendering Callback

Do all of our drawing hereglutDisplayFunc(display);

void display(void){

Render_SSD(&thescene, &vcamera);

}

Idle Callbacks

7/28/2019 cg-raster

53/72

1/2/2013 4:41:54 PM cg-raster.ppt 53

Idle Callbacks

Use for animation and continuous updateglutIdleFunc( idle );

void idle( void )

{t += dt;

glutPostRedisplay();

}

User Input Callbacks

7/28/2019 cg-raster

54/72

1/2/2013 4:41:53 PM cg-raster.ppt 54

User Input Callbacks

Process user input glutKeyboardFunc( ssd_keyboard );

Elementary Rendering

7/28/2019 cg-raster

55/72

1/2/2013 4:41:53 PM cg-raster.ppt 55

Elementary Rendering

Geometric Primitives Managing OpenGL State

OpenGL Buffers

OpenGL Geometric Primitives

7/28/2019 cg-raster

56/72

1/2/2013 4:41:53 PM cg-raster.ppt 56

OpenGL Geometric Primitives

All geometric primitives are specified by vertices

Simple Example

7/28/2019 cg-raster

57/72

1/2/2013 4:41:53 PM cg-raster.ppt 57

Simple Example

void drawRhombus( GLfloat color[] ){

glBegin( GL_QUADS );glColor3fv( color );

glVertex2f( 0.0, 0.0 );glVertex2f( 1.0, 0.0 );

glVertex2f( 1.5, 1.118 );

glVertex2f( 0.5, 1.118 );

glEnd();

}

OpenGL Command Formats

7/28/2019 cg-raster

58/72

1/2/2013 4:41:53 PM cg-raster.ppt 58

OpenGL Command Formats

Specifying Geometric Primitives

7/28/2019 cg-raster

59/72

1/2/2013 4:41:53 PM cg-raster.ppt 59

Specifying Geometric Primitives

Primitives are specified usingglBegin( primType );glEnd();

primType determines how vertices are combinedGLfloat red, greed, blue;

Glfloat coords[3];glBegin( primType );

for (i =0;i

7/28/2019 cg-raster

60/72

1/2/2013 4:41:52 PM cg-raster.ppt 60

OpenGL Color Model

Both RGBA (true color) and Color Index

Controlling Rendering

7/28/2019 cg-raster

61/72

1/2/2013 4:41:52 PM cg-raster.ppt 61

Controlling Rendering

Appearance From wireframe to texture mapped

OpenGLs State Machine

7/28/2019 cg-raster

62/72

1/2/2013 4:41:52 PM cg-raster.ppt 62

OpenGL s State Machine

All rendering attributes are encapsulatedin the OpenGL State

Rendering styles

Shading Lighting

Texture mapping

Manipulating OpenGL State

7/28/2019 cg-raster

63/72

1/2/2013 4:41:52 PM cg-raster.ppt 63

Manipulating OpenGL State

Appearance is controlled by current statefor each ( primitive to render ) {

update OpenGL state

render primitive

}

Manipulating vertex attributes is most commonway to manipulate state glColor*() / glIndex*()

glNormal*()

glTexCoord*()

Controlling Current State

7/28/2019 cg-raster

64/72

1/2/2013 4:41:52 PM cg-raster.ppt 64

Controlling Current State

Setting StateglPointSize( size );

glLineStipple( repeat, pattern );

glShadeModel( GL_ SMOOTH ); Enabling Features

glEnable( GL_ LIGHTING );

glDisable( GL_TEXTURE_2D );

Transformations in OpenGL

7/28/2019 cg-raster

65/72

1/2/2013 4:41:52 PM cg-raster.ppt 65

Transformations in OpenGL

Modeling Viewing

orient camera

projection Animation

Map to screen

Coordinate Systems and Transformations

7/28/2019 cg-raster

66/72

1/2/2013 4:41:52 PM cg-raster.ppt 66

Coordinate Systems and Transformations

Steps in Forming an Image Specify geometry (world coordinates)

Specify camera (camera coordinates)

Project (window coordinates)

Map to viewport (screen coordinates)

Each step uses transformations

Every transformation is equivalent to a change

in coordinate systems

Transformation Pipeline

7/28/2019 cg-raster

67/72

1/2/2013 4:41:51 PM cg-raster.ppt 67

Transformation Pipeline

glOrtho

7/28/2019 cg-raster

68/72

1/2/2013 4:41:51 PM cg-raster.ppt 68

glOrtho

For example, glOrtho specifies a transformation matrix

Common Transformation Usage

7/28/2019 cg-raster

69/72

1/2/2013 4:41:51 PM cg-raster.ppt 69

Common Transformation Usage

Example ofresize() routine restate projection & viewing transformations

Usually called when window resized

Register a callback forglutReshapeFunc()

Aspect Ratio

7/28/2019 cg-raster

70/72

1/2/2013 4:41:51 PM cg-raster.ppt 70

Aspect Ratio

openGL Usage in This Class

7/28/2019 cg-raster

71/72

1/2/2013 4:41:47 PM cg-raster.ppt 71

openGL Usage in This Class

We will use some basic openGL functions toavoid handling of windows

The openGL functions you can use will be

specified in the programming assignments

Summary

7/28/2019 cg-raster

72/72

Summary

Abstractly, we can treat a monitor (a displaydevice) as an image as they are equivalent to us

Color and its perception involve complex

processes

Physics of light

Color perception and manipulation

In this class, we will use some basic openGL

functions