CS 354Project 1 Discussion

Mark KilgardUniversity of TexasFebruary 16, 2012

CS 354 2

Today’s material

In-class quiz Lecture topics

Project 1 details Didn’t get to, next time: Understanding color

Assignment Reading

Chapter 6, pages 344-349

You should be working on Project #1 Due Tuesday, February 21

CS 354 3

My Office Hours

Tuesday, before class Painter (PAI) 5.35 8:45 a.m. to 9:15

Thursday, after class ACE 6.302 11:00 a.m. to 12:00

CS 354 4

Last time, this time

Last lecture, we discussed Object representation Blending colors Compositing images

This lecture Project 1 hints Color representations

CS 354 5

Daily Quiz

1. A “straight” ornon-pre-multiplied RGBA color is (0.5, 0.8, 1.0, 0.1). Convert the color into its pre-multiplied alpha form.

2. The “src_over” blend function computes

srcColor + (1-srcAlpha)*dstColor.

If the pre-multiplied RGBA srcColor and dstColor values are respectively (0.25, 0.4, 0, 0.5) and (1.0, 0.8, 0.4, 1.0), what is the result of blending these 2 colors?

3. Multiple choice: Which pair of glBlendFunc parameters corresponds to src_over:

a) GL_NONE, GL_ONE

b) GL_DST_ALPHA, GL_ONE_MINUS_DST_ALPHA

c) GL_ONE, GL_ONE_MINUS_SRC_ALPHA

d) GL_SRC_ALPHA, GL_DST_ALPHA

e) GL_ONE, GL_ONE

On a sheet of paper• Write your EID, name, and date• Write #1, #2, #3, followed by its answer

CS 354 6

Project 1

Stuff you should know GLUT callbacks Facet normals Vertex normals Simple lighting Wireframe

CS 354 7

Project 1 Reference Implementation

With cessna.obj model loaded

CS 354 8

GLUT Callbacks

GLUT programs respond to input events by calling registered callbacks Callbacks are registered by passing a

function pointer to a glutCallbackFunc routine Example: glutKeyboardFunc(keyboard)

Types of callbacks to register Window events: reshape (resize), display Input events: key presses, mouse up/down

presses, mouse motion

CS 354 9

Display Callback

Register with glutDisplayFunc(display) Prototype: void display()

Takes no arguments Simply called when the window need to be

redisplayed

Reasons for a display callback to be called Window appears for the first time Window is exposed when previously obscured by

other windows or iconified glutPostRedisplay has been called

CS 354 10

Reshape Callback

Register with glutReshapeFunc(reshape) Prototype: void reshape(int w, int h)

‘w’ is new window width ‘h’ is new window height

Reasons for a reshape callback to be called Window is created/sized for the first time Window manager changes the window size

If you don’t register a reshape callback GLUT registers a simple one for you that

simply calls glViewport(0,0,w,h)

CS 354 11

Keyboard Callback

Register with glutKeyboardFunc(keyboard) Prototype:

void keyboard(unsigned char c, int x, int y) ‘c’ is an ASCII character for the pressed key Shift automatically makes capital letters (x,y) are 2D position of mouse at key press

Upper-left window origin convention

Typical implementation Uses switch statement to handle each key Toggling state variables is common

Example: case ‘w’: wireframe = !wireframe; glutPostRedisplay(); break;

CS 354 12

Rule for Redrawing in GLUT Avoid ever drawing from a GLUT callback!

Instead call glutPostRedisplay() instead Rationale

Several events may all need a redraw But you don’t want to draw in response to every single event Consider mouse motion events where hundreds might arrive within a

second Symptom of doing it wrong: your application has noticeable “redrawing” lag

Instead make your display callback draw based on the current state Then update that state in your callback And post a redisplay with glutPostRedisplay So when events are exhausted, redraw occurs best on cumulative

state updates from all processed events It is OK to make OpenGL state changes from callbacks

Example: ‘b’ changes the clear color to blue might directly call glClearColor(0,0,1,0) and then glutPostRedisplay()

CS 354 13

Mouse Button Callback

Register with glutMouseFunc(mouse) Prototype:

void mouse(int button, int state, int x, int y) ‘button’ is GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, or

GLUT_RIGHT_BUTTON ‘state’ is GLUT_DOWN or GLUT_UP (x,y) is the cursor position for the button even

Upper-left origin convention! Details

If you get a GLUT_DOWN event, you will get the matching GLUT_UP event

But the (x,y) position of each may be different if the mouse has moved during the down/up interval

