Download Review 3-Computer Graphics-Lecture Notes and more Study notes Computer Graphics in PDF only on Docsity!
Lecture No.28 Review III
28.1 Perspective Projection
As opposed to parallel projection, perspective projection gives a more realistic view of the objects in the scene. The objects away from the POV are projected smaller whereas those nearby are projected to appear proportionately larger. The idea is that of looking at the scene through the projection plane / screen.
The POV represents the viewer’s eye, and we presume that the viewer will be behind the center of the screen. Note : We will use Left hand rule to describe 3D coordinate system. Two common approaches are used with this;
- The first approach is where the POV is at some point (0, 0, -z) and the screen lies on the X-Y plane, graphically, this looks like figure given below:
- The second approach is where the POV lies at the origin, and the screen lies on a plane at some +z coordinate, as shown in figure given below:
As we will see later, this second approach is much more convenient when we add features making it possible for the POV to move around the 3D world or for objects to move around in the world. Calculating the screen pixel that correlates to a 3D point is now a matter of simple geometry. From a viewpoint above the screen and POV (looking at the X-Z plane), the geometry appears like the one shown in figure below: In geometric terms, we say that the triangle from A to B to S is similar to the triangle from A to C to P because the three angles that make up the triangles are the same: the angle from AB to AS is the same as the angle from AC to AP, the two right angles are both 90 degrees, and therefore the remaining two angles are the same (the sum of the angles in a triangle is always 180 degrees). What also holds true from similar triangles is that the ratio of two sides holds between the similar triangles; this means that the ratio of BS to AB is the same as the ratio of CP to AC. But we know what AB is-it is Screen.z! and we
docsity.com
know what AC is-it is point.z! and we know what CP is-it is point.x! therefore: |BS| / |AB| = |CP| / |AC| |BS| = |AB| * |CP| / |AC| |BS| = Screen.z * point.x / point.z Screen.z is the distance d from the point of view at origin or the scaling factor.
Notice that |BS| is the length of the line segment that goes from B to S in world units. But we normally address the screen with the point (0,0) at the top left, with +X pixels moving to the right, and +Y pixels moving down—and not from the middle of the screen. And we draw to the screen in pixel units – not our world units (unless, of course, 1.0 in your world represents one pixel).
28.2 Triangles
Triangles are to 3D graphics what pixels are to 2D graphics. Every PC hardware accelerator under the sun uses triangles as the fundamental drawing primitive (well … scan line aligned trapezoids actually, but that's a hardware implementation issue). When you draw a polygon, hardware devices really draw a fan of triangles. Triangles "flesh out" a 3D object, connecting them together to form a skin or mesh that defines the boundary surface of an object. Triangles, like polygons, generally have an orientation associated with them, to help in normal calculations. The ordering of the vertices goes clockwise around the triangle. Figure below shows what a clockwise ordered triangle would look like.
Figure: Three points in space, and the triangle connecting them
When defining a mesh of triangles that define the boundary of a solid, you set it up so that all of the triangles along the skin are ordered clockwise when viewed from the outside.
docsity.com
Figure: A list of points composing a triangle fan
Triangles in a triangle strip, instead of sharing a common element with all other triangles like a fan, only share elements with the triangle immediately preceding them. The first three elements define the first triangle. Then each subsequent element is combined with the two elements before it, in clockwise order, to create a new triangle. See Figure below for an explanation of strips.
Figure: A list of points composing a triangle strip
28.4 Planes
The next primitive to discuss is the plane. Planes are to 3D what lines are in 2D; they're n–1 dimensional hyper-planes that can help you accomplish various tasks. Planes are defined as infinitely large, infinitely thin slices of space, like big pieces of paper. Triangles that make up your model each exist in their own plane. When you have a plane that represents a slice of 3D space, you can perform operations like classification of points and polygons and clipping.
So how do you represent planes? Well it is best to build a structure from the equation that defines a plane in 3D. The implicit equation for a plane is:
docsity.com
What do these numbers represent? The triplet < a , b , c > represents what is called the normal of the plane. A normal is a unit vector that, conceptually speaking, sticks directly out of a plane. A stronger mathematical definition would be that the normal is a vector that is perpendicular to all of the points that lie in the plane.
The d component in the equation represents the distance from the plane to the origin. The distance is computed by tracing a line towards the plane until you hit it. Finally the triplet < x , y , z > is any point that satisfies the equation. The set of all points < x , y , z > that solve the equation is exactly all the points that lie in the plane.
All of the pictures I'm showing you will be of the top-down variety, and the 3D planes will be on edge, appearing as 2D lines. This makes figure drawing much easier.
Following are two examples of planes. The first has the normal pointing away from the origin, which causes d to be negative (try some sample values for yourself if this doesn't make sense). The second has the normal pointing towards the origin, so d is positive. Of course, if the plane goes through the origin, d is zero (the distance from the plane to the origin is zero). Figures 1 and Figure 2 provide some insight into this relation.
Figure 1: d is negative when the normal faces away from the origin
Figure 2: d is positive when it faces towards the origin
docsity.com
Figure: A visual example of back-face culling
In practice, 3D accelerators can actually perform back-face culling by themselves, so as the triangle rates of cards increase, the amount of manual back-face culling that is performed has steadily decreased. However, the information is useful for custom 3D engines that don't plan on using the facilities of direct hardware acceleration.
28.6 Intersection between a Line and a Plane
This occurs at the point which satisfies both the line and the plane equations.
Line equation: p = org + u * dir (1) Plane equation: p * normal - k = 0. (2)
Substituting (1) into (2) and rearranging we get:
(org + u * dir) * normal - k = 0 ie u * dir * normal = k - org * normal ie u = (k - org * normal) / (dir * normal)
If (d * normal) = 0 then the line runs parrallel to the plane and no intersection occurs. The exact point at which intersection does occur can be found by plugging u back into the line equation in (1).
28.7 Triangle Rasterization
High performance triangle rasterization is a very important topic in Computer Graphics in today’s world. Triangles are the foundation of modern real time graphics, and are by far the most popular rendering primitive. Most computer games released in the last few years are almost completely dependent on triangle rasterization performance. Recently the focus of graphics performance optimization is beginning to shift to bandwidth requirements as well as transformation and lighting. Nevertheless, rasterization performance is still a factor, and this lecture will provide most of the basics of high performance triangle rasterization. Also, it will go into detail about two often neglected rendering quality improvements, sub-pixel and sub-texel accuracy. Also, smooth shading and texture mapping techniques will be described.
docsity.com
28.8 Flat Filling Triangles
Drawing triangle (or in general convex polygon, but as we discussed we will use only triangles) is very simple. The basic idea of the line triangle drawing algorithm is as follows.
For each scan line (horizontal line on the screen), find the points of intersection with the edges of the triangle. Then, draw a horizontal line between intersections and do this for all scan lines.
But how can we find these points quickly? Using linear interpolation!
We have 3 vertices and we want to find coordinates of all points belonging to segments determined by these vertices. Assume we have segment given by points: (xa,ya) and (xb,yb). Our task is to find points: (xc,ya+1), (xd,ya+2), ... , (xm,yb-1), (xn,yb). Notice that xa changes to xb in (yb-ya) steps.
We also have: xa=xa+0*(xb-xa)/(yb-ya),
Xb = xa + ( yb-ya ) * ( xb-xa ) / ( yb-ya ) and, in general, xi = xa + ( yi – ya ) * delta ,
where delta=(xb-xa)/(yb-ya).
The general function for linear interpolation is:
f(X) = A + X * ( (B-A) / steps) where we slide from A to B in steps steps
Here is pseudo code for a triangle filling algorithm.
The coordinates of vertices are (A. x,A. y), (B. x,B. y), (C. x,C. y); we assume that A. y <= B. y <= C. y (you should sort them first)
dx1,dx2,dx3 are deltas used in interpolation
Horizontal line draws horizontal segment with coordinates (S. x, Y), (E. x, Y)
S. x, E. x are left and right x-coordinates of the segment we have to draw
S = A means that S. x = A. x; S. y = A. y;
docsity.com
28.9 Gouraud Shading
The idea of gouraud and flat triangle is nearly the same. Gouraud takes only three parameters more (the color value of each of the vertices), and the routine just interpolates among them drawing a beautiful, shaded triangle. You can use 256-colors mode, in which vertices' colors are simply indices to palette or hi- color mode (recommended).
Flat triangle interpolated only one value (x in connection with y), 256 colors gouraud needs three (x related to y, color related to y, and color related to x), hi-color gouraud needs seven (x related to y, red, green and blue components of color related to y, and color related to x (also three components))
Drawing a gouraud triangle, we add only two parts to the flat triangle routine. The horizline routine gets a bit more complicated due to the interpolation of the color value related to x but the main routine itself remains nearly the same.
28.10 Textured Triangles
We can also apply any bitmap on triangle for filling it.
I'll show you the idea of linear (or 'classical') texture mapping (without perspective correction). Linear mapping works pretty well (read: fast) in some scenes, but perspective correction is in some way needed in most 3D systems.
Again we're using the idea of interpolation: now we'll code a texture triangle filler. And again the idea is perfectly the same, only two more values to interpolate, that is five values total. In texture mapping, we interpolate x, u, and v related to y, and u and v related to x ( u and v are coordinates in the 2D bitmap space). The situation is maybe easier to understand by looking at the following picture:
docsity.com
The left triangle is the triangle which is drawn onto the screen. There's a single scanline (one call to the horizline routine) pointed out as an example. The triangle on the right is the same triangle in the bitmap space, and there's the same scanline drawn from another point of view into it, too. So we need just to interpolate, interpolate, and once more interpolate in texture filler - an easy job if you've understood the idea of gouraud filler.
28.11 COLOR
It is important to understand how color is represented in computer graphics so that we can manipulate it effectively. A color is usually represented in the graphics pipeline by a three-element vector representing the intensities of the red, green, and blue components, or for a more complex object, by a four-element vector containing an additional value called the alpha component that represents the opacity of the color. Thus we can talk about rgb or rgba colors and mean a color that's made up of either three or four elements. There are many different ways of representing the intensity of a particular color element. Colors can also be represented as floating point values in the range [0,1].
Nowadays every PC we can buy has hardware that can render images with thousands or millions of individual colors. Rather than have an array with thousands of color entries, the images instead contain explicit color values for each pixel. A 16-bit display is named since each pixel in a 16-bit image is taken up by 16 bits (2 bytes): 5 bits of red information, 6 bits of green information, and 5 bits of blue information. Incidentally, the extra bit (and therefore twice as much color resolution) is given to green because our eyes are more sensitive to green. A 24-bit display, of course, uses 24 bits, or 3 bytes per pixel, for color information. This gives 1 byte, or 256 distinct values each, for red, green, and blue. This is generally called true color , because 256^3 (16.7 million) colors is about as much as your eyes can discern, so more color resolution really isn't necessary, at least for computer monitors.
Finally, there is 32-bit color, something seen on most new graphics cards. Many 3D accelerators keep 8 extra bits per pixel around to store transparency information, which is generally referred to as the alpha channel, and therefore take up 4 bytes, or 32 bits, of storage per pixel. Rather than reimplement the display logic on 2D displays that don't need alpha information, these 8 bits are usually just wasted.
WHY WE MIGHT WANT 128-BIT COLOR?
In one of the early magazines articles of Mike Abrash [ABRASH 1992], he tells a story about going from a 256-color palette to hardware that supported 256 levels for each RGB color–16 million colors! What would we do with all those colors? He goes on to tell of a story by Sheldon Linker at the eighth Annual Computer Graphics Show on how the folks at the Jet Propulsion Lab back in the 1970s had a printer that could print over 50 million distinct colors. As a test, they printed out words on paper where the background color was only one color index from the word's color. To their surprise, it was easy to discern the words—the human eye is very sensitive to color graduations and edge detection. The JPL team then did the same tests on color monitors and discovered that only about 16 million colors could be distinguished. It seems that the eye is (not too surprisingly) better at perceiving detail from reflected light (such as from a printed page) than from emissive light (such as from a CRT). The moral is that the eye is a lot more perceptive than you might think. Twenty four-bits of color really is not that much range, particularly if we are performing multiple passes. Round-off error can and will show up if we aren't careful!
docsity.com
Let's start with a simple example of using reflected colors. Later on we will discuss on lighting, we'll discover how to calculate the intensity of a light source, but for now, just assume that we've calculated the intensity of a light, and it's a value called id. This intensity of our light is represented by, say, a nice lime green color.
Thus
Let's say we shine this light on a nice magenta surface given by cs.
So, to calculate the color contribution of this surface from this particular light, we perform a piecewise multiplication of the color values.
Note: Piecewise multiplication is denoted by that is element-by-element multiplication. Used in color operations, where the vector just represents a convenient notation for an array of scalars that are operated on simultaneously but independently.
This gives us the dark plum color shown in figure below. We should note that since the surface has no green component, that no matter what value we used for the light color, there would never be any green component from the resulting calculation. Thus a pure green light would provide no contribution to the intensity of a surface if that surface contained a zero value for its green intensity. Thus it's possible to illuminate a surface with a bright light and get little or no illumination from that light. We should also note that using anything other than a full-bright white light [1,1,1] will involve multiplication of values less than one, which means that using a single light source will only illuminate a surface to a maximum intensity of its color value, never more. This same problem also happens when a texture is modulated by a surface color. The color of the surface will be multiplied by the colors in the texture. If the surface color is anything other than full white, the texture will become darker. Multiple texture passes can make a surface very dark very quickly.
Figure 2: Multiplying (modulating) color values results in a color equal to or less than (darker) the original two.
docsity.com
Given that using a colored light in a scene makes the scene darker, how do we make the scene brighter? There are a few ways of doing this. Given that color multiplication will never result in a brighter color, it's offset a bit since we end up summing all the light contributions together, which, as we'll see in the next section, brings with it its own problems. But if we are just interested in increasing the brightness on one particular light or texture, one way is to use the API ( Library routines e.g. OpenGL or DirectX ) to artificially brighten the source–this is typically done with texture preprocessing. Or, we can artificially brighten the source, be it a light or a texture, by adjusting the values after we modulate them.
28.13 Dealing with Saturated Colors
On the other hand, what if we have too much contribution to a color? While the colors of lights are modulated by the color of the surface, each light source that illuminates the surface is added to the final color. All these colors are summed up to calculate the final color. Let's look at such a problem. We'll start with summing the reflected colors off a surface from two lights. The first light is an orange color and has rgb values [1.0,0.49,0.0], and the second light is a nice light green with rgb values [0.0,1.0,0.49]. Summing these two colors yields [1.0, 1.49, 0.49], which we can't display because of the values larger than one figure below shows.
Figure 3: Adding colors can result in colors that are outside the displayable range.
So, what can be done when color values exceed the range that the hardware can display? It turns out that there are three common approaches [HALL 1990].
Clamping the color values is implemented in hardware, so for shaders ( technology used in today computer graphics for lighting and shading ), it's the default, and it just means that we clamp any values outside the [0,1] range. Unfortunately, this results in a shift in the color.
The second most common approach is to scale the colors by the largest component. This maintains the color but reduces the overall intensity of the color.
The third is to try to maintain the intensity of the color by shifting (or clipping) the color toward pure bright white by reducing the colors that are too bright while increasing the other colors and maintaining the overall intensity. Since we can't see what the actual color
for (figure above) is, let's see what color each of these methods yields (figure below). docsity.com
