e26 f06 lecture #1 - colby...
TRANSCRIPT
E26 F06 Lecture #1
Student introductions
• name & major, color, if you could make a picture...
Graphics is...
• What is Computer Graphics?• 2-D shapes and shape manipulation• Drawing programs• GUIs• Generating pictures of 3-D scenes• Animation• Modeling• Design• Training• Visualization
Syllabus
• http://www.palantir.swarthmore.edu/maxwell/classes/e26• web page• grading• portfolio• assignments
Representing images and colors
What is color?• color is a perception• the perception is caused by EM radiation• different spectra of wavelengths create different perceptions of color• color is also perceived differently depending upon context (read Purves article)
How do we sense color?• We sample the spectrum of wavelengths using four filters roughly corresponding to red
energy, green energy, blue energy, and total energy (convolution = multiplication in fre-quency domain)
How do we generate color with a computer?• We use the three primary additive colors (red, green, blue) to generate arbitrary colors• The human visual system integrates the three primaries to create the single color
How do we represent colors with a computer?• We use the three primaries RGB• There are other color spaces we can use, like HSI, which can be easier to specify colors• We want to represent different levels of the primaries, so we need a certain number of val-
ues for each primary (1, 5/6, 8, 16)• In general we will be using 8-bits per color per pixel, with a range from 0 to 255
How do we represent pictures as files?• We need to store the information, which may include colors, but may also include lines,
points, polygons, text, or other geometric entities• Raster image representations: TIFF, GIF, JPG, PPM, RLE, PNG• Element list representations: Apple PICT, SGI Open Inventor• Graphical language representation: PS
Practical stuff: reading and writing images
TIFF library installed everywhere. PPM tools anywhere.
Two routines to read and write an image: • readRGB_TIFF.c: routine is image = tiff_read2raster(filename, rows, cols)
• Note the INTEL flag that changes the ordering of bytes• writeRGB_TIFF.c: routine is tiff_raster2file(filename, image rows columns• ppmIO.c:
• readPPM(int *rows, int *cols, int *colors, char *filename)• writePPM(Pixel *image, int rows, int cols, int colors, char *filename)• Note the CPP flag that switches
new
for
malloc
How to use them
#include <ppmIO.h>
Pixel *image;
int rows, cols, colors;
unsigned char blueValue;
image = readPPM(&rows, &cols, &colors, “myPicture.ppm”);
// mess with the image here
// to access row 22, column 6 use
blueValue = image[22 * cols + 6].b
writePPM(image, rows, cols, colors, “newPictures.ppm”);
// don’t forget to free the image
free(image);
How to manipulate an image:• Read in one or more images• Change the pixels around and/or combine the images together• Write out the final image
How do I change the pixels?• In the TIFF format each pixel uses 4 bytes to represent itself (an unsigned long)
• Each byte of the long integer is a different value: ABGR• Each color band can have a value [0, 255]• 255 - brightest (0x00FFFFFF is white)• 0 - darkest (0x00000000 is black)
• In the PPM format each pixel uses 3 bytes to represent itself (a structure)• Each color byte is accessed by .r, .g, and .b
• Since it is a structure, the byte ordering remains consistent• Each color band is a single byte with value [0, 255]
If you use the TIFF format, create yourself some macros for accessing individual colors:• #define Red(p) ((p) & 0x000000FF)• #define Green(p) (((p) & 0x0000FF00) >> 8)• #define Blue(p) (((p) & 0x00FF0000) >> 16)
Do the same to create a pixel:• #define Pixel(r, g, b) (r + (g << 8) + (b << 16))
Caveat: these macros all depend upon what endianness your computer is• Big-endians (Sun/Mac): as above• Little-endians (Intel): in reverse byte order
How do I combine pixels from two images?• Alpha channel concept: p = a * i1 + (1-a)*i2• Transparency according to colors• Composing by selecting a “background” to remove and replace
So how do I figure out what the blue background is?• Using xv, look at some of the blue color values. Pick thresholds for R, G, and B based on
the values you find in the image.• Alternatively, save a portion of the blue background. Read in the image and calculate sta-
tistics on the color values (min, max, average, stdev). Use those to calculate thresholds.• Build an RGB histogram of the blue color values using method #2 and ignore all pixels
that fall into the blue bins of the histogram.• If you don’t want to work in RGB space, try rg or hue to remove the blue.
E26 F06 Lecture #2
Canvas
• Digital Images (2D arrays of data (32-bit, 24-bit, 16-bit, 8-bit, 4-bit, 3-bit, 2-bit, 1-bit))• Vector Display Systems (up to 100,000 “short” lines)• Raster Scan Systems (2 million pixels in a 1000x2000 image)• Hard-Copy Devices (printers, plotters, (old-time visualization down the hall))• Practical Issues for Displaying and Printing
• RGB additive v. CMYK subtractive
Paints
• Color Spectrum (RGB, HSV)• Greyscale Images (8-bits, 256 greys)
Brush
• Input Devices • Buttons, dials, position measurements, 2-D scanners, 3-D scanners• Motion capture, digital images, video, stereo, satellite/radar data• Haptic inputs are becoming important: feeling texture
• Manual paint tools (Canvas, Photoshop)• Creating 2D pictures• Creating 3D pictures• Modifying existing pictures• Creating textures
• Plotting pixels• Basic method for creating an image, tough to create in this manner
• Plotting simple graphics primitives• Lines, curves, rectangles, ellipses, splines• Think at a more abstract level
• Creating 3D models• 3D lines, spheres, cylinders, prisms, polygons, blobs• Landscape brushes, vegetation models• Building large-scale models from 3D scans over time (e.g. cities)• Think and design in a 3D space
• Rendering a 3D scene• General renderer that takes a model and creates the scene• Design is in the 3D model and specification of viewpoint• Renderer is based on geometry (where things are) and physics (how they appear)
• Animation tools• Manually specifying positions• Specifying keyframes and letting the computer interpolate between them• Specifying paths (3D curves)• Specifying connections, relationships between parts of an object
• Non-photorealistic rendering• Tools to make CG look like art
Output Primitives
Pixels
• Plot(x, y)• Plot(x, y, color)• Plot(x, y, color, alpha, ...) => Plot(x, y, drawingState)• State variables v. arguments v. drawing state structure (some speed considerations)
E26 F06 Lecture Notes #3
Lines (DDA, Bresenham)
DDA
Line equation: y = mx + b• m = (y(2) - y(1)) / (x(2) - x(1))• b = y(1) - m x(1)
Differential line equation: dy = m dx
We can start at one end (assume the left end, always)• y(k+1) = y(k) + m• x(k+1) = x(k) + 1/m
If the slope is less than 1, increment x by 1. else if the slope is greater than 1, increment y by 1
Problems:• roundoff error• slow
Bresenham’s line algorithm
True y coordinate: y = m(x(k) + 1) + b
Look at the difference between y and the pixel centers above and below it. Pick the pixel center it’s closer to:
• Define e = d2 - d1• Look at the sign of e to determine which pixel to light up
• If sign is positive, move up• If sign is negative, move across
• At each step in x, add e = e + m to determine the new sign of e (don’t recalculate d2 - d1)• When e is greater than 0, subtract 1 from it to acknowledge that we took a step up• Initialize e to -1/2 so that the first decision is correct (look at case of a slope of 1/2)• Initial test value for e will be e = m - 1/2 (recall, e = -1/2 to start with)
Problem: still not an integer algorithm
d2
d1
Integer Bresenham’s algorithm
• Define e as e’ = 2dx * e• Represent m as dy / dx (both integer values)• The new definition for the initial value of e’ = 2dx * (dy/dx - 1/2) = 2dy - dx• The update rule is now add e’ = e’ + 2dy• The subtract rule is now subtract 2dx when we increment y
Algorithm
x = x1y = y1dx = x2 - x1dy = y2 - y1e = 2 * dy - dx
for (i = 0; i < dx ;i++) {setpixel(x, y, color)while (e > 0) {
y = y + 1e = e - 2 * dx
}x = x + 1e = e + 2 * dy
}
Example: (dx = 10, dy = 8, (x0, y0) = (20, 10))
Generalize by interchanging the role of x and y, and rotating about the x axis (always go left to right). Horizontal and vertical lines are handled separately.
Guarantees that a line between two pixels will always be the same line
i set pixel e x y
Initial n/a 6 20 10
0 (20, 10) 2 21 11
1 (21, 11) -2 22 12
2 (22, 12) 14 23 12
3 (23, 12) 10 24 13
4 (24, 13) 6 25 14
5 (25, 14) 2 26 15
6 (26, 15) -2 27 15
7 (27, 16) 14 28 16
8 (28, 17) 10 29 17
9 (29, 17) 6 30 18
Faster Line Algorithms
• Take advantage of symmetry to do 2 pixels at once from the beginning and the end• Take advantage of the fact that you can take 2 steps at a time (only 4 possible ararngements of
2 pixes in a line)
Polylines
• Draw multiple lines by sending an array of endpoints to the polyline routine• Can treat the array as a series of endpoint pairs, or with each line connected to the next• Polyline(number, points), or• Polyline(number, points, color), etc.• Define a point as either a two-element array, or a structure with x and y fields
Polygons
• Polygon command: like polyline, but the last point is connected to the first point• Polygon(number, points), or• Polygon(number, points, color), etc.
Screen Coordinate Issues
• A simple Bresenham example, dx = 5, dy = 4p0 = 3, 2dy = 8, 2dy - 2dx = -2, plot (0, 0) + (x0, y0)0 3 (1, 1) + (x0, y0)1 1 (2, 2) + (x0, y0)2 -1 (3, 2) + (x0, y0)3 7 (4, 3) + (x0, y0)4 5 (5, 4) + (x0, y0)5 3 (6, 5) + (x0, y0)6 1 (7, 6) + (x0, y0)
Problem: line is too long, circles too large• Pixel coordinates need to correspond to the lower left corner of the pixel• Lines need to end just before the endpoint
Modifying Bresenham’s Algorithm
• Initial p
0
value is different, need to slide things down and to the left by 1/2 pixel.• Evaluation point is the same
• and the
Hearn & Baker:
• d1 is distance from the top, d2 is distance from the bottom• H&B use (d2 - d1), which has a range from [-1, 1]• To integerize the algorithm, multiply by
•
•
•
Rogers:
• Rogers uses an error term e, which is the distance from the midpoint, range [-1/2, 1/2]• To integerize the algorithm, multiply by
•
•
•
Since the increments to p are based on unit steps, and we’re still doing unit steps, the incremental values do not change when using a lower-left corner origin for the coordinate system.
How does this affect the lines?• Look at the slopes of lines that step horizontally: up to a slope of 2/3
• 0 - 2/3: step horizontally• 2/3-3/2: step diagonally• 3/2-inf: step up
• Under the old method, only lines up to a slope of 1/2 made a horizontal first step
How about horizontal and vertical lines?• Make them rotated versions of one another about the (0,0) coordinate grid
• Horizontal lines from 0 -> positive x draw in 1st quadrant• Vertical lines from 0 -> positive y draw in 2nd quadrant• Horizontal lines from 0 -> negative x draw in 3rd quadrant• Vertical lines from 0 -> negative y draw in 4th quadrant
• If you have only a single convention (always up, always right) the squares don’t work• Convention is to draw closed polygons in a counterclockwise fashion
original ∆y∆x------ 1
2---–= change ∆y
2∆x---------- 1
2---–=
pk ∆x d212--- ∆y
2∆x----------–
– d1
12--- ∆y
2∆x----------–
+ –
=
∆x
pk ∆x d2 d1–( ) ∆x 1 ∆y∆x------–
–=
pk 2∆y ∆x– ∆x– 2∆y+=
pk 3∆y 2∆x–=
e0 2∆x e12--- ∆y
2∆x----------–
– =
2∆x
e0 2∆x12---– ∆y
∆x------+
12--- ∆y
2∆x----------–
– =
e0 2∆x3∆y2∆x---------- 1–
=
e0 3∆y 2∆x–=
Adobe Photoshop handles lines in it’s own fashion
• When you zoom in on an image, the line created depends on where in the pixel you click• If you click in the lower left corner of a pixel, you will get a line identical to the modified
Bresenham’s algorithm1• Note: horizontal lines are below the starting pixel• At 2/3 slope, the algorithm moves vertically instead of horizontally
• However, note that photoshop does some funny stuff with double vertical pixels
If you click in the lower left corner of a pixel, you will get a line identical to the modified Bresen-ham’s algorithm
Circles/Ellipses (Midpoint circle, ellipse algorithms)
Naive circle generating algorithm I:• y = yc +/- sqrt(r^2 - (xc - x)^2)• Works, but generates non-uniform points and uses a square root (costly)
Naive circle generating algorithm II:• x = xc + r cos(theta)• y = yc + r sin(theta)• Set the step size proportional to 1/r to get unit steps• Works, but uses triginometric functions (costly)
2/3 slope line 1 slope line 1/2 slope line
> 2/3 slope line 1 slope and vertical 1/3 slope line
Instead, set up a circle function to find out if a point is inside, outside, or on the circle
• Compare the true circle to a point half-way between the possible next pixels
• f(circle) = x2 + y2 - r2 (< 0 inside, =0 on boundary, > 0 outside)
• Let the first (x, y) be on the circle• (x0, y0) = (0, radius)
• Test point is: pk = f(circle)(xk + 1, yk - 1/2)
Now we need the iterative rule for updating pk• Evaluate the decision parameter at pk = f(circle)(xk + 1, yk - 1/2)• Subtract that result from pk+1 = f(circle)(xk+1 + 1, yk+1 - 1/2)
pk+1 = pk + 2[xk + 1] + [yk+12 - yk
2] - [yk+1 - yk] + 1 (1)
• yk+1 is either yk or yk-1 depending upon the sign of p (negative => yk)
The increment for obtaining pk+1 is:• pk+1 = pk + (2xk+1 + 1) if p is negative (yk+1 = yk) [note: 2xk+1 = 2xk + 2]• pk+1 = pk + 2xk+1 + 1 - 2yk+1 if p is positive (yk+1 = yk + 1)• Note that we can increment the values for 2xk and 2yk as well
• 2xk+1 = 2xk + 2, and 2yk+1 = 2yk + 2
The starting pk is done by evaluating the circle at the point just to the right of the top of the circle at (1, r - 1/2), which becomes 5/4 - r, which we can round to 1 - r.
You only have to draw one octant of a circle to get the whole thing• Calculate one point and then reflect around various axes to get the other 7• Add the center coordinates of the circle to place it at the appropriate location on the screen• Circles need to be calculated in the 3rd quadrant and
transformed appropriately to deal with screen coordi-nate issues
• Note: H & B algorithm is simpler than Rogers
Ellipses
To draw ellipses, you develop a similar formulation• For an ellipse you have to draw the whole quadrant
(non-symmetric about diagonals)• The two parts of the first quadrant divide where the
slope = -1, or the first time where dx < dy• In region 1 (top region) step along x and calculate whether to step down in y• In region 2 (bottom region) step along in y and calculate whether to step right in x
Process• Similar to the circle, calculate the midpoint error function• Take a step• Update the error function accordingly• Reflect each point to the other 4 quadrants
yk
yk-1
xk xk+1
(x, y)
(y, x) (-y-1, x)
(-x-1, y)
(-x-1, -y-1)
(-y-1, -x-1)(y, -x-1)
(x, -y-1)
There is code for the circle and ellipse algorithms on the first lab site. Feel free to use it (you will have to modify it for the assignment).
Coordinate Issues
To correctly handle screen coordinates, you also have to calculate ellipses in the 3rd quadrant• Instead of starting at x = 0, start at x = -1
• This means that px and the test function p need to be incremented by one step• Likewise, py needs to be incremented by one step
• Need to negate the initial values for y (ellipse is heading UP at this point)
Filled Graphics Primitives
Circles/Ellipses
Put a for loop inside the inner loop• Draw across the rows as you calculate the endpoints on the circle/ellipse• For a circle, you can draw 4 lines for each point you calculate• For an ellipse, you can draw 2 lines for each point you calculate
E26 F06 Lecture Notes #4
Filled Graphics Primitives
Flood-Fill Algorithm
Paint tool in most drawing programs
Simple Seed-Fill Algorithm
Color initial pointPush initial point on a stackDo
Pop a pixel off the stackTest each of it’s neighbors (4-connected)
if a neighbor is in the region and not already coloredcolor itpush it on the stack
until the stack is empty
Scanline Flood-Fill Algorithm• Faster/less memory algorithms:
• Start by filling in the current scanline from one end to the other• Now start at the extreme left end and test for the ends of spans above and below• At the right side of each free span, plant a seed• Repeat until there are no more seeds
In the example above, the seed pixel is #1. Pixel #2 is the seed pixel in the next column down, and so forth. The scanline with the two #6 seed pixels has two starting locations because of the gap in coverage.
4 v. 8-Connected polygons
If your polygon boundaries are eight connected, then the flood fill has to be 4-connected• Just look up and down for new seed pixels
If your polygon boundaries are four-connected, then the flood fill has to be 8-connected• Have to look angularly on each end of a span as well as up and down
1
2
3
4
5
6 67 7
Polygon Scan Conversion
Scan-line Polygon Fill Concept• Intersect each edge of the polygon with the current scanline• Sort the edges left-to-right and then fill in between the edges• Vertices require special handling• Example polygon
• line a works b/c pairs match up• line b doesn’t work b/c pairs don’t match
• Need to traverse the polygon edges and note if a vertex is an extremum or not• If it’s an extremum, count a vertex as 2
edges.• Else count it as a single edge
• Can also just shorten the edges that are not extremum by lowering the upper edge.
Coherence• We can take advantage of the fact that lines are linear, and we can find the next intersection
point for a scanline from the scanline above it or below it by simply incrementing by the appropriate value.
• the y value changes by one (going scanline by scanline)• the x value changes by the inverse of the slope• Integerize the procedure by noting that m = dy/dx, and dx and dy are integers.
• Initialize an accumulator to dy.• For each step in y• Increment the accumulator by dx• If dx < dy then xIntersect does not change• Else decrement the accumulator by dy until it is less than dy, incrementing xIntersect
by one each time the accumulator is decremented
Algorithms (for a non-self-crossing polygon)
This algorithm is pretty much the one in Rogers on pp 124
Ordered edge list algorithm using an active edge list• Process a polygon by going around it in a clockwise or counterclockwise order• Sort the non-horizontal edges by their smallest y value (bucket sort on scanlines)
• Each row bucket has a list of edges that start on that line• Shorten non extremum edges to handle vertices• Store the maximum y value, the x-intercept of the lower value, and the inverse slope.
May also want to pre-calculate and store the dx and dy values.• For each scanline
• Sort the list of active edges from left to right (linked list)• Fill in the scan-line from left to right, pairing up edges in the active edge list• Update the active edge list by deleting ending edges and updating xIntersect values• Re-sort the active edge list based on the new xIntersect values
a
b
Example
Edges• E1: (0, 0) (4, 0)• E2: (4, 0) (4, 3) [modified to (4, 0) (4, 2)]• E3: (4, 3) (0, 5)• E4: (0, 5) (0, 0)
Edge list:• EL0 -> E4 -> E2• EL1-2 -> NULL• EL3 -> E3
Active Edge list• R0 -> E4 -> E2, draw span from [0, 4]• R1 -> E4 -> E2, draw span from [0, 4]• R2 -> E4 -> E2, draw span from [0, 4], remove E2 from AEL• R3 -> E4 -> E3, draw span from [0, 4], update xIntersect for E3 to 2• R4 -> E4 -> E3, draw span from [0, 2], update xIntersect for E3 to 0• R5 -> E4 -> E3, draw span from [0, 0], remove E4, E3 from AEL
Shortening E2 fixed the potential problem of double-counting non-maxima breakpoints• But the final polygon is too big (aliasing again)
Correcting Scanline-Fill• Shorten the top end of all edges by 1 (or just traverse up to the point, not including it)• Only fill to the pixel before the xIntersect for the right side of the span• For positive slope edges, add 1/2 dxPerScan to xIntersect (intersect with y +1/2)• For negative slope edges, subtract 1/2 dxPerScan from xIntersect (intersect with y +1/2)
In the above example• Fill [0, 3] for scanlines 0-2• Fill [0, 2] for scanline 3• Fill [0, 1] for scanline 4• Wouldn’t reach scanline 5
Edge-flag Algorithm• Write the contour to the image
• All contours are drawn to the right of the mathematical coordinate grid• For each scanline that intersects the polygon
• Inside = FALSE• for x = left to x = right
• if the pixel is a background pixel, negate Inside• If Inside is TRUE then set the pixel to the polygon value• Else Inside is FALSE so set the pixel to the background value
The Edge-flag and Ordered edge list algorithms take the same amount of time in software
The edge-flag algorithm can be more easily implemented in hardware
E1
E2
E3
E4
(0, 0)
E26 F06 Lecture Notes #5
Review of Scanline Fill
Bucket sort of start edge locations by row
Each scanline sort by xIntersect
Each scanline adjust xIntersect by dxPerScan• Can use Bresenham’s algorithm• Might want to figure out the generic method of setting initial error based on location
Starting intercept ought to be at y+1/2. Works for positive and negative slopes.• For positive slopes, it adds half dxPerScan• For negative slopes, it subtracts half dxPerScan
Shorten the upper end of all edges so they draw up to the vertex location
Shorten the right side of all edges so they draw up to the xIntersect location
Goal: side-by-side polygons with the same vertices should not overlap and should not have gaps
Attributes of Graphics Primitives for 2D Image Manipulation
Bundled Graphics Attributes
Quite often, the state variables are bundled into groups• All graphics primitives (drawing surface, pixel size, copy mode, default information)• Pen (bundled line attributes)• Pattern (bundled area-fill attributes)• Text (bundled text attributes)
Curve & Line Attributes• Line Type• Line Width• Joining thick lines
• Rounded: cap the ends with a circle with the diameter of the line• Beveled: fill in the triangular segment• Mitered: extend the outer boundary• Professional programs use Mitered & Beveled depending upon the angles
• Pen attributes• Pen pattern (usually a shading pattern on top of a color)
Patterns• Solid colors• Patterns
• pattern size• pattern origin• modifying the scanline-fill procedure to use patterns: mod pattern size to access bit
Antialiasing
Getting rid of the jaggies!
Cause: sampling a continuous world at too low a frequency
Supersampling• Use nine or sixteen subpixels per pixel. • Use Bresenham’s algorithm to calculate which subpixels turn on.• Count how many subpixels in each pixel are on and normalize.• The new intensity is a combination of the old intensity and the new line intensity.
Area Sampling• Treat the line as a solid rectangle• Calculate how many subpixels the area overlaps and normalize• Can use a simple inside/outside test on the two edges of the line to determine membership• The new intensity is a combination of the old intensity and the new line intensity
• Get a true idea of the area of the pixel covered by the line• Can use a simple box filter to recreate the original pixel
Calculations• For a line 1 pixel wide, the distance of the edges of the line from the center line is 1/2• The slopes of the edges are the same as the original line• So the equations for the upper and lower edges adjust the Y intercept up or down
• We can use similar triangles to find the vertical extent of the line given the slope
(1)
(2)
• Since lines are linear, you only need to calculate the square root once, then increment• Comparing the lower and upper bounds to the subpixel centers indicates membership• You can use a similar algorithm to anti-alias boundaries of a polygon
ylower mx b12--- m
21+–+=
yupper mx b12--- m
21++ +=
1
m
d
d12--- m
21+=
d
Antialiasing Area Boundaries• Essentially the same as the area sampling method• Can use the midpoint calculation to calculate the area within each pixel • Modify Bresenham’s Algorithm so that you use the value of the decision parameter to shade
the pixel.• The more negative the decision parameter is, the more the lower pixel s/b shaded
• All relative to the dx and dy parameters (largest negative & largest positive values of e)• At zero, the upper and lower pixels should be shaded equally• The more positive the decision parameter is, the more the upper pixel s/b shaded• You can get fast anti-aliased lines this way
• Need to use standard mixing method (alpha blending) to get the appropriate colors:• new value = %line * line color + (1 - %line) * background color
Post-filtering• Apply a filter to an enlarged image• The filter reduces the frequency of the signal• Average the values of the sub-pixels within each pixel• Sometimes use a center-weighted filter (121/242/121) to emphasize the center of the pixel• Post-filtering is often used in professional imagery• To eliminate salt-and-pepper noise in scanned images use a median filter
• Take the median value of a neighborhood of points• Works nicely on overscanned images with some noise from dust, poor optics, or scratches
Real Applications• Photoshop, GIMP, and otehr graphcis programs draw anti-aliased lines• You can use Bresenham’s algorithm to directly draw them on a standard resolution
• Use the rules outlined above
The Final 2D Primitives: Cells, Icons, and Characters
• Cell Arrays• Icons, text, anything you need a small 2-D array for.• Can plot them on the screen in a variety of ways:
• Source copy• Source mix (alpha value)• Source invert• Bitmaps: AND, OR, NOT, XOR
• Icons are generally 32x32 pixel cells• Can represent fonts as cells• A better representation is to use outlines (usually splines or polynomials)
1/2 pixel offset
9 sample supersampling 9 sample jitteringone sample/pixel
26 pixel checkers
0.51 pixel checkers
1 sample/pixel 9 sample supersampling 9 sample jittering
E26/CS40 F06 Lecture Notes #6
2-D Transformations
If we want to translate an object around the screen do we...• A) change the coordinates by hand,
• B) Add an offset to the current coordinates
• C) Develop a general system of representing and applying translations?
If we want to rotate an object around the screen do we...• A) change the coordinates by hand,
• B) Transform the points along the edge of a circle
• C) Develop a general system of representing and applying rotations?
If we want to scale an object on the screen do we...• A) change the coordinates by hand,
• B) Multiply each point by a scalar value
• C) Develop a general system of representing and apply scales?
If you said C on all three, you are correct.
Matrix Representations of:
Homogeneous Coordinates: x = xh / h, y = yh / h, let h = 1 for convenience.• Translations
• Rotations
• Scales
xnew
ynew
xold
yold
tx
ty
+=
xnew
ynew
xold Θcos yold Θsin–
yold Θcos xold Θsin+=
xnew
ynew
xoldsx
yoldsy
=
1 0 tx
0 1 ty
0 0 1
θcos θsin– 0
θsin θcos 0
0 0 1
sx 0 0
0 sy 0
0 0 1
Concatentation of transformations
With column vectors, the procedure moves from right to left, so the right-most matrix is enacted first.• Concatenating translations, order doesn’t matter (add translations).• Concatenating 2-D rotations, order doesn’t matter (add rotations).• Concatenating scales, order doesn’t matter (multiply scale factors).• Concatenating arbitrary transformations, order matters.
Example: Take a unit square (0,0) to (1,1), translate it so the center is at the origin T(-.5, -.5), then scale it by 2 in all directions S(2,2), then rotate it by 45 degrees Rz(45), then translate it so the center is at (3,2), T(3.5, 2.5).
The single matrix is: X = T(3.5, 2.5) Rz(45) S(2,2) T(-.5, -.5)
General pivot point rotations• Translate to origin (-x0, -y0)• Rotate about the origin• Translate back to the original position (x0, y0)• We can precalculate this matrix as well:
General fixed-point scaling
Same idea as arbitrary point rotations.• Translate the fixed scale point to the origin• Scale about the origin• Translate back to the fixed point• We can precalculate these as well
General scaling directions and fixed points
Concatenate translations, rotations, and scales• Translate the fixed point to the origin• Rotate to the desired scaling axes• Scale about the origin• Rotate back to the original axes• Translate back to the fixed point
1 0 x0
0 1 y0
0 0 1
θcos θsin– 0
θsin θcos 0
0 0 1
1 0 x– 0
0 1 y– 0
0 0 1
θcos θsin– x0 1 θcos–( ) y0 θsin+
θsin θcos y0 1 θcos–( ) x0 θsin+
0 0 1
=
1 0 x0
0 1 y0
0 0 1
sx 0 0
0 sy 0
0 0 1
1 0 x– 0
0 1 y– 0
0 0 1
sx 0 x0 1 sx–( )
0 sy y0 1 sy–( )
0 0 1
=
Reflection• Reflect about y-axis, x-axis, origin, line y =x, or line y = -x.
Shear
A shear moves different parts of the coordinate system differently.
Viewing Pipeline
1. Model Coordinates - We do our work in model coordinates, where the coordinate frame can be relative to anything.• Different models can have different model coordinate systems• Use something that makes sense for the model (like the bridge of the Enterprise)
2. World Coordinates - The next step is to transform everything into world coordinates, so all of the points are in a single frame of reference.• Connect a global transformation to each model• The global transformation defines where in the world the model ends up• Multiple instantiations
• Instantiation is the process of drawing a model in a specific place• You can have multiple instantiations of a single model• You can place them differently by using a unique transformation for each instantiation• This is how you create herds of wildabeast and flocks of birds
3. Viewing Coordinates - When we decide where we want our window on the world, we need to transform the points so they are relative to the viewing window frame of reference. • The window doesn’t have to be in a standard orientation• The window doesn’t have to be rectangular (although that’s the easiest way to define it)• We can clip the lines in this coordinate system.• Translation followed by a rotation: R(ø)T(-x0, -y0)
4. Normalized Viewing Coordinates - This is a scale transformation so that the points to be view-ied fall in the range (0,0) to (1,1): S(1/du, 1/dv)• Clipping can also be done in this coordinate system.• Normalized viewing coordinates can be sent out to multiple display systems
5. Screen Coordinates - This is the final transformation from the normalized viewing coordinate system to the screen coordinates. It often involves a reflection about the y-axis and a transla-tion to appropriately set the point values: T(0, rows)S(1, -1)
1 0 0
0 1– 0
0 0 1
or 1– 0 0
0 1 0
0 0 1
or 1– 0 0
0 1– 0
0 0 1
or 0 1 0
1 0 0
0 0 1
or 0 1– 0
1– 0 0
0 0 1
1 shx 0
0 1 0
0 0 1
E26/CS40 F06 Lecture Notes #7
Transforming between coordinate systems
Defining a window• Set up the origin of the window• Set up the orientation of the window (angle relative to the x-axis)• Generally define the window in world-coordinates
Transformation process• Translate the window origin to the world-coordinate origin: T(-x0, -y0)• Rotate to align the axes of the window and the world-coordinate axes: R(-theta)
Alternate defnition of a window• Specify the window as an origin and a u-axis (horizontal axis of the window, also 2 points)• Calculate the v axis as v = Z x u, where u = (xu, yu, 0), and Z = (0, 0, 1)• Normalize the u and v axes: u’ = u / |u|, and v’ = v / |v|
Transformations when you know the normalized axes
• You can specify the rotation directly if you know the normalized axes
• Same concept works in 3D with (u, v, w)
ux uy 0
vx vy 0
0 0 1
du dv
uv
T(-x0, -y0)
du dv
uv
du
dv1
1
S1
du------ 1
dv------,
RZ(-θ)
Graphics Primitives
Transform primitives--line, square, circle, ellipse--to their proper location and size using scales, rotations, and translations.
Example:
It would be nice if we could organize this so that, if the face moved, all of the other parts would move too.
Structures
This leads us to the first concept in modeling: structures or modules.
A structure is one or more primitive graphic elements, attributes, and local transformations, gener-aly organized as a directed acyclic graph.
Creating structures• New_Structure, or Open_Structure• Starts recording all attribute, transformation, and drawing commands
Structure lists• System stores a list of the current structures (or you can store them as local variables)• We can post structures to display devices• We can make structures visible, invisible, or highlighted
Traversal• To refresh the screen, we traverse the structure graph, drawing all visible structures• Each structure can have a priority; higher priority structures are drawn last (in front)• Structures can include other structures, possibly more than once
Traversal state list• During traversal of the structure list, we keep track of the attributes & transformations.
1
1Left eye: T(-3, 2)
Right eye: T(2, 2)
Nose: T(-.5, 0) S(1,1.5)
Mouth: T(-3, -2) S(6, 0.5)
(0, 0) 10
10
5 15
5Unit circle and square
Basic Modeling Concepts
Symbols/Models• Combinations of primitives, or single primitives (w/ or wo/transforms & attributes)• Defined in some model coordinates
Instances• Actual occurances of the symbols; you can have multiple instances of one symbol
Modules/Structures• Combinations of symbols, possibly in a hierarchical fashion• You can create multiple instances of modules/structures
Example:
Hierarchical Modeling
Scenes as trees (directed acyclic graphs)• By layering modules, we create a tree-like structure that represents our scene. • Traversal of the structure list becomes an acyclic directed graph-traversal (each node has
only one parent)• Keep track of attributes and the current transformation state using recursion or a stack.• The current transformation should always be from the leaf to the root
Example:• Use primitives to create a chair, a table, and a lamp.• Create a dining room module with the table and 4 chairs• Create a house module from the box primitive and combine it with appropriate furniture• Create 2-3 houses for the final image.
Example: 2-D Planar Robot Arm
Symbol
Instances
Combination is a module = forest
Hand structure• draw line from (0,1) to (3,0)• draw line from (3,0) to (0,-1)• draw line from (0,-1) to (0,1)
Forearm structure• draw line from (0,0) to (10,0)• rotate by end-effector angle• translate by (10,0)• draw hand
Upper arm structure• draw line from (0,0) to (10,0)• rotate by forearm angle• translate by (10,0)• draw forearm module
Robot structure• rotate by upper arm angle• draw upper arm module
Structure Tree Diagram
By changing the joint angles, the robot appears to move in a physically correct manner.
If we figure out the physical equations for the joint angles based on external/internal forces, we can animate the figure in a physically realistic manner.
Things to note:• Transformations are tacked onto the left side of the transformation list• To get the complete transformation, traverse right to left from the leaf to the root• Once something is drawn at a level, it doesn’t get modified by later transformations
Robot
Upper Arm
Lower Arm
Hand
line
line
3 lines
R(Angle 1)
T(UA Length)*R(Angle2)
T(LA Length) * R(Angle 3)
Another instantiation ofthe robot arm
Exampletypedef tnode {
OpCode opcode;void *arg1;void *arg2;
} Node;
Matrix gtm; // gets set to identity by an InitGlobalTransform call// could also get set to the viewing transformation by a SetViewTransform call
void DrawStructure(Structure *cs) {DrawRecord *p, *q;Matrix ltm;Matrix pass;
if(gblStructure != NULL) {AddPrimitive(DRAWSTRUCT, cs);return;
}SetIdentity(ltm);q = p = cs->root;
while(p != NULL) {switch(opcode) {case LINE:
pass = MatrixMult(gtm, ltm);drawLine(p->arg1, p->arg2, p->curAttr, pass);break;
case POLYGON:pass = MatrixMult(gtm, ltm);drawPolygon(p->arg1, p->arg2, p->curAttr, pass);break;
case SCALE2D:Scale2D(p->arg1, p->arg2, ltm);break;
case TRANSLATE2D:Translate2D(p->arg1, p->arg2, ltm);break;
case DRAWSTRUCT:pass = gtm; // save the current state of the gtmgtm = MatrixMult(gtm, ltm);DrawStructure(p->arg1);gtm = pass; // reset the gtm for this levelbreak;
default:break;
}
q = p;p = p->next;
}}
E26/CS40 F06 Lecture Notes #8
Designing a Hierarchical Modeling System
The fundamental data type for a hierarchichal modeling system is the module or structure• Consists of a list of symbols
• graphics primitives• transformations• attributes• other modules
• May be some structure attributes• visible/invisible• transparent...
Does the programmer or the modeling system control the modules?• Programmer controlled structures are held in local variables
• OpenModule() will generally return a pointer to a modules• programmer is responsible for calling DeleteModule()• programmer controls what is drawn in the image by calling DrawModule()
• System controlled structures are held in global variables and hidden from the programmer• OpenModule() will generally return an id number for a module• programmer handles modules by id number only• system maintains a list of all current structures• system draws all visible structures automatically (in real-time systems)
Are the transformation matrices system or programmer controlled• System controlled transformations are never seen by the user
• User has a set of routines that add transforms to the currently open structure• Programmer controlled transforms are passed to module calls and kept as local variables
• User has a set of routines that create or modify transformation matrices• This is a little more difficult to deal with
What kinds of objects, attributes, and transforms will a module handle?• Defining a list of symbols or (in C++) inherited types• Comes down to #defines or an enum definition (the latter is a bit easier to modify)
How will you let the user define viewing coordinates, and how will you manage that information?• Commonly this is defined in a global viewing transformation that is always applied last
How will the OpenModule() function communicate with your graphics primitives?• How do you need to change your graphics primitive functions?• How do you need to change your transformation & attribute functions?
Command Listing
OpenModule(): begins recording commands into a module
CloseModule(): ends recording commands into a module
DeleteModule(): deletes all of the elements of a module
DrawModule(): draws the elements within a module or adds it to the currently open module
Line(): draws a line or adds it to the currently open module
Circle(): draws a circle or adds it to the currently open module
Ellipse(): draws an ellipse or adds it to the currently open module
Scale2D(): executes a scale or adds a scale transformation to the currently open module
Translate2D(): executes a translation or adds a translation to the currently open module
Rotate2D(): executes a rotation about the Z axis or adds a translation to the currently open module
ShearX2D(): executes an X shear or adds an X shear to the currently open module...
OpenModule• Allocate or reserve a new structure list
• Allocate if you are passing a structure pointer back to the user• Reserve if you have a predefined global array of structures that the user can index
• Make the structure available to other graphics routines• Set a global variable, usually a pointer to the currently open structure• If that variable in NULL, then there is no currently open structure
• Set a flag• Need to let the graphics primitive & transformation routines know to store their informa-
tion in the structure rather than draw it on the screen.• Can use the fact that the global structure is NULL if there is no open structure
• Representing a structure• Might use a linked list of records with the following record structure
• opcode• parameters• next structure
CloseModule• Terminate the structure list• Set the global structure pointer to NULL• Communicate the termination to the other routines
DeleteModule• Walk through the list of records & delete each one. Then delete the root structure record.
DrawModule• Walk through the list & draw the elements using the CTM
• switch statement based on the opcodes• some opcodes draw things• some opcodes modify CTM• some opcodes modify state variables (color, bkg color, fill color, line color)• Call DrawStructure recursively within a hierarchical model
Graphics Operator Routines• Test if there is an open module
• If yes, then add the graphics primitive, attribute or transform to the module• If no, then draw the graphics primitive or set the attribute (probably ignore transforms)
Representing the CTM• Option 1: pass it to the drawStructure routine
• Draw structure uses it as a local variable which gets modified as you walk through the list of opcodes.
• Pass the CTM by value to other DrawStructure routines, which lets the system stack take care of pushing & popping the CTM
• Programmer is responsible for maintaining it outside of the drawStructure routine• Option 2: have a global CTM
• Automatically push the CTM when you enter a DrawStructure, and pop it when you leave (example below)
• Let the programmer control the global CTM with some (or all) of the following functions:• SetViewTransform• InitGlobalTransform• PushTransform (puts the CTM on a stack)• PopTransform (pops the CTM off a stack)• SetTransform• GetTransform
3-D Transformations
4x4 matrices and 4 element homogeneous coordinates• 3-D Translation: T(x, y, z)• 3-D Scale: S(sx, sy, sz)• 3-D Rotation: Rz(θ), Rx(θ), Ry(θ)
• Concatenation of Transforms, same as 2D• Scales concatenate• Translations concatenate• Rotations about a single axis concatenate• Rotations about different axes don’t concatenate
• Arbitrary 3-D Rotation about a point P and direction V = (x, y, z), ||V|| = 1• Translate P to origin: T(-P)• Rotate V to the X-Z plane by rotating about the X axis
• Project V onto the X-Y plane
• The triangle is Vz, Vy, d = sqrt(Vz2 + Vy
2)• Rx(cos, sin) = Rz(Vz/d, Vy/d)
• Rotate V’ to the X axis by rotating about the Y axis • The triangle is d, Vx, 1• Ry(cos, sin) = Ry(x, d)
• Rotate about the X axis by the desired angle
• Rotate by Ryt
• Rotate back by Rzt
• Translate back to the original location T(P)
T(-P)
P
V
d
yz
α
R(α)
X
Y
Z
d
xβ
R(β)
• Scale about arbitrary axes• Use u, v, w representation of the new axes, p is the new origin• Translate p to the origin• If u, v, and w are orthogonal unit vectors, then set up the rotation matrix using u as the top
row, v and the second row, and w as the third row• Scale• Rotate back by the inverse of the previous rotation matrix (transpose)• Translate back to the origin
• Orienting two coordinate systems• if you have an orthogonal coordinate system M defined by three unit vectors: u, v, w you
can write, by inspection, the transformation that will bring M in line with the coordinate system axes in which u, v, w are defined.
•
• The transpose of this matrix will reverse the rotation
ux uy uz 0
vx vy vz 0
wx wy wz 0
0 0 0 1
E26/CS40 F06 Lecture Notes #9
Viewing Projections
In order to view a 3D scene we need to transform the 3D points into a 2D representation. This is the field of plane geometric projections.
Geometric projections are, in general, projections from one 3D space to another
Plane geometric projections take 3D points and project them to 2D• The rank of the 4x4 matrix is no more than 3.
Geometric projections fall into two categories:• Affine: maintains parallel lines through projections• Perspective: does not always maintain parallel lines (railroad tracks)
Geometric projections can be viewed in one of two ways• The viewing geometry is fixed and the object rotates (Rogers & Adams)• The object is fixed and the viewing geometry rotates (Foley & Van Dam, Hearn & Baker)
These two methods are mathematically equivalent
Planar geometric projec-tions divide into two large groups, and subcategories within them
ProjectionsParallel Perspective
1-point 2-point 3-point
orthographic axonometric oblique
trimetric dimetric isometric
cavalier cabinet
Orthographic
The simplest projection.• Specify a view window on the x-y plane• Let the center of projection (COP) be at infinity• Let the line from the COP to the plane of projection be perpendicular to the plane• All points along lines of projection are mapped onto the corresponding point on the plane• The orthographic projection matrix is an identity matrix with a missing row
• This matrix is for the projection plane defined by z = 0• Engineering drawings are usually done using orthographic projection
• Distances are preseved for any face parallel to the projection plane• Use a cube style representation to show all the sides of an object
We can get a lot more complex
Axonometric Projections
Axonometric projections result when multiple faces of an object are visible and they are not nec-essarily parallel to the projection plane.• Trimetric projections: the object undergoes rotations about any or all of the coordinate axes
• It is called trimetric becase the foreshortening factor for each face is different, meaning you need three different metrics to measure dimensions in a trimetric projection
• Dimetric projections: the foreshortening factor for two of the faces is identical• With a dimetric projection, two of the dimensions can be measured with the same fore-
shortening factor• Isometric projections: the foreshortening factor for all three faces is identical
• There are only four possible isometric projections• The foreshortening factor is 0.8165• The angle with the horizontal axis and the projected axis is +- 30 degrees• Isometric projections are useful in engineering drawings because it is easy to measure
Oblique Projections
Oblique projections occur when the projection lines are not perpendicular to the projection plane.• Faces parallel to the plane of projection are shown at their true size and shape• Other faces are distorted
Cavalier projection• Angle between the projective lines and the projection plane is 45°
Cabinet projection• Angle between the projective lines and the projection plane is 63.43°
In general, f is the foreshortening factor for the z axis, and alpha is the angle the projected z axis makes with the x axis.
If (-a, -b, 1) specifies the direction of the rays of projection, then• a = f cos(alpha)• b = f sin(alpha)
1 0 0 0
0 1 0 0
0 0 0 0
0 0 0 1
1 0 f αcos– 0
0 1 f αsin– 0
0 0 0 0
0 0 0 1
Parallel Projections
Specifying an arbitrary parallel projection• View plane position (View Reference Point) VRP = (x, y, z)• View plane orientation (View Plane Normal) VPN = (vx, vy, vz) (points where you look)• Up reference orientation (View Up Vector) VUP = (vx, vy, vz)• View plane extent (in view reference coordinates) = (umin, vmin) and (umax, vmax)• Direction of Projection DOP = (vx, vy, vz)
• DOP is defined relative to the center of the view plane and the VPN in the parallel case• Front clip plane, and back clip plane, specified as distances along VPN: F, B• Screen size = (screenX, screenY), assuming (0, 0) in lower left
Parallel Projection Process
The basic idea is the orient the view reference coordinate axes with the world coordinate axes, shear so the view volume is aligned with the axes, scale it to an appropriate size, then project the world onto a plane using the orthographic projection matrix.• Given VUP and VPN, calculate the U vector on the view plane in world coordinates
• cross product: uvec = VUP x VPN• Recalculate VUP so that you have orthogonal vectors
• cross product: VUP = VPN x uvec
1. Translate the VRP to the origin: T(-vrp.x, -vrp.y, -vrp.z)
2. Normalize VUP, VPN, uvec and use the Rxyz rotation method to orient the axes
3. Shear so that the DOP is aligned with the -z axis• DOP = CW - PRP• CW and PRP are defined relative to VRC, if DOP not defined directly
• PRP = Projection Reference Point, CW = Center of Window• Simplest case for PRP is (0, 0, -1) (orthographic projection)
• ShearZ(-DOP’.x / DOP’.z, -DOP’.y / DOP’.z)
4. Translate so that ((umax - umin)/2, (vmax - vmin)/2), F) is at the origin: • T(-(umax - umin)/2, -(vmax - vmin)/2, -F)
5. Scale to the canonical view volume so that• X (-du/2..du/2) becomes -1..1, Y (-dv/2..dv/2) becomes -1..1, Z (0..(B-F)) becomes 0..1• Let B’ = B - F• Let du = umax - umin, dv = vmax - vmin• S(2/du, 2/dv, 1/B’)• Clipping can occur here since the boundaries are X (-1..1), Y(-1..1) and Z(0..1)
6. Project onto the view plane: ProjParallelZ()• Just drop the Z coordinate at this point (orthographic projection)
7. Scale to the screen size: S2D(-screenX/2, screenY/2)• Note: this step orients the X axis and the u-axis correctly so positive X goes right
Translate so that the origin is in the lower left: T(screenX/2, screenY/2)
1 0 shx 0
0 1 shy 0
0 0 1 0
0 0 0 1
E26/CS40 F06 Lecture Notes #10
Viewing Projections
Parallel Projection Review
Review view setup• View Reference Point: VRP = (x, y, z)• View Plane Normal: VPN = (vx, vy, vz) (points where you look)• View Up Vector: VUP = (vx, vy, vz)• View plane extent = (umin, vmin) and (umax, vmax)• Direction of Projection DOP = (vx, vy, vz)• Front clip plane, and back clip plane (distances along VPN): F, B• Screen size = (screenX, screenY), assuming (0, 0) in lower left
Parallel Projection Process Review
Setup view reference coordinate system: uvec, VUP, VPN
Setup the 3-D Canonical View Volume• Translate the VRP to the origin: T(-vrp.x, -vrp.y, -vrp.z)• Normalize VUP, VPN, uvec and use the Rxyz rotation method to orient the axes• Shear so that the DOP is aligned with the -z axis• Translate so that ((umax - umin)/2, (vmax - vmin)/2), F) is at the origin: • Scale to the canonical view volume• Project onto the view plane by dropping the Z coordinate• Scale to the screen size & orientations• Translate so that the origin matches the screen origin
Perspective transformations
General idea: project the 3D world onto a plane• Pinhole camera model
• The world is upside down and backwards on film• We think about a view plane, or image plane in front of the pinhole• The size and placement of the view plane and the camera determines the projection
One, Two, and Three-point Perspective
This is the way that an artist might think about creating an image.
This is an object-centered view point because it depends on how many rotations the object has undergone:• One-point perspective: two axes are parallel to the projection plane (one vanishing point)• Two-point perspective: one axis is parallel to the projection plane (two vanishing points)• Three-point perspective: no axes are parallel to the projection plane (three vanishing points)
Specifying a View-centered Perspective
We think about moving the view plane around, setting a focal length, and projecting onto a plane• VRP: origin of the view plane• COP: center of projection, defined relative to the VRP (simplify by defining as scalar on VPN)• VPN: orientation of the view plane, defined in world coordinates• VUP: up vector, defined in world coordinates• View window size: (umin, vmin) and (umax, vmax), also defines CW (center of window)• Front and back clip planes: F, B, defined as distances along the VPN
• The front clip plane in the derivation below is also the view plane, hence F = 0.• Screen size (screenX, screenY), assume lower left origin
Perspective Projection Process
Setup• Create the orthonormal view reference coordinate system• and • Normalize the three vectors.
Create the canonical view volume
1. Translate VRP to the origin: T(-VRP)
2. Rotate so that the axes are aligned: Rxyz(U, VUP, VPN)
3. Translate the COP to the origin: T(-COP)
4. Calculate DOP = CW-COP and shear exactly the same as with parallel projection: • ShZ(- DOP.x / DOP.z, - DOP.y / DOP.z)
5. Scale to the canonical view volume• Need to calculate the intermediate VRP’ = ShZ() * T(-COP) * [0 0 0 1]’• Let B’ = VRP’.z + B (new back clip plane distance)• Let du = umax - umin, dv = vmax - vmin• We want X to go from -1..1, Y from -1..1, Z from 0..1• Scale(2 * VRP’.z / (du * B’), 2 * VRP’.z / (dv * B’), 1/B’)• Clipping can occur here
• F’ = VRP’.z + F (new front clip plane distance)• Clip volume is a clipped pyramid
Project the points and scale to image coordinates
6. Project onto the view plane using the perspective projections • Let d = VRP’.z / B’• Size of the view plane is 2d x 2d
7. Scale to the image size• Flip x-axis and y-axis if necessary• Scale2D(-screenX / 2d, -screenY / 2d)
8. Translate to the image coordinates• Translate2D(screenX/2, screenY/2)
u VUP VPN×= VUP VPN u×=
1 0 0 0
0 1 0 0
0 0 1 0
0 01d--- 0
Using the perspective projection matrix: Why does it work?
Consider the perspective projection matrix’ effect on the point [x y z 1]’• Result is [x y z z/d]• If you renormalize the homogeneous coordinate, then you get P = [xd/z yd/z d]• Given proportional triangles, this is the projec-
tion of the points x, y onto the image plane at d, with a center of projection at [0 0 0]
What does this mean in practical terms• Multiply by the CVV matrix• Multiply by the Projection & View matrices• Divide through by the homogeneous coordinate
• Leave the Z coordinate alone, though• Finish the transformation to screen coordinates• Draw the points
An alternative perspective matrix
An alternative way to set up the perspective matrix is to think about squaring the truncated pyra-mid that represents the perspective view volume. Given the distance to the view plane, d and the distance to the front clip plane f, the perspective matrix is:
Just like the planar projection version, transformed vectors need to be divided by the homoge-neous coordinate. However, the z-coordinate is affected differently since this matrix has rank 4.
normalizing the result by gives
Note that the z-values maintain their relative ordering, while the x and y values are identical to the case where we use the standard rank 3 projective matrix.
d
COP
z
yy
dz---
viewplane
P d f,( )
1 0 0 0
0 1 0 0
0 0d f+
d------------ f–
0 01d--- 0
=
x
y
zd f+
d------------
f–
zd---
P d f,( )
x
y
z
1
=zd---
xdz
------
ydz
------
d ffdz
------–+
1
A simplified view setup
• VRP: origin of the view plane• Projection distance d, equivalent to a focal length• VPN: orientation of the view plane, defined in world coordinates• VUP: up vector, defined in world coordinates• View window size: du, dv, assuming the center of the window is at the VRP• Front and back clip planes: F, B, defined as distances along the VPN
• The front clip plane in the derivation below is also the view plane, hence F = 0.
Screen size (screenX, screenY), assume upper left origin
Revised Process
Setup• Create the orthonormal view reference coordinate system• and • Normalize the three vectors.
Create the canonical view volume
1. Translate VRP to the origin: T(-VRP)
2. Rotate so that the axes are aligned: Rxyz(U, VUP, VPN)
3. Translate the COP to the origin: T(0, 0, d)
4. Scale to the canonical view volume• Need to calculate the intermediate VRP’ = T(0, 0, d) * [0 0 0 1]’ = (0, 0, d)• Let B’ = d + B (new back clip plane distance)• Scale(2 * d / (du * B’), 2 * d / (dv * B’), 1/B’)• Clipping can occur here
• F’ = d + F (new front clip plane distance)• Clip volume is a clipped pyramid
Project the points and scale to image coordinates
5. Project onto the view plane using the perspective projections • Use d’ = d / B’• Size of the view plane is 2d’ x 2d’
6. Scale to the image size• Flip x-axis and y-axis if necessary• Scale2D(-screenX / 2d, -screenY / 2d)
7. Translate to the image coordinates• Translate2D(screenX/2, screenY/2)
u VUP VPN×= VUP VPN u×=
1 0 0 0
0 1 0 0
0 0 1 0
0 01d--- 0
E26/CS40 F06 Lecture Notes #11
3D Models
Now that we know how to draw stuff, what should we draw?
How about lines?
Parametric Line Equations
The regular 2D line equation is y = mx + b, but thinking that way doesn’t work well in 3D
A parametric representation uses a point and a vector to represent a line or line segment• We rarely use theoretical lines in CG• We don’t want to worry about infinite slopes and such
• P is the starting point for the segment• V is the direction of the line• t is the parameter that represents distance along the line
• If V = endpoint - startpoint, then
• If V is a normal vector, then where L is the length of the segment
Line Clipping: Liang-Barksy / Cyrus-Beck• Uses a parametric representation of a line with t = [0, 1]
Compare each line with each clip boundary using a parametric representation.• xwmin <= x1 + udx <= xwmax• ywmin <= y1 + udy <= ywmax
This comparison leads to four inequalities expressed as upk <= qk (1 left, 2 right, 3 bottom, 4 top)• p1 = -dx (xmin boundary)• p2 = dx (xmax boundary)• p3 = -dy (ymin boundary)• p4 = dy (ymax boundary)• q1 = x1 - xmin (note: all qs are positive if the endpoint is inside the window)• q2 = xmax - x1• q3 = y1 - ymin• q4 = ymax - y1
3D: expand to 6 inequalities by adding front/back• p5 = -dz (zmin boundary)• p6 = dz (zmax boundary)• q5 = z1 - zmin• q6 = zmax - z1
X P tV+=
t 0 1,[ ]∈t 0 L,[ ]∈
The results of these twelve p,q values tell us about the line• Any line parallel to a boundary has a p = 0 for that boundary
• if, for pk = 0, qk is < 0, then we have a trivially invisible line (invisible)• if, for pk = 0, qk >= 0, then the line is inside the parallel clipping boundary (visible)
• When p < 0, then the infinite extension of the line proceeeds from the outside to the inside of the infinite extension of that particular clipping boundary
• When p > 0, the infinite extension of the line proceeds inside to outside
For a nonzero value of p, we can calculate the value of u that corresponds to the point where the infinitely extended line intersects the extension of the boundary k as
• u = qk / pk
For each line we want to calculate u0 and uF that define the line segment within the rectangle• look at edges where line proceeds from outside to inside and calculate all of the u values.
Then take the maximum of that set, including u = 0. This determines u0.• To determine uF, look at all edges where the line proceeds from inside to outside and cal-
culate the u value for all of those edges. Pick the minimum value of u from that set plus u = 1. This determines uF.
• If u0 < uF, draw the line segment from u0 to uF• If u0 > uF, then the line is invisible
Algorithm:
1. set u0 = 0, uF = 1
2. compare the line to each clip boundary in turn and calculate the u value of the intersection
3. if p < 0, then use the calculated u to update u0 if u > u0
4. else if p > 0, then use the calculated u to update uF if u < uF
5. else if p = 0 and q < 0, discard the line
6. else p = 0 and the u value for that boundary does not affect u0 or uF
7. If any update results in u0 > uF, reject the line and return
8. Repeat from 2 for left/right/bottom/top
9. determine new endpoints from u0 and uF and draw the line
2D Example: View window = (0, 0) to (100, 100), line = (-20, 20) to (80, 120)• u0 = 0, uF = 1• p1 = -100, p2 = 100, p3 = -100, p4 = 100• q1 = x1 - xmin = -20, q2 = xmax - x1 = 120, q3 = y1 - ymin = 20, q4 = ymax - y1 = 80• Calculate u values: u1 = 0.2, u2 = 1.2, u3 = -0.2, u4 = 0.8• Maximum of (u1, u3, 0) = 0.2• Minimum of (u2, u4, 1) = 0.8• New endpoints are p = 0.2*dp + p1 and p = 0.8*dp + p1• (0, 40) and (80, 100)
3D Clipping example: Canonical view volume (X in [-1, 1], Y in [-1, 1], Z in [0, 1])
Line: (-3, -2, 0) to (2, 2, 1), dx = 4, dy = 4, dz = 1
1. u0 = 0, uF = 1
2. p1 = -5, p2 = 5, p3 = -4, p4 = 4, p5 = -1, p6 = 1
3. q1 = 2, q2 = 4, q3 = 1, q4 = 3, q5 = 0, q6 = 1
4. u0: q1/p1 = 0.4, q3/p3 = 0.25, q5/p5 = 0, max of (0.4, 0.25, 0.0, 0.0) = 0.4
5. uF: q2/p2 = 0.8, q4/p4 = 0.75, q6/p6 = 1, min of (0.8, 0.75, 1.0, 1.0) = 0.75
6. New startpoint is 0.4(5, 4, 1) + (-3, -2, 0) = (-1, -.4, .4)
7. New endpoint is 0.75(5, 4, 1) + (-3, -2, 0) = (0.75, 1, 0.75)
3D Polygons and the Plane equations
• Add the z coordinate to each vertex• We can represent a planar surface (polygon) with the plane equation
Surface normal to the plane has the value: (A, B, C)
The dot product of (A, B, C) with any point on the plane has value -D.
• Look at case of a plane going through the origin (D = 0)• All points make vectors that are perpendicular to the surface normal
• Look at case of a plane a distance D from the origin when (A, B, C) is normalized• Point parallel to normal is distance D from origin (normal points towards origin)• Other points are further away, but the cos(angle) value decreases to zero
Normal should point out away from the surface.
• If Ax + By + Cz + D < 0 for a point (x, y, z), it is inside the surface• If Ax + By + Cz + D > 0 then it is outside the surface.
Can also calculate the surface normal by taking three vertices (v1, v2, and v3) in counterclock-wise order when viewing the surface from the outside and calculating the cross product:
(v2-v1) x (v3 - v1)
Polyhedra are just closed surfaces made up of polygons.• To test if a point is inside a convex polyhedron, you need to compare it to all of the planes
For concave polyhedra, you need to subdivide it into convex polyhedra and do step 1
Ax By Cz D+ + + 0=
A y1 z2 z3–( ) y2 z3 z1–( ) y3 z1 z2–( )+ +=
B z1 x2 x3–( ) z2 x3 x1–( ) z3 x1 x2–( )+ +=
C x1 y2 y3–( ) x2 y3 y1–( ) x3 y1 y2–( )+ +=
D x1 y2z3 y3z2–( )– x2 y3z1 y1z3–( )– x3 y1z2 y2z1–( )–=
Polygon lists
Polygon lists are an efficient way to store lots of polygons• Point list: stores all of the vertices in a large array
• Store 3D location• Store surface normal information here for interpolation• Store texture coordinates• Store color information (for Garaud shading)
• Edge list: stores all of the edges by indexing into the point list• Store all of the scanfill information necessary for this edge• Store a link to all of the polygons the edge is a part of
• Polygon list: stores all of the polygons by indexing into the edge list• Store surface normal information for the polygon (A, B, C, D)• Store surface color/texture here• Transparency• Bounding box information
To draw a scene, you just need to render all of the polygons in the polygon list• To clip you deal with the edges
Polygon meshes• Triangle meshes
• Usually arranged as a strip• n vertices, n-2 triangles
• Quadratic meshes• Usually arranged as a strip• n vertices, (n/2)-1 quadrilaterals
• 2D mesh of vertices• Usually forming triangles• Any other polygon has the potential of getting errors because they’re not FLAT
E26/CS40 F06 Lecture Notes #12
3D Models: Implicit Algebraic Surfaces
It can be useful to have explicit representations of surfaces• Polygonal surfaces or polygon meshes are just approximations of a true surface
Implicit algebraic surfaces have the form: • It is possible to represent complex surfaces• It is possible to represent multi-valued functions (functions that have multiple solutions
for a fixed subset of the parameters)
A general 2nd-degree implicit curve is given by: • Solutions to this equation form conic sections• If the conic section is defined relative to a local coordinate system and passes through the
origin, then f = 0• If c = 1.0, then to define a curve segment you need 5 more constraints
• start and end points• slope at the start and end points• a single point in the middle of the curve
• If c = 1.0 and b = 0, then to define a curve segment you need 4 more constraints• start and end points• slope at the start and end points
Some special case equations of the general 3D 2nd order implicit surface are as follows:
Sphere:
Ellipsoid:
Torus:
SuperEllipsoid:
With the superellipsoid, you can make a wide variety of shapes including octahedrons, cubes, cyl-inders, and ellipsoids.
Implicit surfaces, however, are difficult to render and work with
• They depend strongly on the coordinate system in which they are defined• Some shapes required inifite slopes in order to define them• You can’t follow equal increments of x and y and expect even distributions of points
General process for drawing implicit surfaces• Tessallate the surface with triangles• Draw the triangles
f x y z, ,( ) 0=
ax2
2bxy cy2
2dx 2ey f+ + + + + 0=
x2 y2 z2+ + r2=
xrx----
2 yry----
2 zrz----
2+ + 1=
rxrx----
2 yry----
2+–
2 zrz----
2+ 1=
xrx----
2s2---- y
ry----
2s2----
+
s2
s1---- z
rz----
2s1----
+ 1=
Parametric Curves
Parametric curves are an alternative to implicit curves that still allow arbitrary shapes and sur-faces, including multi-valued surfaces.
Parametric curves are a function of a single variable, which is distance along the curve
Parametric curves have the form:
The tangent vector of a parametric curve is given by:
Since the slope of the curve is a function of the tangent vector, we can represent infinite slopes using zero values in the tangent vector.
Note: if you want to pre-transform a parametric curve, you can symbolically multiply the transfor-mation by the parametric vector representation to get a general equation.
Example: you can represent a circle in parametric form using either of the following equations:
The one on the left produces equal arc-length divisions of you step through theta.
The one on the right is not as good (but not bad), but is computationally cheaper
3D Models: Splines
Generating arbitrary curves by imagining parametric functions is hard
• We’d like a method of sketching curves that lets us control the properties of the curve without having to think in terms of adjusting equations
A spline is a curve with certain continuity properties that is defined by a set of control points.
We can define a surface with a set of orthogonal curves, or splines.
There are a number of things we may want to be able to do with splines:
Interpolation
When the curve passes through all of the control points, it is said to interpolate the control points.
Approximation
When a polynomial is fit to the control points without necessarily passing through any of them, it is said to approximate the control points.
Control & Manipulation
A spline curve is defined, modified, and manipulated by operating on the control points.
Can translate, rotate, and scale the curve by operations on the control points.
The polygon boundary enclosing the set of control points is the convex hull of the points. Some splines are guaranteed to fall within the convex hull of the control points.
The convex hull can act as a bounding surface if the curve lies within it
P t( ) x t( ) y t( ) z t( )=
P' t( ) x' t( ) y' t( ) z' t( )=
P θ( ) θcos θsin= P t( ) 1 t2
–
1 t2
+------------- 2t
1 t2
+-------------=
Definition: the convex hull of a set of points is the minimal convex polygon that contains all of the points (all vertices of the convex polygon will be points in the set)
Parametric Continuity
Often, to approximate a complex curve you need to have many smaller, simpler curves
How do the various curves in a spline meet? A spline can be more than a single curve.
Zero-order parametric continuity - the splines meet
First-order parametric continuity - the first derivatives of the two curves are identical
Second-order parametric continuity - the second dervatives are identical
First order continuity means you can have an abrupt change in acceleration at the control point, which can be bad if used for controlling real objects in the world (like a camera).
Spline Representations
Three representations of any spline:• The set of boundary conditions specifying the spline• The matrix that characterizes the spline• The set of blending functions that characterizes the spline•
Cubic Interpolation Splines
The curves are defined as cubic polynomials of the parameter u
• x(u) = axu3 + bxu
2 + cxu + dx
• y(u) = ayu3 + byu
2 + cyu + dy
• z(u) = azu3 + bzu
2 + czu + dz
Can also put the above equation into a matrix form
Given a set of N+1 control points, we want to define N different cubic splines that interpolate the control points. We may also want some form of continuity between each spline segment.
Natural Cubic Splines• The total curve has C2 continuity• Given N splines (N+1 points), we have 4n coefficients per dimension to calculate• N-1 interior points each provide 4 constraints = 4n-4 equations
• C1 continuity for adjacent splines• C2 continuity for adjacent splines• C0 continuity: curve N ends at the point, and curve N+1 begins at the point
• Exterior points provide 2 more constratints = 4n - 4 + 2• The curve ends at each endpoint
• Need to specify two more constraints• Specify the tangent at the endpoints• Specify two “dummy” points, one at each end, so that there are N+1 “interior” points
Natural cubic splines are globally sensitive to changes at a single control point
You can set this all up as a single matrix in each dimension (good size matrix)
x
y
z
ax bx cx dx
ay by cy dy
az bz cz dz
u3
u2
u
1
=
Hermite Spline (interpolating)
Hermite splines allow local control of a spline, each segment is a single 3rd-order curve• user specifies the tangent and location at each control point• user can adjust the tangent at one point and only modify the two adjacent splines• By completely specifying each segment using the endpoint characteristics, a collection of
Hermite splines for a series of curves where each segment only cares about its neighbors
Hermite splines can be calculated for two control points at u = 0 and u = 1• P(0) = pk• P(1) = pk+1• P’(0) = Dpk• P’(1) = Dpk+1
Set up matrix form P(u) = [u^3 u^2 u 1] [a b c d]t
Set up the derivative form P’(u) = [3u^2 2u 1 0] [a b c d]t
Now write the complete matrix for the endpoint values 0 and 1
Note that [a b c d] is a 4 x 3 matrix, as is the pk matrix.
We can take the inverse of this matrix and write the [a b c d] values in terms of the endpoint speci-fications and the Hermite matrix Mh.
Now we can write P(u) in terms of Mh, the end-point conditions, and the u vector
Now we don’t have to solve any equations and we can calculate the spline in terms of the control points (make lines between values calculated at equal increments of the u parameter.
Cardinal Splines (interpolating)• Everything is set by the control points, estimate derivatives by looking at the neighbor points• 2 “free” points at each end of the curve to specify the endpoint tangents• Use a tension parameter, t, to control the tightness of the curve.• Interpolating curve.
• P(0) = pk• P(1) = pk+1• P’(0) = 1/2 (1 - t) (pk+1 - pk-1)• P’(1) = 1/2 (1 - t) (pk+2 - pk)
Here is the cardinal matrix with s = (1-t)/2, note that the matrix is for [pi-1, pi, pi+1, pi+2]t
Can generate a sequence of curves where each curve affects two neighbors to each side• Less independent than Hermite splines• Control points provide all of the required constraints
pk
pk 1+
D pk
D pk 1+
0 0 0 1
1 1 1 1
0 0 1 0
3 2 1 0
a
b
c
d
=
P u( ) u3
u2
u 1
2 2– 1 1
3– 3 2– 1–
0 0 1 0
1 0 0 0
pk
pk 1+
D pk
D pk 1+
=
s– 2 s– s 2– s
2s s 3– 3 2s– s–
s– 0 s 0
0 1 0 0
E26/CS40 F06 Lecture Notes #13
Cardinal Splines (interpolating)• Everything is set by the control points, estimate derivatives by looking at the neighbor points• 2 “free” points at each end of the curve to specify the endpoint tangents• Use a tension parameter, t, to control the tightness of the curve.• Interpolating curve.
• P(0) = pk• P(1) = pk+1• P’(0) = 1/2 (1 - t) (pk+1 - pk-1)• P’(1) = 1/2 (1 - t) (pk+2 - pk)
Here is the cardinal matrix with s = (1-t)/2, note that the matrix is for [pi-1, pi, pi+1, pi+2]t
Can generate a sequence of curves where each curve affects two neighbors to each side• Less independent than Hermite splines• Control points provide all of the required constraints
s– 2 s– s 2– s
2s s 3– 3 2s– s–
s– 0 s 0
0 1 0 0
Cardinal Spline Range of derivative endpointstension = 0.2
Range of derivative endpointstension = 0.5
Tension at 0.2, 0.6, and 1.0Cardinal spline
Cardinal splineHermite spline with a rangeof derivative values
Kochanek-Bartels Splines (interpolating)
Everything is set by the control points plus three parameters• tension (t)• bias (b)• continuity (c)
This allows the user to specify discontinuous curves• If c = 1, then (pk - pk-1) derivative is not used, nor is (pk+2 - pk+1) derivative• Bias parameter has the opposite effect as the continuity parameter
The individual equations are:• P(0) = pk• P(1) = pk+1• P’(0) = 1/2 (1 - t) [1+b)(1-c)(pk - pk-1) + (1-b)(1+c) (pk+1 - pk)]• P’(1) = 1/2 (1 - t) [1+b)(1-c)(pk+1 - pk) + (1-b)(1+c) (pk+2 - pk+1)]
K-B splines have a similar matrix to Cardinal splines
K-B splines are useful for defining some animation sequences since they allow discontinuous curves.
Bezier Curves (approximating)
Characteristics• Curve goes through the first and last points.• All curve characteristics are determined by the control points.• The curve lies within the convex hull of the control points.• The curve at each point is a weighted sum of the control points.• All control points affect the entire curve.
In general, a Bezier curve can have any number of control points, with the order of the curve determined by the number of control points and their relative positions.
The basis function for Bezier curves are the Bernstein polynomials:
As a rule, the order (n) of the polynomial is one less than the number of control points, which are numbered from 0 to k, with k = n.
The slope (tangent) at the beginning and end of a Bezier curve is the same as a line joining the last two control points.
We get first-order continuity by having three control points in a row (tangents of adjacent curves are the same). We get second order continuity by calculating the position of the third control point in the curve relative to the last three ponts of the previous section.
Second-order continuity can be unnecessarily restrictive in cubic Bezier curves as it sets 3 of the four control points in each curve.
BEZk n, u( )n!
k! n k–( )!-----------------------u
k1 u–( )n k–
=
pn 2– 4 pn pn 1––( )+
Cubic Bezier Curves
The four blending functions for a cubic are:
1) 2)
3) 4)
The Cubic Bezier matrix is:
Which means that to completely define a Bezier curve we just need the four control points:
BEZ0 3, u( ) 1 u–( )3= BEZ1 3, u( ) 3u 1 u–( )2
=
BEZ2 3, u( ) 3u2
1 u–( )= BEZ3 3, u( ) u3
=
MBez
1– 3 3– 1
3 6– 3 0
3– 3 0 0
1 0 0 0
=
BEZ u( ) u3
u2
u 1
1– 3 3– 1
3 6– 3 0
3– 3 0 0
1 0 0 0
px0
py0
pz0
px1
py1
pz1
px2
py2
pz2
px3
py3
pz3
=
Drawing Bezier Curves
To draw Bezier curves and surfaces we subdivide them into lines/polygons for drawing• Control points are approximations to the curve• We can add control points until they approximate the curve and then draw lines
de Casteljau algorithm• recursive definition of any point on the surface as a series of weighted combinations of the
control points
•
• r = 1, ..., n; i = 0, ..., n-r;
• If n = order of the curve, then is the point on the curve at parameter value u
• p0 level are the original con-
trol points, p1 level are inter-polations of the control points, etc. There is one less point at each level.
• DC algorithm provides not only the curve value for the given u, but also the control points for the segments [0, u] and [u, 1].
• So we can recursively subdivide the curve into more numerous, smaller curves. If we do it using u = 0.5, then all of the calculations require division by 2 and 4 (fast).• q0 = p0• q1 = (p0 + p1) / 2• q2 = q1/2 + (p1 + p2)/4• q3 = (q2 + r1) / 2• r0 = q3• r1 = (p1 + p2)/4 + r2 / 2• r2 = (p2 + p3) / 2• r3 = p3
• Since the control points represent the convex hull, as the curve gets smaller and smaller, the control points get closer and closer to the surface.
• Terminating the subdivision:• Stop when a curve is the size of a pixel• Stop at a uniform subdivision• Stop any particular segment when the two inner points are close enough to a line connect-
ing the two outer points, then draw the line connecting the two outer points.
pir
u( ) 1 u–( ) pir 1–
u( ) u pi 1+r 1–
u( )+=
pi0
u( ) pi=
p0n
u( )
p00
p20
p30
p10
p01
p11
p21
p02 p1
2p0
3
Bezier Surfaces
Use two sets of orthogonal Bezier curves to design an object’s surface.
To model a surface• Select a rectangular mesh on the ground plane• Select the control points depending on the height of the surface you want to model.
Alternatively, just pick some control points for a funky shape.
By setting the starting and ending control points at the same location you get a closed surface
Drawing Surfaces
Since the surface curves are orthogonal, subdivide each curve like a 2D curve
Stop subdividing a patch when it is deemed to be planar• Disregard the center points and the central edge points• Convert the patch into two triangles• Draw the triangles
Problem is cracking• A neighboring patch may still need to be subdivided• Cracks may show if the two edges are not identical
One solution to cracking• When a patch is judged “planar” modify the control points along each edge to be colinear• Creates a slightly different surface than the original
Another solution to cracking• Just do uniform subdivision
Other cool objects
Making planets and asteroids• Start with an octagon• Divide each triangle into four• Perturb the vertices to get asteroids
The most famous object in computer graphics
The Utah teapot (top center)• Constructed based on an actual teapot• Constructed completely from cubic Bezier patches• Can be used to demonstrate many effects
• Texture• Reflection/transparency• Subdivision of surface patches• Shadows
P u v,( ) p j k, BEZ j m, v( )BEZk n, u( )k 0=
n
∑j 0=
m
∑=
E26/CS40 F06 Lecture Notes #14
Hidden Surface Removal
Definitions
Surface Normal - points away from the surface
View Vector - vector from the surface point to the viewer
Light Vector - vector from the surface point to a/the light source (might be a global direction)
Preview: Lambertian reflection: I = |L||C| (L * N) = |L||C| cos(theta)
To figure out what color to draw a polygon, just calculate the lambertian coefficient and multiply that times the color of the object (under white light). Then scanline fill the polygon.
Backface Culling
Use the polygon equation and the definition of “out” to cull back-facing polygons.
Take dot product of view vector and polygon surface normal
• If product is negative, draw it• else, ignore it• Works perfectly for unoccluded convex objects
Use this concept for wire-frame diagrams as well
• Represent objects using vertex, edge, and polygon lists• Just draw edges associated with visible polygons
Backface culling works well as a precursor step to other hidden-surface removal algorithms because it reduces the number of polygons you have to deal with.
Can use a similar calculation when determining a surface’s appearance, because if the dot product of the light vector and the surface normal is negative, the light is not shining on that surface.
Painter’s Algorithm
Oil painters draw the background first, then the stuff in front.
Concept: sort polygons by depth and draw them in that order
• for polygons that don’t overlap in depth, this is easy• for polygons that overlap in depth there are still special cases that don’t require splitting
• The bounding rectangles are disjoint in the xy, xz, or yz planes
• The overlapping surface is completely in front of S relative to the viewer
• The projections of the two surfaces on the view plane do not overlap
• for polygons that intersect, divide them along the intersection line• Alternatively, recursively divide the polygons in half by depth until things are ok
Works well for quick and dirty pictures of scenes
• Cull out the polygons that don’t face the viewer
• Calculate color for each polygon• Transform the vertices & clip them to the screen• Draw the polygons in order from back to front after sorting by depth
Sorting is O(NlogN), average case, so that’s the approximate cost for each rendering when you change viewpoints.
BSP Trees
Can we develop a variation on the painter’s algorithm that is O(N)?• We need a data structure that is invariant to viewpoint and sorts the polygons front to back
Consider a set of polygons• Each polygon is a piece of an infinite plane that divides the world into two pieces.• The viewer is on one side of that world• All the polygons on the same side as the viewer are ‘in front’ of the dividing polygon• All the polygons on the opposite side as the viewer are ‘in back’ of the dividing polygon
Given a single dividing polygon, we want to draw the polygons in front of it first, then the divid-ing polygon, then the polygons in back.
Remember the plane equation?
or
It turns out that if p is on one side of the plane, and if p is on the other side• Provides a simple method of dividing the world into two pieces
This suggests a binary tree type data structure• Assume, to begin with, that no polygon intersects another• Pick a polygon as the root of the tree• Add the rest of polygons to the tree according to whether they are on the negative or posi-
tive side of each node in the tree above them• The data structure is independent of viewpoint, and only depends upon polygon geometry
Drawingfunction draw(BSPtree bp, Point eye)if(empty(bp)) return;if( f(bp->node, eye) < 0 ) // viewer is on the negative side
draw(bp->minus, eye);drawPolygon(bp->node);draw(bp->positive, eye);
}else {
draw(bp->positive, eye);drawPolygon(bp->node);draw(bp->negative, eye);
}}
Building the data structure in realistic scenes requires dealing with intersecting polygons• Basic approach is to split intersecting polygons into two pieces
• Create 3 triangles out of the intersecting polygon• Calculating the ray-plane intersection is easy• Problem is vertices that are very close to the plane
Ax By Cz D+ + + 0= f p( ) A px B py C pz D+ + +=
f p( ) 0< f p( ) 0>
If we use a parametric representation of an edge of a triangle:
The normal of the plane is given by the coefficients of the plane equation:
The parameter values for the intersection location is
The intersection point is computed by putting into the parametric line equation above.
Dealing with points that are close to a plane• Define a small epsilon value• If any vertex is within epsilon of the plane, treat as being on the plane (f(p) = 0)• Use a >= type test to evaluate if all the vertices of a polygon are on one side of the plane
Because of intersections, some trees are better than others in terms of the number of polygons• Since the tree is only traversed during drawing, balance is irrelevant• Number of polygons is the only determinant of drawing time = O(N)• Number of possible trees is large (N!)• Instead, randomly select a few polygons and build trees, keep the one with minimum N
Z-buffer Algorithm
Create a depth buffer in addition to an image buffer• Initialize the depth buffer to the maximum distance• Initialize the image buffer to the background color
Clip polygons to the screen
Scan-convert polygons individually• Calculate z-values for each pixel using the depth-conversion algorithm• For each pixel
• If the new depth value is closer than the buffer• Draw the pixel color in the image buffer• Update the depth buffer with the new value
• Else• Don’t do anything, it’s behind another polygon
This is fast, but it doesn’t do transparency or shadows
Z-buffer provides a fast and easy way to render polygons
Benefits• Fast, can be implemented easily in hardware
Drawbacks• May visit pixels more than once• Doesn’t permit transparency
Handling perspective projection• Z values are not linear relative to X and Y under perspective projection• Interpolate 1/Z instead, which is linear relative to X and Y
• Set the Z-buffer to 0 (infinity) or 1 (back clip plane)• Test to see if 1/Z is greater than the current value in the Z-buffer• Near clip plane is at 1/F’, where F’ = d/B’
p t( ) a t b a–( )+=
n A B C, ,( )=
tin a⋅ D+
n b a–( )⋅------------------------–=
ti
E26/CS40 F06 Lecture Notes #15
Hidden Surface Removal
Scanline rendering of multiple polygons
Scanline rendering is an efficient way of rendering multiple polygons simultaneously
Backface cull the polygon set
Transform vertices to the canonical view volume and clip• Now you have a list of visible polygons
For each scanline• Update the active edge list that has all of the edges of all of the polygons that intersect that
scanline• Edges come in pairs (starting/ending)
• Keep an active polygon list that has all of the polygons that cover a given pixel• For each pixel
• Update the active polygon list (update depth and then sort on it)• Draw the pixel of the polygon in front
Benefits of a scanline rendering approach• Only visits each pixel once• Can do simple transparency since you know all of the polygons intersecting a pixel
Drawbacks• Hard to put into hardware since it requires lots of dynamic memory management
Making it more efficient• Precalculate spans by calculating intersections between overlapping polygons (in depth)• Fill the spans (no sorting at each pixel)
A-buffer Algorithm
The A-buffer algorithm also deals with the Z-buffer disadvantages
Allows fast transparency (still no shadows)
Create an A-buffer in addition to an image buffer• The A-buffer consists of pointers to ordered linked lists
• Initialize the A-buffer to all NULL values• Initialize the image buffer to the background color
Clip polygons to the screen
Scan-convert polygons individually• Calculate z-values for each pixel using the depth-coversion algorithm• For each pixel
• Try to insert a pointer to the polygon information in that pixel’s ordered linked list• If the polygon is going to be inserted behind an opaque polygon
• Don’t insert it into the list; it’s hidden• Otherwise
• Insert the polygon at the appropriate place in the list
• Calculate image buffer values from the A-buffer values using transparency• Color = (1 - trans) * polygon color + trans * (color behind)• Recursion through the lists gives you the pixel color
• Deal with aliasing by also storing the percentage of the pixel covered by each polygon
Enhancements to the Z-buffer• Make the depth values fit in a set of fixed buckets (0-255, or 0-64000), for example)
• You can clip to the front and back planes while doing scan conversion• Back plane distance in CVV space = 1• Front plane distance in CVV space = (vrp’.z + F) / (vrp’.z + B)
• Sort the polygons by depth prior to rendering to reduce the number of shading calculations• Only make the shading calculation when necessary• Could use BSP trees for this, drawing front to back instead of back to front
• Supersample to reduce aliasing• Hierarchichal z-buffer
• Use multiple levels of z-buffer, dividing by half in each direction to go up a level• Do comparisons at the highest level possible• If a pixel at a higher level is completely covered it is covered at a lower level• The final picture is a composite of the highest resolution levels needed for each pixel
Floating Horizon Algorithm
You want to look at a function of the form y = f(x, z) (parallel projection)
1. Decide on a viewpoint (not looking straight down)
2. Determine if planes in x or z are more horizontal to you the viewer
3. Initialize lower and upper horizon boundaries to the top and bottom of the screen, respectively
4. For planes from front to back• Intersect the plane with the function at each column across the image to calculate the y• If this pixel is lower than the lower horizon, update the lower horizon and draw it• If this pixel is above the upper horizon, update the upper horizon and draw it• Don’t plot the point if it is between the lower and upper horizons (hidden)
5. To execute cross-hatching (i.e., planes in x and z)• Make the outside loop walk along the orientation that is more
horizontal to the viewer• Before moving to the next planar section (i+1), do the cross-
sections between the current plane (i) and the next plane (i+1)
i
i+1
Shadows
Three methods for creating shadows using a Z-buffer
Shadow polygons
1. Transform the scene to the point of view of each light source
2. Using Weiler-Atherton, clip polygons to see which ones are visible from each light source. • The remaining part of the polygon is in shadow from that light source• Add the “shadow” polygon to the shadow list, and link it to the original polygon
3. Render the scene with the regular polygons
4. Then do a “shadow” pass, where each light source’s contribution is removed at the appropriate places
This can also be done by creating a shadow volume for each polygon• Each polygon creates a shadow volume defined by the polygon and the light source• The sides of the shadow volumes are, effectively, shadow polygons and can be rendered
using an A-buffer algorithm or a Z-buffer and a shadow buffer (a bit for each light source)• Shadow polygons exist in their own world, and do not block one another or surfaces• Surfaces do block shadow polygons• You need to count how many visible shadow polygons occur at a pixel
• If one shadow polygons for a given volume occurs at a pixel, then the point is in shadow from that light source
• If two (or an even number) of shadow polygons occurs at a pixel, then the point is lit from that light sourceø
Shadow Z-buffer
1. Render the scene from the point of view of each light source, but just generate the z-buffer• These are the shadow z-buffers
2. Render the scene normally• For each pixel P and for each light source L
• Transform the point from screen coordinates to the shadow buffer for light source L• If the transformed value falls behind the light buffer value, the point is in shadow
Problems: Aliasing is really bad both spatially and wrt the z-value comparisons• The comparison of the transformed z-value with the value in the light buffers is subject to
significant aliasing, especially for surfaces that are close to one another• Add a random bias to the transformed z-value of the object, making it closer to the
light source within some range, where the minimum bias is > 0• A pixel in the viewer z-buffer may map to multiple pixels in the shadow z-buffers
• Calculate the bounding box of the transformed pixel in the shadow z-buffer• Bounding box may span a lot of pixels• Subdivide the bounding box into a fixed number of equal-sized regions• Take a jittered sample from each region• Return the percentage of the samples that were behind the transformed z-value
• % * (intensity from light L) = contribution from light source L
Shadow Rays
Render the scene using a Z-buffer technique
At each pixel• Cast a shadow ray from the surface towards the light source• Intersect the shadow ray with all of the objects in the data base• If the ray is blocked, the point is in shadow
For soft shadows• Make light sources spheres of a finite radius• Set up a grid (hexagonal) on the apparent circle of the sphere• Send jittered shadow rays towards each grid point on the hexagonal subdivision• The number of shadow rays that hit the sphere determines the intensity of that light source
Ray intersections are fairly easy to execute with a variety of objects• Polygons are actually somewhat difficult
• Intersecting with the plane of the polygon is easy• Figuring out if the intersection is inside the polygon is harder, but not too bad for con-
vex polygons (test if the intersection is inside or outside each edge)
This method does require having a static DB of objects, so you have to separate your modeling system from your rendering system (but so does the shadow polygon method)
E26/CS40 F06 Lecture Notes #16
Illumination and Reflection
Question: what does stuff look like?
Need to know about• light sources• reflection models• fast ways to combine the two with hidden surface removal algorithms (Z-buffer)
Modeling Illumination Sources
Ambient light• Ambient light is everywhere• It is a simple attempt to model diffuse interreflection• Ambient light is represented by a constant color/intensity RGB tuple• R, G, and B are in the range [0, 1]
Directional light source• Assumption is that the light source is very far away• The L direction vector does not change across the surface• Direction
• Express as a vector in world coordinates• If assuming white light, just give an intensity
• Express as a value from 0 to 1, or from 0 to 255• If you want color, use an RGB tuple
• Express as either a 3-tuple between 0 and 1, or as values from 0 to 255• Under parallel project, the simplest lighting case is to make the L direction vector the
same as the DOP (no shadows)
Point light sources• Intensity
• Express as a value from 0 to 1, or from 0 to 255• Color
• Express RGB values as either between 0 and 1, or as values from 0 to 255• Position
• Express in either model or world coordinates• Have to explicitly calculate L each time you make an appearance determination• Note: you might want to connect point light sources to objects so that they move with the
object according to model transformations; e.g., the lights on the Enterprise.
Spot light sources• A point light source with limitations• Specify a cone using an angle (store the cosine of that angle)• Specify a spot direction which provides the center of the cone• When you make an appearance determination
• Calculate the light source to surface direction (-L)• Take the dot product with the spot direction• If result is < cosine of spot angle, the light source is not visible at that surface
• To create penumbra effects, have the intensity fall off as cosn instead of making a hard decision at the edge of the light cone.
• Area light sources• More difficult to compute• Need to sample the light source area from the surface (ray casting)
• Calculate multiple L vectors using random points on the light source surface• Average the light source intensity values• Use the average values to make the appearance determination
Incorporating Illumination into a Modeling System
While drawing a scene, maintain a list of light sources• The simple way is to just define all lights in world coordinates before drawing• The problem is that sometimes you want to attach lights to objects in the scene
Light sources can get inserted into a scene exactly the same way as any other graphic primitve• Create a light object that gets stored as part of the module
• Lights function the same way as points or polygons: transform by VTM*GTM*LTM• Put them in the top level module for global illumination effects
• Make sure they’re defined prior to drawing anything• Put them inside lower level modules to connect the light sources with objects
• May want to make some light sources affect only surfaces at or below the module in which they are defined
Always use all of the lights on the active light source list to render a surface
An alternative is, when drawing, undertake a light source pass prior to a rendering pass• Calculate where all of the light sources should be• Use all light sources when rendering• Another reason to separate the interpretation pass and the drawing pass
Modeling Reflection
We know the intensity and color of the light falling on a surface and can calculate the L vector(s)
What does the surface look like?• Surface color & intensity
• Specify as an RGB tuple (0..1, or 0..255)• Surface geometry
• Surface normal• View vector
Inhomogeneous Dielectrics: paint, plastic, paper, ceramics, cloth, ...• Any material that is a substrate with pigment particles• Most light is absorbed into the surface and re-emitted as the body color of the object• Some light reflects off the surface and is not modified (in color) by the surface
Metals/Conductors• Light that penetrates the surface is absorbed by the material and re-emitted as black-body
radiation (typically not in the visible range)• Most light energy is reflected at the surface (up to 80%)• Surface reflection of metals can modify the reflected color (gold, copper, bronze, etc)
Ambient reflection• Helps to assume that there is some light just bouncing around the world• No particular direction or source• Constant value across the surface• Define ambient illumination La = (Ra, Ga, Ba)
• Define ambient surface Ca = (Rca, Gca, Bca)
• Define ambient reflection Ia = (Ra * Rca, Ga * Gca, Ba * Bca)
• Let the elements of La and Ca be in the range [0..1]
Body reflection• Light is absorbed by the material• Light is re-emitted at specific wavelengths (gives color of the material)• Light is re-emitted in random directions• Intensity of re-emitted light is dependent upon the amount of energy incident on the surface• Energy is dependent upon the angle of incidence• Perfect diffuser assumption makes a Lambertian surface
• Appearance of the surface is only dependent upon the angle of incidence•
• , and so on for each color band
• L and Cd need to be in the range [0..1] for this representation to work correctly
Surface reflection
Light is reflected at the surface• Illumination color does not change for most man-made materials
• This is called Neutral Interface Reflection [NIR]• The intensity of the reflection depends upon the viewing direction and angle of incidence
The important angle is between the perfect specular direction (R) and the surface normal (N)
• Phong model: Is = LCs cosn(phi)• n is the specularity coefficient• Perfect reflection direction: R = (2N * L)N - L• When the view vector V = R the viewer is at the maximum reflection direction
Can also use the halfway vector (between L and V): H = (L + V) / | L + V|• When H = N then the viewer is at the maximum reflection direction• Note that (L + V) * 0.5 is an approximation to H that works ok and is fast• (H * N) gives a similar appearance to (R * V), and slightly easier to calculate• Note: Rogers is completely off on this
Overall lighting equations:
Incorporating all three types of reflection: ambient, body, and surface:
I LCd θcos=
R LrCdr θcos=
I LaCa LCd L N⋅( ) LCs H N⋅( )n+ +=
Over multiple light sources, sum the body and surface reflection components:
In the real world, things get dimmer the further away they are. We can model distance attenuation using an inverse function of distance. The denominator is usually a polynomial in distance:
In the real world, a0 and a1 are zero and a2 is non-zero. In the graphics world, this causes too much effect. You can use a single d (distance from viewer), or multiple d’s (distances from lights)
Multiple light sources with attenuation (put f(d) inside the summation if using light distance):
I LaCa Li Cd L N⋅( ) Cs H N⋅( )n+[ ]
L∑+=
f d( ) min 11
a0 a1d a2d2
+ +--------------------------------------,
=
I LaCa f d( ) Li Cd L N⋅( ) Cs H N⋅( )n+[ ]
L∑+=
E26/CS40 F06 Lecture Notes #17
Real Surface Reflection
Microfacet model: Cook & Torrance (there are others)• Based on the idea that a surface contains a lot of small microfacets• Each microfact has its own body and surface reflectance• The level of variation in the slope of the microfacets determines surface roughness
The overall model is:
F = Fresnel Reflectance• This is the percentage of light that gets reflected at the boundary• It is dependent upon wavelength (color)• It is dependent upon the incident angle
• At higher grazing angles, more light is reflected• As the incident angle changes, the color can change, especially for metals
• Blinn uses a simplified model that is only dependent upon viewing angle, works well for surfaces other than colored metals.
D = distribution of normals (or slopes) = • alpha is the angle between the normal and the halfway vector• Note: Rogers gets it right here
G = geometric attenuation factor =
N = macro surface normal
L = light source direction
V = viewer direction
H = angular bisector of V and L
Implementing Reflection Models
Create a function that outputs a “contribution” for a light source• Arguments
• Surface point position (for calculation of Light vector)• Surface normal• View position• Surface diffuse color (also used as ambient color)• Surface specular color• Light structure (includes light position, or at least direction)
• Result is a color vector (use [0..1] values throughout the color calculations)
RsFπ--- DG
N L⋅( ) N V⋅( )-----------------------------------=
ce
α( )tanm
---------------- 2
–
min 12 N H⋅( ) N V⋅( )
V H⋅( )---------------------------------------- 2 N H⋅( ) N L⋅( )
V H⋅( )---------------------------------------, ,
Light Structure• type (AMBIENT, POINT, DIRECTIONAL, SPOT)• position (vector)• direction (vector)• color & intensity (vector or color vector)• angle or cos(angle) for spotlights (double)
Calculating the total contribution• Sum of individual contributions• Limit the result to the range [0.1] and scale to the color values needed (i.e. [0, 255])
Part of the lighting calculation involves surface normals• Models need to include a surface normal for each vertex• For single polygons, the plan normal serves as the surface normal• For meshes, normals can be calculated as the average of the touching polygons• For polyhedra, blending adjacent polygon orientations can cause funny effects
• e.g.: cubes need separate surface normals for each face
Surface normals are vectors• The surface normals need to rotate along with the object (e.g. Matrix_xformPolygon)• Vectors are directions, and therefore invariant to translation• An easy way to integrate vectors with matrix transformations is to set the homogeneous
coordinate to zero since all translations are in the fourth column of the matrix
Shading
How and where the shading calculations occur determines the appearance of objects
Flat Shading
Flat shading implies each polygon is a single color, although it may be shaded appropriately. The result is a faceted look for the polygons.
• Make the calculation of the color of a polygon once• Use the surface normal for the defining plane (appropriate direction)• Use the average position of the vertices as the point to do the calculations
Gouraud Shading
Gouraud shading uses interpolation of colors at the vertices to achieve a smooth shading result• Make the calculation of the color of a polygon at each vertex
• Define a surface normal at each vertex• Define a color at each vertex
• Interpolate colors across the polygon• Add a dcPerScan and cIntersect to your Edge record in the scanline fill algorithm
• OpenGL does this, most games do this• Minimizes the number of shading calculations (only at vertices)• Gives you reasonable shading effects• Can approximate smooth surfaces with polygons
• Gouraud shading is subject to Mach banding• Discontinuous first derivatives cause Mach banding• Our eyes “overshoot” at the edges and we perceive lines
Phong Shading• Make the calculation of color/intensity at each point on a polygon
• Need to have positions• Interpolate position as you move across the polygon surface• dpPerScan, pIntersect (vectors)
• Need to have surface normals• Define surface normals at vertices• Interpolate surface normals across the polygon surface• dnPerScan, nIntersect (vectors)
• Use the interpolated values to calculate the shading/color at each point on the surface• Better graphics systems do this• Phong shading reduces or eliminates Mach banding
Illumination and Reflection within a Z-buffer Algorithm
Flat shading• Easy to implement• Calculate the color when you create the polygon• No need to change your z-buffer scanline algorithm
Gouraud shading• Easy to implement• Calculate the colors at the vertices when you create the polygon• Modify your z-buffer scanline algorithm
• Takes an array of colors as well as an array of vertices• Add cIntersect and dcPerScan to your edge record• Modify MakeEdgeRec to calculate the cIntersect and dcPerScan values• Modify FillScan so that it interpolates the colors across a span
Phong Shading• Moderately easy to implement• Need to significantly modify the z-buffer algorithm
• Pass in surface normal for each vertex• Pass in a true CVV or world coordinate for each vertex (not the screen + depth)• Pass in a color for the polygon (or a color for each vertex)• Modify MakeEdgeRec to set up the edge record
• Set up true position interpolation• Set up surface normal interpolation
• Modify FillScan to interpolate positions and normals• For loop interpolates positions and normals• Calculate shading at each position
• Speedups• Use directional lighting and parallel projection (viewer at infinity)
• don’t have to recalculate the light vector or the view vector• don’t need to know the true position of the point
• Calculate shading at every nth pixel• Interpolate the ones in between unless adjacent values are fairly different• This catches most highlights but saves a lot of computation
Where to do the lighting calculations• For Flat or Garaud shading
• Needs to happen just before you call the Z-buffer scanline algorithm• Transform the points to world coordinates or CVV coordinates (don’t apply the vtm)• Transform the normals to world coordinates or CVV coordinates (don’t appy the vtm)• Transform the lights to world or CVV coordinates
• Benefit of CVV coordinates is that the viewer is at the origin (easy V calculation)• Calculate the shading/color for each vertex using all active lights• Apply the vtm to the points• Send the points and the color(s) to the z-buffer scanline algorithm
• For Phong shading• Needs to happen inside the z-buffer scanline algorithm• Transform the points and normals to world coordinates• Make a copy of the points transformed to screen coordinates• Pass them all to the z-buffer scanline algorithm
Fog• Things get foggier as they get further away• Fog is an exponential function of depth from the viewer
• fog = • Can add a small random value to either the density or z-value • Can also create fractal functions so that the fog looks like natural clouds rather than haze• The Perlin noise generator works well for this application
• How this connects with your z-buffer...• The z-values you have for objects inside your view space (between the COP and the back
plane) will vary from 0 to 1.• z-values greater than 1 are not technically visible since they’re behind the back plane
Aside: Correcting Perspective Distortion
Z does not actually vary linearly over a line or polygon in image space• Consider a line from 0-100, and 100-200: the second line will be much shorter
1/Z does linearly interpolate across the image• Consider the homogeneous coordinates [x y d d/Z]
• (x, y, d) are the normalized screen coordinates• d = Zd/Z (z-value after the perspective projection)
• Interpolate [x y d d/Z] across the polygon• At each pixel, calculate the correct z value by taking d/(d/Z) = Z• You can also get the CVV X and Y values (for lighting calculations) by dividing by d/Z.
You can use the same technique for correcting surface normals and colors while interpolating• Represent the vector as: (a/z, b/z, ..., 1/z)• Interpolate each element of the vector linearly across the polygon• To get the true values of (a, b, ...), divide (a/z, b/z, ...) by 1/z
For surfaces where z doesn’t change much relative to the projection distance, it won’t matter much whether you do perspective correction or not.
ez density×( )2–
E26/CS40 F06 Lecture Notes #18
Texture and Surface Effects
1. Real surfaces are not smooth
2. Real surfaces have patterns, color variations, and dirt on them
3. Real surfaces reflect parts of their environment
Adding texture to smooth surfaces
Use one polygon instead of 1000s to model a brick wall• Given: a picture containing the pattern of a brick wall• Given: a coordinate system on the picture containing the pattern
• Assume the picture is defined by 2D texture coordinates from ([0..1], [0..1])• Given: a parametrically defined surface onto which we want to map the texture• Problem: find a mapping from texture coordinates to the parametric surface coordinates
Let the texture coordinates be represented by (s, t)
Let the parametric surface coordinates be represented by (u, v)• u = f(s, t) v = g(s, t)
Assume linear mapping functions and orthogonality of u,v and s,t• u = As + B• v = Ct + D
Use two registered points in (u, v) and (s, t) to calculate (A, B, C, D)
Calculate the inverse function to get the parametric to texture coodinate mapping• This is what you really want since you generally have (u, v) but not (s, t)
General Texture Mapping Method• Given a pixel P = (x, y)
• The pixel covers some area of the image, defined by its corners• Calculate the world coordinates of the pixel corners (could interpolate)
• Know depth (interpolate)• Reverse CVV -> image mapping
• undo the division by the homogeneous coordinate• multiply by the inverse of the last three steps in the view transformation sequence
• Calculate the parametric values of the pixel coordinates• Use the inverse mapping from (u, v) to (s, t) to get texture coordinates• Average the values in the area covered by the pixel (can approximate with a box)
• Aliasing is one of the big problems with textures• Pixels often cover large areas of the textures
• Box filters to find averages• Jittering to do fast sampling
Fast Texture Mapping in a Z-buffer Context
What if we don’t want to deal with the mappings and taking inverses of matrices?• When you create a vertex, assign it a texture coordinate
• Do this by hand (small numbers of polygons)• Write a procedure to assign texture coordinates (e.g. subdividing a Bezier curve)
• Interpolate texture coordinates across the surface• tIntersect (2D vector):
• texture coordinates for the intersection of the edge with the current scanline• dtPerScan (2D vector):
• how the texture coordinates change along the edge as you move up a scanline• At each pixel
• Calculate the (s, t) values for the corners of the pixels• look at: (s, t), (s+dsdx, t+dtdx), (s+dsdx+dxdy, t+dtdx+dtdu), (s+dsty, t+dtdy)• dsdx and dtdx you have from the interpolation across a scanline• To get dsdy and dtdy, you need to interpolate the previous row as well
• Estimate the texture values that falls inside this range• average over the bounding box• estimate using jittering
• Calculating the correct (s, t) values under perspective projection• The (s, t) values do not actually vary linearly across the image
• Just like CVV (x, y, z) values do not vary linearly across an image• At each vertex, store (s’, t’, h) (homogeneous coordinates in screen texture space)
• Let h = 1/z• Let (s’, t’) = (s/z, t/z)• Interpolate (s’, t’, h) across the image coordinates• At each coordinate, normalize (s, t) by the homogeneous coordinate
Two-part Texture Mapping
2D textures don’t always map very well onto 3D surfaces
Two-part texture mapping creates an intermediate surface that is topologically better related to the final object (e.g. a box is topologically equivalent to a sphere)
Process• Create a mapping from the 2D texture map to a 3D surface• Use a ray-casting method to discover which parts of the intermediate surface to use for map-
ping the texture to the final surface• Cast a ray along the reflected view direction to the intermediate surface
• Creates the effect that the texture is being reflected on the surface• This can be used for environment mapping
• Cast a ray out along the local surface normal of the object• For a locally concave object this can create strange results
• Cast the ray from the intermediate surface to the final surface • Basically a shrinkwrap type of mapping• Works the best for many surfaces
Environment Mapping
The idea is that we want “reflection” from things in the environment
We don’t want to have to do full-blown ray tracing or radiosity
Concept: simulate reflections using texture mapping• Create a sphere or box as an intermediate surface• Use the reflection method of determining which part of the environment map is visible• Use an environment map that fits onto the intermediate surface
• For a box, use the 6-face unfolded cube method• You can automatically generate each face of the unfolded cube by rendering the scene in
all 6 directions from the point of view of the object
Bump Mapping
The idea is that we want to give the appearance of a “rough” surface
Concept: perturb the surface point and surface normal by a small perturbation function
For a parametric surface, follow the following computations
• The surface normal is defined as
• Qu and Qv are the local tangents of the surface in the u and v parametric directions• Perturb the surface point Q(u, v) by an amount P(u, v) in the normal direction
•
• P(u,v) is the perturbation function (small compared to |n|)• The new normal is specified by the new local tangent vectors
• and
• Since P is very small, and the (u, v) components of N are small, the last term is very small and can be neglected
• If we substitute these values back into the definition of the surface normal, we get
•
• The last term of this expression is zero, so we get three terms to calculate the new normal• The perturbation function P(u, v) we can interpolate from vertices
• Interpolate [u/z, v/z, 1/z] across the surface, treating (u, v) as texture coordinates• P(u, v) can be a random function, which which case we need to know values from
above and left in the image in order to calculate Pu and Pv.
Using Garaud shading you can only perturb on a large scale at the vertices
Using Phong shading you can perturb normals on a pixel scale• Already interpolating surface normals and world coordinates• Interpolate [u/z v/z 1/z] across the polygon
• Random function: P(u, v) = drand48() * scale• Lookup table: P(u, v) indexes into a texture image• Mathematical function (creating waves): P(u, v) = f(u, v)
n Qu Qv⊗=
Q' u v,( ) Q u v,( ) P u v,( ) nn-----+=
Q'u Qu Punn----- P
nu
n-----+ += Q'v Qv Pv
nn----- P
nv
n-----+ +=
n' Qu Qv⊗Pu n Qv⊗( )
n----------------------------
Pv Qu n⊗( )n
----------------------------PuPv n n⊗( )
n-------------------------------+ + +=
Textures: Solid Texture Mapping• Create a 3D texture (a solid box of texture)
• Use multiple images• Define it procedurally using a function or algorithm (e.g. fractals) to get wood/marble
• Align the texture with the object in world coordinates• conceptually, put the box of texture around the object
• For each pixel, discover what “volume” the pixel occupies (coordinates relative to box)• Average the values in the volume to get the texture for the pixel• Effect: you can “cut” objects out of a block of wood or marble
• As an object moves within the texture it changes appearance smoothly• You can lock the texture to the object so it doesn’t change appearance as they both move
Mipmapping (Real Fast Texture Mapping)• To be real fast, you want to precalculate all the possible
areas you might have to average in order to find the anti-aliased value of a pixel
• We can use a pyramid representation to store the aver-ages of different sized squares
• Mipmapping stores all of the values in a planar array• Doing a rough approximation of the area covered
by a pixel with a square bounding box works ok• d = max (∆s, ∆t) • ∆s and ∆t are widths of the bounding box of the
pixel mapped into texture coordinates• levels 1...10 for a 512x512 texture• d = 1 for calculated d < 1
• d represents the ST area [(s, t) are texture coordinates] of a single pixel in the mip map
• Area of 1 pixel in the mip-map: 1/512 x 1/512 = 1/218
• Area covered by a pixel at level k: 22k
• STarea(k) = 22k / 218 = 22k-18
• The larger the ST area, the higher level of compression we want to use• We want to find the k such that the ST area is less than a pixel on one level and greater
than a pixel on the level below• let d = sqrt(measured ST area) • levels 0...9 for 512x512 texture
• compare d to sqrt(STArea(k)) = 2k-9 for k = 0 to 9 (can use a lookup table)• d specifies which 2 mip maps to use• Use trilinear interpolation between adjacent boxes on two levels of the mip-map
• use bilinear interpolation at each single level• given s, t corresponding to the center of the pixel
• s, t falls between four pixels in the mip-map• interpolate between top two and interpolate between bottom two (based on s)• interpolate between the resulting top and bottom values (based on t)
• blend the results of two d levels based on how close d is to each level
R G
B
d=1
d=2
d=4
E26/CS40 F06 Lecture Notes #19
Animation
Historically animation was done by scripting• Making sketches on a board• Using a specific language to specify what each element is supposed to do• The concept of an actor came out of scripting
• An object with motion that is independent of other entities in the scene
Today animation is done largely using interactive animation systems• User can, in real-time, specify 3D paths (splines) and watch the motion• User can also create certain poses and let the computer interpolate
The other source of animation, particularly body motion, is motion capture• Many types of motion capture systems• Magnetic• Visual (usually with markers)• Mechanical, such as a data glove
Principles of animation used by studios (e.g. Disney) are important in graphics• Squash and stretch
• show the rigidity and constant mass of an object by distorting it due to actions• a squash in one direction needs to be matched with a stretch in the other
• Secondary action• actions of objects resulting from other actions
• Appeal• creating designs the audience enjoys watching
Keyframe• Create every nth frame by specifying the position of each object in the scene• Specify a path and/or velocity curve for each object• Let the computer create the “in-between” frames
• This is what master animators and their apprentices used to do
Encoding interpolation in parameter spaces• XYZ values
• linear interpolation works ok, but has discontinuities in the gradient• splines provide more control and smoother motion
• Rotations• Using 3 angles works poorly
• Singularities when two or more axes line up• Need to use quaternions
• Q = a + bi + cj + dk• (i, j, k) follow the right hand rule: ij = k, jk = i, ki = j, ii = jj = kk = -1• Can be thought of as Q = (s, v) = s + vxi + vyj + vzk• quaternion multiplication is similar to complex number multiplication: treat it as a
polynomial and then work out the i, j, k vectors.
• Why do we care?• Take a pure quaternion, which can represent a point: p = (0, r)• Take a unit quaternion: q = (s, v), where qq = 1 (q = (s, -v))
• Define Rq(p) = qpq-1
• For unit quaternions, q-1 = q• It turns out that the function Rq(p), when written in vector form is:
(1)
• For unit quaternions, we can also represent a quaternion as:
(2)
• If we substitute the angle/vector representation of q into the equation for Rq(p) then we get the equation for rotating p around n by angle Ø.
• So the quaternion given in (2) represents any arbitrary orientation using 4 numbers• We can use quaternions to cleanly interpolate between any two orientations
• The group of unit quaternions live on the unit sphere• Use spherical interpolation to get from one orientation to another• No singularities• Clean motion that looks good• Transparent to the GUI user
The one problem with quaternions: orientation of the object is not guaranteeed along the path• Solution: more intermediate points to specify orientation• Take the key points specified by the animator• Make each key point the endpoint for a Bezier curve• Create two intermediate keypoints to force the curve to lie on the sphere• Interpolate along the Bezier curves from the first to last keypoints
Almost all real animation systems are based (internally) on quaternions
Procedural
Procedures define the action of objects as a function of time• Dynamic simulations
• primary actions may be keyframed• secondary actions follow the laws of Newtonian mechanics
• Procedural animation is mostly what we have done in this course: varying parameters to get different views or locations of an object
Representational
The representation of the object itself changes, causing motion• Cloth• Soft objects• Articulated structures
The distinction between modeling and animation breaks down, since the model is animating
Rq p( ) 0 s2
v v•–( )r 2v v r•( ) 2s v r×( )+ +,( )=
qθ2---
sinθ2---
cos n, =
Behavioral
The animation of objects using a set of rules• Flocking or herd behavior (Lion King, Jurassic Park)• Useful for animating large sets of objects• Example: geese flying
• Create left and right geese• Don’t let them get to close to one another and don’t let them get to far away• Have them keep the goose in front of them on the correct side• Swap out the lead goose every once in a while• Result is realistic flying behavior in geese
Morphing
Usually achieved by linear interpolation of vertices• Problem is moving between different numbers of vertices
• Insert place-holder vertices into the model with fewer vertices• Can also use a more complex representation of objects that allows smooth interpolation• Need to interpolate colors as well as shapes
Stochastic
The animation of objects using stochastic (random) processes• Particle Systems
• Process• New particles are generated and injected into the system (stochastic process)• Each particle is assigned individual attributes (stochastic process)• Any particle that has exceeded its lifetime is removed• The current particles are updated according to their attributes• The current particles are rendered
• Uses of particle systems• Fire (Star Trek II: The Wrath of Khan)• Spray from waves• Fireworks• Waterfalls• FBI guys who split apart and blow up (Lawnmower Man)• Mission to Mars (just about every effect in the movie, which was pretty bad)
SIGGRAPH examples: • Vector fields for realistic flow• Finite-element modeling for realistic breakage• Interactive flow manipulation• Modeling steam & vapor
Original Papers:
W. Reeves and R. Blau, "Approximate and probabilistic algorithms for shading and rendering structured particle systems", ACM SIGGRAPH, 1985, pp 313-322.
W. Reeves, "Particle systems-a technique for modeling a class of fuzzy objects", ACM SIG-GRAPH, 1983, pp 359-375.
Motion Jaggies and Motion Blur• Problem is that things can be sampled differently in different locations• Sampling correctly in a single image does not remove motion jaggies and jumping objects• Need to add motion blur
• Render the scene at intermediate time steps• Average the results using an appropriate weighting function
• Gaussian centered on the time step• Could sample at smaller, fixed intervals• Could sample in time using jittering
Realism in Animation• Using physical models of interaction makes animations realistic
• Finite-element models of stress and fracture• Navier-Stokes equations for fluid flow• Shock-wave disturbances for explosions• Newtonian mechanics (statics and dynamics) for realistic motion• Kinematics to model linkages• Inverse kinematics to get end-effector driven animation
• Shortcuts are often used in the interest of speed or ease of design• Neural networks can be trained to simulate physical models in real time• Robots may be set by hand to get keyframe information from the joints (Jurrasic Park)
• Animation may involve more than visual input• Audio effects also follow similar models of computation to ray tracing
E26/CS40 F06 Lecture Notes #20
Non-Photorealistic Rendering
Tiling and Mosaics
Choosing images to be used as mosaic tiles• Can choose the image itself• Can choose from a DB of images with a particular purpose
• May want to precalculate the color and frequency parameters of each image
Choose a tiling grid• Regular• Offset, brick style• Mixed or adaptive (use smaller images in high frequency locations)• Hexagonal
Match the tiles to the grid & underlying colors• Calculate an average color in the grid space• Match the color to the best picture from the DB• Can do subpixel matching
Color correct as necessary• If using a single image, need to execute a color correction• Can model illumination as a diagonal matrix
• Find the matrix that puts the image’s average color in the right place• Can also add or subtract color values, but have to worry about dynamic range limitations
Example: http://www.engin.swarthmore.edu/~tgillette/vision/mosaic/
Line Drawing
People do not draw perfect lines
Wiggliness: people don’t draw straight lines, but have random wiggles in them• People are more willing to discuss changes to a design if it seems like someone drew them
Line length• In sketches, people don’t always bring lines to completion, but stop them short
Line thickness & brightness• Lines vary in thickness and saturation depending upon angles and pressure of the pen
Line ends• A pen will leave a larger spot at the beginning and end of lines where the pen has stopped• Ball ends or trailing off ends are indicative of a person’s style
Stylistic Line Drawing
Separate the line path from the line style
Define the style as a parameteric curve (spline)
To determine where to daw a line, use the style curve• Given a parameter t, calculate the point along the line con-
necting the style endpoints L(t)• Calculate the corresponding point along the style curve S(t)• Calculate the offset vector V(t)• Add V(t) to the current point of the line you are drawing in
screen coordinates, with some scale factor.
Styles can repeat along a line, and multiple styles might be used along a single line• Styles can be blended using interpolation• Other factors can influence the weight or saturation of the line• Those factors can be global to the line, or local to the style parameter
Painting
Rendering scenes that look at though they have been painted uses explicit models of a brush• Brush: a brush consists of many bristles
• Each bristle has its own amount of ink and a relative position on the brush. • Each bristle can have a particular width• The overall width of the brush can change depending upon the pressure on the brush• Brushes are generally assumed to be 1-dimensional• Brushes are generally assumed to be oriented perpendicularly to the stroke
• Dip: the state of the brush when it is dipped in ink.• Describes the amount and color of ink placed on the brush• Could mix colors this way.
• Stroke• Defines the motion of the brush and the pressure on the brush along the way• Controls points model not just position, but also pressure
• Paper• The paper determines how the brush stroke is rendered by determining how much ink
comes off the brush and what happens to it• In a simple model, the ink comes off uniformly along the paper• You can also put a bump map on the paper
• High parts of the paper get more ink• Places where the paper is rising relative to the brush strok get more ink• Low parts get less ink• Where the paper is falling relative to the brush stroke get less
• Can even model how the ink travels on/within the paper
S0
SE
L(t)
S(t)
V(t)
Oil Painting Filter
With the ability to model brushes & paper, we can now try to mimic various painting styles.• Sometimes we want to modify an existing image
Issues associated with the oil painting filter are similar to mosaicing• Stroke placement• Stroke color
Strokes need to be distributed randomly, but somewhat evenly• Start with a jittered grid or uniformly and randomly selected points• Lay down initial strokes• Identify uncovered areas• Insert strokes until the image is covered• May need to store the order in which strokes get placed in the image (for video)
Problem is discontinuities• Strokes generally should not cross boundaries• Can identify discontinuities by using a gradient filter
• High gradients correspond to strong changes in the image• The likelihood of placing a stroke close to an edge is low• While strokes can cross boundaries (and need to), the extent ought to be limited
Part of stroke placement is stroke orientation• Could define a global orientation• Could define orientations based on gradients
• Can travel with the gradient (perpendicular to edges)• Can travel perpendicular to the gradient (parallel to edges)• Issue is when the gradient is small, or random (texture regions)
• Could define stroke orientations based on other inputs• Sven Olsen: fluid modeling as a basis for stroke placement
Example: http://www.cs.northwestern.edu/~sco590/npr/index.html
Coverage Maps:
One concept commonly used in NPR is coverage maps• A map initialized to an uncovered state• Each time a brush stroke is placed, the pixel locations of the brush stroke get marked• Keeps track of uncovered areas• Brush strokes can be partially transparent, so coverage map has to be a float value
Coverage maps can be hierarchical• If all the pixels at a lower level are filled, fill in the top level• Could also keep a count of filled pixels at lower levels
Coverage maps may be analyzed using a box filter• Not so worried about individual pixels not getting covered• Want to put brush strokes in areas with many uncovered pixels
Stroke-based Rendering: Pen& Ink
Givens:• A set of stroke models that can be randomly selected and oriented
• These include an outline stroke and an interior stroke• A set of textures that represent different brightness levels
• May be as simple as different kinds of strokes• May be as complex as a full texture (like a brick wall)• Some textures have qualitative differences in how they are drawn at different brightnesses
• An image to draw I (remains fixed)• An image to draw in O (starts out all white)
Algorithm :
1. Start by creating a difference image D, which guides the selection of where to place strokes• Initialize the difference image to all white
2. Select the location X in D with the maximum difference between D and I
3. Place a stroke in the output image O at location X
4. Calculate a smoothed version of the stroke just drawn and subtract it from D
5. Repeat from step 2 until (note this is only an approximation
The algorithm works well for stroke images that are not textured• Stipple• Cross-hatching
Need to provide additional information to generate high quality images• Boundary outlines in some cases
• Only draw a boundary if the intensity difference is too small to be perceived well• Draw a boundary in the outline style of the closer object
• Strokes oriented to curvature• If you have a Z-buffer version of the image, can calculate curvature of the surfaces
D I≈
E26/CS40 F06 Lecture Notes #21
Modeling Fluid Flow for NPR
Example: http://www.cs.northwestern.edu/~sco590/npr/index.html
Technical Illustration
Traditional technical illustration techniques (i.e. we need to model these)• Edge lines are drawn with black curves• Matte objects are shaded with intensities far from black and white (limited palette)• Warmth and coolness of color usually indicate the surface normal• Shadows are rarely used. If shadows are used, they are placed in a way that they do not
occlude important details• Special lighting conditions are assumed in areas where important details have to be shown• usually the objects are lit by one light source in a standard position (upper left-hand corner
in front of the object).
Technical illustration begins with the Phong illumination model (ambient + diffuse + specular)
Problem is that areas not direclty lit by the light source lose their surface normal detail
Highlights are nice for showing shape information, but need to be sharp and not overbearing
Often, color is used instead of intensity to represent shading• Warm colors (reds, yellows, oranges) tend to be interpreted as closer than cooler colors
(blues, greens, violets)
A blending approach is possible for shading:
Using this equation, note that needs to cover the full range from [-1, 1]. • Set up the primary light source at 90º to the right from the view angle
Details can be very subtle unless the colors are set up appropriately• Make the colors as extreme as possible, either Red-Green, or Yellow-Blue• Yellow-Blue: and
• This places the colors along the perceptual B-Y channel
Also can color the image based on the object colors:• and
The Hack
Many hardware-based lighting systems allow negative color values and happily work with them.• OpenGL, for example
Use two light sources, one on the right, and one on the left
• Make the light sources be and , respectively
• Make the ambient illumination
• Don’t turn on highlights, but the graphics hardware will do the rendering.
I1 L N⋅+
2---------------------
kcool 1 1 L N⋅+2
---------------------– kwarm+=
L N⋅
Kblue 0 0 Bmax, ,( )= Kyellow Y max Y max 0, ,( )=
Kcool Kblue αKd+= Kwarm Kyellow βKd+=
Kwarm Kcool–( )2
-------------------------------------Kcool Kwarm–( )
2---------------------------------------
Kwarm Kcool+( )2
--------------------------------------
Identifying Object Boundaries
One of the more important tasks in NPR is defining where object boundaries occur.• Objects may consist of many polygons, but we don’t want to outline polygons• Curved objects can have complex boundaries that are difficult to compute analytically
Take advantage of the Z-buffer information• Run a gradient operator on the Z-buffer• Looking for places where the Z-buffer is changing rapidly
Sobel works quite well: and and
The Hack: approximate the magnitude as the sum of the absolute values of and
Can then insert the edges back into a regularly shaded image, or into a technical illustration• Put white lines on bright edges (highlights)• Put dark lines elsewhere to emphasize the edges• Works especially well on images of supposedly metallic objects
• At discontinuities they are either specular or reflecting a large piece of the world (dark)
Lots of SIGGRAPH videos on NPR and fluid flow
Sy
1 2 1
0 0 0
1– 2– 1–
= Sx
1– 0 1
2– 0 2
1– 0 1
= Smag SY2
Sx2
+=
Sx Sy
E26/CS40 F06 Lecture Notes #22
Ray Tracing
• Send out a ray from the viewer (COP)
• Send it through the “pixel” on the view plane (yes, we’re sampling the view plane)
• Intersect it with all of the objects in the scene to find out what it hits first
• At the intersection:
• Calculate the reflected ray (perfect reflection direction = V - (2V * N) N• Calculate a shadow feeler ray (L) for each light source• Calculate the transmitted ray direction if the surface is transparent (Snell’s law)
Snell’s law: (1)
Transmitted ray: (2)
(3)
• = incident angle, = transmitted/reflected angle
• = index of refraction of transmitting medium
• = index of refraction of incident medium
• For each new ray start the intersection and reflection process again
• Shadow rays don’t reflect, they either stop or keep going straight• Although, one can model things like heat reflection by bending the rays as they travel
The end result of this process is a tree structure (ray tree)• Terminal nodes end in the background, a light source, a black hole, or at a specified depth
(number of bounces)• To discover the color of a ray, propagate the nodes back up the tree
• At each node, calculate the contribution of the body reflection, the surface reflection, the reflected ray, and the transmitted ray.
• f(d) is an attenuation function based on the distance the reflected or transmitted ray had to travel to reach this surface• You know distance because of the parametric definition of rays
• kd and ks are the diffuse and surface reflectance characteristics• Sometimes a different coefficient is used for reflection as opposed to specularities
• A common time-saving technique is to limit the depth of the tree • Option1: set a fixed depth (number of reflections)• Option 2: stop reflecting rays when the maximum possible contribution of the trans-
mitted ray is less than one brightness value in RGB
θi
θr
ηi
ηr
θrsin
θisin-------------
ηi
ηr-----=
Tηi
ηr-----V θrcos
ηi
ηr----- θicos–
N–=
θrcos 1ηi
ηr-----
2θicos 1–( )+=
θi θr
ηi
ηi
I t t–( ) kdBody ks Surface + Reflected( )+[ ] t f d( )Transmitted ray( )+=
A Recursive Ray-Tracer• It can be a very small piece of highly-optimized code• Limit yourself to a specific number of object types (algebraic surfaces are fairly easy)• Write a shading function• Write a set of intersection functions• Write routines to calculate the reflected, shadow, and transmitted rays• Don’t need to do any projective geometry because all calculations are in world coordinates• Do depth-first search and you don’t have to explicitly store any ray trees
Intersecting Rays with Stuff
Almost all ray intersection tests are based on a parametric definition of rays
•
• is a unit length direction vector and is the point of origin of the ray.
Given a surface defined by a function f(x, y, z) = 0, substitute the ray equation for (x, y, z)•
• Solve for t
Ray-sphere intersections
•
• Set up the quadratic equation (at most two intersections, use the closer one)• If the discriminant is less than zero, there is no intersection with the sphere• If the sphere is not centered at the origin, translate relative to the center of the sphere
• If the sphere does not have unit radius, change 1 to .
• If the direction vector is unit length, then
Ray-polygon intersections• Calculate the intersection with the polygon plane (use the plane equation)
• If t < 0, then the intersection is in the wrong direction• The line is described by P = (x1, y1, z1) + t(i, j, k)
• Calculate whether the intersection point is inside the polygon• For convex polygons, make sure the point is “inside” each edge• For concave polygons, split them and do the above test
Ray-box intersections• These can be very fast• Treat a box as a set of parallel planes
• Usually the planes are aligned with the major axes (transform if they aren’t)• Calculate tnear and tfar for each pair of planes• Find the largest tnear and the smallest tfar• If max(tnear) > min(tfar) then the ray does not intersect the box
x x1t x0+=
x1 x0
f x1t x0+ y1t y0+ z1t z0+, ,( )
t2 x12
y12
z12
+ +( ) 2t x0x1 y0y1 z0z1+ +( ) x02
y02
z02
+ +( ) 1–+ + 0=
x0
r2
x1 a x12
y12
z12
+ +( ) 1= =
tAx1 By1 Cz1 D+ + +( )–
Ai Bj Ck+ +( )-----------------------------------------------------------=
Ray-quadrics, and other mathematically defined surfaces• Set up the equations like for a sphere
Blobs• Blobs can be generated from superimposed exponential distributions (Gaussians)• A single blob is effectively a sphere or ellipsoid• Multiple blobs require root finding within a more complex equation
Problems with Ray Tracing• Sampling the world means you can miss objects
• Super-sample each pixel (ok)• Jitter sample each pixel (better)• Adaptively sample each pixel (best)
• Send a few jittered rays into the pixel• If they all return with similar values don’t send any more• Otherwise subdivide the pixel another level and try again with each subdivision
• Only following specular reflection means you don’t get diffuse-diffuse or diffuse-specular interactions• Instead, send out rays in multiple directions according to a distribution, not just along the
perfect specular direction• Costly, but you get better effects (this is called distributed ray-tracing)
• Alternatively, ray-trace the scene from the light source and put a counter on each surface• Keep following the rays to some fixed depth (don’t need to do shadows here)• Keep track of all hits after the first one• When the light hits the surface, add the intensity of the beam to the surface• Then ray-trace from the eye as usual, but take into account the diffuse reflections.
• Shadows can be harsh• Use area lights and use the ray-casting method of dealing with area light sources• You’re doing rays anyway, so why not?
Animation using ray tracing
To achieve good motion blur using ray tracing you can use one of two techniques• Option 1: Completely render the scene at N jittered times within the interval the overall
frame is supposed to represent.• This can be very costly, as things that don’t move will get rendered N times• To reduce aliasing you still have to oversample each pixel in each of the N sub-frames
• Option 2: Organize your model database so that there are copies of it at several jittered times within the interval.• For each sample you send into a pixel, stochastically select one of the model databases
based on it’s relevance to the current frame (might use a Gaussian centered on the nominal time stamp of the overall frame).
• This method reduces the number of overall rays sent into the model database• It trades space (memory) for computation time
SIGGRAPH Videos
E26/CS40 F06 Lecture Notes #23
Radiosity
The basic problem with most computer graphics images is that they are too clean• They don’t capture the diffuse-specular or diffuse-diffuse interaction of the real world
Radiosity is a global illumination solution that focuses on solving diffuse interactions
The fundamental idea is that a particular patch of the world takes in light from all directions• If we know the light from all directions
• We can assume a diffuse reflectance function (equal appearance from all directions)• To calculate appearance we calculate the integral of all incoming light
Incoming light can come from anywhere• Light emitting surfaces• Reflectance from reflecting surfaces
Every surface in our scene is a potential source of light for a given surface patch
It turns out this is equivalent to concepts in radiative heat transfer (E41)
The Radiosity Derivation
The radiosity Bi of a surface is the hemispherical integral of the energy leaving the surface i.
The radiosity consists of two parts: Bi = Ei + ρiHi • Ei = Energy emitted by the surface as an energy source• ρiHi = Energy reflected from the environment
• ρi = reflectance of the surface patch• Hi = radiant energy incident on the surface• Units are energy/unit time/unit area
The radiant energy incident on surface i is the sum of the radiant intensities of all surfaces that can “see” surface i. We assume the radiosity does not vary across a small patch.
(1)
• Bj = Energy per unit area leaving surface j• A j = Area of surface j• A i = Area of surface i• Fji = Fraction of the energy leaving surface j that hits surface i
What this says is that the amount of energy incident on a unit area of a patch:• Increases when the radiosity of visible surfaces increases• Increases when the area of visible surfaces increases• Increases when more of the energy of other surfaces hits the local surface• Decreases when patch i gets bigger (hence, less energy per unit area)
The form factor is recriprocal between patches i and j
(2)
H i B j
A jF ji
Ai-------------
j 1=
N
∑=
AiF ij A jF ji=
Substituting the formula for H into the radiosity equation and using the reciprocity relationship
or (3)
Multiplying by the area of patch i, we get the energy per unit time leaving patch i
(4)
We can write equation (3) as a set of linear equations for all surfaces in the scene
(5)
• (Note typo in Rogers on diagonal terms)• Fii are all zero for planes or convex patches, making the diagonal terms 1• The Ei are all zero except those surfaces that are light sources
• Light sources are assumed to be Lambertian (no spotlights)• The sum of the form factors in a row is less than or equal to one (light leaving a surface)• This equation is applied to each bandwidth (R, G, B)
• ρ and E are the wavelength dependent terms (three systems of equations)• This means you can recalculate the appearance of a scene after changing colors with-
out recalculating the form factors (big savings in time)• To get the radiant intensity (rather than energy) the Bs and Es are divided by π
• This gives you the apparent visibility of the surface patch• The Gauss-Seidel iterative technique is useful for solving this set of equations
Radiosity Process
1. Discretize the environment into small patches• Sample size has to be small enough to catch changes in the appearance of the object
• Need to be wary of the biggest problem in graphics (ALIASING)• Adaptive subdivision of surfaces has advantages
2. Calculate the form factors between the patchs
• Need to calculate N2/2 form factors
3. Solve the radiosity matrix• Gauss-Seidel iteration• Once the radiosities are calculated for a scene, they are viewpoint independent
4. Use the radiosities in a standard rendering pipeline• Specify a view• Render the scene using Garaud shading
• To calculate colors at vertices, average the adjoining patch radiosities
Bi Ei ρi B jF ijj 1=
N
∑+= Ei Bi ρi B jF ijj 1=
N
∑–=
Bi Ai Ei Ai ρi B jF ij Aij 1=
N
∑+=
1 ρ1F11– ρ1F12– … ρ1F1N–
ρ2F21– 1 ρ2F22– … ρ2F2N–
… … … …ρNFN1– ρNFN2– … 1 ρNFNN–
B1
B2
…BN
E1
E2
…E3
=
Calculating the form factors
In general, the form factor calculation is an order of magnitude more expensive than solving the radiosity matrix equation. O(N2) process, where N is the number of patches.
The general solution• Need to do some geometry and calculus to figure out the form factors• The sum of all of the form factors leaving a surface cannot be more than one
• Otherwise, the surface is radiating more intensity than it really should be• True closed form solutions are difficult to figure out
The Hemicube solution• Use a z-buffer algorithm to determine the visibility and size of surfaces in the scene• For each patch, project the scene surfaces onto the the sides of a hemicube• If two surfaces project to the same size patch on a hemicube, they have equal form factors• Figure out the relationship between number of pixels covered and the form factor
• Form factor is proportional to the size (in pixels) of the projected patch• The form factor is the sum of the form factor delta for each pixel• The form factors for each “pixel” q in the hemicube can be precalculated• ∆A is the area of a pixel on the hemicube
z-x top: (6)
x-y side: (7)
z-y side: (8)
Reordering the Solution and Progressive Refinement
(9)
The above relationship corresponds to one row of the matrix and is an estimate of the radiosity of patch i in terms of the estimated radiosities of all of the other patches.
• Gauss-Seidel iteration method is based upon the idea of updating the Bi row by row
(10)
• Start with most of the Bi set to zero, except those with a non-zero Ei are set to Ei
We can think of this as a progressive gathering of information until the solution converges
How about reversing the process and think about shooting light from the bright to the dark patches• This is like updating columns instead of rows in the convergence• We update the columns that correspond to large Bi values• This gives us an update to each of the Bi simultaneously• We only need to calculate the form factors corresponding to that particular column
Fq∆ z
π x2
z2
1+ +( )2
------------------------------------ A∆=
Fq∆ z
π x2
y2
1+ +( )2
------------------------------------- A∆=
Fq∆ z
π z2
y2
1+ +( )2
------------------------------------ A∆=
Bi Ei ρi B jF ijj 1=
N
∑+=
xik 1+( ) 1
aii----- bi aijx j
k 1+( )
j 1=
i 1–
∑– aijxik( )
j i 1+=
n
∑–=
• A column is one hemicube calculation• Do this dynamically as the solution progresses
• Set the initial form factors to the size of the patch relative to the size of all patches• Use an ambient term that decreases with each iteration (to allow you to see stuff)
If you sort after each iteration and use the brightest patches first you get faster convergence
This allows you to see the convergence as it happens in a nice “graceful” way
Progressive radiosity in pseudo-codeInitially: Bi and deltaBi are either set to zero or the emission values for the patch (Ei)The Bi are also sorted so that the largest Bi are dealt with first
repeat until convergencefor each patch i do
calculate form factors Fij for all j, if not already calculatedfor each patch j, j != i do
dRad = rhoj * deltaBi * Fij * Ai / Aj -- contribution of Bi to BjdeltaBj = deltaBj + dRad -- summing up change in BjBj = Bj + dRad -- Calculating new Bj
end fordeltaBi = 0 -- Reset delta Bi
end forend repeat
Radiosity Variation: Real-Time Radiosity
There is a fast way to approximate the radiosity solution
The idea is that there are photons running around in the world• Most of them come from light sources• Some of them come from other surfaces reflecting the light sources
Real-time radiosity attempts to sample the space of light sources generating a scene, whether those light sources are emitters or just reflectors
Process:• Have the emitters in a scene start injecting photons into the scene with random directions• At each surface the photon hits (including the starting surface) render the scene with that
surface as the light source (rendering needs to include shadow calculations)• The surface’s reflectance R specifies the probability that the photon will be re-emitted
from the current surface.• The photon takes on the appropriate characteristics of the surface when it is re-emitted• The end result is a set of images, each being lit from a different location and color• By appropriately combining the images, in image space, you get an approximation to the
radiosity solution that can occur within a few seconds (60-90 frames of calculation)
Radiosity Variation: View dependent solution (Immel)
One method of incorporating specularity into a radiosity solution is to develop a radiosity value for each outgoing direction for a surface. In essence, this is sampling the BRDF at the surface and building a radiosity matrix that solves for each outgoing direction
The result matrix is huge, but the solution is pretty (plate 21 in Rogers)
Read Rogers for other variations on Radiosity.