cs 354 project 1 discussion
DESCRIPTION
CS 354 Computer Graphics University of Texas, Austin February 16, 2012TRANSCRIPT
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