You can use glutGetModifiers() to determine if modifier keys such as Shift, Ctrl, or Alt are held down during the button press

Test the return value against GLUT_ACTIVE_CTRL, GLUT_ACTIVE_SHIFT, and GLUT_ACTIVE_ALT bits

CS 354 14

Mouse Motion Callback

Register with glutMotionFunc(motion) Prototype: void motion(int x, int y)

(x,y) is the window space position of cursor Upper-left origin convention

Details Lots of callbacks are generated by mouse motion

Since mouse motion is very high freqency Only motion when a button is pressed is reported

Use glutPassiveMotionFunc(passiveMotion) Prototype: void passiveMotion(int x, int y)

This is a separate callback because most applications only want to track mouse motion when a button is pressed (dragging)

CS 354 15

Animation Callbacks

Register glutIdleFunc(idle) Prototype: void idle() Gets called repeatedly when no other events to

process Example:

void idle() { rotate += 0.05; glutPostRedisplay(); }

Register glutTimerFunc(timer, ms, value) Prototype: void timer(int value) Calls timer once after ms milliseconds have passed

and passes the registered value to the timer function

CS 354 16

Common Mistakes

Enabling depth testing glEnable(GL_DEPTH_TEST) But forgetting to clear the depth buffer with

glClear(GL_DEPTH_BUFFER_BIT | mask) Meaning to “set” the projection or modelview matrix

But forgetting to glLoadIdentity() So commands such as gluLookAt, glScalef, etc. concatenate

with current matrix Symptom: first draw works, but subsequent ones don’t

Wanting to set the modelview matrix but Having glMatrixMode last set to GL_PROJECTION

So you are changing the projection matrix instead (yikes) Call glMatrixMode(GL_MODELVIEW) just to be sure

CS 354 17

Common Mistakes

Problems resizing the window Test that window resizing works… Remember to adjust projection matrix based on the

new window’s aspect ratio gluPerspective is helpful Remember to convert integer window & height values to

floating-point to compute aspect ratio Otherwise 640/480 is 1 (not 1.333) in integer math

If you provide your own reshape callback, you are responsible for calling glViewport

Typically glViewport(0,0, width, height) If you don’t call glReshapeFunc, GLUT makes the viewport

call for you But not if there’s a reshape callback registered

CS 354 18

Common Mistakes

Nothing drawing but black? Try changing the clear color to non-black In case you are actually drawing black-on-black

Still nothing rendering? Query back your modelview and projection matrices

Query and print their elements; do they look reasonable

Use GLfloat mv[16], p[16]; glGetFloatv(GL_MODELVIEW_MATRIX, &mv); glGetFloatv(GL_PROJECTION_MATRIX, &p); Keep in mind matrices are returned column-major!

CS 354 19

Common Mistakes

Your polygon winding might be reversed If this is the case, then back-face culling ends

up culling front-facing triangles Try glDisable(GL_CULL_FACE) if you’ve tried to

enable back-face culling Use the glFrontFace call to reverse the winding

order Example: glFrontFace(GL_CW); // clockwise Initial setting: glFrontFace(GL_CCW); // counter-clockwise

Or better yet, fix your vertex winding order yourself

CS 354 20

Visualizing Normal Vectors

Per-vertex normalsPer-face normals

CS 354 21

Combined Normal Vectors Visualized

CS 354 22

Per-face and Per-vertex Normals

Some Wavefront OBJ files contain per-vertex normals Not any of Project 1’s sample models though

You need to render normals So you need to compute normals Facet normals are normalized vector computed as

(p1-p0)×(p2-p0) Where × is the vector cross product operator

Per-vertex normals Find faces that share a vertex Then average the facet normals for the polygons

sharing the vertex Re-normalize the average

CS 354 23

Smoothness of Per-vertex Normals

General approach Average facet normals using the vertex

But sometimes facet normals have large variations May indicate a “crease” or “hard edge” within the

mesh Cluster facet normals; average just clustered normals

Vertex position is replicated, with each replicate having its distinct per-vertex normal

Smoothing is beyond the scope of Project 1 But worth appreciating the problem This is why modeling tools typically provide/generate

per-vertex normals

CS 354 24

Smoothing or Not

facet normals

averagedper-vertexnormals

left = smooth

right seam = faceted

CS 354 25

Different Smoothings

4,313 normals

10,187 normals

25,067 normals

CS 354 26

Simple Lighting

When you compute your normals Try sending them to OpenGL with glNormal3f

Then you can enable simple per-vertex lighting glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); glEnable(GL_COLOR_MATERIAL);

So current color sent by glColor3f acts as the diffuse material color

