Download Lighting 1-Computer Graphics-Lecture Notes and more Study notes Computer Graphics in PDF only on Docsity!
Lecture No.23 Lighting I
MATHEMATICS OF COLOR IN COMPUTER GRAPHICS
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 re-implementing the display logic on 2D displays that don't need alpha information, these 8 bits are usually just wasted.
Representing Color
Before we can go about giving color to anything in a scene, we need to know how to represent color! Usually we use the same red, green, and blue (rgb) channels discussed above, but for this there will also be a fourth component called alpha. The alpha component stores transparency information about a surface. Practically we will use two structures to ease the color duties: color3 and color4. They both use floating-point values for their components; color3 has red, green, and blue, while color4 has the additional fourth component of alpha in there.
Colors aren't like points—they have a fixed range. Each component can be anywhere between 0.0 and 1.0 (zero contribution of the channel or complete contribution). If performing operations on colors, such as adding them together, the components may rise above 1.0 or below 0.0.
docsity.com
The code for color4 appears below.
The color4 structure
struct color { union { struct { float r, g, b, a; // Red, Green, and Blue color data }; float c[4]; };
color4(){}
color4( float inR, float inG, float inB, float inA ) : r( inR ), g( inG ), b( inB ), a( inA ) { }
color4( const color3& in, float alpha = 1.f ) { r = in.r; g = in.g; b = in.b; a = alpha; }
color4( unsigned long color ) { b = (float)(color&255) / 255.f; color >>= 8; g = (float)(color&255) / 255.f; color >>= 8; r = (float)(color&255) / 255.f; color >>= 8; a = (float)(color&255) / 255.f; }
unsigned long MakeDWord() { unsigned long iA = (int)(a * 255.f ) << 24; unsigned long iR = (int)(r * 255.f ) << 16; unsigned long iG = (int)(g * 255.f ) << 8; unsigned long iB = (int)(b * 255.f ); return iA | iR | iG | iB; }
// if any of the values are >1, cap them.
docsity.com
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!
An example of the various gamuts is shown in the figure below. The CIE diagrams are the traditional way of displaying perceived color space, which, we should note, is very different from the linear color space used by today's graphics hardware. The colored area is the gamut of the human eye. The gamut of printers and monitors are subsets of this gamut.
Figure 1: The 1931 CIE diagram shows the gamut of the eye and the lesser gamut of output devices.
Multiplying Color Values
First we need to be aware of how to treat colors. The calculation of the color of a particular pixel depends, for example, on the surface's material properties that we've programmed in, the color of the ambient light ( lighting model) , the color of any light shining on the surface (perhaps of the angle of the light to the surface), the angle of the surface to the viewpoint, the color of any fog or other scattering material that's between the surface and the viewpoint, etc. No matter how you are calculating the color of the pixel, it all comes down to color calculations, at least on current hardware, on rgb or rgba vectors where the individual color elements are limited to the [0,1] range. Operations on colors are done piecewise–that is, even though we represent colors as rgb vectors, they aren't really vectors in the mathematical sense. Vector multiplication is different from the operation we perform to multiply color. We'll use the symbol to indicate such piecewise multiplication. Colors are multiplied to describe the interaction between a surface and a light source. The colors of each are multiplied together to estimate the reflected light color–this is the color of the light that this particular light reflects off this surface. The problem with the
docsity.com
standard rgb model is just that we're simulating the entire visible spectrum by three colors with a limited range. 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.
docsity.com
Figure 4: The results of three strategies for dealing with the same oversaturated color.
As we can see, we get three very different results. In terms of perceived color, the scaled is probably the closest though it's darker than the actual color values. If we weren't interested in the color but more in terms of saturation, then the clipped color is closer. Finally, the clamped value is what we get by default, and as you can see, the green component is biased down so that we lose a good sense of the "greenness" of the color we were trying to create.
docsity.com