CS 354 27

Simple Lighting Model

Inputs Surface normal vector N, normalized Light vector L, also normalized

We can use the eye-vector as a proxy for a light source positioned “at the eye”

Even simpler, just use (0,0,1) meaning the +Z axis Remember we are looking “down” the –Z axis

Lighting Computation vertexColor = max(L • N, 0)*materialColor

NL

θ cosine(θ) =dot(L,N)when L and N are normalized

CS 354 28

Wireframe and Point Modes

glPolygonMode tells OpenGL how to rasterized polygons GL_FILL – filled, the default GL_LINE – connect vertices with lines, essentially wireframe GL_POINT – draw polygon vertices

Examples glPolygonMode(GL_FRONT_AND_BACK, GL_LINE) glPolygonMode(GL_FRONT_AND_BACK, GL_FILL)

Disadvantage If two triangles share an edge, that edge will be “double drawn” as two

lines Can be more efficient to draw lines with glBegin(GL_LINES) to avoid

generating redundant lines Similar for points – triangles sharing vertices will multiply rasterize

those points Advantages

You can have different modes for front- and back-facing geometry Advanced: polygon mode rendering supports polygon offset

CS 354 29

Setting Up Your Matrices

Set your projection matrix Use gluPerspective or glFrustum

Be sure to use glMatrixMode(GL_PROJECTION) then glLoadIdentity first

This is naturally done in your reshape callback Generally, the projection matrix only changes when the

window’s aspect ratio changes Set your modelview matrix

Use a gluLookAt call Be sure to use glMatrixMode(GL_MODELVIEW) then

glLoadIdentity first Your mouse movement should change the eye (or center of

view) position Based on the bounding box of the model (you compute this),

you’ll need to glScalef and glTranslatef the model into your world-space coordinate system defined by gluLookAt

CS 354 30

glFrustum vs. gluPerspective

glFrustum left,right; bottom,top;

near,far

gluPerspective fieldOfView;

aspectRatio; near,far

0100

200

000

000

farnear

nearfar

farnear

nearfarf

oaspectRati

f

0100

200

02

0

002

nearfar

nearfar

nearfar

nearfarbottomtop

bottomtop

bottomtop

near

tleftright

lefright

leftright

near

f=cotanent(fieldOfView/2)

CS 354 31

Compositing

Blending operates on pixels Compositing operates on images

Composite image A & image B

CS 354 32

Intra-pixel Regions for Compositing

A ∩ B

A ∩ ~B

~A ∩ B

~A ∩ ~B Source: SVG Compositing Specification

CS 354 33

Compositing Digital Images

Classic 1984 SIGGRAPH paper introduces compositing operators Porter and Duff

Porter-Duff Composite Operators Rca = f(Ac,Bc)×Aa×Ba + Y×Ac×Aa×(1-Ba) + Z×Bc×(1-Aa)×Ba Ra = X×Aa×Ba + Y×Aa×(1-Ba) + Z×(1-Aa)×Ba

CS 354 34

Porter-DuffComposite Operators

CS 354 35

Porter & Duff ModesOperation f(Ac,Bc) X Y Z

Clear 0 0 0 0

Src Ac 1 1 0

Dst Bc 1 0 1

Src-Over Ac 1 1 1

Dst-Over Bc 1 1 1

Src-In Ac 1 0 0

Dst-In Bc 0 1 0

Src-out 0 0 1 0

Dst-out 0 0 0 1

Src-atop Ac 1 0 1

Dst-atop Bc 1 1 0

Xor 0 0 1 1

Porter & Duff blend modes

CS 354 36

Porter & Duff Modes ExpandedOperation f(Ac,Bc) X Y Z Blend mode

Clear 0 0 0 0 0

Src Ac 1 1 0 Aca

Dst Bc 1 0 1 Bca

Src-Over Ac 1 1 1 Aca+(1-Aa)×Bca

Dst-Over Bc 1 1 1 Bca+(1-Ba)×Aca

Src-In Ac 1 0 0 Aca×Ba

Dst-In Bc 0 1 0 Bca×Aa

Src-out 0 0 1 0 (1-Ba)×Aca

Dst-out 0 0 0 1 (1-Aa)×Bca

Src-atop Ac 1 0 1 Aca×Ba+(1-Aa)×Bca

Dst-atop Bc 1 1 0 (1-Ba)×Aca+Aa×Bca

Xor 0 0 1 1 Aca×(1-Ba)+(1-Aa)×Bca

Uncorrelated blend mode expansion of Porter & Duff blend modes

CS 354 37

Porter & Duff for glBlendFuncOperation Blend mode srcFactor dstFactor

Clear 0 GL_ZERO GL_ZERO

Src Aca GL_ONE GL_ZERO

Dst Bca GL_ZERO GL_ONE

Src-Over Aca+(1-Aa)×Bca GL_ONE GL_ONE_MINUS_SRC_ALPHA

Dst-Over Bca+(1-Ba)×Aca GL_ONE_MINUS_DST_ALPHA

GL_ONE

Src-In Aca×Ba GL_DST_ALPHA GL_ZERO

Dst-In Bca×Aa GL_ZERO GL_SRC_ALPHA

Src-out (1-Ba)×Aca GL_ONE_MINUS_DST_ALPHA

GL_ZERO

Dst-out (1-Aa)×Bca GL_ZERO GL_ONE_MINUS_SRC_ALPHA

Src-atop Aca×Ba+(1-Aa)×Bca GL_DST_ALPHA GL_ONE_MINUS_SRC_ALPHA

Dst-atop (1-Ba)×Aca+Aa×Bca GL_ONE_MINUS_DST_ALPHA

GL_DST_ALPHA

Xor Aca×(1-Ba)+(1-Aa)×Bca GL_ONE_MINS_DST_ALPHA GL_ONE_MINUS_SRC_ALPHA

CS 354 38

Hardware Blending supports all Porter-Duff Blend Modes

Using prior slide’s table Your OpenGL (or Direct3D) program can implement any of

Porter-Duff blend modes Examples

Src-Over glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA)

Dst-In glBlendFuc(GL_ZERO, GL_SRC_ALPHA)

Dst-Atop glBlendFunc(GL_ONE_MINUS_DST_ALPHA, GL_DST_ALPHA)

Conclusion: GPU hardware “blend functions” can configure all the sound Porter-Duff compositing algebra blend modes Compositing algebra theory “maps” well to GPU functionality Assumption: using pre-multiplied alpha colors

CS 354 39

Additional Blend Modes

Additional blend modes Since Porter-Duff’s composite operators,

Adobe introduced further artistic blend modes Part of PhotoShop, Illustrator, PDF, Flash,

and other standards Part of the vocabulary of digital artists now

Examples ColorDodge, HardLight, Darken, etc.

Define with alternate f(Ac,Bc) function f should compute “weight” in [0,1] range

CS 354 40

Aliased

Jagged

artifacts

CS 354 41

Multi-sample8x

Smoother

appearance

CS 354 42

Multi-sample Coverage Positions

4x jittered1x

(aliased)

8x jittered

4x orthogonal

CS 354 43

Requesting Multisampling in GLUT

glutInitDisplayMode(mask | GLUT_MULTISAMPLE) Or glutInitDisplayString(“rgb double depth samples=4”);

Aliased 8x

multisampling

CS 354 44

Color Perception

Physics of light Light = electromagnetic radiation Continuous range of frequencies

Color is something perceived Human visual system = trichromatic

Visible light is perceived as 3-dimensional Intensity of perceived as luminance or brightness

CS 354 45

Trichromatic Biological Basis

Human retina has three types of cones for sensing color

CS 354 46

Color Blindness

Color isn’t perceived the same by everyone

Top 25, 45, 8; Bottom 6, 56

CS 354 47

XYZ Color Space

Reference system in which all visible pure spectral colors can be produced

Theoretical systems as

there are no corresponding

physical primaries Standard reference system

CS 354 48

Real Color Spaces

Most correspond to real primaries National Television Systems Committee

(NTSC) RGB matches phosphors in CRTs LCDs mimic the CRT color space

Film both additive (RGB) and subtractive (CMY) for positive and negative film

Print industry CMYK (K = black) K used to produce sharp crisp blacks Example: ink jet printers

CS 354 49

Color Gamuts

spectral colors printer colors

CRT colors

350 nm

750 nm

600 nm

producible color on CRT but not on printer

producible color on both CRT and printer

unproducible color

CS 354 50

YIQ Color Space for TV

NTSC Transmission Colors Here Y is the luminance

Arose from need to separate brightness from chromatic information in TV broadcasting

Note luminance shows high green sensitivity

B

G

R

0.3110.523-0.212

0.321-0.275-0.596

0.1140.5870.299

Q

I

Y

CS 354 51

Next Lecture

Color representation What ways can quantitatively represent color? As usual, expect a short quiz on today’s lecture

Assignments Reading

Chapter 7, pages 404-420

Work on Project #1 Building a 3D object model loader Due Tuesday, February 21