6.837 Lecture 1

Lecture 1 --- 6.
837 Fall '01
6.837 Lecture 1
1. 6.837 - Principles of Computer Graphics 2. Computer Graphics
3. Okay, but what is this course really about? 4. Computer Graphics is about Movies!
5. Games are okay here! 6. Medical Imaging
7. Computer Aided Design 8. Scientific Visualization
9. Graphical User Interfaces (GUIs) 10. Display Technologies
11. Vector Displays 12. Raster Displays
13. Raster Display Simulation 14. Color Video
15. Raster Display 16. Liquid Crystal Displays (LCDs)
17. Reflective and Backlit LCDs 18. Active Matrix LCDs
19. Plasma Display Panels 20. Field Emission Devices (FEDs)
21. Digital Micromirror Devices (DMDs) 22. Light Emitting Diode (LED) Arrays
23. The Ultimate Display! 24. Head-Mounted Displays
25. Caves and Fish Bowls 26. Autostereo Displays
27. How it Works 28. Exercise #1
29. A First Java Program 30. Java Example
31. The Applet in Action 32. 6.837 Topics
33. Java Rasters
Lecture 1 Outline 6.837 Fall '01
http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/index.html [9/7/2001 7:16:59 PM]

Lecture 1 --- 6.837 Fall '01
6.837 - Principles of Computer Graphics
Introductions
Instructors - Tomas Lozano-Perez & Jovan Popovic
TAs - Robert Sumner & Daniel Vlasic
Secretary - Britton "Bryt" Bradley
About this Course

www.graphics.lcs.mit.edu/classes/6.837/F01
Computer Graphics?
Display Technologies
Lecture 1 Slide 1 6.837 Fall '01

More notes on the course's organization can be found on the course web page. In addition, all of the slides used in the class lectures, will be available there.
http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide01.html [9/7/2001 7:18:11 PM]

Lecture 1 --- 6.837 Fall '01
Computer Graphics
What computers do....
process, transform,and communicate information
Aspects of communication
Origin (where does information come from?)
Throughput (how frequent?)
Latency (how long do I have to wait)?
Presentation (what does it look like?)
Computer Graphics is...
the technology for presenting information

Computer graphics has become the predominant form of computer output. Even the text on most computer screens are "rendered" using computer graphics methods, as
opposed to being mechanically transferred onto paper by an inked metal stamp.

Lecture 1 --- 6.837 Fall '01
Okay, but...
what is this course really about?
Not! We will cover...
Paint and Imaging packages Graphics programming algorithms
(Adobe Photoshop) Graphics data structures
CAD packages (AutoCAD) Color and human vision
Rendering packages (Lightscape) Graphical interface design and
Modeling packages (3D Studio MAX) programming
Animation packages (Digimation) Applied geometry and modeling
Graphics APIs (OpenGL) Applied numerical computing
Graphics Modeling and Languages
(RenderMan)
Ugh... sounds like Computer Science


Lecture 1 --- 6.837 Fall '01
Computer Graphics is about Movies!
If you can imagine it, it can be done with computer graphics.
Obviously, Hollywood has caught on to this. Each summer,

we are amazed by state-of-the-art special effects. More and
more of these images exist only within the memory of a
computer. There seems to be no end in sight for this trend.
But we're not just talking about big budget mega-productions.
There are music videos, and spinning logos on the 6 o'clock
news. Computer graphics is now as much a part of the
entertainment industry as stunt men and makeup.
The entertainment industry plays many other important roles

in the field of computer graphics.
1. Leaders in quality and artistry
2. Not slaves to conceptual purity
3. Big budgets and tight schedules
4. Constant reminder that there is more to CG than
technology.
5. How did they do that?
6. They define our expectations.

Lecture 1 --- 6.837 Fall '01
Games are okay here!

Games are an important driving force in computer graphics. In this
class we are going to talk about games. We'll discuss on how they
work. We'll also question how they get so much done with so little to
work with. If you have time to play computer games between now
and the end of the semester ask yourselves, how do they do that?
Study the screen. How does the screen look when things are moving?
What about when things are still. Why do they always go into those
low resolution display modes that everyone else considers worthless.
Let yourself get blown up. If anyone asks, tell them you're doing
science.
How the game's industry impacts computer graphics

1. Focus on interactivity
2. Cost-effective solutions
3. Avoiding computation and other tricks
4. Games drive the baseline

Lecture 1 --- 6.837 Fall '01
Medical Imaging
There are few endeavors more noble than the preservation of life. Today, it can
honestly be said that computer graphics plays an significant role in saving lives. The
range of application spans from tools for teaching and diagnosis, all the way to
treatment. Computer graphics is tool in medical applications rather than an a mere
artifact. No cheating or tricks allowed.
How medical applications influence computer graphics technology

1. New data representations and modalities
2. Drive issues of precision and correctness
3. Focus on presentation and interpretation of data
4. Construction of models from acquired data

Lecture 1 --- 6.837 Fall '01
Computer Aided Design

Computer graphics has had a dramatic impact on the design process. Today, most mechanical and
electronic designs are executed entirely on computer. Increasingly, architectural and product designs
are also migrating to the computer. Automated tools are also available that verify tolerances and design
constraints directly from CAD designs. CAD designs also play a key role in a wide range of processes
from the design of tooling fixtures to manufacturing.
CAD has had the follow impact on computer graphics.

1. Drives the high-end of the HW market
2. Integration of computing and display resources
3. Reduced design cycles (faster systems sooner)

Lecture 1 --- 6.837 Fall '01
Scientific Visualization
Computer graphics makes vast quantities of data accessible. Numerical simulations frequently
produce millions of data values. Similarly, satellite-based sensors amass data at rates beyond
our abilities to interpret them by any other means than visually. Mathematicians use computer
graphics to explore abstract and high-dimensional functions and spaces. Physicists can use
computer graphics to transcend the limits of scale. With it they can explore both microscopic
and macroscopic worlds.

Lecture 1 --- 6.837 Fall '01
Graphical User Interfaces (GUIs)

Computer graphics is an integral part of every day computing. Nowhere is this
fact more evident than the modern computer interface design. Graphical
elements such as windows, cursors, menus, and icons are so common place it
is difficult to imagine computing without them. Once graphics programming
was considered a speciality. Today, nearly all professional programmers must
have an understanding of graphics in order to accept input and present output
to users.

Lecture 1 --- 6.837 Fall '01
Display Technologies
Cathode Ray Tubes (CRTs)
Most common display device today

Evacuated glass bottle
(last remaining vacuum tube)
Heating element (filament)
Electrons attracted to focusing anode cylinder
Vertical and Horizontal deflection plates
Beam strikes phosphor coating on front of tube
http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide10.html (1 of 2) [9/7/2001 7:20:02 PM]

Lecture 1 --- 6.837 Fall '01
CRTs, or video monitors, are the most common output device on computers today. The figure below illustrates the basic structure of a CRT. A CRT is an evacuated glass
bottle, with a heating element on one end and a phosphor coated screen on the other. When a current flows through this heating element, called a filament, the conductivity
of the metal filament is reduced due to the high temperature. This cause electrons to pile up on the filament, because they can not move as fast as they would like to (Notice
I'm wearing my "electrons-are-particles" hat). Some of these electrons actually boil off of the filament.
These free electrons are attracted to a strong positive charge from the outer surface of the focusing anode cylinder (sometimes called an electrostatic lens). However, the
inside of the cylinder has a weaker negative charge. Thus when the electrons head toward the anode they are forced into a beam and accelerated by the repulsion of the
inner cylinder walls in just the way that water is speeds up when its flow though a smaller diameter pipe. By the time the electrons get out they're going so fast that they fly
past the cathode they were heading for.
The next thing that the electrons run into are two sets of weakly charged deflection plates. These plates have opposite charges, one positive the other negative. While their
charge is not strong enough to capture the fast moving electrons they do influence the path of the beam. The first set displaces the beam up and down, and the second
displaces the beam left and right. The electrons are sent flying out of the neck of the bottle, called a yolk, until they smash into the phosphor coating on the other end of the
bottle. The impact of this collision on the out valence bands of the phosphor compounds knocks some of the electrons to jump into the another band. This causes a few
photons to be generated, and results in our seeing a spot on the CRT's face.

Lecture 1 --- 6.837 Fall '01
Vector Displays
Oscilloscopes were some of the 1st computer displays
Used by both analog and digital computers
Computation results used to drive the vertical and horizontal axis (X-Y)
Intensity could also be controlled (Z-axis)
Used mostly for line drawings
Called vector, calligraphic or affectionately stroker displays
Display list had to be constantly updated
(except for storage tubes)

Lecture 1 --- 6.837 Fall '01
CRTs were embraced as output devices very early in the development of digital computers. There close cousins, vacuum tubes, were some of the first switching elements
used to build computers. Today, the CRT is a the last remaining vacuum tube in most systems (Even the flashing lights are solid-state LEDs).
Most likely, oscilloscopes were some of the first computer graphics displays. The results of computations could be used to directly drive the vertical and horizontal
displacement plates in order to draw lines on the CRT's face. By varying the current to the heating filament the output of the electron beam could also be controlled. This
allowed the intensity of the lines to vary from bright to completely dark.
These early CRT displays were called vector, calligraphic or affectionately stroker displays. The demonstration above gives some feel for how they worked.
By the way, this demo is an active Java applet. You can click and drag your mouse inside of the image to reorient the CRT for a better view. Notice the wireframe nature of
the displayed image. This demo is complicated by the fact that it's a wireframe simulation of a wireframe display system. Notice how the color of the gray lines of the CRT
vary from dark to light indicating which parts of the model that are closer to the viewer. This technique is called depth-cueing, and it was used frequently on vector
displays. The intensity variations seen on the teapot, however, are for a different reason. Eventually, the phosphors recover from their excited state and the displaced
electrons return back to their original bands. The glow of the phosphor fades. Thus, the image on the CRT's face must be constantly redrawn, refreshed, or updated.
The two primary problems with vector displays are that they required constant updates to avoid fading, thus limiting the drawn scene's complexity, and they only drew
wireframes.

Lecture 1 --- 6.837 Fall '01
Raster Displays
TV boomed in the 50s and early 60s

(they got cheap)
B/W TVs are basically oscilloscopes
(with a hardwired scan pattern)
Entire screen painted 30 times/sec
Screen is traversed 60 times/sec
Even/Odd lines on alternate scans
(called fields)
Interlace - a hack to give
Smooth motion
on dynamic scenes
High Resolution
on static scenes
Optimize bandwidth

Lecture 1 --- 6.837 Fall '01
During the late 50s and early 60s, broadcast television, really began to take off. It had been around for a while, but it didn't become a commodity item until about this time.
Televisions are basically just oscilloscopes. The main difference is that instead of having complete control over the vertical and horizontal deflection, a television sweeps its
trace across the entire face in a regular fixed pattern (the actual details are slightly more complicated, but that's the jist of it). This scanning pattern proceeds from the
top-left of the screen to the bottom-right as shown in the diagram. The final result is that the entire screen is painted once every 1/30th of a second (33 mS).
Televisions were mass produced and inexpensive. For a computer to paint the entire screen it needs only to synchronize its painting with the constant scanning pattern of
the raster. The solution to this problem was to add a special memory that operated synchronous to the raster scanning of the TV, called a frame buffer. While televisions
were cheap, memory wasn't. So there was a long period where the patterns were scanned out of a cheap high-density read-only memories, called character generators. The
trick was to use a single 8 bit code to specify an 8 by 12 character pattern from the ROM, and with a few addressing tricks one could build a nice display (80 by 25
character) with only 2 kilobytes of memory. Thus the era of the CRT-terminal was born.

Lecture 1 --- 6.837 Fall '01
Raster Display Simulation
In a raster display the path of the electron beam is

hardwired. The computer must synchronize its "painting" of
the screen with the scanning of the display. The computer
only controls the intensity of the color at each point on the
screen. Usually a dedicated section of memory, called the
frame buffer, is used to store these intensity variations.

Lecture 1 --- 6.837 Fall '01
The simulation above is a Java applet that simulates the scanning of a raster display. Move the CRT wireframe (by clicking and dragging) in order to get a better feel.
There were a few attempts at building systems with downloadable or programmable character generators. And a few systems added an extra byte to specify the foreground
and background colors of the character cell. Lots of tank/maze arcade games in the 70's worked this way. But by the late 70's and early 80's the price of memory started a
free-fall and the graphics terminal was born. In a later lecture we'll go into a lot more detail about the notion of a framebuffer an how it is fundamental to modern computer
graphics.

Lecture 1 --- 6.837 Fall '01
Color Video
Delta Electron Gun Arrangement Color CRTs are In-line Electron Gun Arrangement
much more
complicated
Requires precision
geometry
Patterned phosphors
on CRT face
Aligned metal shadow
mask
Three electron guns
Less bright than
monochrome CRTs

Lecture 1 --- 6.837 Fall '01
Raster Display
Disadvantages
Requires screen-sized memory array
Discrete spatial sampling (pixels)
Moire patterns result when shadow-mask and dot-pitch frequencies
are mismatched
Convergence (varying angles of approach distance of e-beam
across CRT face)
Limit on practical size (< 40 inches)
Spurious X-ray radiation
Occupies a large volume
Advantages
Allows solids to be displayed
Leverages low-cost CRT H/W (TVs)
Whole Screen is constantly updated
Lecture 1 --- 6.837 Fall '01
Bright light-emitting display technology

Color CRT's are more complicated than the simple monochrome models summarized before. The phosphors on the face of a color CRT are laid out in a precise geometric
pattern. There are two primary variations, the stripe pattern of in-line tubes shown on the left, and the delta pattern of delta tubes as shown on the right.
Within the neck of the CRT there are three electron guns, one each for red, green, and blue (the actual beams are all the same color-- invisible). There is also a special metal
plate just behind the phosphor cover front face, called a shadow mask. This mask is aligned so that it simultaneously allows each electron beam to see only the phosphors of
its assigned color and blocks the phosphor of the remaining two colors.
The figure shown above shows the configuration of an example in-line tube. On page 44 of Hearn & Baker you'll see a similar diagram for a delta electron gun
configuration
A significant portion of the electron beam's energy strikes the mask rather than the phosphors. This has two side effects. The shadow mask has to be extremely rigid to stay
aligned with the phosphor patterns on the CRT face. The collision of electrons with metal mask causes the mask to emit some of it absorbed energy as electromagnetic
radiation. Most of this energy is in the form of heat, but some fraction is emitted as x-rays. X-rays can present a health hazard. This wasn't a large problem for television
because the intensity of the x-ray radiation falls off quickly as you move away from the screen. However, computer monitors are supposed to be viewed from a short
distance. This health concern along with the high voltages and power dissipations of CRTs has motivated the development of new display technologies.
For more information on CRTs check out the following links:
The Scoop on CRTs

History

Lecture 1 --- 6.837 Fall '01
Liquid Crystal Displays (LCDs)

Currently, the most popular alternative to the CRT is the Liquid Crystal Display (LCD). LCDs are organic molecules
that, in the absence of external forces, tend to align themselves in crystalline structures. But, when an external force is
applied they will rearrange themselves as if they were a liquid. Some liquid crystals respond to heat (i.e. mood rings),
others respond to electromagnetic forces.
When used as optical (light) modulators
LCDs change polarization rather than
transparency (at least this is true for the
most popular type of LCD called
Super-twisted Nematic Liquid crystals). In
their unexcited or crystalline state the
LCDs rotate the polarization of light by 90
degrees. In the presence of an electric field,
LCDs the small electrostatic charges of the
molecules align with the impinging E field.
The LCD's transition between crystalline

and liquid states is a slow process. This has
both good and bad side effects. LCDs, like
phosphors, remain "on" for some time after
the E field is applied. Thus the image is
persistent like a CRT's, but this lasts just
until the crystals can realign themselves,
thus they must be constantly refreshed,
again, like a CRT.

The book Hearns & Baker is a little confusing in describing how LCDs work (pp. 47-48). They call the relaxed state the "On State" and the excited state the "Off State".

Lecture 1 --- 6.837 Fall '01
Their statement is only true from the point of view of the pixels when the LCDs are used in a transmissive mode (like on most laptops). The opposite is true when the LCDs
are used in a reflective mode (like on watches).

Lecture 1 --- 6.837 Fall '01
Reflective and Backlit LCDs
Rather than generating light like a CRTs, LCDs act as light values. Therefore, they are dependent on some external light source.
In the case of a transmissive display, usually some sort of back light is used. Reflective displays take advantage of the ambient
light. Thus, transmissive displays are difficult to see when they are overwhelmed by external light sources, whereas reflective
displays can't be seen in the dark. You should also note that at least half of the light is lost in most LCD configurations. Can you
see why?

Lecture 1 --- 6.837 Fall '01
Active Matrix LCDs

The LCD's themselves have extremely low power
requirements. A very small electric field is required to
excite the crystals into their liquid state. Most of the
energy used by an LCD display system is due to the back
lighting.
I mentioned earlier that LCD's slowly transition back to
their crystalline state when the E field is removed. In
scanned displays, with a large number of pixels, the
percentage of the time that LCDs are excited is very small.
Thus the crystals spend most of their time in intermediate
states, being neither "On" or "Off". This behavior is
indicative of passive displays. You might notice that these
displays are not very sharp and are prone to ghosting.
Another way to building LCD displays uses an active
matrix. The individual cells are very similar to those
described above. The main difference is that the electric
field is retained by a capacitor so that the crystal remains
in a constant state. Transistor switches are used to transfer
charge into the capacitors during the scanning process. The
capacitors can hold the charge for significantly longer than
the refresh period yielding a crisp display with no
shadows. Active displays, require a working capacitor and
transistor for each LCD or pixel element, and thus, they
are more expensive to produce.
More resources:
Lecture 1 --- 6.837 Fall '01
An overview of display technologies and the source of some of my figures.
A nice discussion of the history and technical details of LCDs
More discussion of LCDs and the source of some of my figures.

Lecture 1 --- 6.837 Fall '01
Plasma Display Panels
Promising for large format displays

Basically fluorescent tubes
High-voltage discharge excites gas mixture (He, Xe)
Upon relaxation UV light is emitted
UV light excites phosphors
Large viewing angle
Less efficient than CRTs

Not as bright
More power
Large pixels (~1mm compared to 0.2mm
for CRT)
Ion bombardment depletes phosphors

Lecture 1 --- 6.837 Fall '01
Plasma display panels (PDPs) are essentially a matrix of very small fluorescent tubes with red, green, and blue phosphors. As in ordinary tubes, a discharge is initiated by a
high voltage which excites a mixture of inert-gases such as He and Xe. Upon relaxation, ultra-violet (UV) radiation is generated which excites the phosphors.
PDPs provide a large viewing angle since the phosphors emit light uniformly. A 40-inch PDP typically consumes about 300 W whereas the peak brightness is only 1/3 of
that of a CRT consuming about half the power. Sealing and vacuum pressure support problems apply to PDPs as well, requiring thicker glass as the screen is enlarged. In
addition, the discharge chambers have pixel pitches of more than 1 mm which makes it difficult to construct high-definition television (HDTV) and work-station monitors.
By contrast, TFTLCDs, CRTs and FEDs may have pixel pitches as small as 0.2 mm.

Lecture 1 --- 6.837 Fall '01
Field Emission Devices (FEDs)
Works like a CRT with multiple electron guns at each pixel

Uses modest voltages applied to sharp points to produce
strong E fields
Reliable electrodes proven difficult to produce
Limited in size
Thin, and requires a vacuum

Lecture 1 --- 6.837 Fall '01
Digital Micromirror Devices (DMDs)

Microelectromechanical (MEMs) devices
Fabricated using VLSI processing techniques
2-D array of mirrors
Tilts +/- 10 degrees
Electrostatically controlled
Truly digital pixels
Suitable only for projection displays

Gray levels via Pulse-Width Modulation (PWM)
Color via multiple chips or a color-wheel
Excellent resolution and fill-factor
Light efficient
Problems with stray light and flicker

Lecture 1 --- 6.837 Fall '01
Light Emitting Diode (LED) Arrays

Organic Light Emitting Diodes (OLEDSs)
Function is similar to a semiconductor LED
Thin-film polymer construction
Potentially simpler processing
Transparent
Flexible
Can be
vertically
stacked
Excellent
brightness
Large viewing angle
Efficient (low power/low voltage)
Fast (< 1 microsec)
Can be made large or small
Tend to breakdown
The operation of organic LEDs is similar to inorganic semiconductor LEDs. When two materials, one with an excess of mobile electrons the other with a deficiency, are
Lecture 1 --- 6.837 Fall '01
place in close contact a junction region is formed. When a small potential is applied the resistance of this junction to the transport of electrons can be overcome. The motion
of the electrons in an LED causes excites the electron on lower valance bands causing them to move up or down into other bands. This configuration is unstable and the
electrons quickly return to their previous state. This change in energy (induced by the electrons returning to their proper valence bands) causes a photon to be emitted.
Unlike crystalline semiconductors, though, these organic devices are made by depositing a thin-film layer from a solution or by a vacuum deposition process. They are not
grown like a crystal, and they do no require a high-temperature process to dope them. This allows large areas to be processed, unlike typical semiconductor fabrication.
Several recent developments have stimulated significant interest in OLEDs. These include new materials and new processes. The performance of prototype systems has
been very promising. It appears likely that commercial display products will appear in the near future.
OLEDs have many advantages. They are light-emitting, low-voltage, full-color, and have an easily produced electronic structure. All other light-emitting, flat panel
technologies employ high voltages. The simple structure is clearly not a characteristic of other popular flat panel display types.
OLED development has progressed rapidly, but there is still much work to be done. Display lifetime remains a key issue with OLEDs. Many of the researchers already feel
confident that these problems can be overcome.

Lecture 1 --- 6.837 Fall '01
There's 3D and then there is
Most often we present 3-dimensional graphics

on 2-dimensional displays.
What is the potential for presenting 3D

information in a way that it can be percieved
as 3D?
Yes, we are talking about holodecks!

Can we build one? How?

Lecture 1 --- 6.837 Fall '01
Head-Mounted Displays
Consider carrying two

displays around on your head.
+ Stereopsis is a strong
3D queue
+ Existing Technology
+ Personal Display
- Obtrusive
- Narrow FOV
(Tunnel Vision)
- Low Resolution
- Tracking
Currently the most popular 3-Dimensional (VR) display

Lecture 1 --- 6.837 Fall '01
Caves and Fish Bowls

Alternate left and right eye
images on a single display
Electronic shutters
Polarization
Red/Green
Barriers
+Lighter or no headware
+High resolution
-Significant infrastructure
(5-wall caves have been built)
-Personal
-Still needs tracking

Lecture 1 --- 6.837 Fall '01
Autostereo Displays
HoloVideo Display
+Multi-viewer
+No Encumberances
-Requires an extremely high-resolution
display element
-Narrow-band illumination
Integral Display
+Multi-viewer
+No Encumberances
+Requires a moderately high-resolution
display
-Requires a dense array of lenses

Lecture 1 --- 6.837 Fall '01
How it Works
Lens Properties
Plastic hexangonal lens array
Each lens is a "view dependent"
pixel
Currently 10 lens/inch
More information at: www.graphics.lcs.mit.edu/~aisaksen/projects/autostereoscopic

Paper at: www.graphics.lcs.mit.edu/~aisaksen/projects/drlf

Lecture 1 --- 6.837 Fall '01
Exercise #1
Set up your course homepage by next Tuesday 9/11
Homepage
Requirements:
REGISTER TODAY (on

course Webpage)
Locate on imagery in
/mit/imagery2/6.837/F01/username
Before 6.837 I was a normal lab rat, now I am the BRAIN!
(you must execute
My Projects: Cool Places:
"add imagery2" first)
Exercise #1 MIT's Graphics Group
Project #1
Something about you
My REAL homepage
Project #2 6.837's homepage
Project #3

Links to Exercise 1 and
Project #4 to the 5 projects
Project #5
Area for links to
computer graphics sites
Narf! that you find interesting
A link back to the 6.837
homepage

Lecture 1 --- 6.837 Fall '01
A First Java Program

We start by writing what is called a Java applet. This is a form of a Java program that can be embedded in a HTML
document and accessed from the web. An example HTML document that calls our example applet is shown below:
<HTML>
<HEAD>
<TITLE>Demo Applet</TITLE>
</HEAD>
<BODY>
<H1>Demo Applet</H1>
<P>My favorite class is 6.837</P>
<HR>
<CENTER>
<APPLET code="Demo.class" width=200 height=200>

</APPLET>
</CENTER>
<HR>
</BODY>
</HTML>
The italicized lines add the Java applet to our document. Notice the .class extension. All Java source code files should end with a
.java extension. The source is here.

Lecture 1 --- 6.837 Fall '01
Java Example
Next, the source of the demo.java file is shown.
import java.applet.*;
import java.awt.*;
public class Demo extends Applet {

Image image;
int count;
public void init() {

image = getImage(getDocumentBase(), "world.jpg");
count = 1;
}
public void paint(Graphics g) {

g.drawImage(image, 0, 0, this);
g.setColor(Color.red);
for (int y = 15; y < size().height; y += 15) {
int x = (int) (size().width/2 + 30*Math.cos(Math.PI*y/75));
g.drawString("Hello", x, y);
}
showStatus("Paint called "+count+" time"+((count > 1)?"s":""));
count += 1;
}
}
You can get the source here and the world.jpg image here.

Lecture 1 --- 6.837 Fall '01
The Applet in Action
Demo Applet This is all of the Java

My favorite class is 6.837 programming language that
we will specifically cover in
class.
If you have never used Java before,

you might want to consider buying
one of the books discussed on the
course's home page.

Lecture 1 --- 6.837 Fall '01
6.837 Topics
Pixels, Rasters and Sprites
Filling, Colors and Grayscale
Line Drawing
Aliasing and Resampling
Scan Conversion
Transformations: 2D and 3D (x3)
Viewing and Projection
Clipping and Culling
3D Modeling
Visible Surface Algorithms (x2)
Illumination and Shading (x2)
Ray Tracing
Texture Mapping (x2)
Radiosity
Animation (x2)
Special Topics

Lecture 1 --- 6.837 Fall '01

Lecture 2 --- 6.837 Fall '01
6.837 Lecture 2
1. Rasters, Pixels and Sprites 2. Review of Raster Displays
3. High-End Graphics Display System 4. A Memory Raster
5. A Java Model of a Memory Raster 6. Example Usage: Rastest.java
7. Lets Talk About Pixels 8. True-Color Frame Buffers
9. Indexed-Color Frame Buffers 10. High-Color Frame Buffers
11. Sprites 12. A Sprite is a Raster
13. An Animated Sprite is a Sprite 14. A Playfield is a Raster and has Animated Sprites
15. PixBlts 16. Seems Easy
17. The Tricky Blits 18. Alpha Blending
19. Alpha Compositing Details 20. Compositing Example
21. Elements of Color 22. Visible Spectrum
23. The Eye 24. The Fovea
25. The Fovea 26. Color Perception
27. Dominant Wavelength 28. Color Algebra
27. Saturated Color Curve in RGB 28. Color Matching
29. CIE Color Space 30. CIE Chromaticity Diagram
31. Definitions: 32. Color Gamuts
33. The RGB Color Cube 34. Color Printing
35. Color Conversion 36. Other Color Systems
35. Next Time : Flooding and Other Imaging Topics
file:////Graphics/classes/6.837/F01/Lecture02/index.html [10/2/2001 5:36:00 PM]

Lecture 2 --- 6.837 Fall '01
Rasters, Pixels and Sprites
Experiencing
JAVAphobia?
Rasters
Pixels
Alpha
RGB
Sprites
BitBlts
file:////Graphics/classes/6.837/F01/Lecture02/Slide01.html [9/12/2001 11:51:55 AM]

Lecture 2 --- 6.837 Fall '01
Review of Raster Displays
Display synchronized with CRT sweep

Special memory for screen update
Pixels are the discrete elements displayed
Generally, updates are visible

Lecture 2 --- 6.837 Fall '01
High-End Graphics Display System
Adds a second frame buffer

Swaps during vertical blanking
Updates are invisible
Costly

Lecture 2 --- 6.837 Fall '01
A Memory Raster
Maintains a copy of the screen (or some part of it) in memory

Relies on a fast copy
Updates are nearly invisible
Conceptual model of a physical object

Lecture 2 --- 6.837 Fall '01
A Java Model of a Memory Raster

class Raster implements ImageObserver {
////////////////////////// Constructors /////////////////////
public Raster(); // allows class to be extended
public Raster(int w, int h); // specify size
public Raster(Image img); // set to size and contents of image
////////////////////////// Interface Method /////////////////

public boolean imageUpdate(Image img, int flags, int x, int y, int w, int h);
////////////////////////// Accessors //////////////////////////

public int getSize( ); // pixels in raster
public int getWidth( ); // width of raster
public int getHeight( ); // height of raster
public int[] getPixelBuffer( ); // get array of pixels
////////////////////////// Methods ////////////////////////////

public void fill(int argb); // fill with packed argb
public void fill(Color c); // fill with Java color
public Image toImage(Component root);
public int getPixel(int x, int y);
public Color getColor(int x, int y);
public boolean setPixel(int pix, int x, int y);
public boolean setColor(Color c, int x, int y);
}
Download Raster.java here.

Lecture 2 --- 6.837 Fall '01
Example Usage: Rastest.java

import java.applet.*;
The code on the import java.awt.*;
right import Raster;
demonstrates public class Rastest extends Applet {
the use of a Raster raster;
Raster object. Image output;
The running int count = 0;
Applet is shown public void init() {
below. Clicking String filename = getParameter("image");
on the image output = getImage(getDocumentBase(), filename);
will cause it to raster = new Raster(output);
showStatus("Image size: " + raster.getWidth() + " x " + raster.getHeight());
be negated. }
public void paint(Graphics g) {

g.drawImage(output, 0, 0, this);
The source code count += 1;
showStatus("paint() called " + count + " time" + ((count > 1) ? "s":""));
for this applet }
can be
downloaded public void update(Graphics g) {
here: paint(g);
}
Rastest.java.
public boolean mouseUp(Event e, int x, int y) {
int s = raster.getSize();
int [] pixel = raster.getPixelBuffer();
for (int i = 0; i < s; i++) {
raster.pixel[i] ^= 0x00ffffff;
}
output = raster.toImage(this);
repaint();
return true;
}
}

Lecture 2 --- 6.837 Fall '01
Lets Talk About Pixels

Pixels are stored as a 1-dimensional array of ints
Each int is formatted according to Java's standard pixel model
Alpha Red Green Blue
The 4 bytes of a 32-bit Pixel int.

if Alpha is 0 the pixel is transparent.
if Alpha is 255 the pixel is opaque.
Layout of the pixel array on the display:
This is the image format used internally by Java

Lecture 2 --- 6.837 Fall '01
True-Color Frame Buffers
Each pixel requires at least 3 bytes. One byte for each primary color.
Sometimes combined with a look-up table per primary
Each pixel can be one of 2^24 colors
Worry about your Endians

Lecture 2 --- 6.837 Fall '01
Indexed-Color Frame Buffers
Each pixel uses one byte

Each byte is an index into a color map
If the color map is not updated synchronously then Color-map flashing may occcur.
Color-map Animations
Each pixel may be one of 2^24 colors, but only 256 color be displayed at a time

Lecture 2 --- 6.837 Fall '01
High-Color Frame Buffers
Popular PC/(SVGA) standard (popular with Gamers)

Each pixel can be one of 2^15 colors
Can exhibit worse quantization (banding) effects than Indexed-color

Lecture 2 --- 6.837 Fall '01
Sprites
Sprites are rasters that can be overlaid onto a background raster called a playfield.
A sprite can be animated, and it generally can be

repositioned freely any where within the playfield.

Lecture 2 --- 6.837 Fall '01
A Sprite is a Raster
class Sprite extends Raster {
int x, y; // position of
sprite on playfield
public void Draw(Raster bgnd); // draws sprite on a
Raster
}
Things to consider:
The Draw( ) method must handle transparent pixels, and it must

also handle all cases where the sprite overhangs the playfield.

Lecture 2 --- 6.837 Fall '01
An Animated Sprite is a Sprite

class AnimatedSprite extends Sprite {
int frames; // frames in sprite
// there are other private variables
public AnimatedSprite(Image images, int frames);
public AnimatedSprite(AnimatedSprite s); // copy a sprite
public void addState(int track, int frame, int ticks, int dx, int dy);
public void addTrack(int anim, StringTokenizer parse);
public void Draw(Raster bgnd);
public void nextState();
public void setTrack(int t);
public boolean notInView(Raster bgnd);
public boolean overlaps(AnimatedSprite s);
}
A track is a series of frames. The frame is displayed for ticks periods. The sprite's position is then moved (dx, dy) pixels.

Lecture 2 --- 6.837 Fall '01
A Playfield is a Raster and has Animated Sprites

class Playfield extends Raster {
Raster background; // background image
Vector sprites; // sprites on this playfield
public Playfield(Image bgnd);

public void addSprite(AnimatedSprite s);
public void removeSprite(AnimatedSprite s);
public void Draw( );
// Other methods...
}

Lecture 2 --- 6.837 Fall '01
PixBlts
PixBlts are raster methods for moving and clearing sub-blocks of
pixels from one region of a raster to another
Very heavily used by window systems:

moving windows around
scrolling text
copying and clearing

Lecture 2 --- 6.837 Fall '01
Seems Easy
Here's a PixBlt method:
public void PixBlt(int xs, int ys, int w, int h, int xd, int yd)
{
for (int j = 0; j < h; j++) {
for (int i = 0; i < w; i++) {
this.setPixel(raster.getPixel(xs+i, ys+j), xd+i, yd+j);
}
}
}
But does this work?

What are the issues?
How do you fix it?

Lecture 2 --- 6.837 Fall '01
The Tricky Blits
Our PixBlt Method works fine when the source and destination regions do not
overlap. But, when these two regions do overlap we need to take special care
to avoid copying the wrong pixels. The best way to handle this situation is by
changing the iteration direction of the copy loops to avoid problems.
The iteration direction must always be opposite of the direction of the block's movement for
each axis. You could write a fancy loop which handles all four cases. However, this code is
usually so critical to system performace that, generally, code is written for all 4 cases and called
based on a test of the source and destination origins. In fact the code is usually unrolled.

Lecture 2 --- 6.837 Fall '01
Alpha Blending
Alpha blending simulates the opacity

of celluloid layers
General rules:
Adds one channel to each pixel [α, r, g, b]
Usually process layers back-to-front (using the over
operator)
255 or 1.0 indicates an opaque pixel
0 indicates a transparent pixel
Result is a function of foregrond and background pixel
colors
Can simulate partial-pixel coverage for anti-aliasing
See Microsoft's Image Composer for more info on these images


Lecture 2 --- 6.837 Fall '01
Alpha Compositing Details

Definition of the Over compositing operation:
αresultcresult = αfg cfg + (1 - αfg) αbgcbg
αresult = αfg + (1 - αfg) αbg
Issues with alpha:
Premultiplied (integral) alphas: Non-premultiplied (independent) alphas:
pixel contains (α, αr, pixel contains (α, r, g, b)
αg, αb)
what Photoshop does
saves computation
αresultcresult = αfg cfg + color values are independent of alpha
αbgcbg - αfgαbgcbg transparent pixels have a color
alpha value constrains color magnitude divison required to get color component
back
alpha modulates image shape
conceptually clean - multiple composites
are well defined
(An excellent reference on the subject)

Lecture 2 --- 6.837 Fall '01
Compositing Example
Alpha-blending features:
Allows image to encode
the shape of an object
(Sprite)
Sprite 1
Can be used to represent

partial pixel coverage for
anti-aliasing
(independent of the final
background color) Sprite 2 and 3
Can be used for

transparency effects
Should be adopted by
everyone! Finished Composition
(what were you planning

to do with that extra byte
anyway)

Lecture 2 --- 6.837 Fall '01
Elements of Color
Hearn & Baker - Chapter 15

Lecture 2 --- 6.837 Fall '01
Visible Spectrum
We percieve electromagnetic energy having wavelengths
in the range 400-700 nm as visible light.

Lecture 2 --- 6.837 Fall '01
The Eye
The photosensitive part of
the eye is called the retina.
The retina is largely

composed of two types of
cells, called rods and
cones. Only the cones are
responsible for color
perception.

Lecture 2 --- 6.837 Fall '01
The Fovea
Cones are most densely packed within a region of the eye called the fovea.
There are three types of cones, referred to as

S, M, and L. They are roughly equivalent to
blue, green, and red sensors, respectively.
Their peak sensitivities are located at
approximately 430nm, 560nm, and 610nm
for the "average" observer.

Lecture 2 --- 6.837 Fall '01
The Fovea
Colorblindness results from a deficiency of

one cone type.

Lecture 2 --- 6.837 Fall '01
Color Perception
Different spectra can result in a perceptually identical sensations called metamers
Color perception results from the simultaneous stimulation of 3 cone types (trichromat)
Our perception of color is also affected by surround effects and adaptation

Lecture 2 --- 6.837 Fall '01
Dominant Wavelength
Location of dominant wavelength specifies the hue of the color
The luminance is the total power of the light (area under curve) and is related to brightness
The saturation (purity) is percentage of luminance in the dominant wavelength
Lecture 2 Slide 26a 6.837 Fall '01
file:////Graphics/classes/6.837/F01/Lecture02/Slide26a.html [9/12/2001 11:56:57 AM]

Lecture 2 --- 6.837 Fall '01
Color Algebra
S = P, means spectrum S and spectrum P are perceived as the same color
if (S = P) then (N + S = N + P)
if (S = P) then aS = aP, for scalar a
It is meaningful to write linear combinations of colors T = aA + bB
Color percepion is three-dimensional, any color C can be constructed as the

superposition of three primaries:
C = rR + gG + bB
Focus on "unit brightness" colors, for which r+g+b=1, these lie on a plane in
3D color space
Lecture 2 Slide 26b 6.837 Fall '01
file:////Graphics/classes/6.837/F01/Lecture02/Slide26b.html [9/12/2001 11:57:01 AM]

Lecture 2 --- 6.837 Fall '01
Saturated Color Curve in RGB

Plot the saturated colors (pure spectral colors) in the r+g+b=1 plane
Lecture 2 Slide 26c 6.837 Fall '01
file:////Graphics/classes/6.837/F01/Lecture02/Slide26c.html [9/12/2001 11:57:05 AM]

Lecture 2 --- 6.837 Fall '01
Color Matching
In order to define the perceptual 3D space in a "standard" way, a set of
experiments can (and have been) carried by having observers try and match color
of a given wavelength, lambda, by mixing three other pure wavelengths, such as
R=700nm, G=546nm, and B=436nm in the following example. Note that the
phosphours of color TVs and other CRTs do not emit pure red, green, or blue light
of a single wavelength, as is the case for this experiment.

The scheme above can tell us what mix of R,G,Bis needed to reproduce the perceptual equivalent of any wavelength. A problem exists, however, because sometimes the red
light needs to be added to the target before a match can be achieved. This is shown on the graph by having its intensity, R, take on a negative value.

Lecture 2 --- 6.837 Fall '01
CIE Color Space

In order to achieve a representation which uses only positive mixing coefficients, the CIE
("Commission Internationale d'Eclairage") defined three new hypothetical light sources, x, y,
and z, which yield positive matching curves:
If we are given a spectrum and wish to find the corresponding X, Y, and Z quantities, we can
do so by integrating the product of the spectral power and each of the three matching curves
over all wavelengths. The weights X,Y,Z form the three-dimensional CIE XYZ space, as
shown below.
file:////Graphics/classes/6.837/F01/Lecture02/Slide28.html [9/12/2001 12:00:52 PM]

Lecture 2 --- 6.837 Fall '01
CIE Chromaticity
Diagram
Often it is convenient to work in a 2D

color space. This is commonly done by
projecting the 3D color space onto the
plane X+Y+Z=1, yielding a CIE
chromaticity diagram. The projection is
defined as:
Giving the chromaticity diagram shown on

the right.

Lecture 2 --- 6.837 Fall '01
Definitions:
Spectrophotometer
Illuminant C
Complementary colors
Dominant wavelength
Non-spectral colors
Perceptually uniform color space
A few definitions:
spectrophotometer
file:////Graphics/classes/6.837/F01/Lecture02/Slide30.html (1 of 2) [9/12/2001 12:04:37 PM]
Lecture 2 --- 6.837 Fall '01
A device to measure the spectral energy distribution. It can therefore also provide the CIE xyz tristimulus values.
illuminant C
A standard for white light that approximates sunlight. It is defined by a color temperature of 6774 K.
complementary colors
colors which can be mixed together to yield white light. For example, colors on segment CD are complementary to the colors on segment CB.
dominant wavelength
The spectral color which can be mixed with white light in order to reproduce the desired color. color B in the above figure is the dominant wavelength for color A.
non-spectral colors
colors not having a dominant wavelength. For example, color E in the above figure.
perceptually uniform color space
A color space in which the distance between two colors is always proportional to the perceived distance. The CIE XYZ color space and the CIE chromaticity diagram are
not perceptually uniform, as the following figure illustrates. The CIE LUV color space is designed with perceptual uniformity in mind.
file:////Graphics/classes/6.837/F01/Lecture02/Slide30.html (2 of 2) [9/12/2001 12:04:37 PM]

Lecture 2 --- 6.837 Fall '01
Color Gamuts
The chromaticity diagram can be used to compare the "gamuts" of various possible output devices
(i.e., monitors and printers). Note that a color printer cannot reproduce all the colors visible on a
color monitor.

Lecture 2 --- 6.837 Fall '01
The RGB Color Cube

The additive color model used for computer graphics is represented by the RGB color cube, where R,
G, and B represent the colors produced by red, green and blue phosphours, respectively.
The color cube sits within the CIE XYZ color space as follows.

Lecture 2 --- 6.837 Fall '01
Color Printing
Green paper is green because it reflects green and absorbs other wavelengths. The following table
summarizes the properties of the four primary types of printing ink.
dye color absorbs reflects
cyan red blue and green
magenta green blue and red
yellow blue red and green
black all none
To produce blue, one would mix cyan and magenta inks, as they both reflect blue while each
absorbing one of green and red. Unfortunately, inks also interact in non-linear ways. This makes the
process of converting a given monitor color to an equivalent printer color a challenging problem.
Black ink is used to ensure that a high quality black can always be printed, and is often referred to as
to K. Printers thus use a CMYK color model.

Lecture 2 --- 6.837 Fall '01
Color Conversion
To convert from one color gamut to another is a simple procedure. Each phosphour color can be
represented by a combination of the CIE XYZ primaries, yielding the following transformation from
RGB to CIE XYZ:
The transformation yields the color on monitor 2 which is equivalent to a given
color on monitor 1. Conversion to-and-from printer gamuts is difficult. A first approximation is as

follows:
C = 1 - R
M = 1 - G
Y = 1 - B
The fourth color, K, can be used to replace equal amounts of CMY:
K = min(C,M,Y) C' = C - K
M' = M - K
Y' = Y - K

Lecture 2 --- 6.837 Fall '01
Other Color Systems

Several other color models also exist. Models such as HSV (hue, saturation, value) and HLS (hue,
luminosity, saturation) are designed for intuitive understanding. Using these color models, the user of
a paint program would quickly be able to select a desired color.
Example: NTSC YIQ color space

Lecture 2 --- 6.837 Fall '01
Next Time
Flooding and Other Imaging Topics


Lecture 3 --- 6.837 Fall '01
6.837 LECTURE 3
1. Topics in Imaging 2. No Slide
3. No Slide 4. No Slide
5. Area Fill Algorithms? 6. Parity Fill
7. Winding Number 8. Boundary Fills
9. Let's Watch it in Action 10. Serial Recursion is Depth-First
11. At Full Speed 12. A Flood-Fill
13. Flood-Fill in Action 14. Self-Starting Fast Flood-Fill Algorithm
15. Fill East 16. Working Algorithm
17. 4-Way adn 8-Way Connectedness 18. Code for an 8-Way Connected Flood Fill
19. More 8-Way Connectedness 20. Flood-Fill Embellishments
21. Monochrome and Color Dithering 21a. Classical Halftoning
21b. Halftoning with Pixel Patterns 22. When do we need dithering?
23. Quantization and Thresholding 24. The Secret... Noise
25. Dither Noise Patterns 26. Ordered Dither
27. Error Diffusion 28. Lossy Image Compression
29. LZW Compression 29a. LZW Compression
30. Transform Coding 31. DCT example
31a DCT examples 31b. DCT examples
31c. DCT examples 31d. DCT examples
32. Next Time

Lecture 3 --- 6.837 Fall '01
Topics in Imaging
A wee bit of
recursion
Filling Algorithms
Dithering
DCTs

Lecture 3 --- 6.837 Fall '01
Area Fill Algorithms?
Used to fill regions after their boundary or contour has been

determined.
Handles Irregular boundaries
Supports freehand drawings
Deferred fills for speed (only fill visible parts)
Allows us to recolor primitives
Can be adapted for other uses (selecting regions)
Unaware of any other primitives
previously drawn.
Later we'll discuss filling areas
during rasterization

Lecture 3 --- 6.837 Fall '01
Parity Fill
Problem:
For each pixel determine if it is inside or outside of a given polygon.
Approach:
from the point being tested cast a ray in an arbitary direction
if the number of crossings is odd then the point is inside
if the number of crossings is even then the point is outside
Very fragile algorithm

What if ray crosses a vertex?
What if ray falls on an edge?
Commonly used in ECAD
Suitable for H/W

Lecture 3 --- 6.837 Fall '01
Winding Number
Imagine yourself watching a point traverse the boundary of the polygon in a
counter-clockwise direction and pivoting so that you are always facing at it.
Your winding number is the number of full revolutions that you complete.
If you winding number is 0 then you are outside of the polygon, otherwise you are inside.

Lecture 3 --- 6.837 Fall '01
Boundary Fills
Boundary fills start from a point known to be inside of a region
and fill the region until a boundry is found.
A simple recursive algorithm can be used:
public void boundaryFill(int x, int y, int fill, int

boundary) {
if ((x < 0) || (x >= width)) return;
if ((y < 0) || (y >= height)) return;
int current = raster.getPixel(x, y);
if ((current != boundary) && (current != fill)) {
raster.setPixel(fill, x, y);
boundaryFill(x+1, y, fill, boundary);
boundaryFill(x, y+1, fill, boundary);
boundaryFill(x-1, y, fill, boundary);
boundaryFill(x, y-1, fill, boundary);
}
}

Lecture 3 --- 6.837 Fall '01
Let's Watch it in Action
First, you should guess how you expect the algorithm to behave. Then
select a point on the figure's interior. Did the algorithm act as you
expected?

Lecture 3 --- 6.837 Fall '01
Serial Recursion is Depth-First

So the fill algorithm will continue
in one direction until a boundary is
reached.
It will then change directions
momentarily and attempt to
continue back in the original
direction.
Will parallel execution of the
algorithm behave the same way?

Lecture 3 --- 6.837 Fall '01
At Full Speed
To the right is the same algorithm operating at full speed.
Left-button click inside one of the regions to start the fill process. Click the right button to
reset the image to its original state

Lecture 3 --- 6.837 Fall '01
A Flood-Fill
Sometimes we'd like a area fill algorithm that replaces all connected pixels of a selected
color with a fill color. The flood-fill algorithm does exactly that.
public void floodFill(int x, int y, int fill, int

old) {
if ((x < 0) || (x >= width)) return;
if ((y < 0) || (y >= height)) return;
if (raster.getPixel(x, y) == old) {
floodFill(x+1, y, fill, old);
floodFill(x, y+1, fill, old);
floodFill(x-1, y, fill, old);
floodFill(x, y-1, fill, old);
}
}
Flood fill is a small variant on a boundary fill. It replaces old pixels with the fill color.

Lecture 3 --- 6.837 Fall '01
Flood-Fill in Action
It's a little awkward to kick off a flood fill algorithm, because it requires that the old color
must be read before it is invoked. It is usually, established by the initial pixel (x, y) where a
mouse is clicked.

Lecture 3 --- 6.837 Fall '01
Self-Starting Fast Flood-Fill Algorithm

The follow implementation self-starts, and is also somewhat faster.
public void fillFast(int x, int y, int

fill)
{
if ((x < 0) || (x >= raster.width))
return;
if ((y < 0) || (y >=
raster.height)) return;
int old = raster.getPixel(x, y);
if (old == fill) return;
fillEast(x+1, y, fill, old);
fillSouth(x, y+1, fill, old);
fillWest(x-1, y, fill, old);
fillNorth(x, y-1, fill, old);
}

Lecture 3 --- 6.837 Fall '01
Fill East
private void fillEast(int x, int y, int fill,
int old) {
if (x >= raster.width) return;
fillNorth(x, y-1, fill, old);
}
}
Note:
There is only one clipping test, and only three subsequent calls.
Why?
How much faster do you expect this algorithm to be?

Lecture 3 --- 6.837 Fall '01
Working Algorithm
private void fillSouth(int x, int y, int fill, int old) {
if (y >= raster.height) return;
fillWest(x-1, y, fill, old);
}
}
You can figure out the other routines yourself.

Lecture 3 --- 6.837 Fall '01
4-Way and 8-Way Connectedness
A final consideration when writing a area-fill algorithm is the size and connectivity of the
neighborhood, around a given pixel.
An eight-connected neighborhood is able to get into knooks and crannies that an algorithm
based on a four-connected neighborhood cannot.

Lecture 3 --- 6.837 Fall '01
Code for an 8-Way Connected Flood Fill

As you expected...
the code is a simple modification of the 4-way connected flood fill.
public void floodFill8(int x, int y, int fill, int old) {

if ((x < 0) || (x >= raster.width)) return;
if ((y < 0) || (y >= raster.height)) return;
floodFill8(x+1, y, fill, old);
floodFill8(x, y+1, fill, old);
floodFill8(x-1, y, fill, old);
floodFill8(x, y-1, fill, old);
floodFill8(x+1, y+1, fill, old);
floodFill8(x-1, y+1, fill, old);
floodFill8(x-1, y-1, fill, old);
floodFill8(x+1, y-1, fill, old);
}
}

Lecture 3 --- 6.837 Fall '01
More 8-Way Connectedness
Sometimes 8-way connectedness can be too much.

Lecture 3 --- 6.837 Fall '01
Flood-Fill Embellishments
The flood-fill and boundary-fill algorithms can easily be modified for a wide variety of new
uses:
1. Patterned fills
2. Approximate fills
3. Gradient fills
4. Region selects
5. Triangle Rendering!

Lecture 3 --- 6.837 Fall '01
Monochrome and Color Dithering

Dithering and halftoning techniques are used to
render images and graphics with more apparent
colors than are actually displayable.
When our visual systems are confronted with

large regions of high-frequency color changes
they tend to blend the individual colors into
uniform color field. Dithering and halftoning
attempt to use this property of perception to
represent colors that cannot be directly
represented.

Lecture 3 --- 6.837 Fall '01
Classical Halftoning
Use dots of various sizes to represent intensity, used in newspapers and magazines.
http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture03/Slide21a.html [9/13/2001 6:48:46 PM]

Lecture 3 --- 6.837 Fall '01
Halftoning with Pixel Patterns

Trading spatial resolution to improve intensity range.
http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture03/Slide21b.html [9/13/2001 6:48:47 PM]

Lecture 3 --- 6.837 Fall '01
When do we need dithering?
We can discern approximately 100 brightness levels

(depends on hue and ambient lighting)
True-color displays are usually adequate under normal indoor lighting
(when the nonlinearities of the display are properly compensated for).
High-color displays provide only 32 shades of each primary.
Without dithering you will see contours.
Made worse by Mach-banding
Worse on indexed displays
Largest use of dithering is in printed media (newsprint, laser printers)

Lecture 3 --- 6.837 Fall '01
When do we need dithering?

Under fixed lighting conditions the typical person can discern approximately 100 different brightness levels. This number varies slightly with hue (for instance we can see
more distinct shades of green than blue). Which particular set of 100 levels also changes as a function of the ambient lighting conditions.
The 256 colors available for each primary in a true color display are usually adequate for representing these 100 levels under normal indoor lighting (when the nonlinearities
of the display are properly compensated for). Thus, there is usually no need to dither a true color display.
A high-color display, however, only allows 32 shades of a given primary, and without dithering you will usually be able to detect visible contours between two colors that
vary by only one level. Our visual system happens to be particularly sensitive to this, and it even amplifies the variation so that it is more pronounced than the small intensity
difference would suggest. This apparent amplification of contours is called Mach-banding, and it is named for the psycho physical researcher who first described it.
On index displays dithering is frequently used to represent color images. Given a 256 entry color map you can only represent approximately 6 colors per red, green, and blue
primary (6x6x6=216). However, if just one or two hues are used it is possible to allocate enough color table entries (~50 per hue) so that dithering can be avoided.
By far the largest customer of dithering is in printed media. You probably seen dithering yourselves on newsprint or in the printing on continuous-tone images on a laser
printer. In most printing technologies there is very little control of the shade of ink that can be deposited at a particular point. Instead only the density of ink is controlled.

Lecture 3 --- 6.837 Fall '01
Quanitization and Thresholding

The process of representing a continuous function with discrete values is called quantization. It
can best be visualized with a drawing:
The input values that cause the quantization levels to change output values are called
thresholds. The example above has 4 quantization levels and 3 thresholds. When the spacing
between the thresholds and the quantization levels is constant the process is called uniform
quantization.

Lecture 3 --- 6.837 Fall '01
The Secret... Noise

Dithering requires the addition of spatial noise to the original signal (color intensity). This
noise can be regular (a repeated signal that is independent of either the input or output),
correlated (a signal that is related to the input), random, or some combination.
Dithering can be neatly summarized as a quantization process where noise has has been
introduced to the input. The character of the dither is determined entirely by the structure of the
noise. Note: Dithering decreases the SNR yet improves the percieved quality of the output.

Lecture 3 --- 6.837 Fall '01
Dither Noise Patterns

Let's consider some dither noise patterns.
One simple type of noise is called uniform or
white noise. White noise generates values within
an interval such that all outcomes are equally
likely. Here we add zero-mean white noise to our
image. The term zero-mean indicates that the
average value of the noise is zero. This will The result is not a good as expected. The
assure that our dithering does not change the noise pattern tends to clump in different
apparent brightness of our image. regions of the image. The unsettling
aspect of this clumping is that it is
The only thing left to specify is the range of noise unrelated to the image. Thus the dithering
values, this is called the noise's amplitude. The process adds apparent detail to the image
amplitude that makes the most sense is the that are not really in the image.
spacing between thresholds. This is not, however
a requirement. It is rare to specify a larger
amplitude (Why?), but frequently slightly smaller
amplitudes are used. Let's look back at our
example to see what random noise dithering
looks like.

Lecture 3 --- 6.837 Fall '01
Ordered Dither
The next noise function uses a regular spatial pattern. This
technique is called ordered dithering. Ordered dithering
adds a noise pattern with specific amplitudes.
Units are the fraction of the

difference between quantization
levels.
Ordered dither gives a very

regular screen-like pattern
remincent of newsprint.

Lecture 3 --- 6.837 Fall '01
Error Diffusion
Error diffusion is a correlated dithering technique, meaning
that the noise value added to a given pixel is a function of
the image.
Error diffusion attempts to transfer the residual error due to

quantization to a region of surrounding pixels. Most
common techniues are designed so that the pixels can be
processed in an ordered single pass. For example the Error diffusion is generally, the
following pattern assumes that each scanline is processed preferred method for the
from left to right as the image is scaned from top to bottom. display of images on a
computer screen. The most
common artifacts are vissible
worm-like patterns, and the
leakage of noise into uniform
regions.

Lecture 3 --- 6.837 Fall '01
Lossy Image Compression

GIF JPEG
Colors 224 256
Dictionary-based Transform
Compression
(LZW) Based
Processing Quantize, Transform,
Order Compress Quantize
Graphics, Line
Primary Use Photos
Art
Special Transparency,
Progressive
Features Interleaving
The topic of image compression is a very involved and decribes a wide range of methods. Our goal here is to provide a
sufficient background for understanding the most common compression techniques used. In particular those used on the
WWW.
There are generally two types of images that are widely used on the WWW, gifs and jpegs. As you are probably aware,
each method has its own strengths and weaknesses. Both methods also use some form of image compression.
Some of the highlights of these compression methods are summarized in the table shown on the right.

Lecture 3 --- 6.837 Fall '01
LZW Compression
LZW compression is an acronym for
Lemple-Ziv-Welch compression. This is a
classical, lossless dictionary-based
compression system.
Prior, to compression any GIF image must LZW Compression Algorithm:

be reduced to 256 colors. This can be done
using quantization followed by dithering as
discussed earlier. This is the where the loss w = NIL;
occurs in GIF compression. while ( read a character k )
After the image is quantized then LZW {
compression is applied to reduce the image if wk exists in the dictionary
size. LZW compression starts with a
dictionary that contains all possible symbols
w = wk;
(in our case numbers from 0 to 255). For the else
sake of illustration, I will use characters in add wk to the dictionary;
this explanation.
output the code for w;
Basically, build up a dictionary of longer w = k;
and longer strings based on the input stream. }
The encoder compares the incoming
characters for the longest possible match and
returns the index for that dictionary entry. It
then then adds a new dictionary entry with
the current character concatenated to the
longest match.

w
LZW Compression
w k Output Index Symbol
Input Sring = NIL *
* W * 256 *W
"*WED*WE*WEE*WEB*WET"
W E W 257 WE
E D E 258 ED
LZW Compression Algorithm: D * D 259 D*
* W
*W E 256 260 *WE
w = NIL; E * E 261 E*
while ( read a character k ) * W
{ *W E
if wk exists in the dictionary *WE E 260 262 *WEE
w = wk; E *
E* W 261 263 E*W
else
W E
add wk to the dictionary;
WE B 257 264 WEB
output the code for w; B * B 265 B*
w = k; * W
} *W E
*WE T 260 266 *WET
T EOF T

Lecture 3 --- 6.837 Fall '01
Transform Coding
Transform coding removes the redundancies (correlation) in an images by changing
coordinate systems.
We can think of a cluster of pixels, for instance those in an 8 by 8 block, as a vector in some
high-dimensional space (64 dimension in this case). If we transform this matrix
appropriately we can discover that a otherwise random collection of numbers is, in fact,
highly correlated.
One common transform basis function that you have seen if the Fourier Basis (FFT).
However the Fourier basis makes some assumptions that are not optimal for images.
First, it assumes that the image
tiles an infinite plane. This
leads to a transform that
contains both even (cosine-like)
and odd (sine-ike) components.
If we make copies of the

images with various flips we
can end up with a function that
has only even (cosine-like)
components.
The resulting FFT will only

have real parts. This transform
is called the Cosine Transform.

Lecture 3 --- 6.837 Fall '01
DCT example
Notice how the transformed image is a uniform
gray color. This is indicative of a correlated
image. In fact, most of the coefficients in a
By clicking on the image below you can transform it to
and from it's Discrete Cosine Representation. DCT transform are typically very close to zero
(shown as gray here because these coefficients
are signed values). Both JPEG and MPEG take
advantage of this property by applying a
The DCT like the FFT is a separable quantization to these coefficents, which causes
transfrom. This means that a 2-D transfrom most values to be zero.
can be realized by first transfroming in the
x direction, followed by a transforms in the If we ignore floating point trucation errors, then
y direction. the DCT transformation is an entirely lossless
transform. The loss incurred in JPEG and
The blocksize shown here is 8 by 8 pixels. MPEG types of compression is due to the
quantization that is applied to each of the
cofficients after the DCT transform.
See Description of MPEG including DCT tutorial

Lecture 3 --- 6.837 Fall '01
DCT examples
Input Image Input Data Input Graph DCT Coefficients
87 87 87 87 87 87 87 87 700 0 0 0 0 0 0 0
87 87 87 87 87 87 87 87 00000000
87 87 87 87 87 87 87 87 00000000
87 87 87 87 87 87 87 87 00000000
Constant Gray
87 87 87 87 87 87 87 87 00000000
87 87 87 87 87 87 87 87 00000000
87 87 87 87 87 87 87 87 00000000
87 87 87 87 87 87 87 87 00000000
105 102 97 91 84 78 73 70 700 100 0 0 0 0 0 0

105 102 97 91 84 78 73 70 0 0000000
105 102 97 91 84 78 73 70 0 0000000
105 102 97 91 84 78 73 70 0 0000000
105 102 97 91 84 78 73 70 0 0000000
105 102 97 91 84 78 73 70 0 0000000
105 102 97 91 84 78 73 70 0 0000000
105 102 97 91 84 78 73 70 0 0000000
6.837
Lecture 3 Slide 31a Fall
'01

Lecture 3 --- 6.837 Fall '01
DCT examples
104 94 81 71 71 81 94 104 700 0 100 0 0 0 0 0

104 94 81 71 71 81 94 104 00 000000
104 94 81 71 71 81 94 104 00 000000
104 94 81 71 71 81 94 104 00 000000
104 94 81 71 71 81 94 104 00 000000
104 94 81 71 71 81 94 104 00 000000
104 94 81 71 71 81 94 104 00 000000
104 94 81 71 71 81 94 104 00 000000
121 109 91 75 68 71 80 86 700 100 100 0 0 0 0 0

121 109 91 75 68 71 80 86 0 0 000000
121 109 91 75 68 71 80 86 0 0 000000
121 109 91 75 68 71 80 86 0 0 000000
121 109 91 75 68 71 80 86 0 0 000000
121 109 91 75 68 71 80 86 0 0 000000
121 109 91 75 68 71 80 86 0 0 000000
121 109 91 75 68 71 80 86 0 0 000000
6.837
Lecture 3 Slide 31b Fall
'01
http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture03/Slide31b.html [9/13/2001 6:51:52 PM]

Lecture 3 --- 6.837 Fall '01
DCT examples
156 144 125 109 102 106 114 121 700 100 100 0 0 0 0 0
151 138 120 104 97 100 109 116 200 0 0 0 0 0 0 0
141 129 110 94 87 91 99 106 0 0 000000
128 116 97 82 75 78 86 93 0 0 000000
114 102 84 68 61 64 73 80 0 0 000000
102 89 71 55 48 51 60 67 0 0 000000
92 80 61 45 38 42 50 57 0 0 000000
86 74 56 40 33 36 45 52 0 0 000000
120 108 90 75 69 73 82 89 700 90 100 0 0 0 0 0

127 115 97 81 75 79 88 95 90 0 0 0 0 0 0 0
134 122 105 89 83 87 96 103 -89 0 0 0 0 0 0 0
137 125 107 92 86 90 99 106 0 0 000000
131 119 101 86 80 83 93 100 0 0 000000
117 105 87 72 65 69 78 85 0 0 000000
100 88 70 55 49 53 62 69 0 0 000000
89 77 59 44 38 42 51 58 0 0 000000
6.837
Lecture 3 Slide 31c Fall
'01
http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture03/Slide31c.html [9/13/2001 6:51:55 PM]

Lecture 3 --- 6.837 Fall '01
DCT examples
124 105 139 95 143 98 132 114 950 0 0 0 0 0 0 0

105 157 61 187 51 176 80 132 0000000 0
139 61 205 17 221 32 176 98 0000000 0
95 187 17 239 0 221 51 143 0000000 0
143 51 221 0 239 17 187 95 0000000 0
98 176 32 221 17 205 61 139 0000000 0
132 80 176 51 187 61 157 105 0000000 0
114 132 98 143 95 139 105 124 0 0 0 0 0 0 0 500
6.837
Lecture 3 Slide 31d Fall
'01
http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture03/Slide31d.html [9/13/2001 6:52:00 PM]

Lecture 3 --- 6.837 Fall '01
Next Time

Lecture 4 --- 6.837 Fall '01
6.837 LECTURE 4
1. Line-Drawing Algorithms 2. Line-Drawing Algorithms
3. Quest for the Ideal Line 4. Simple Line
5. lineSimple( ) Demonstration 6. Let's Make it Work!
7. lineImproved( ) Demonstration 8. Optimize Inner Loops
9. Modified Algorithm 10. lineDDA( ) Demonstration
11. Was Our Objective Met? 12. Low-Level Optimizations
13. Applications of Low-level Optimizations 13a. Geometric Interpretation
14. More Low-level Optimizations 15. More Low-level Optimizations
16. The resulting method is known as Bresenham's line drawing algorithm 17. lineBresenham( ) Demonstration
18. Was it worth it? 19. Question Infrastructure
20. Faster Bresenham Algorithm 21. Was it worth it?
22. Beyond Bresenham 23. Was it worth it?
24. Epilogue 25. A Line in Sheep's Clothing
26. The Plot Thickens... 27. Generalized Pull Down
28. Next Time

Lecture 4 --- 6.837 Fall '01
Line-Drawing Algorithms
A Study in Optimization
Make it work
Make it right
Make it fast

Lecture 4 --- 6.837 Fall '01
Line-Drawing Algorithms
Our first adventure into scan conversion.
Scan-conversion or rasterization
Due to the scanning nature of raster displays
Algorithms are fundamental to both
2-D and 3-D computer graphics
Transforming the continuous into this discrete
(sampling)
Line drawing was easy for vector displays
Most incremental line-drawing algorithms
were first developed for pen-plotters
Most of the early scan-conversion algorithms developed

for plotters can be attributed to one man, Jack Bresenham.

Lecture 4 --- 6.837 Fall '01
Quest for the Ideal Line

The best we can do is a discrete approximation of an ideal line.
Important line qualities:

Continuous appearence
Uniform thickness and brightness
Accuracy (Turn on the pixels nearest the ideal line)
Speed (How fast is the line generated)

Lecture 4 --- 6.837 Fall '01
Simple Line
Based on the simple slope-intercept algorithm from algebra
y=mx+b
public void lineSimple(int x0, int y0, int x1, int y1, Color
color) {
int pix = color.getRGB();
int dx = x1 - x0;
int dy = y1 - y0;
raster.setPixel(pix, x0, y0);

if (dx != 0) {
float m = (float) dy / (float) dx;
float b = y0 - m*x0;
dx = (x1 > x0) ? 1 : -1;
while (x0 != x1) {
x0 += dx;
y0 = Math.round(m*x0 + b);
}
}
}

Lecture 4 --- 6.837 Fall '01
lineSimple( ) Demonstration
Draw a line by clicking and dragging on the pixel grid shown with the left
mouse button. An ideal line is displayed until the left button is released.
Upon release a discrete approximation of the line is drawn on the display The lineSimple() method:
grid using the lineSimple() method described in the previous slide. An
ideal line is then overlaid for comparison.
Does it work?
Try various slopes.

Lecture 4 --- 6.837 Fall '01
Let's Make it Work!

Problem: lineSimple( ) does not give satisfactory results for slopes > 1
Solution: symmetry
public void lineImproved(int x0, int y0, int x1, int y1, Color color) {
int dx = x1 - x0;
int dy = y1 - y0;

if (Math.abs(dx) > Math.abs(dy)) { // slope < 1
float m = (float) dy / (float) dx; // compute slope
float b = y0 - m*x0;
dx = (dx < 0) ? -1 : 1;
while (x0 != x1) {
x0 += dx;
raster.setPixel(pix, x0, Math.round(m*x0 + b));
}
} else
if (dy != 0) { // slope >= 1
float m = (float) dx / (float) dy; // compute slope
float b = x0 - m*y0;
dy = (dy < 0) ? -1 : 1;
while (y0 != y1) {
y0 += dy;
raster.setPixel(pix, Math.round(m*y0 + b), y0);
}
}
}

Lecture 4 --- 6.837 Fall '01
lineImproved( ) Demonstration
Upon release a discrete approximation of the line is drawn on the display The lineImproved() method:
grid using the lineImproved() method described in the previous slide. An
Notice that the slope-intercept equation of the line is executed at each step of the inner loop.

Lecture 4 --- 6.837 Fall '01
Optimize Inner Loops

Optimize those code fragments where the algorithm spends most of its time.
remove unnecessary method invocations
Often these fragments replace Math.round(m*x0 + b)

with (int)(m*x0 + b + 0.5)
are inside loops. Does this always work?
use incremental calculations

Overall code organization:
Consider the expression
lineMethod( ) y = (int)(m*x + b + 0.5)
{
// 1. general set up
// 2. special case set up The value of y is known at x0 (i.e. it is y0 + 0.5)
while (notdone) { Future values of y can be expressed in terms of previous values
// 3. inner loop with a difference equation:
}
} yi+1 = yi + m;
or
yi+1 = yi - m;

Lecture 4 --- 6.837 Fall '01
Modified Algorithm
This line drawing method is called a Digital Differential Analyzer or DDA for short.
public void lineDDA(int x0, int y0, int x1, int y1, Color color) {
int dy = y1 - y0;
int dx = x1 - x0;
float t = (float) 0.5; // offset for rounding
if (Math.abs(dx) > Math.abs(dy)) { // slope < 1
float m = (float) dy / (float) dx; // compute slope
t += y0;
dx = (dx < 0) ? -1 : 1;
m *= dx;
while (x0 != x1) {
x0 += dx; // step to next x value
t += m; // add slope to y value
raster.setPixel(pix, x0, (int) t);
}
} else { // slope >= 1
float m = (float) dx / (float) dy; // compute slope
t += x0;
dy = (dy < 0) ? -1 : 1;
m *= dy;
while (y0 != y1) {
y0 += dy; // step to next y value
t += m; // add slope to x value
raster.setPixel(pix, (int) t, y0);
}
}
}
Lecture 4 --- 6.837 Fall '01
lineDDA( ) Demonstration
Upon release a discrete approximation of the line is drawn on the display The lineDDA() method:
grid using the lineDDA() method described in the previous slide. An ideal
line is then overlaid for comparison.
You should not see any difference in
the lines generated by this method and the lineImproved( ) method
mentioned previously.

Lecture 4 --- 6.837 Fall '01
Was Our Objective Met?

This applet above allows you to select from the various line drawing
algorithms discussed. You can draw lines using the selected algorithm by
clicking and dragging with the first mouse button. You can also time the To the left is a benchmarking applet
algorithms by clicking on Benchmark. In order to get more accurate
timings the pattern is drawn five times (without clearing), and the final
result is displayed.
Modern compilers will often find these sorts of optimizations
Dilemma:
Is it better to retain readable code, and depend a compiler to do the optimization implicitly,
or code the optimization explicitly with some loss in readability?

Lecture 4 --- 6.837 Fall '01
Low-Level Optimizations
Low-level optimizations are dubious, because
they often depend on specific machine details.
However, a set of general rules that are more-or-less consistent across machines include:
Addition and Subtraction are generally faster than Multiplication.
Multiplication is generally faster than Division.
Using tables to evaluate discrete functions is faster than computing them
Integer caluculations are faster than floating-point calculations.
Avoid unnecessary computation by testing for various special cases.
The intrinsic tests available to most machines are greater than,
less than, greater than or equal, and less than or equal to zero (not an arbitrary value).

Lecture 4 --- 6.837 Fall '01
Applications of Low-level Optimizations

Notice that the slope is always rational (a ratio of two integers).
m = (y1 - y0) / (x1 - x0)

Note that the incremental part of the algorthim never generates a new y that is more than one unit away from the old one
(because the slope is always less than one)
yi+1 = yi + m
Thus, if we maintained the only the only fractional part of y we could still draw a line by noting when this fraction
exceeded one. If we initialize fraction with 0.5, then we will also handle the rounding correctly as in our DDA routine.
fraction += m;
if (fraction >= 1) { y = y + 1; fraction -= 1; }
For our line drawing algorithm we'll investigate applying several of these optimizations. The incremental calculation effectively removed multiplications in favor of
Lecture 4 --- 6.837 Fall '01
additions. Our next optimization will use three of the mentioned methods. It will remove floating-point calculations in favor of integer operations, and it will remove the
single divide operation (it makes a difference on short lines), and it will normalize the tests to tests for zero.

Lecture 4 --- 6.837 Fall '01
Geometric Interpretation
fraction = 0.5; // Initial
fraction += m; // Increment
if 0.5 <= m <= 1 then fraction >= 1

Plot(1,1)
if 0 < m < 0.5 then fraction < 1

Plot(1,0)
fraction += m;
if (fraction >= 1) {
y = y + 1;
fraction -= 1;
}

Lecture 4 --- 6.837 Fall '01
More Low-level Optimizations

Note that y is now an integer.
Can we represent the fraction as an integer?
After we draw the first pixel (which happens outside our main loop) the correct fraction is:
fraction = 1/2 + dy/dx

If we scale the fraction by 2*dx the following expression results:
scaledFraction = dx + 2*dy
and the incremental update becomes:
scaledFraction += 2*dy //
2*dx*(dy/dx)
and our test must be modified to reflect the new scaling
if (scaledFraction >= 2*dx) { ... }

Lecture 4 --- 6.837 Fall '01
More Low-level Optimizations

This test can be made against a value of zero if the inital value of scaledFraction has 2*dx
subtracted from it. Giving, outside the loop:
OffsetScaledFraction = dx + 2*dy - 2*dx =

2*dy - dx
and the inner loop becomes
OffsetScaledFraction += 2*dy
if (OffsetScaledFraction >= 0) {
y = y + 1;
fraction -= 2*dx;
}
We might as well double the values of dy and dx (this can be accomplished with either an
add or a shift outside the loop).

Lecture 4 --- 6.837 Fall '01
The resulting method is known as Bresenham's line drawing algorithm

public void lineBresenham(int x0, int y0, int x1, int y1, Color color) {
int dy = y1 - y0;
int dx = x1 - x0;
int stepx, stepy;
if (dy < 0) { dy = -dy; stepy = -1; } else { stepy = 1; }
if (dx < 0) { dx = -dx; stepx = -1; } else { stepx = 1; }
dy <<= 1; // dy is now 2*dy
dx <<= 1; // dx is now 2*dx
if (dx > dy) {
int fraction = dy - (dx >> 1); // same as 2*dy - dx
while (x0 != x1) {
y0 += stepy;
fraction -= dx; // same as fraction -= 2*dx
}
x0 += stepx;
fraction += dy; // same as fraction -= 2*dy
}
} else {
int fraction = dx - (dy >> 1);
while (y0 != y1) {
x0 += stepx;
fraction -= dy;
}
y0 += stepy;
fraction += dx;
}
}
}

Lecture 4 --- 6.837 Fall '01
lineBresenham( ) Demonstration
Upon release a discrete approximation of the line is drawn on the display The lineBresenham() method:
grid using the lineBresenham() method described in the previous slide. An
Does it work?

Lecture 4 --- 6.837 Fall '01
Was it worth it?

clicking and dragging with the first mouse button. You can also time the To the left is a benchmarking applet

Lecture 4 --- 6.837 Fall '01
Question Infrastructure
There is still a hidden multiply inside of our inner loop
/**
* Sets a pixel to a given value
*/
public final boolean setPixel(int pix, int x, int y)
{
pixel[y*width+x] = pix;
return true;
}
Our next optimization of Bresenham's algorithm

eliminates even this multiply.

Lecture 4 --- 6.837 Fall '01
Faster Bresenham Algorithm

public void lineFast(int x0, int y0, int x1, int y1, Color color) {
int dy = y1 - y0;
int dx = x1 - x0;
int stepx, stepy;
int width = raster.getWidth():
int pixel = raster.getPixelBuffer();
if (dy < 0) { dy = -dy; stepy = -width; } else { stepy = -width; }
dy <<= 1;
dx <<= 1;
y0 *= width;
y1 *= width;
pixel[x0+y0] = pix;
if (dx > dy) {
int fraction = dy - (dx >> 1);
while (x0 != x1) {
y0 += stepy;
fraction -= dx;
}
x0 += stepx;
fraction += dy;
pixel[x0+y0] = pix;
}
} else {
int fraction = dx - (dy >> 1);
while (y0 != y1) {
x0 += stepx;
fraction -= dy;
}
y0 += stepy;
fraction += dx;
pixel[x0+y0] = pix;
}
}
}

Lecture 4 --- 6.837 Fall '01
Was it worth it?
To the left is a benchmarking applet
clicking and dragging with the first mouse button. You can also time the
Can we go even faster?

Lecture 4 --- 6.837 Fall '01
Beyond Bresenham
Most books would have you believe that the development
of line drawing algorithms ended with Bresenham's
famous algorithm. But there has been some signifcant
work since then. The following 2-step algorithm,
developed by Xiaolin Wu, is a good example. The
interesting story of this algorithm's development is
discussed in an article that appears in Graphics Gems I by
Brian Wyvill.
The two-step algorithm takes the interesting approach of

treating line drawing as a automaton, or finite state
machine. If one looks at the possible configurations that
the next two pixels of a line, it is easy to see that only a
finite set of possiblities exist.
The two-step algorithm also exploits the symmetry of

line-drawing by simultaneously drawn from both ends
towards the midpoint.
The code, which is here, is a bit long to show an a slide.

Lecture 4 --- 6.837 Fall '01
Was it worth it?

Note: Compare the speed of lineBresenham( ) to
lineTwoStep( ). This comparision is most fair since
I did not remove the calls to raster.setPixel() in the
two-step algorithm.
Hardly!

Lecture 4 --- 6.837 Fall '01
Epilogue
There are still many important issues associated with line drawing
Examples:
Non-integer endpoints
(occurs frequently when rendering 3D lines)
Can we make lines appear less "jaggy"?
What if a line endpoint lies outside the viewing area?
How do you handle thick lines?
Optimizations for connected line segments
Lines show up in the strangest places

Lecture 4 --- 6.837 Fall '01
A Line in Sheep's Clothing
Movies developed for theaters are usually shot at 24 frames per second, while video on
television is displayed at 30 frames per second. Thus, when motion pictures are transferred
to video formats they must undergo a process called "3-2 pull-down", where every fourth
frame is repeated thus matching the frame rates of the two media, as depicted below.

Lecture 4 --- 6.837 Fall '01
The Plot Thickens...

Once upon a time, there was a company with a similar, yet more complicated problem.
They had developed a multimedia movie-player technology that they wished to display
on a workstation's CRT screen. They also made screens with various update rates
including 60, 66, 72, and 75 frames-per-second. Their movie player had to support a
wide range of source materials including, but not limited to:
Source Frame Rate

Motion Pictures 24 fps
NTSC Video (frames) 30 fps
NTSC Video (fields) 60 fps
PAL Video (frames) 25 fps
PAL Video (fields) 50 fps
Common Multimedia 10 fps
These source materials were to be displayed as close as possible to the correct frame rate.
We were not expected to support frame rates higher than the CRT's update rate. Upon
having the problem explained, someone commented, "It's just a line-drawing algorithm!"

Lecture 4 --- 6.837 Fall '01
Generalized Pull Down

The generalized pull-down problem is nothing more that drawing the best discrete
approximation of the ideal line from (1, 1) to (desired frame rate, source frame rate), as
shown in the following diagram for the (30 fps, 24 fps).
Moreover, it is a very special case of a line. Can you think of addition optimizations to our
Bresenham line drawing code that could be applyed for the special case of pull-down?

Lecture 4 --- 6.837 Fall '01
Next Time

Lecture 5 --- 6.837 Fall '01
6.837 LECTURE 5
1. Antialiasing and Resampling 2. What is a Pixel?
3. More on Samples 4. Picturing an Image as a 2D Function
5. Sampling Grid 6. Sampling an Image
7. The Big Question 8. Convolution
9. Sampling in the Frequency Domain 10. Reconstruction
11. Aliasing 11a. Sampling Frequency
12. Sampling Theorem 12a. Sampling Example
12b. Aliasing Effects 12c. Aliasing Effects
12d. Aliasing Effects 12e. Pre-Filtering
12f. Anti-Aliased Lines 12g. Anti-Aliased Lines
12h. Anti-Aliased Line Algorithm (uses floating point) 12i. AntiAliased Line Demonstration
12j. Post-Filtering 13. Reconstruction Revisited
14. Gaussian Reconstruction 15. Gaussian Verdict
16. Nearest-Neighbor Reconstruction 17. Nearest-Neighbor Example
18. Problems with Reconstruction Filters 19. Is there an Ideal Reconstruction Filter?
20. Problems with a Sinc Reconstruction Filter 21. Lessons from the Sinc Function
22. Approximations with Finite Extent 23. Bilinear Example
24. Larger Extents 25. Spline Constraints
26. Bicubic Derivation 27. Bicubic Example
28. Next Time
http://graphics/classes/6.837/F01/Lecture05/index.html [9/25/2001 11:58:53 AM]

Lecture 5 --- 6.837 Fall '01
Antialiasing and Resampling
What is a pixel?
Signal Processing
Image Resampling
http://graphics/classes/6.837/F01/Lecture05/Slide01.html [9/25/2001 11:38:58 AM]

Lecture 5 --- 6.837 Fall '01
What is a Pixel?
A pixel is not...
a box
a disk
a teeny tiny little light
A pixel is a point...
it has no dimension
it occupies no area
it cannot be seen
it can have a coordinate
A pixel is more than just a point, it is a sample

Lecture 5 --- 6.837 Fall '01
More on Samples
We think of most things in the real world as continuous,
yet, everything in a computer is discrete
The process of mapping a continuous function to a discrete one is called sampling
The process of mapping a continuous variable to a discrete one is called quantization
When we represent or render an image using a computer we must both sample and quantize

Lecture 5 --- 6.837 Fall '01
Picturing an Image as a 2D Function

An ideal image can be viewed as a function, I(x, y), that gives an intensity for any given
coordinate (x, y). We could plot this function as a height field. This plot would lowest at
dark points in the image and highest at bright points.
Most of the functions that we

encounter are analytic and,
therefore, can be expressed as
simple algebraic relations. An
image, in general, cannot be
represented with such a simple
form. Instead, we represent images
as tabulated functions.
So how do we fill this table?

Lecture 5 --- 6.837 Fall '01
Sampling Grid
The most common (but not the only) way to generate the table values necessary to represent
our function is to multiply the function by a sampling grid. A sampling grid is composed of
periodically spaced Kronecker delta functions.
The definiton of the 2-D Kronecker

delta is:
And a 2-D sampling grid:

Lecture 5 --- 6.837 Fall '01
Sampling an Image
When a continuous image is multiplied by a sampling grid a discrete set of points are
generated. These points are called samples. These samples are pixels. We store them in
memory as arrays of numbers representing the intensity of the underlying function.
The same analysis can be applied

to geometric objects:

Lecture 5 --- 6.837 Fall '01
The Big Question

How densely must we sample an image in order to capture its essence?
Since our sampling grid is periodic we can appeal to Fourier analysis for an answer. Fourier
analysis states that all periodic signals can be represented as a summation of sinusiodal
waves. Thus every image function that we understand as a height field in the spatial domain,
has a dual representaion in the frequency domain.
We can transform signals from one domain to the other using the Fourier transform.

Lecture 5 --- 6.837 Fall '01
Convolution
In order to simplify our analysis we will consider 1-D signals for the moment. It will be
straightforward to extend the result to 2-D.
Some operations that are diffcult to compute in the spatial domain are simplified when the
function is tranformed to its dual representation in the frequency domain. One such function
is convolution.
Convolution describes how a system with impulse response, h(x), reacts to a signal, f(x).
This integral evaluation is equivalent to multiplication in the frequency domain
The converse is also true

Lecture 5 --- 6.837 Fall '01
Sampling in the Frequency Domain

Image sampling was defined as multiplying a periodic series of delta functions by the
continuous image. This is the same as convolution in the frequency domain.
Consider the sampling grid:
And the function being sampled

Lecture 5 --- 6.837 Fall '01
Reconstruction
This amounts to accumulating copies of the function's spectrum centered at the delta
functions of the sampling grid.
Remember the goal of a sampled represention is to faithfully represent the underlying

function. Ideally we would apply a low-pass filter to our sampled representation to
reconstruct our original function. We will call this processing a reconstruction filter.
In this example we mixed together copies of our function (as seen in the darker overlap
regions). In this case subsequent processing does not allow us to separate out a
representative copy of our function.

Lecture 5 --- 6.837 Fall '01
Aliasing
This mixing of spectrums is called aliasing. It has the effect of introducing high-frequencies
into our original function. There are two ways of dealing with aliasing.
The first is to low pass filter our signal before we sample it.
The second is to increase the sampling frequency

Lecture 5 --- 6.837 Fall '01
Sampling Frequency
From Robert L. Cook, "Stochastic Sampling and Distributed Ray Tracing", An Introduction to Ray Tracing, Andrew Glassner, ed., Academic Press Limited,
1989
http://graphics/classes/6.837/F01/Lecture05/Slide11a.html [9/25/2001 11:39:20 AM]

Lecture 5 --- 6.837 Fall '01
Sampling Theorem
In order to have any hope of accurately reconstructing a function from a periodically
sampled version of it, two conditions must be satisfied:
1. The function must be bandlimited.
2. The sampling frequency, fs, must be at least twice the maximum
frequency, fmax, of the function.
Satisfying these conditions will eliminate aliasing.

In practice:
"Jaggies" are aliasing
Both of the techniques discussed are used
1. Super-sampling (more samples than pixels)
2. Low-pass prefiltering (averaging of super-samples)

Lecture 5 --- 6.837 Fall '01
Sampling Example
Original Image Samples Reconstruction

Source of images
http://graphics/classes/6.837/F01/Lecture05/Slide12a.html [9/25/2001 11:39:24 AM]

Lecture 5 --- 6.837 Fall '01
Aliasing Effects
Jagged boundaries
Source of images
http://graphics/classes/6.837/F01/Lecture05/Slide12b.html [9/25/2001 11:39:25 AM]

Lecture 5 --- 6.837 Fall '01
Aliasing Effects
Improperly rendered detail
Source of images
Lecture 5 Slide 12c 6.837 Fall '01
http://graphics/classes/6.837/F01/Lecture05/Slide12c.html [9/25/2001 11:39:27 AM]

Lecture 5 --- 6.837 Fall '01
Aliasing Effects
Texture errors
Source of images
Lecture 5 Slide 12d 6.837 Fall '01
http://graphics/classes/6.837/F01/Lecture05/Slide12d.html [9/25/2001 11:39:28 AM]

Lecture 5 --- 6.837 Fall '01
Pre-Filtering
Prefiltering methods treat a pixel as an area, and compute pixel color based on the amount of
overlap of the scene's objects with a pixel's area.
Source: Foley, VanDam, Feiner, Hughes - Computer Graphics, Second Edition, Addison Wesley
Lecture 5 Slide 12e 6.837 Fall '01
http://graphics/classes/6.837/F01/Lecture05/Slide12e.html [9/25/2001 11:39:30 AM]

Lecture 5 --- 6.837 Fall '01
Anti-Aliased Lines
Multiple pixels with varying intensity are used to represent the line. Each pixel intensity set
as a function of the distance of the pixel to the line.
Lecture 5 Slide 12f 6.837 Fall '01
http://graphics/classes/6.837/F01/Lecture05/Slide12f.html [9/25/2001 11:39:31 AM]

Lecture 5 --- 6.837 Fall '01
Anti-Aliased Lines
Compute area of overlap incrementally as a function of Bressenham algorithm "error"
(fraction).
Lecture 5 Slide 12g 6.837 Fall '01
http://graphics/classes/6.837/F01/Lecture05/Slide12g.html [9/25/2001 11:39:33 AM]

Lecture 5 --- 6.837 Fall '01
AntiAliased line algorithm (uses floating point)

public void lineAA(int x0, int y0, int x1, int y1) {
int dy = y1 - y0;
int dx = x1 - x0;
int stepx, stepy;
double invD = ((dx==0)&&(dy==0)) ? 0.0 : 1.0/(2.0*Math.sqrt(dx*dx+dy*dy));
if (dy < 0) { dy = -dy; stepy = -1; } else { stepy = 1; }
dy <<= 1; // dy is now 2*dy
dx <<= 1; // dx is now 2*dx
if (dx > dy) {
int fraction = dy - (dx >> 1);
int v2dx = 0;
double dd, invD2dx = dx * invD;
setPixelAA(x0, y0, 0);
setPixelAA(x0, y0 + stepy, invD2dx);
setPixelAA(x0, y0 - stepy, invD2dx);
while (x0 != x1) {
v2dx = fraction;
y0 += stepy;
v2dx -= dx;
fraction -= dx;
}
x0 += stepx;
v2dx += (dx >> 1);
fraction += dy;
dd = v2dx * invD;
setPixelAA(x0, y0, dd);
setPixelAA(x0, y0 + stepy, invD2dx - dd);
setPixelAA(x0, y0 - stepy, invD2dx + dd);
}
else {
...}
}
Lecture 5 Slide 12h 6.837 Fall '01
http://graphics/classes/6.837/F01/Lecture05/Slide12h.html [9/25/2001 11:42:19 AM]

Lecture 5 --- 6.837 Fall '01
AntiAliased Line Demonstration

Select a line type, then draw a line by clicking and dragging with the left
mouse button. A gray line trace will follow the mouse. A final line will be
Upon release a discrete approximation of the line is drawn on the display
drawn upon release. Compare anti-aliased lines with, for example,
grid using an anti-aliased line algorithm. An ideal line is then overlaid for
Bressenham lines.
comparison. A right click clears the screen.
Lecture 5 Slide 12i 6.837 Fall '01
http://graphics/classes/6.837/F01/Lecture05/Slide12i.html [9/25/2001 11:42:23 AM]

Lecture 5 --- 6.837 Fall '01
Post-Filtering
The more popular approach to antialiasing. For each pixel displayed, a set of samples at
"super-resolution" are combined.
Source of images
Lecture 5 Slide 12j 6.837 Fall '01
http://graphics/classes/6.837/F01/Lecture05/Slide12j.html [9/25/2001 11:42:26 AM]

Lecture 5 --- 6.837 Fall '01
Reconstruction Revisited
Once we've satified the sampling theorem we can theoretically reconstruct the function. This
requires low-pass filtering the samples that are used to represent the image.
Remember the samples that we store in memory are points; they have no area only positions.
It is this reconstruction filter that gives a pixel area.
Question: If what I say is true how can we just stick pixel values in our frame buffer and see
a picture? If they were just points (like I claim) we would see anything.
The fact is that a CRT has a built in reconstruction filter. Most real world devices do because
they do not have an infinite frequency response.
Each pixel illuminates a spot on the screen whose intensity fall off is well approximated by a
gaussian.

Lecture 5 --- 6.837 Fall '01
Gaussian Reconstruction
So how does a Gaussian do as a reconstruction filter? In the spatial domain:
In the frequency domain:

Lecture 5 --- 6.837 Fall '01
Gaussian Verdict
Wider in spatial domain corresponds to narrower in the frequency domain
We are forced to live with either low-frequency attenuation or high-frequency leakage

Live with blur
Infinite extent
CRT resolution
Only reconstruction kernel that is both linearly separable and radially symmetric
For a CRT images we basically have to live with the reconstruction filters that we are given.
However, when we write an magnification program we are in control of the magnification.

Lecture 5 --- 6.837 Fall '01
Nearest-Neighbor Reconstruction
One possible reconstruction filter has the shape of a simple box in the spatial domain.
Note: This is not the shape of the pixel but rather the shape of the reconstruction filter!
In the spatial domain:
In the frequency domain:

Lecture 5 --- 6.837 Fall '01
Nearest-Neighbor Example
Blockiness is due to high-frequency leakage in the reconstruction filter
Even properly sampled images are rendered as blocky
"Post-sampling aliasing"
This is a rather poor reconstruction

Lecture 5 --- 6.837 Fall '01
Problems with Reconstruction Filters

Many of the "blocky" artifacts visible in resampled images are not due to classical aliasing,
but instead caused by poor reconstruction filters.
Excessive pass-band attenuation results in images that are noticeably blurry.
Excessive high-frequency leakage can lead to ringing or it can accentuate the sampling grid
which is sometimes called anisotropy.

Lecture 5 --- 6.837 Fall '01
Is there an Ideal Reconstruction Filter?

Theoretically yes, practically no
We can work backwards from our desired frequency domain response:
To compute the ideal reconstruction filter in the spatial domain:

Lecture 5 --- 6.837 Fall '01
Problems with a Sinc Reconstruction Filter

It has infinite spatial extent.
Every pixel contributes to every point that we interpolate.
Hard to compute in the spatial domain.
Assumes the samples of the source image tile an infinite plane
Every interpolated point requires an infinite summation

Truncating this summation leads to Gibb's phenomenon

Lecture 5 --- 6.837 Fall '01
Lessons from the Sinc Function

Notice the values of the sinc function at the sample points (integer values).
It has a value of one at the point being reconstructed and a zero everywhere else.
This means that a sinc will exactly reconstruct the sample values at the sample points.
Also, notice that it has even symmetry (like a cosine function) and a slope of 0 at the sample
point.

Lecture 5 --- 6.837 Fall '01
Approximations with Finite Extent

What sort of reconstruction we can do if we limit ourselves to considering only the pixels immediately surrounding a given
point? One possibility is bilinear reconstruction:
Which has the frequency response:

Lecture 5 --- 6.837 Fall '01
Bilinear Example
Sometimes called a
tent filter
High-frequencies are significantly attenuated
Easy to implement
(just linearly interpolate between samples)
Still can produce artifacts

Lecture 5 --- 6.837 Fall '01
Larger Extents
We can use our knowledge about splines to design filters with arbitrary extents. Here we will consider a 4 by 4
neighborhood surrouding the desired pixel.
We can constrain our design usin the knowledge that we have gleaned from the ideal sinc reconstruction filter.
First, we divide our spline into four piecewise sections sections.

Lecture 5 --- 6.837 Fall '01
Spline Constraints
The piecewise cubic spline should satisfy the following:
1. The function must be symmetric:
k(x) = k(-x)
We can reformulate our general cubic such that it is symmetric as follows:
This also allows us to consider only 2 segments instead of 4.

2. C0 and C1 continuity between spline segments
k1(1) = k2(1), k2(2) = 0
k'1(0) = 0, k'1(1) = k'2(1), k'2(2) = 0
3. In order to assure that a uniform array of samples is reconstructed as a uniform continuous function it should satisfy
the following convex relationship:

Lecture 5 --- 6.837 Fall '01
Bicubic Derivation
Starting with the equations of our two spline segments and their derivitives we can construct
the two desired spline segments.
The resulting family of reconstruction filters is:
These bicubic reconstruction splines are commonly called
Mitchell's 2-parameter spline family
Notes:
k(0)=(3 - B)/3, k(1)=B/6
thus, if B = 0 then k(0) = 1, k(1) = 0 like sinc(x)

Lecture 5 --- 6.837 Fall '01
Bicubic Example
Mitchell's 2-parameter spline family
Very low leakage
Includes:
Cardinal splines
(B=0, C=-a)
Catmull-Rom Spline
(B=0, C=0.5)
Cubic B-spline
(B=1, C=0)

Lecture 5 --- 6.837 Fall '01
Next Time

Lecture 6 --- 6.837 Fall '01
6.837 LECTURE 6
1. Scan Converting Triangles 2. Triangles are Minimal:
3. Triangles are Always Convex Polygons 4. Triangles Can Approximate Arbitrary Shapes
5. Any Polygon can be Decomposed into Triangles 6. Rasterizing Triangles
7. Edge-Walking Triangle Rasterizer 8. Fractional Offsets
9. Rasterizing Triangles using Edge Equations 10. Notes on using Edge Equations
11. Example Implementation 12. Edge Equation Coefficients
13. Numerical Precision of the C Coefficient 13a. Loss of Precision
14. EdgeEquation Object 15. Triangle Object
16. The Draw Method 17. Explain Two Speed Hacks
18. Triangle SetUp Method 19. Tricks Explained
20. Why Positive Area Implies a Positive Interior 21. Exercise #2
22. Triangle Rasterizer Demonstration 23. Interpolating Parameters Within a Triangle
24. This equation should appear familiar. 25. Smooth Triangle Object
26. Computing Plane Equations 27. Modified Draw( ) Method
28. More SmoothTri.Draw( ) 29. Even More SmoothTri.Draw( )
30. Smooth Triangle Results 31. A Post-Triangle World
32. Point-Cloud Rendering 33. Next Time
http://graphics/classes/6.837/F01/Lecture06/index.html [9/27/2001 5:09:01 PM]

Lecture 6 --- 6.837 Fall '01
Scan Converting Triangles
Why triangles?
Rasterizing triangles
Interpolating parameters
Post-triangle rendering
http://graphics/classes/6.837/F01/Lecture06/Slide01.html [9/27/2001 5:09:16 PM]

Lecture 6 --- 6.837 Fall '01
Triangles are Minimal:
Triangles are determined by 3 points or 3 edges
We can define a triangle in terms of three points, for example:
(x1, y1), (x2, y2), (x3, y3)
Or we can define a triangle interm of its three edges, for example:
A1 x + B1 y + C1 = 0, A2 x + B2 y + C2 = 0, A3 x + B3 y + C3 = 0
Why does it seem to take more parameters to represent the edges than the points?
(Hint: Edge equations are Homogeneous)
As a result, triangles are mathematically very simple. The math involved in scan converting
triangles involves only simple linear equations.
Lecture 6 --- 6.837 Fall '01
Triangles are Always Convex Polygons

What does it mean to be a convex?
An object is convex if and only if any line segment connecting two points
on its boundary is contained entirely within the object or one of its boundries.
Why is being convex important?

Because no matter how a triangle is oriented on the screen a given scan line will contain
only a single segment or span of that triangle.

Lecture 6 --- 6.837 Fall '01
Triangles Can Approximate Arbitrary Shapes

Any 2-dimensional shape (or 3D surface) can be approximated by a
polygon using a locally linear (planar) approximation. To improve
the quality of fit we need only increase the number edges.

Lecture 6 --- 6.837 Fall '01
Any Polygon can be Decomposed into Triangles
A convex n-sided polygon, with ordered vertices {v0, v1, ... vn} along the perimeter, can be
trivially decomposed into triangles {(v0,v1,v2), {v0,v2,v3), (v0,vi,vi+1), ... (v0,vn-1,vn)}.
You can usually decompose a non-convex polygon into triangles, but it is non-trivial, and in
some overlapping cases you have to introduce a new vertex.

Lecture 6 --- 6.837 Fall '01
Rasterizing Triangles
The two most common strategies for scan-converting a triangle are
edge walking and edge equations
There are, however, other techniques including:

Recursive subdivision of primitive (micropolygons)
Recursive subdivision of screen (Warnock's algorithm)

Lecture 6 --- 6.837 Fall '01
Edge-Walking Triangle Rasterizer

Notes on edge walking:
Sort the vertices in both x and y
Determine if the middle vertex, or breakpoint lies on the left or
right side of the polygon. If the triangle has an edge parallel to
the scanline direction then there is no breakpoint.
Determines the left and right extents for each scanline
(called spans).
Walk down the left and right edges filling the pixels in-between
until either a breakpoint or the bottom vertex is reached.
Advantages and Disadvantages:
Generally very fast
Loaded with special cases (left and right breakpoints, no breakpoints)
Difficult to get right
Requires computing fractional offsets when interpolating parameters across the triangle
The algorithm described in the book is an edge-walking algorithm.

Lecture 6 --- 6.837 Fall '01
Fractional Offsets
We can use ceiling to find the leftmost pixel in span and floor to find the rightmost pixel.
The trick comes when interpolating color values. It is straightforward to interpolate along
the edges, but you must be careful when offsetting from the edge to the pixel's center.

Lecture 6 --- 6.837 Fall '01
Rasterizing Triangles using Edge Equations

An edge equation is simply a discriminating function like those we used in our curve and
line-drawing algorithms.
An edge equation segments a planar region

into three parts, a boundary, and two
half-spaces. The boundary is identified by
points where the edge equation is equal to
zero. The half-spaces are distiguished by
differences in the edge equation's sign. We
can choose which half-space gives a positive
sign by multiplication by -1.
We can scale all three edges so that their negative halfspaces are on
the triangle's exterior.

Lecture 6 --- 6.837 Fall '01
Notes on using Edge Equations

Compute edge equations from vertices
Orient edge equations
Compute a bounding box
Scan through pixels in bounding box evaluating the edge equations
When all three are positive then draw the pixel.

Lecture 6 --- 6.837 Fall '01
Example Implementation
First we define a few useful objects
public class Vertex2D {
public float x, y; // coordinate of vertex
public int argb; // color of vertex
public Vertex2D() {
}
public Vertex2D(float xval, float yval, int cval) {

x = xval;
y = yval;
argb = cval;
}
}
A Drawable interface
import Raster;
public abstract interface Drawable {

public abstract void Draw(Raster r);
}
The edge equations use integer coefficients for speed. This implementation uses 12 fractional bits. (Not my first version)

Lecture 6 --- 6.837 Fall '01
Edge Equation Coefficients

The edge equation coefficients are computed using the coordinates of the two vertices. Each
point determines an equation in terms of our three unknowns, A, B, and C.
We can solve for A and B in terms of C by setting up the following linear system.
Multiplying both sides by the matrix inverse.
If we choose , then we get and .

Why could we just choose C?

Lecture 6 --- 6.837 Fall '01
Numerical Precision of the C Coefficient

Computers represent floating-point number internally in a format similar to scientific
notation. The very worse thing that you can do with numbers represented in scientific
notation is subtract numbers of similar magnitude. We loose most of the significant digits in
our result (see next slide).
In the case of triangles, these sort of precision problems to occur frequently, because in
general the vertices of a triangle are close to each other.
and thus
Thankfully, we can avoid this subtraction of large numbers when computing an expression
for C. Given that we know A and B we can solve for C as follows:
or
To eliminate any bias toward either vertex we will average of these C values

Lecture 6 --- 6.837 Fall '01
Loss of Precision
public class Jtest {
public static void main (String args []) {
float x, h, dydx, correct, relError;
x = 0.1f;
h = 10.0f;
correct = (float)Math.cos(x);
for(int i = 0; i < 15; i ++) {

dydx = ((float)Math.sin(x + h) - (float)Math.sin(x - h))/ (2.0f * h);
relError = 100.0f * (dydx - correct)/correct;
System.out.println("i="+i+" h="+h+" dydx="+dydx+" rel. error="+relError);
h /= 10.0f;
}
System.out.println("Correct value of derivative is: "+correct);
}
}
i=0 h=10.0 dydx=-0.054130327 rel. error=-105.440216
i=1 h=1.0 dydx=0.83726716 rel. error=-15.8529
i=2 h=0.1 dydx=0.99334663 rel. error=-0.1665868
i=3 h=0.01 dydx=0.9949874 rel. error=-0.0016833
i=4 h=9.999999E-4 dydx=0.9950065 rel. error=2.3362527E-4
i=5 h=9.999999E-5 dydx=0.9949879 rel. error=-0.0016353768
i=6 h=9.999999E-6 dydx=0.99502516 rel. error=0.0021086177
Correct value of derivative is: 0.9950042
http://graphics/classes/6.837/F01/Lecture06/Slide13a.html [9/27/2001 5:10:11 PM]

Lecture 6 --- 6.837 Fall '01
EdgeEquation Object
class EdgeEqn {
public final static int FRACBITS = 12;
public int A, B, C;
public int flag; // used to compute bounding box
public EdgeEqn(Vertex2D v0, Vertex2D v1) {

double a = v0.y - v1.y;
double b = v1.x - v0.x;
double c = -0.5f*(a*(v0.x + v1.x) + b*(v0.y + v1.y));
A = (int) (a * (1<<FRACBITS));
B = (int) (b * (1<<FRACBITS));
C = (int) (c * (1<<FRACBITS));
flag = 0;
if (A >= 0) flag += 8;
if (B >= 0) flag += 1;
}
public void flip() {

A = -A;
B = -B;
C = -C;
}
public int evaluate(int x, int y) {

return (A*x + B*y + C);
}
}

Lecture 6 --- 6.837 Fall '01
Triangle Object
public class FlatTri implements Drawable {
protected Vertex2D v[];
protected EdgeEqn edge[];
protected int color;
protected int area;
protected int xMin, xMax, yMin, yMax;
private static byte sort[][] = {{0, 1}, {1, 2}, {0, 2}, {2, 0}, {2, 1}, {1, 0}};
public FlatTri() { // for future extension

}
public FlatTri(Vertex2D v0, Vertex2D v1, Vertex2D v2) {

v = new Vertex2D[3];
v[0] = v0;
v[1] = v1;
v[2] = v2;
// ... Paint triangle the average of it's vertex colors ...

int a = ((v0.argb >> 24) & 255) + ((v1.argb >> 24) & 255) + ((v2.argb >> 24) & 255);
int r = ((v0.argb >> 16) & 255) + ((v1.argb >> 16) & 255) + ((v2.argb >> 16) & 255);
int g = ((v0.argb >> 8) & 255) + ((v1.argb >> 8) & 255) + ((v2.argb >> 8) & 255);
int b = (v0.argb & 255) + (v1.argb & 255) + (v2.argb & 255);
a = (a + a + 3) / 6;
r = (r + r + 3) / 6;
g = (g + g + 3) / 6;
b = (b + b + 3) / 6;
color = (a << 24) | (r << 16) | (g << 8) | b;

}

Lecture 6 --- 6.837 Fall '01
The Draw Method

public void Draw(Raster r) {
int width = r.getWidth();
int height = r.getHeight();
if (!triangleSetup(width, height)) return;
int x, y;
int A0 = edge[0].A; int B0 = edge[0].B;
int t0 = A0*xMin + B0*yMin + edge[0].C;

yMin *= width;
yMax *= width;
// .... scan convert triangle ....

for (y = yMin; y <= yMax; y += width) {
int e0 = t0;
int e1 = t1;
int e2 = t2;
boolean beenInside = false;
for (x = xMin; x <= xMax; x++) {
if ((e0|e1|e2) >= 0) { // all 3 edges must be >= 0
r.pixel[y+x] = color;
beenInside = true;
} else if (beenInside) break;
e0 += A0;
e1 += A1;
e2 += A2;
}
t0 += B0;
t1 += B1;
t2 += B2;
}
}

Lecture 6 --- 6.837 Fall '01
Explain Two Speed Hacks

Most everything in our Draw( ) method is straightforward, with two exceptions.
int xflag = 0;
if ((e0|e1|e2) >= 0) {
r.pixel[y+x] = color;
xflag++;
} else if (xflag != 0) break;
e0 += A0;
e1 += A1;
e2 += A2;
}
All three edges are tested with a single comparison by oring together the three edges and
checking if the result is positive. If any one of the three is negative then its sign-bit will
be set to a 1, and the result of the or will be negative.
Since triangles are convex, we can only be inside for a single interval on any given
scanline. The xflag variable is used to keep track of when we exit the triangle's interior.
If ever we find ourselves outside of the triangle having already set some pixels on the
span then we can skip over the remainder of the scanline.

Lecture 6 --- 6.837 Fall '01
Triangle SetUp Method
protected boolean triangleSetup(int width, int height) {

if (edge == null) edge = new EdgeEqn[3];
// Compute the three edge equations
edge[0] = new EdgeEqn(v[0], v[1]);
// Trick #1: Orient edges so that the triangle's interior lies within all of their
// positive half-spaces. Assuring that the area is positive accomplishes this
area = edge[0].C + edge[1].C + edge[2].C;
if (area == 0) {
return false; // degenerate triangle
}
if (area < 0) {
edge[0].flip();
edge[1].flip();
edge[2].flip();
area = -area;
}
// Trick #2: compute bounding box

int xflag = edge[0].flag + 2*edge[1].flag + 4*edge[2].flag;
int yflag = (xflag >> 3) - 1;
xflag = (xflag & 7) - 1;
xMin = (int) (v[sort[xflag][0]].x);

xMax = (int) (v[sort[xflag][1]].x + 1);
yMin = (int) (v[sort[yflag][1]].y);
yMax = (int) (v[sort[yflag][0]].y + 1);
// clip triangle's bounding box to raster

xMin = (xMin < 0) ? 0 : xMin;
xMax = (xMax >= width) ? width - 1 : xMax;
yMin = (yMin < 0) ? 0 : yMin;
yMax = (yMax >= height) ? height - 1 : yMax;
return true;
}

Lecture 6 --- 6.837 Fall '01
Tricks Explained
In this method we did two critical things. We orient the edge equations, and we compute the
bounding box.
From analytic geometry we know that the area of a triangle {(x1,y1), (x2,y2), (x3,y3)} is:
The area is positive if the vertices are counterclockwise and negative if clockwise
An aside:
In terms of our discriminator, what does a positive C imply?

Lecture 6 --- 6.837 Fall '01
Why Positive Area Implies a Positive Interior
1. The area of each sub-triangle gives the edge equation's sign at the origin
2. Assume a positive area
thus, the sum of the sub-triangles areas are positive
3. Each point within the triangle falls within exactly one subtriangle
thus, subtriangles with negative areas will lie outside of the triangle
4. Since the negative-subtriangle areas are outside of the triangle
the edge equations are positive inside

Lecture 6 --- 6.837 Fall '01
Exercise #2
Examine the code for computing the bounding box of the triangle in
EdgeEqn( ) and FlatTri.triangleSetup( ).
Explain what is being saved in the EdgeEqn.flag
Explain the contents FlatTri.sort[ ]
Explain how the bounding box is computed
Discuss the advantages and disadvantages of this approach
Write down I give up if this exercise takes you more than 1 Hr.
Limit your discussion to one single-sided sheet of 8.5 by 11 paper.
Turn this exercise in the next time that we meet.

Lecture 6 --- 6.837 Fall '01
Triangle Rasterizer Demonstration

Press the left mouse button above to render a simple Press the left mouse button above to render a more
scene with the FlatTri rasterizer. complicated scene with the FlatTri rasterizer.

Lecture 6 --- 6.837 Fall '01
Interpolating Parameters Within a Triangle

Currently, our triangle scan-converter draws only solid colored triangles. Next we'll discuss
how to smoothly vary parameters as we fill the triangle. In this case the parameters that are
interpolated are the red, green, and blue components of the color. Later on, when we get to
3D techniques, we'll also interpolate other parameters such as the depth at each point on the
triangle.
First, let's frame the problem. At each vertex of
a triangle we have a parameter, say its redness.
When we actually draw the vertex, the specified
shade of red is exactly what we want, but at
other points we'd like some sort of smooth
transition between the values given. This
situation is shown to the right:
Notice that the shape of our desired redness
function is planar. Actually, it is a special class
of plane where there exists a corresponding
point for every x-y coordinate. Planes of this
type can always be expressed in the following
form:

Lecture 6 --- 6.837 Fall '01
This equation should appear familiar. It has the same form as our edge equations.
Given the redness of the three vertices, we can set up the following linear system.
with the solution:
By the way, we've already computed these matrix entries, they're exactly the coefficients of our edge equations.
So the all the additional work that we need to do to interpolate is a single matrix multiplication and compute the equivalent
of an extra edge equation for each parameter.

Lecture 6 --- 6.837 Fall '01
Smooth Triangle Object

import Raster;
import Drawable;
import Vertex2D;
import FlatTri;
public class SmoothTri extends FlatTri implements Drawable {

boolean isFlat;
double scale;
public SmoothTri(Vertex2D v0, Vertex2D v1, Vertex2D v2) {

v = new Vertex2D[3];
v[0] = v0;
v[1] = v1;
v[2] = v2;
/*
check if all vertices are the same color
*/
isFlat = (v0.argb == v1.argb) && (v0.argb == v2.argb);
if (isFlat) {
color = v0.argb;
} else {
color = 0;
}
/*
Scale is always non zero and positive. This zero
value indicates that it has not been computed yet
*/
scale = -1;
}

Lecture 6 --- 6.837 Fall '01
Computing Plane Equations

We've added two new instance variables. The first is simply an optimization that detects the
case when all three vertices are the same color. In this case we'll call the slightly faster
FlatTri methods that we inherited. The second is a scale factor that we'll disscuss next.
Next we add a new method to compute the plane equations of our parameters. The
PlaneEqn() method performs the required matrix multiply and avoids computing the inverse
of the triangle area more than once.
public void PlaneEqn(int eqn[], int p0, int p1, int p2) {
int Ap, Bp, Cp;
if (scale <= 0) {
scale = (1 << EdgeEqn.FRACBITS) / ((double) area);
}
double sp0 = scale * p0;
Ap = (int)(edge[0].A*sp2 + edge[1].A*sp0 + edge[2].A*sp1);
Bp = (int)(edge[0].B*sp2 + edge[1].B*sp0 + edge[2].B*sp1);
Cp = (int)(edge[0].C*sp2 + edge[1].C*sp0 + edge[2].C*sp1);
eqn[0] = Ap;
eqn[1] = Bp;
eqn[2] = Ap*xMin + Bp*yMin + Cp + (1 << (EdgeEqn.FRACBITS - 1));
}

Lecture 6 --- 6.837 Fall '01
Modified Draw( ) Method

Compute the plane equation for each parameter.
public void Draw(Raster raster) {
if (isFlat) {
super.Draw(raster);
return;
}
int width = raster.getWidth();

int height = raster.getHeight();
if (!triangleSetup(width, height)) return;
int alpha[] = new int[3];

int red[] = new int[3];
int green[] = new int[3];
int blue[] = new int[3];
int t0 = v[0].argb;
int t1 = v[1].argb;
int t2 = v[2].argb;
PlaneEqn(blue, t0 & 255, t1 & 255, t2 & 255);
t0 >>= 8; t1 >>= 8; t2 >>= 8;
PlaneEqn(green, t0 & 255, t1 & 255, t2 & 255);
t0 >>= 8; t1 >>= 8; t2 >>= 8;
PlaneEqn(red, t0 & 255, t1 & 255, t2 & 255);
t0 >>= 8; t1 >>= 8; t2 >>= 8;
PlaneEqn(alpha, t0 & 255, t1 & 255, t2 & 255);

Lecture 6 --- 6.837 Fall '01
More SmoothTri.Draw( )
Add accumulators for each parameter
int x, y;
int A0 = edge[0].A; int A1 = edge[1].A; int A2 = edge[2].A;
int Aa = alpha[0];
int Ar = red[0]; int Ag = green[0]; int Ab = blue[0];
int B0 = edge[0].B; int B1 = edge[1].B; int B2 = edge[2].B;

int Ba = alpha[1];
int Br = red[1]; int Bg = green[1]; int Bb = blue[1];
t0 = A0*xMin + B0*yMin + edge[0].C;

int ta = alpha[2];
int tr = red[2]; int tg = green[2]; int tb = blue[2];
yMin *= width;
yMax *= width;

Lecture 6 --- 6.837 Fall '01
Even More SmoothTri.Draw( )

The inner loop
/*
.... scan convert triangle ....
*/
for (y = yMin; y <= yMax; y += width) {
int e0 = t0; int e1 = t1; int e2 = t2; int xflag = 0;
int a = ta; int r = tr; int g = tg; int b = tb;
if ((e0|e1|e2) >= 0) { // all 3 edges must be >= 0
int pixa = (a >> EdgeEqn.FRACBITS);
int pixr = (r >> EdgeEqn.FRACBITS);
int pixg = (g >> EdgeEqn.FRACBITS);
int pixb = (b >> EdgeEqn.FRACBITS);
pixa = ((pixa & ~255) == 0) ? pixa << 24 : ((a < 0) ? 0 : 0xff000000);
pixr = ((pixr & ~255) == 0) ? pixr << 16 : ((r < 0) ? 0 : 0x00ff0000);
pixg = ((pixg & ~255) == 0) ? pixg << 8 : ((g < 0) ? 0 : 0x0000ff00);
pixb = ((pixb & ~255) == 0) ? pixb : ((b < 0) ? 0 : 0x000000ff);
raster.pixel[y+x] = (pixa | pixr | pixg | pixb);
xflag++;
} else if (xflag != 0) break;
e0 += A0; e1 += A1; e2 += A2;
a += Aa; r += Ar; g += Ag; b += Ab;
}
t0 += B0; t1 += B1; t2 += B2;
ta += Ba; tr += Br; tg += Bg; tb += Bb;
}

Lecture 6 --- 6.837 Fall '01
Smooth Triangle Results

Press the left mouse button above to render a simple Press the left mouse button above to render a more
scene with the SmoothTri rasterizer. complicated scene with the SmoothTri rasterizer.
Today's Code: Vertex2D.java, Drawable.java, FlatTri.java, SmoothTri.java, and Triangles.java

Lecture 6 --- 6.837 Fall '01
A Post-Triangle World
Are triangles really the best rendering
primitive?
100,000,000 primitive models

displayed on 2,000,000 pixel
displays.
Even even if we assume that only

10% of the primities are visible, and
they are uniformly distributed over
the whole screen, thats still 5
primitives/pixel. Remember, that in
order to draw a single triangle we
must specify 3 vertices, determine
three colors, and interpolte within 3
edges. On average, these triangle will Models of this magnitude are being built today.
The leading and most ambitious work in this area is Stanford's "Digital
Michelangelo Project".
impact only a fraction of a pixel. Click on the image above to find out more.

Lecture 6 --- 6.837 Fall '01
Point-Cloud Rendering
A new class of rendering

primitives have recently
been introduced to address
this problem. Key Attibutes:
Hierarchy
Incremental Refinement
130,712 Splats, 132 mS 259,975 Splats, 215 mS
Compact
Reperesentation
(differental encoding)
1,017,149 Splats, 722 mS 14,835,967 Splats, 8308 mS

Lecture 6 --- 6.837 Fall '01
Next Time

Lecture 7 --- 6.837 Fall '01
6.837 LECTURE 7
1. Geometric Image Transformations 2. Two-Dimensional Geometric Transforms
3. Translations 4. Groups and Composition
5. Rotations 6. Euclidean Transforms
7. Problems with this Form 8. Choose a Subspace
9. Playing with Euclidean Transforms 10. Similitude Transforms
11. Playing with Similitude Transforms 12. Affine Transformations
13. Affine Properties 13a. Examples of Affine Transformations
14. Playing with Affine Transforms 15. Determining Affine Transforms
16. Solution Method 17. Projective Transformations
18. Projection 19. Projective Transforms
20. Degrees of Freedom 21. Specifying a projective transform
22. Projective Example 23. Next Time

Lecture 7 --- 6.837 Fall '01
Geometric Image Transformations
Algebraic Groups
Euclidean
Affine
Projective
Bovine

Lecture 7 --- 6.837 Fall '01
Two-Dimensional Geometric Transforms

Geometric transforms are functions that map points from one place to another
Geometric transforms
can be applyed to
drawing primitives
(lines, conics, triangles)
pixel coordinates of an image
(or sprites)
We'll begin with simple transforms and generalize them.

Lecture 7 --- 6.837 Fall '01
Translations
Translations are a simple family of two-dimensional transforms. Translations were at the
heart of our Sprite implementations in Project #1.
Translations have the following form
x' = x + tx
y' = y + ty
For every translation there exists an inverse function which undoes the translation. In our
case the inverse looks like:
x = x' - tx
y = y' - ty
There also exists a special translation, called the identity, that leaves every point unchanged.
x' = x + 0
y' = y + 0

Lecture 7 --- 6.837 Fall '01
Groups and Composition

For Translations:
1. There exists an inverse mapping for each function
2. There exists an identity mapping
3. The composition operation is associative
4. The functions are "closed under composition"
These properties might seem trivial at first glance, but they are actually very
important, because when these conditions are shown for any class of functions and
their two-argument composition operation, then they form an algebraic group. One
of the consequences is that any series of translations can be composed to a single
translation. Another consequence is that the inverse is unique.

Lecture 7 --- 6.837 Fall '01
Rotations
Another group of 2-transforms are the rotations about the origin.

Lecture 7 --- 6.837 Fall '01
Euclidean Transforms
The union of translations and rotation functions defines the Euclidean Set
Properties of Euclidean Transformations:

They preserve distances
They preserve angles
How do you represent these functions?

Lecture 7 --- 6.837 Fall '01
Problems with this Form

Must consider Translation and Rotation separately
Computing the inverse transform involves multiple steps
Order matters between the R and T parts
These problem can be remedied by considering our 2 dimensional image plane as a 2D

subspace within 3D.

Lecture 7 --- 6.837 Fall '01
Choose a Subspace
We can use any planar subspace as long as it does not contain the origin
WLOG assume the our 2D space of points lies on the 3D plane z = 1
Now we can express all Euclidean Transforms in matrix form:
This gives us a three parameter group of Transformations.

Lecture 7 --- 6.837 Fall '01
Playing with Euclidean Transforms
In what order are the translation and rotation performed?
Will this family of transforms always generate points on our choosen

3-D plane?
Why?

Lecture 7 --- 6.837 Fall '01
Similitude Transforms
We can define a 4-parameter superset of Euclidean Transforms with additional capabilities
Properties of Similitudes:
Distance between any 2 points
are changed by a fixed ratio
Angles are preserved
Maintains "similar" shape
(similar triangles, circles map to circles, etc)

Lecture 7 --- 6.837 Fall '01
Playing with Similitude Transforms
Adds reflections
Scales in x and y must be the same. Why?
Order?
Will this family of transforms always generate points on our choosen

3-D plane?
Why?

Lecture 7 --- 6.837 Fall '01
Affine Transformations
A 6-parameter group of transforms

Lecture 7 --- 6.837 Fall '01
Affine Properties
To the right is a simple illustration of how we

can map our parameters into the four
components of the affine transformation
matrix.
Properties of Affine Transforms:

They perserve our selected plane
(sometimes called the Affine plane)
They preserve parallel lines

Lecture 7 --- 6.837 Fall '01
Examples of Affine Transformations
Source: Dave Mount, U. Maryland, Notes for CMSC 427, Fall 2000.

Lecture 7 --- 6.837 Fall '01
Playing with Affine Transforms
x scales the x-dimension
y scales the y-dimension
xy is often called the skew parameter

Lecture 7 --- 6.837 Fall '01
Determining Affine Transforms

The coordinates of three corresponding points uniquely determine and Affine Transform
If we know where we would like at least three points to map to, we can solve for an Affine
transform that will give this mapping.

Lecture 7 --- 6.837 Fall '01
Solution Method
We've used this technique several

times now. We set up 6 linear
equations in terms of our 6
unknown values. In this case, we
know the coordinates before and
after the mapping, and we wish to
solve for the entries in our Affine
transform matrix.
This gives the following solution:

Lecture 7 --- 6.837 Fall '01
Projective Transformations
The most general linear transformation that we can apply to 2-D points
There is something different about this group of transformations. The result

will not necessarily lie on our selected plane. Since our world (to this point) is
2D we need some way to deal with this.

Lecture 7 --- 6.837 Fall '01
Projection
The mapping of points from an N-D space to a M-D subspace (M < N)
We need a rule for mapping points resulting of this transform back onto our plane z = 1.
We will identify points by lines through the origin of the 3-D space that we have embedded
our plane within.
Thus,
Since the origin lies on all of these lines (and thus cannot be uniquely specified) we will
disallow it. This is no big loss since it wasn't on our selected plane anyway (This is the real
reason that we chose a plane not containing the origin).
If we want to find the coordinate of any point in our selected plane we need only scale it
such that it's third coordinate, w, is 1.

Lecture 7 --- 6.837 Fall '01
Projective Transforms
Since all of the resulting points are defined to within a non-zero scale factor. We can also
scale the transformation by an arbitrary and it will still give the same result.
We might as well choose so that one of the parameters of our matrix is 1 (i.e. p33 = 1).

Lecture 7 --- 6.837 Fall '01
Degrees of Freedom
A projective transform has 8 free-parameters

Lecture 7 --- 6.837 Fall '01
Specifying a projective transform

A projective transform can be uniquely defined by how it maps 4 points

Lecture 7 --- 6.837 Fall '01
Projective Example
With the applet on the right you can select any corner and drag it to where you would like.
Things are starting to look 3-D... We'll get there soon.

Lecture 7 --- 6.837 Fall '01
Next Time

Lecture 8 --- 6.837 Fall '01
6.837 LECTURE 8
1. 3D Transforms; Part I - Priciples 2. Geometric Data Types
3. Vector Spaces 4. Basis Vectors
5. Linear Transformations 6. Use of Matrix Operators
7. How to Read a Matrix Expression 8. The Basis is Important!
9. Points 10. Making Sense of Points
11. Frames 12. Homogeneous Coordinates
13. Affine Combinations 14. Affine Transformations
15. Multiple Transforms 16. The Same Point in Different Frames
17. Attribution 18. Next Time

Lecture 8 --- 6.837 Fall '01
3D Transforms; Part I - Priciples
Vector Spaces
Vectors, Coordinates, and
Bases
Linear Transformations
Affine Spaces
Points and Frames
Homogeneous Coordinates
Affine Transfromations

Lecture 8 --- 6.837 Fall '01
Geometric Data Types

At this stage, you're probably comfortable We start by defining some notation:
thinking of 3D points, and 3D vectors as being
represented by 3 numbers. Points will be denoted as
For instance:
Vectors will be denoted as
Coordinates are denoted as c

(a lower-case boldface variable).
These are those numbers we are so fond of.
Coordinate Systems are denoted as

This representation is, however, horribly
underspecified. Implied in this notation is an We will deal with two different types of
agreed upon coordinate system. This coordnate coordinate systems:
system has an agreed upon set of directions,
and an agreed upon origin. If we change A coordinate basis defines vectors.
coordinate systems, our representation (set of A coordinate frame defines points.
numbers) changes. If we move points relative Thus, a completely specified point looks like:
to our coordinate system, our representation
also changes.
In order to understand and affect these changes
we will make our representation more explicit. (If this is unclear, we'll get back to it in a couple of slides)

Lecture 8 --- 6.837 Fall '01
Vector Spaces
Vectors are actually more simple than points. So we will start our discussion with them. Vectors are entities that live in a vector
space. A vector space is any set of elements that satisfies the following rules.
1. The operations of addition and scalar multiplication must be defined, and the set must be closed under them:
2. Associativity of addition must hold:
3. There exists a zero vector in V, denoted as , such that:
4. For every element in V there exists an additive inverse:
5. Scalar multiplication distributes over addition:

Lecture 8 --- 6.837 Fall '01
Basis Vectors
A vector basis is a subset of vectors from V that can be used to
generate any other element in V, using just additions and scalar
multiplications.
A basis set, , is linearly dependent if:
Now we'll
explain
Otherwise, the basis set is linearly independent. things with
A linearly independent basis set with i elements is said to span pictures.
an i-dimensional vector space. (Click below)
A basis set can be used to name or address a vector. This is the

done by assigning the vector coordinates as follows:

Lecture 8 --- 6.837 Fall '01
Linear Transformations
A linear transformation, , is just a mapping from V to V which satifies the following properties:
Linearity implies:
Expressing with a basis and coordinate vector gives:
Matrices are a common class of linear operators. Furthermore, when a matrix operator is applied to any vector the result,
, is an element of V. Thus,

Lecture 8 --- 6.837 Fall '01
Use of Matrix Operators

We will use matrices to perform three distinct
classes of operations. In fact, these operations
are all duals of one another, but experience
suggests that it is best to first understand these
operations separately.
We can use a matrix to transform one vector to

another:
Once more, some illustrations may help in

We can use a matrix to change basis vectors: understanding these distinctions:
(Click on the images below)
And, we can use a matrix to change

coordinates:

Lecture 8 --- 6.837 Fall '01
How to Read a Matrix Expression

Often we desire to apply sequences of operations to vectors. For instance, we might want to
translate a point to the origin, rotate it about some vector, and then translate it back. In order to
specify and interpret such sequences, you should become proficient at reading matrix
expressions.
The expression
can be read in one of two ways depending on the associativity of the multplipcation.
Associating the left part of the expression is interpreted as changing the basis while keeping the
coordinates fixed
Associating the right part of the expression is interpreted as changing coordinates while
keeping the basis fixed

Lecture 8 --- 6.837 Fall '01
The Basis is Important!

If you are given coordinates and told to transform them using a matrix, you have not been given
enough information to determine the final mapping.
Consider the matrix:
If we apply this matrix to coordinates there

must be some implied basis, because These illustrations show the significance of the
coordinates alone are not geometric entities (a basis when transforming vectors.
(Click on the images below)
basis is required to convert coordinates into a
vector). Assume this implied basis is . Thus,
our coordinates describe the vector .
The resulting transform, , will
stretch this vector by a factor of 2 in the
direction of the first element of the basis set. Of
course that direction depends entirely on .

Lecture 8 --- 6.837 Fall '01
Points
Points and vectors are different concepts. A point is a fixed place in space. A vector can be
thought of as the motion between points. A mentioned previously, we will distinguish between
points and vectors in our notation.
Points are denoted as and vectors as .
Furthermore, we will consider vectors to live in the linear space R3 and points to to live in the
Affine space A3. Let's consider this distinction.
Conceptually, the operations of addtion and multiplication by a scalar are well defined for
vectors. The addition of 2 vectors expresses the concatenation of 2 motions. Multipling a vector
by some factor scales the motion.
However, these opereations don't make sense for points. What should it mean to add to points
together? For example, what is Cambridge plus Boston? What does it mean to multiply a point
by an arbitrary scalar? What is 7 times Brookline?

Lecture 8 --- 6.837 Fall '01
Making Sense of Points

There are some operations that do make sense for points. For instance, if you want to compute a
vector that describes the motion from one point to another.
We'd also like to compute one point that is some vector away from a given point.
One of the goals of our definitions is to make the

subtle distictions between points and vectors
apparent. The key distiction between vectors and
points are that points are absolute whereas vectors
are relative. We can capture this notion in our
definition of a basis set for points. A vector space is
completely defined by a set of basis vectors,
however, the space that points live in requires the
specification of an absolute origin.

Lecture 8 --- 6.837 Fall '01
Frames
We will accommodate this difference between the spaces that points live in and the spaces that
vectors live in our basis definition. We will call the spaces that points live in Affine spaces, and
explain why shortly. We will also call affine-basis-sets frames.
In order to use this new basis, we will need to adjust our coordinates. Noting that the origin
component of our is a point, and remembering from our previous discussion, that it makes no
sense to multiply points by arbitrary scalar values, we arrive at the following convention for
giving points (and vectors) coordinates:
Graphically, we will distinguish between vector

bases and affine bases (frames) using the
convention shown on the left.

Lecture 8 --- 6.837 Fall '01
Homogeneous Coordinates
Notice, how we have snuck up on the idea of Homogeneous Coordinates,
based on simple logical arguments. Keep the following in mind, coordinates
are not geometric, they are just scales for basis elements. Thus, you should not
be bothered by the fact that our coordinates suddenly have 4 numbers. We
could have had more (no one said we have to have a linearly independent
basis set).
Note how this approach to coordinates is completely consistent with

our intuitions. Subtracting two points yields a vector. Adding a
vector to a point produces a point. If you multiply a vector by a
scalar you still get a vector. And, in most cases, when you scale
points you'll get some nonsense 4th coordinate element that reminds
you that the thing you're left with is no longer a point.
Isn't it strange how seemingly bizarre things

make sense sometimes?

Lecture 8 --- 6.837 Fall '01
Affine Combinations
There are even certain situations where is does make sense to scale and add points.
If you add scaled points together carefully, you can end up with a valid point. Suppose you have two points, one scaled by
α1 and the other scaled by α2. If we restrict the sum of these alphas, α1 + α2 =1, we can assure that
the result will have 1 as it's 4th coordinate value.
This combination, defines all points that share the line connecting our two intial points. This
idea can be simply extended to 3, 4, or any number of points. This type of constrained-scaled
addition is called affine combination (hence, the name of our space). In fact, one could define
an entire space in terms of the affine combinations of elements by using the αi's as
coordinates, but that is a topic for another day.

Lecture 8 --- 6.837 Fall '01
Affine Transformations
As with vectors, we can operate on points using matrices. However, we will need to use 4 by 4
matrices since our basis set has four components. However, we will initially limit ourselves to
transforms that preserve the integrity of our points and vectors. Literally, those transforms that
produce a point or vector when given a one of the same.
This subset of 4 by 4 matrices has the property that a point will be obtained from any input
point, and a vector will be obtained from an input vector, independent of the point or vectors
coordinates. This subset of matrices is called, you guessed it, the affine subset.
Our rules for interpreting, left and right association that we developed when transforming
vectors still apply here. We can transform affine frames and we can transform the coordinates
of points. Next time we meet we will discuss, and give names to, various sub-subsets of these
transformations. But do so is merely mechanics, the magic is all here.

Lecture 8 --- 6.837 Fall '01
Multiple Transforms
We will often want to specify complicated transformations by stringing together sequences of
simple manipulations. For instance, if you want to translate points and then rotate them about
the origin. Suppose that the translation is accomplished by the matrix operator T, and the
rotation is achieved using the matrix, R.
Given what we know now it is a simple matter to construct this series of operations.
Each step in the process can be considered as a transformation of coordinates.
Alternatively, we could have considered the same sequence of operations as follows:
Where each step is considered as a change of basis frames.
These are alternate interpretations of the same transformations. They mean entirely different
things, however they result in the same set of transformed points. The first sequence is
considered as a transformation about a global frame. The second sequence is considered as a
change in local frames. Frequently, we will mix together these ideas in a single transformation.

Lecture 8 --- 6.837 Fall '01
The Same Point in Different Frames

Given our framework, some rather difficult problems become easy to solve. For instance, suppose you have 2 frames, and you
know the coordinates of a particular point relative to one of them. How would you go about computing the coordinate of your
point reltative to the other frame?
Suppose that my two frames are related by the transform S as shown below.
Thus, the coordinate for the point in second frame is simply:
Even harder problems become simple. Suppose that you want to rotate the points describing some object (say a child) about
some arbitrary axis in space (say a merry-go-round). This is easy so long as we have the transform relating our two frames.
Thus,

Lecture 8 --- 6.837 Fall '01
Attribution
Today's lecture comes straight from
the mind of a real wizard
(Prof. Steven J. Gortler, Harvard).
3D Geometry I and 3D Geometry II
(soon to be available in book form)
The keys to his approach are:

A consistent notation
A pragmatic approach to representation and

transformation
The introduction of complicated

mathematical concepts by appealing to
common sense rather than magic.

Lecture 8 --- 6.837 Fall '01
Next Time

Lecture 9 --- 6.837 Fall '01
6.837 LECTURE 9
1. 3D Transformations - Part 2 Mechanics 2. The 3-D Graphics Pipeline
3. Modeling transformations 4. Illumination
5. Viewing Transformation 6. Clipping and Projection
7. Rasterization and Display 8. Rigid-Body Transformations
9. Vector and Matrix Algebra 10. Cross Product in Matrix Form
11. Translations 12. Rotations
13. Decomposing Rotations 14. The Geometry of a Rotation
14a. The Geometry of a Rotation 14b. The Rodrigues Formula
15. The Symmetric Matrix 16. The Skew Symmetric Matrix
17. Weighting Factors 18. Some Sanity Checks
19. Some Sanity Checks 20. Some Sanity Checks
21. Quaternions 22. Quaternion Facts
23. Rotation by Quaternion 24. Quaternion Composition
25. Quaternion Interpolation 26. Euclidean Transformations
27. More Modeling Transforms 28. Next Time

Lecture 9 --- 6.837 Fall '01
3D Transformations - Part 2 Mechanics
The 3-D graphics

pipeline
Rigid-body transforms

Lecture 9 --- 6.837 Fall '01
The 3-D Graphics Pipeline
A sneak look at where we're headed!
Seldom are any two versions drawn the same way
Seldom are any two versions implemented the same way
Primitives are processed in a set series of steps
Each stage forwards its result on to the next stage
Hardware implementations will commonly have multiple primitives

various stages

Lecture 9 --- 6.837 Fall '01
Modeling transformations
We start with 3-D models defined in their own model space
Modeling transformations orient models within a common coordinate frame called world space
All objects, light sources, and the viewer live in world space
Trivial rejection attempts to

eliminate objects that cannot
possibly be seen (an optimization)

Lecture 9 --- 6.837 Fall '01
Illumination
Next we illuminate potentially visible objects
Object colors are determined by their material properties,

and the light sources in the scene
Illumination algorithm depends on the shading model and the surface

model
More about this in later on

Lecture 9 --- 6.837 Fall '01
Viewing Transformation
Another change of coordinate systems
Maps points from world space into eye space
Viewing position is transformed to the origin
Viewing direction is oriented along some axis
A viewing volume is
defined

Lecture 9 --- 6.837 Fall '01
Clipping and Projection
Next we perform clipping of the scene's objects againist a three

dimensional viewing volume called a viewing frustum
This step totally eliminates any objects

(and pieces of objects) that are not
visible in the image
A clever trick is used to straighten out

the viewing frustum in to a cube
Next the objects are projected into

two-dimensions
Transformation from eye space to screen space

Lecture 9 --- 6.837 Fall '01
Rasterization and Display
One last transformation from our screen-space coordinates into a

viewport coordinates
The rasterization step scan converts the object into pixels
Involve interpolating parameters as we go
Purely 2D operation
Almost every step in the rendering pipeline involves a change of

coordinate systems. Transformations are central to understanding
three-dimensional computer graphics.

Lecture 9 --- 6.837 Fall '01
Rigid-Body Transformations
Rigid-body, or Euclidean transformations
Preserve the shape of the objects that they act on
Includes rotations and trnaslations (just as in two dimensions)

Recall our representation for the coordinates of 3-D points. We represent these coordinates
in column vectors. A typical point with coordinates (x, y, z) is represented as:
This is not the only possible representation. You may encounter textbooks that consider
points as row vectors. What is most important is that you use a consistent representation.

Lecture 9 --- 6.837 Fall '01
Vector and Matrix Algebra

You've probably been exposed to vector algebra in previous courses. These include vector
addition, the vector dot product, and the vector cross product. Let's take a minute to discuss
an equivalent set of matrix operators.
We begin with the dot product. This operation acts on two vectors and returns a scalar.
Geometrically, this operation can be described as a projection of one vector onto another.
The dot product has the following matrix formulation.

Lecture 9 --- 6.837 Fall '01
Cross Product in Matrix Form

The vector cross product also acts on two vectors and returns a third vector. Geometrically,
this new vector is constructed such that its projection onto either of the two input vectors is
zero.
In order for one vector to project onto another with a length of zero, it must either have a
length of zero, or be perpendicular to the second vector. Yet the vector generated by the
cross-product operator is perpendicular to two vectors. Since the two input vectors define a
plane in space, the vector that results from the cross product operation is perpendicular, or
normal to this plane.
For any plane there are two possible choices of a normal vector, one on each side of a plane.
The cross product is defined to be the one of these two vectors where the motion from the tip
of the first input vector to the tip of the second input vector is in a counter-clockwise
direction when observed from the side of the normal. This is just a restatement of the
right-hand rule that you are familiar with.

Lecture 9 --- 6.837 Fall '01
Translations
Objects are usually defined relative to their own coordinate system. We can translate points
in space to new positions by adding offsets to their coordinates, as shown in the following
vector equation.
The following figure shows the effect of translating a teapot.

Lecture 9 --- 6.837 Fall '01
Rotations
Rotations in three-dimensions are considerably more complicated than two-dimensional
rotations. In general, rotations are specified by a rotation axis and an angle. In
two-dimensions there is only one choice of a rotation axis that leaves points in the plane.
There are several different ways to present rotations. I will use a different approach than that
used in most books. Typically, all possible rotations are treated as the compostion of three
canonical rotations, one about the x-axis, one abount the y-axis and one about the z-axis. In
order to use this model you need to do the following. Memorize the three canonical
rotations, which aside from the signs of the sines, isn't too hard. Next you have to go through
a series of rotations which move the desired rotation axis onto one of your canonical
rotations, and then you have to rotate it back without introducing any extraneous twists. This
is a difficult and error-prone process. But worst of all it is ambiguous. There exist
several different combinations canonical rotations that result in the same overall result.

Lecture 9 --- 6.837 Fall '01
Decomposing Rotations
There is another way that is both easier to understand and provides you with more insights
into what rotation is really about. Instead of specifying a rotation by a series of canonical
angles, we will specify an arbitrary axis of rotation and an angle. We will also first consider
rotating vectors, and come back to points shortly.
The vector a specifies the axis of rotation. This axis vector must be normalized. The rotation
angle is given by .
You might ask "How am I going to remember this equation?". However, once you
understand the geometry of rotation, the equation will seem obvious.
The basic idea is that any rotation can be decomposed into weighted contributions from
three different vectors.

Lecture 9 --- 6.837 Fall '01
The Geometry of a Rotation

We can actually define a natural basis for rotation in terms of three defining vectors. These
vectors are the rotation axis, a vector perpendicular to both the rotation axis and the vector
being rotated, and the vector itself. These vectors correspond to the each respective term in
the expression.
Let's look at this in greater detail

Lecture 9 --- 6.837 Fall '01
The Geometry of a Rotation

Lecture 9 --- 6.837 Fall '01
The Rodrigues Formula
http://graphics/classes/6.837/F01/Lecture09/Slide14b.html [10/10/2001 7:28:25 PM]

Lecture 9 --- 6.837 Fall '01
The Symmetric Matrix

First we'll see why the symmetric matrix of a vector generates a vector in the the direction of
the axis.
The symmetric matrix is composed of the outer product of a row vector and an column
vector of the same value.

Lecture 9 --- 6.837 Fall '01
The Skew Symmetric Matrix

Next, consider how the skew symmetric matrix of a vector generates a vector that is
perpendicular to both the axis and it's input vector.
From the idenity matrix in the third term it is easy to see how it will generate a vector in the
same direction as the input vector.

Lecture 9 --- 6.837 Fall '01
Weighting Factors
Even the weighting factors can be easily
explained in terms of the component three
vectors.
When = 0 then the sum should reduce to

the identity matrix
The resulting vector after the rotation will
always be in the same direction as the axis.
Thus, its weight is always positive
(1 - cos(θ))

Lecture 9 --- 6.837 Fall '01
Some Sanity Checks

We can now test our new found knowledge. First, consider a rotation by 0.
You can also derive the rotation matrices given in the book. For instance, a rotation about
the x-axis:

Lecture 9 --- 6.837 Fall '01
More Sanity Checks

A rotation about the y-axis.
This approach to rotations is completely general and unambiguous.

Lecture 9 --- 6.837 Fall '01
More Sanity Checks

Rotations about the z-axis.
If you grasp this simple concept and understand the geometry, then don't be surprised if, in a
few years, everyone is coming to you to compute their rotation matrices. They will also drop
their jaws in amazement when you just write down the matrix.

Lecture 9 --- 6.837 Fall '01
Quaternions
Matrices are not the only (or best) way of representing rotations. For one thing, they are redundant (9 numbers instead of 3)
and, for another, they are difficult to interpolate.
An alternative representation was developed by Hamilton in the early 19th century (and forgotten until relatively recently).
The quaternion is a 4-tuple of reals with the operations of addition and multiplication defined. Just as complex numbers
allow us to multiply and divide two-dimensional vectors, quaternions enable us to multiply and divide four dimensional
vectors.
A quaternion can also be interpreted as having a scalar part and a vector part. This will give us a more convenient notation.
Quaternion addition is just the usual vector addition, the quaternion product is defined as:

Lecture 9 --- 6.837 Fall '01
Quaternion Facts
It turns out that we will be able to represent rotations with a unit quaternion. Before looking
at why this is so, there are a few important properties to keep in mind:
The unit quaternions form a three-dimensional sphere in the 4-dimensional space of
quaternions.
Any quaternion can be interpreted as a rotation simply by normalizing it (dividing it by
its length).
Both q and -q represent the same rotation (corresponding to angles of and 2 - )

Lecture 9 --- 6.837 Fall '01
Rotation by Quaternion
Recognize this? It is the Rodrigues formula!


Lecture 9 --- 6.837 Fall '01
Quaternion Composition
Since a quaternion basically stores the axis vector and angle of rotation, it is not surprising
that we can write the components of a rotation matrix given the quaternion components.
Crucially, the composition of two rotations given by quaternions is simply their quaternion
product.
Note that the product of two unit quaternions is another unit quaternion.
Note that quaternion multiplication, like matrix multiplication, is not commutative.

Lecture 9 --- 6.837 Fall '01
Quaternion Interpolation
One of the main motivations for using quaternions in Graphics is the ease with which we can define interpolation between
two orientations. Think, for example, about moving a camera smoothly between two views.

Lecture 9 --- 6.837 Fall '01
Euclidean Transformations
For points we can combine the actions of rotation about an arbitrary axis followed by a
translation into a single 6-parameter transformation.
This set of transformations forms an algebraic group, and they are a subset of the Affine
transformations we discussed last time.

Lecture 9 --- 6.837 Fall '01
More Modeling Transforms

It is possible to expand our repertoire of modeling transformations in a way parallel to our
development of 2-D transformations (We can add Similitudes, Affines, and Projective
groups of operators). However, most of these are either not that useful in everyday practice,
or they are commonly reduced to one or two special cases, which generalize via a series of
more typical operations.
Among, those transforms remaining scales and shears are the most common:
We can generate any 3-D affine transformation using a combination of a rotation, a scale, a
shear, and a translation.

Lecture 9 --- 6.837 Fall '01
Next Time

9LHZLQJ7UDQVIRUPDWLRQV
9LHZLQJDQG3URMHFWLRQ 6WULFWO\VSHDNLQJWKHUHLVQRUHDOQHHGIRUD
VSHFLDOVHWRIYLHZLQJWUDQVIRUPDWLRQV:HFDQ
DOZD\VFRPSRVHRQHXVLQJDFRPELQDWLRQRI
&DPHUD6SHFLILFDWLRQ URWDWLRQVDQGWUDQVODWLRQV+RZHYHUWKH\RFFXU
3URMHFWLRQ0DWULFHV VRIUHTXHQWO\WKDWLWLVXVHIXOWRGHYHORSDVSHFLDO
9LHZLQJ)UXVWXP FODVVRIWUDQVIRUPDWLRQVVSHFLILFDOO\IRUWKH
SXUSRVHRIPDSSLQJSRLQWVIURPZRUOGVSDFH WR
H\HVSDFH
/HFWXUH )DOO /HFWXUH 6OLGH )DOO
0RWLYDWLRQ &DPHUD9LHZ
,QWKHVFHQHVKRZQWKHRULJLQRI :HZLOOILQGWKDWLWLVEHQHILFLDOWR
ZRUOGVSDFHLVVKRZQDVDEOXH UHRULHQWWKHHQWLUHVFHQHVXFKWKDW
FRRUGLQDWHIUDPHORFDWHGXQGHUWKH WKHFDPHUDLVORFDWHGDWWKHRULJLQ
FKDLU7KLVZDVDFRQYHQLHQW ,IZHDOLJQWKHVFHQHVRWKDWWKH
FDPHUDVRSWLFDOD[LVLVDORQJRQHRI
FRRUGLQDWHV\VWHPIRURULHQWLQJWKH
WKHFRRUGLQDWHD[HVDQGWZLVWWKH
IORRUDQGZDOOV1RWLFHKRZWKHD[HV VFHQHVRWKDWWKHGHVLUHGXS
DUHDOLJQHGZLWKWKHIORRUWLOHV7KH GLUHFWLRQLVDOLJQHGZLWKWKH
FKDLUDQGWHDSRWFRXOGDOVREHHDVLO\ FDPHUD
VXSGLUHFWLRQZHFDQ
SODFHGDQGRULHQWHGLQWKLV JUHDWO\VLPSOLI\WKHFOLSSLQJDQG
FRRUGLQDWHV\VWHP7KHJRDORID SURMHFWLRQVWHSVWKDWIROORZ
YLHZLQJWUDQVIRUPDWLRQLVWRVSHFLI\ 2QFHPRUHWKHYLHZLQJ
WKHSRVLWLRQDQGRULHQWDWLRQRIRXU WUDQVIRUPDWLRQFDQEHH[SUHVVHG
'JUDSKLFVFDPHUDLQWKHVFHQH XVLQJWKHULJLGERG\WUDQVIRUPDWLRQV
GLVFXVVHGEHIRUH)LUVWZHQHHGWR
+RZHYHULWVHIIHFWLVDOPRVWWKH
SHUIRUPWKHURWDWLRQVQHHGHGWR
RSSRVLWH DOLJQWKHWZRFRRUGLQDWHIUDPHV
/HFWXUH 6OLGH )DOO /HFWXUH 6OLGH )DOO

9LHZLQJ6WHSV ,QWXLWLYH&DPHUD6SHFLILFDWLRQ
G G 9LHZLQJWUDQVIRUPDWLRQ :HGHILQHWKHFDPHUDH\HORFDWLRQE\LGHQWLI\LQJWKHRULJLQ
H W Z W( VKRXOGDOLJQWKHZRUOGDQG RIWKHFDPHUDIUDPHLQWKHZRUOGVSDFH9LHZLQJGLUHFWLRQFDQ
G G
H W9 Z W FDPHUDFRRUGLQDWHIUDPHV EHVSHFLILHGZLWKDQRWKHUZRUOGVSDFHSRLQWWKHORRNDWSRLQW
9 ( WKDWVKRXOGDSSHDULQWKHFHQWHURIWKHFDPHUDLPDJH/DVWDQ
XSYHFWRUVSHFLILHVWKHFDPHUDRULHQWDWLRQE\GHILQLQJDZRUOG
5RWDWH 7UDQVODWH VSDFHYHFWRUWKDWVKRXOGEHRULHQWHGXSZDUGVLQWKHILQDO
LPDJH
7KLVVSHFLILFDWLRQDOORZVXVWR
VSHFLI\DQDUELWUDU\FDPHUDSDWK
E\FKDQJLQJRQO\WKHH\HSRLQW
DQGOHDYLQJWKHORRNDWDQGXS
YHFWRUVXQWRXFKHG2UZHFRXOG
SDQWKHFDPHUDIURPREMHFWWR
REMHFWE\OHDYLQJWKHH\HSRLQW
DQGXSYHFWRUIL[HGDQGFKDQJLQJ
RQO\WKHORRNDWSRLQW
/RRN$W9LHZLQJ7UDQVIRUP /RRN$W9LHZLQJ7UDQVIRUP
$VGLVFXVVHGEHIRUHZHZLOOFRPSXWHWKHURWDWLRQSDUWRIWKH 7KHUHLVDQRWKHUVSHFLDOYHFWRUWKDWZHFDQFRPSXWH,IZH
YLHZLQJWUDQVIRUPDWLRQILUVW)RUWXQDWHO\ZHNQRZVRPHWKLQJV ILQGWKHFURVVSURGXFWEHWZHHQWKHORRNDWYHFWRUDQGWKHXS
DERXWWKHURWDWLRQPDWUL[WKDWZHDUHORRNLQJIRU YHFWRUZHZLOOJHWDYHFWRUWKDWSRLQWVWRWKHULJKW
)RULQVWDQFHFRQVLGHUDYHFWRUDORQJWKHORRNDWGLUHFWLRQ
ORRNDW [ H\H [ U O q XS
O O
O ORRNDW \ H\H \ O
O O [ O \ O ]

ORRNDW ] H\H ]
7KHYLHZLQJWUDQVIRUPVKRXOGPDSWKLVQRUPDOL]HGYHFWRU
7KHYLHZLQJWUDQVIRUPVKRXOGPDSWKHQRUPDOL]HGYHFWRU O

G W U G W G W
Z 6 H Z (
G W O GW GW
Z 6 H Z (

/RRN$W9LHZLQJ7UDQVIRUP 5RWDWLRQ&RPSRVLQJ5HVXOWV
/DVWIURPWKHORRNDWYHFWRUDQGWKHULJKWYHFWRUZHFDQ 1RZOHWVFRQVLGHUDOORIWKHVHUHVXOWVWRJHWKHU
V\QWKHVL]HDWKLUGYHFWRULQWKHXSGLUHFWLRQ ,QRUGHUWRFRPSXWHWKHURWDWLRQSDUWRIWKHYLHZLQJPDWUL[ZH
QHHGRQO\FRPSXWHWKHLQYHUVHRIWKHPDWUL[ZKRVHFROXPQV
DUHIRUPHGE\RXUVSHFLDOYHFWRUV
X Uq O
( "
( 5 U X O ( 5

7KHYLHZLQJWUDQVIRUPVKRXOGPDSWKLVQRUPDOL]HGYHFWRU
:HZLOOHPSOR\DOLWWOHWULFNIURPOLQHDUDOJHEUD5HPHPEHU
WKDWHDFKFROXPQYHFWRULVXQLWOHQJWKZHQRUPDOL]HGWKHP
$OVRHDFKYHFWRULVSHUSHQGLFXODUWRWKHRWKHUWZR7KHVHWZR
G W X G W G W
Z 6 H Z ( FRQGLWLRQVPDNHWKHPDWUL[RUWKRJRQDO5RWDWLRQVDUHDOVR
RUWKRJRQDO2UWKRJRQDOPDWULFHVKDYHDXQLTXHSURSHUW\

( 5 ( 57
5RWDWLRQVDUH(DV\WR,QYHUW 7UDQVODWLRQ
7KHUHIRUHWKHURWDWLRQFRPSRQHQWRIWKHYLHZLQJ 7KHURWDWLRQWKDWZHMXVWGHULYHGDOLJQVWKHZRUOGD[HVZLWK
WUDQVIRUPDWLRQLVMXVWWKHWUDQVSRVHRIWKHPDWUL[IRUPHGE\ WKHH\HD[HV+RZHYHUWKHRULJLQVRIWKHFRRUGLQDWHIUDPHV
RXUVHOHFWHGYHFWRUV VWLOOGRQRWPDWFK:HPDWFKWKHRULJLQVE\VXEWUDFWLQJWKHH\H
SRLQWIURPDQ\JLYHQZRUOGVSDFHSRLQW:HLVRODWHWKHURWDWLRQ
DQGWUDQVODWLRQSDUWV
U7 U7 [ H\H U7 [ U7 H\H

95 ( 5 X7
[
[

X7 \ H\H X7 \ X7 H\H
7 \
\

O 7 ] H\H 7 ] 7 H\H
O ]
O
N O
]

( 5 ( 7

7UDQVODWLRQ ,QYHUWLQJ+RPRJHQRXV0DWUL[
2UZHFDQGHULYHWKHWUDQVODWLRQFRPSRQHQWE\REVHUYLQJKRZ :HGHFRPSRVHWKHPDWUL[LQWRDURWDWLRQDQGWUDQVODWLRQDQG
WKHH\HSRLQWVKRXOGWUDQVIRUP LQYHUWERWKVHSDUDWHO\
H\H [ G G
H W Z W(
G W H\H \ G W G W G
Z 6 H Z ( Z W (7 ( 5
H\H ] G G
H W ( 5 Z W ( 7
G G
H W ( 5( 7 Z W
7KLVGLUHFWO\GHILQHVWKHODVWFROXPQRIWKH(PDWUL[ZKRVH
LQYHUVHLVWKHYLHZLQJPDWUL[ 5HFRPSRVLQJWKHPDWULFHVZLWKPXOWLSOLFDWLRQFRPSXWHVWKH
U X O H\H YLHZLQJWUDQVIRUP
(

U7

X7 H\H

9 ( 5 (7

+RZGRZHLQYHUWWKLVWUDQVIRUPDWLRQPDWUL[" O
7

9LHZLQJ7UDQVIRUPDWLRQ 3URMHFWLRQ7UDQVIRUPDWLRQ
2XUOLYHVDUHJUHDWO\VLPSOLILHGE\WKHIDFW
U7 U7 H\H WKDWYLHZLQJWUDQVIRUPDWLRQVPDSWKHH\H
WRWKHRULJLQDQGWKHORRNDWGLUHFWLRQ
GW GW GW X7 X7 H\H RSWLFDOD[LVWRDVSHFLILHGFRRUGLQDWH
Z F H 9 F H F D[LV7KLVJUHDWO\UHGXFHVWKHUDQJHRI
O O7 H\H
7
SRVVLEOHSURMHFWLRQ

PDWULFHV
7KHSURMHFWLRQWUDQVIRUPDWLRQPDSVDOORIRXU'FRRUGLQDWHVRQWRRXU
GHVLUHGYLHZLQJSODQH7KXVPDNLQJRXU'ZRUOGLQWRD'LPDJH7KLV
VRUWRIPDSSLQJLVQRW DIILQH OLNHDOORIWKHWUDQVIRUPVZH
YHGLVFXVVHGWKXV
IDU,QIDFWSURMHFWLRQPDWULFHVGRQRWWUDQVIRUPSRLQWVIURPRXU DIILQH
VSDFHEDFNLQWRWKHVDPHVSDFH7KH\WUDQVIRUPSRLQWVLQWRVRPHWKLQJ
GLIIHUHQW8VXDOO\ZHZLOOXVHDSURMHFWLRQPDWUL[WRUHGXFHWKH
GLPHQVLRQDOO\RIRXU DIILQH SRLQWV
7KXVZHVKRXOGH[SHFWSURMHFWLRQPDWULFHVWREHOHVVWKDQIXOOUDQN

2UWKRJUDSKLF3URMHFWLRQ 2UWKRJUDSKLF3URMHFWLRQ
7KHVLPSOHVWIRUPRISURMHFWLRQLV 7KHSURMHFWLRQPDWUL[IRURUWKRJUDSKLFSURMHFWLRQLVVLPSOH
WRVLPSO\SURMHFWDOOSRLQWVDORQJ
OLQHVSDUDOOHOWRWKH]D[LV7KLVIRUP [
[
RISURMHFWLRQLVFDOOHGRUWKRJUDSKLF

\
\
RUSDUDOOHO,WLVWKHFRPPRQIRUPRI
SURMHFWLRQXVHGE\ GUDIWVSHRSOH IRU ]
]

WRSERWWRPDQGVLGHYLHZV

7KHUHDUHVRPHSUREOHPVZLWKWKLVVLPSOHIRUPKRZHYHU7R
7KHDGYDQWDJHRISDUDOOHOSURMHFWLRQLVWKDWWKH\RXFDQPDNHDFFXUDWH EHJLQZLWKWKHXQLWVRIWKHWUDQVIRUPHGSRLQWVDUHVWLOOWKH
PHDVXUHPHQWVRILPDJHIHDWXUHVLQWKHWZRGLPHQVLRQVWKDWUHPDLQ7KH VDPHDVWKHPRGHOXQLWV7KLVLVJUHDWIRUGUDIWLQJEXWLQRXU
GLVDGYDQWDJHLVWKDWWKHLPDJHVGRQ
WDSSHDUQDWXUDOLHWKH\ODFN FDVHZH
GOLNHIRUWKHXQLWVWREHLQSL[HOV
SHUVSHFWLYHIRUHVKRUWHQLQJ
+HUHLVDQH[DPSOHRIDQSDUDOOHOSURMHFWLRQRIRXUVFHQH1RWLFHWKDWWKH
SDUDOOHOOLQHVRIWKHWLOHGIORRUUHPDLQSDUDOOHODIWHURUWKRJUDSKLFSURMHFWLRQ
0DSSLQJWR3L[HO&RRUGLQDWHV 0DSSLQJWR3L[HO&RRUGLQDWHV
7KLVSURFHVVLVRIWHQFDOOHGWKH YLHZSRUW WUDQVIRUPDWLRQ7KH :HFDQLQFRUSRUDWHWKLVFKDQJHRIXQLWVDQGSHUIRUPWKHIOLS
YDULDEOHVOHIWULJKWWRSERWWRPQHDUDQGIDUUHIHUWRWKH RIWKH\D[LVUHTXLUHGIRUUDVWHUFRRUGLQDWHVLQWRRXUSURMHFWLRQ
H[WHQWVRIWKHYLHZLQJIUXVWXPLQPRGHOLQJXQLWV7KHYDOXHV PDWUL[:HFDQDOVRUHPDSWKH]FRRUGLQDWHVXFKWKDWWKH
ZLGWKDQGKHLJKWDUHLQXQLWRISL[HOV QHZFRRUGLQDWHVSUHVHUYHWKHRULJLQDOGHSWKRUGHULQJ
7KLVWUDQVIRUPDWLRQLVOLWWOHPRUHWKDQDVFDOHDQGD
WUDQVODWLRQ ZLGWK OHIW ZLGWK

ULJKW OHIW
[
ULJKW OHIW [
KHLJKW WRS KHLJKW
\
\
ERWWRP WRS ERWWRP WRS
]
]
] PD[ QHDU ] PD[

IDU QHDU IDU QHDU


3HUVSHFWLYH3URMHFWLRQ 3HUVSHFWLYH3URMHFWLRQ
$UWLVWV'RQDWHOOR %UXQHOOHVFKLDQG 'D 9LQFLGXULQJWKHUHQDLVVDQFH 7KHSURMHFWLRQPDWUL[IRUSHUVSHFWLYHSURMHFWLRQPDWUL[LV
GLVFRYHUHGWKHLPSRUWDQFHRISHUVSHFWLYHIRUPDNLQJLPDJHVDSSHDU
UHDOLVWLF7KLVRXWGDWHVPDWKHPDWLFLDQVE\PRUHWKDQ\HDUV3HUVSHFWLYH
FDXVHVREMHFWVQHDUHUWRWKHYLHZHUWRDSSHDUODUJHUWKDQWKHVDPHREMHFW
[
Z [

ZRXOGDSSHDUIDUWKHUDZD\1RWHKRZOLQHVNQRZQWREHSDUDOOHOLQLPDJH \
Z \
VSDFHDSSHDUWRFRQYHUJHWRDVLQJOHSRLQWZKHQYLHZHGLQSHUVSHFWLYH
]
Z ]
7KLVLVDQLPSRUWDQWDWWULEXWHRIOLQHVLQSURMHFWLYHVSDFHVWKH\DOZD\V
LQWHUVHFWDWDSRLQW Z

1RWLFHKRZVLPLODUWKLVWUDQVIRUPLVWRWKHRULJLQDOSDUDOOHO
SURMHFWLRQ2QFHPRUHWKHXQLWVRIWKHWUDQVIRUPDUHWKRVHRI
WKHPRGHODQGQRWSL[HOV
:HQHHGWRGHFLGHZKHUHDWZKDWGHSWKZHZLOOVSHFLI\WKH
YDOXHVRIOHIWULJKWWRSDQGERWWRP2XUFRQYHQWLRQZLOOEHWR
VSHFLI\WKHVHDWWKHQHDUSODQH
3HUVSHFWLYH3URMHFWLRQ &DQRQLFDO3HUVSHFWLYH3URMHFWLRQ
7KHIROORZLQJWUDQVIRUPDWLRQDFFRPSOLVKHVWKHSURMHFWLRQDQG 2UWKRJUDSKLF ULJKW OHIW
WKHFRQYHUVLRQWRSL[HOVLQDVLQJOHWUDQVIRUP
ULJKW OHIW ULJKW OHIW
[
[
ZLGWK QHDU OHIW ZLGWK ERWWRP WRS
\
\
[
Z ULJKW OHIW ULJKW OHIW
[ ]
]
KHLJKW QHDU WRS KHLJKW IDU QHDU
\
Z \
IDU QHDU IDU QHDU
]
Z ERWWRP WRS ERWWRP WRS
]
] PD[ IDU QHDU ] PD[ IDU
Z
IDU QHDU IDU QHDU

3HUVSHFWLYH
QHDU ULJKW OHIW

[
Z ULJKW OHIW ULJKW OHIW
[
QHDU ERWWRP WRS
)RUWKHSXUSRVHRIFOLSSLQJZH \
Z \
FDQPRGLI\WKLVWUDQVIRUPDWLRQ ]
Z

]
IDU QHDU QHDU IDU
VRWKDWLWLVPDSSHGLQWRD Z

IDU QHDU

IDU QHDU
FDQRQLFDOVSDFH


Surface Modeling Polygon Surfaces
Types: Set of surface polygons that enclose an object interior

Polygon surfaces
Curved surfaces
Volumes
Generating models:
Interactive
Procedural
Lecture 12 Slide 1 6.837 Fall 01 Lecture 12 Slide 2 6.837 Fall 01
Polygon Tables Curved Surfaces
We specify a polygon surface with a set of vertex coordinates Implicit

and associated attribute parameters Curve defined in terms of an implicit function:
f (x, y, z) = 0
Parametric
Parametrically defined curve in three dimensions is given by three univariate
functions:
Q(u) = (X(u), Y(u), Z(u))
Q(u) = (cos u, sin u) f(x, y) = x2+ y2 1 = 0
parametric implicit
Implicit vs. Parametric Parametric Example: Bezir Curves
Surface Display A Bezir curve can be defined in terms of a set of control points denoted in red.
Parametric Consider, for example, a cubic, or curve of degree 3:
Surface Intersections Q (u ) = (1 u )3 p0 + 3u (1 u ) 2 p1
f1 ( x, y , z ) f 2 ( x, y , z ) = 0
Implicit
+ 3u 2 (1 u ) p2 + u 3 p3
Changing Topology
Implicit We can generate points on the curve by repeated linear interpolation.
Starting with the control polygon (in red), the edges are subdivided (as noted in blue).
These points are then connected in order and the resulting edges subdivided. The
recursion stops when only one edge remains. This allows us to approximate the curve
at multiple resolutions.
Bezir Patches Example: The Utah Teapot

Control polyhedron with 16 points and the resulting 32 patches
bicubic patch:
single shaded patch
wireframe of the control points
Patch edges

Subdivision of Bezir Surfaces Deforming a Patch
The net of control points

forms a polyhedron in cartesian
space, and the positions of the
points in this space control the
shape of the surface.
The effect of lifting one of the

control points is shown on the
right.
2 8 32 128
triangles per patch
We can now apply the same basic idea to a surface, to yield increasingly accurate
polygonal representations
Patch Representation vs. Polygon Mesh Sweep Representations

Its fair to say that a polygon is a simple and flexible building Solid modeling packages often provide a number of construction techniques. A good
example is a sweep, which involves specifying a 2D shape and a sweep that moves the
block. However, a parametric representation of an object has shape through a region of space.
certain key advantages:
Conciseness
A parametric representation is exact and economic since it is
analytical. With a polygonal object, exactness can only be
approximated at the expense of extra processing and database costs.
Deformation and shape change
Deformations of parametric surfaces is no less well defined than its
undeformed counterpart, so the deformations appear smooth. This is
not generally the case with a polygonal object.

Constructive Solid-Geometry Methods (CSG) A CSG Tree Representation
Another modeling technique is to combine the volumes occupied by
overlapping 3D shapes using set operations. This creates a new volume by
applying the union, intersection, or difference operation to two volumes.
intersection difference union
Example Modeling Package: Alias Studio Volume Modeling

Marching Cubes Algorithm Marching Cube Cases
Extracting a surface from voxel data:
1. Select a cell
2. Calculate the inside/outside state of each vertex of the cell
3. Create an index
4. Use the index to look up the state of the cell in the case table (see next slide)
5. Calculate the contour location (via interpolation) for each edge in the case table
Extracted Polygonal Mesh Procedural Techniques: Fractals

Apply algorithmic rules to generate shapes

Terrains Example: L-systems
Midpoint Displacement Biologically-motivated approach to modeling botanical
structures
Example:
d = edge size random( 1,1)
Example of a complex L-system model Next Time

Visibility Last Time
Visibility Part 2 Back-Face Culling O(n)
Simple test based on the normal of each face:
Binary Space View-direction culling (computed after projection)
Partitioning Trees Oriented-face culling (computed at triangle set-up)
Viewpoint culling (can be done anywhere)
Ray Casting
Depth Buffering
Lecture 14 6.837 Fall 2001 Lecture 14 Slide 2 6.837 Fall 2001
Visibility Last Time Power of Plane Equations

Painters Algorithm O(n log n) We've gotten a lot of mileage out of one simple equation:
Sort triangles by their depth (min, max, centroid) 3D outcode clipping x

Subdivide cycle overlaps or intersecting triangles plane-at-a-time clipping y
d = 0
viewpoint back-face culling n x ny nz
z

1

1
One More Trick with Planes Constructing a BSP Tree
Consider the complement argument of the viewpoint culling The Binary Space Partitioning (BSP) algorithm:
algorithm: 1.Select a partitioning plane/facet.
Any facet that contains the eye point within its negative 2.Partition the remaining planes/facets according
half-space is invisible. to the side of the partitioning plane that they fall
on (+ or -).
Any facet that contains the eye point within its positive
3.Repeat with each of the two new sets.
half-space is visible.
Well almost... it would work if there were no overlapping Partitioning requires testing all facets in the
facets. However, notice how the overlapping facets partition active set to find if they lie entirely on the
positive side of the partition plane, entirely on
each other. Suppose we build a tree of these partitions.
the negative side, or if they cross it. In the case
of a crossing facet we clip it into two halves
(using the plane-at-a-time clipping algorithm).
BSP Visualizer Applet
Computing Visibility with BSP trees BSP Tree Example

Starting from the root of the tree. Computing visibility or depth-sorting with BSP trees is both
1. Classify viewpoint as being in the positive or simple and fast.
negative half-space of our plane
It resolves visibility at the primitive level.
2. Call this routine with the opposite half-space
Visibility computation is independent of screen size
3. Draw the current partitioning plane
4. Call this routine with the same half-space Requires considerable preprocessing of the scene primitives
Intuitively, at each partition, we first draw the stuff Primitives must be easy to subdivide along planes
further away than the current plane, then we draw
Supports CSG
the current plane, and then we draw the closer
stuff. BSP traversal is called a "hidden surface
elimination" algorithm, but it doesn't really
"eliminate" anything; it simply orders the drawing
of primitive in a back-to-front order like the
Painter's algorithm.
2
Pixel-level Visibility Ray Casting
Thus far, we've considered visibility at the level of primitives. Cast a ray from the viewpoint through each pixel to find the
Now we will turn our attention to a class of algorithms that closest surface
consider visibility at the level of each pixel.
for (each pixel in image) {
compute ray for pixel
set depth = ZMAX
for (each primitive in scene) {
if (ray intersects primitive and
distance < depth) {
pixel = object color
depth = distance to object
}
}
}
Ray Casting Depth Buffering

Pros: Project all primitives and update depth
Conceptually simple
of each pixel
Can take advantage of spatial coherence in scene set depth of all pixels to ZMAX
Can be extended to handle global illumination for (each primitive in scene) {
effects (ex: shadows and reflectance) determine pixels touched
for (each pixel in primitive) {
Cons: compute z at pixel
Renderer must have access to entire model if (z < depth) {
Hard to map to special-purpose hardware

pixel = object color

depth = z
Visibility determination is coupled to sampling }
Subject to aliasing }
Visibility computation is a function of resolution }
3
Depth Buffer What Exactly Gets Stored in a Depth Buffer?
Pros: Recall that we augmented our projection matrix to include a
Primitives can be processed immediately mapping for z values:
width near left width
Primitives can be processed in any order
right left
0 0

x 'w right left
x
Exception: primitives at same depth height near top height
y 'w 0 0 y
Well suited to H/W implementation = bottom top bottom top
z 'w z
z max far near z max far
Spatial coherence w 0 0 1
far near far near
Incremental evaluation of loops
0 0 1 0
Cons: The perspective projection matrix preserves lines and planes:
Visibility determination is coupled to sampling (aliasing)
Requires a Raster-sized array to store depth
Excessive over-drawing
Interpolating Depth Monotonic Depth Values

Projection that preserves planes allows us to use the plane We need to be careful when reading the values out of a depth-
equation for interpolation. buffer and interpolating them. Even though, our interpolated
values of z lie on a plane, uniform differences in depth-buffer
(x 1 , y 1 , z 1 ) Ax + By + C =z values do no correspond to a uniform differences in space:
z 0 x 0 y 0 far z max (z near) far z max near
(x 0 , y 0 , z 0 ) 1 A z = = 1
z (far near ) far near z
(x 2 , y 2 , z 2 ) z = x y 1 1 B
1 1
z 2 x 2 y 2 1 C

Solve the linear system for A, B, and C and use the values
to interpolate the depth z at any point x, y.
Similar computations are also used for rasterization and
color interpolation
4
Monotonic Depth Values Next Time
However, our z-comparisons will still work because this
parameter mapping, while not linear, is monotonic.
Note that when the z values are uniformly quantized the
number of discrete discernable depths is greater closer to the
near plane than near the far plane. Is this good?
5
Phong Illumination Model
Physically Based Illumination Models n shiny
( ) (
I total = k a I ambient + I light k d N L + k s V R

)

BRDF
Cook-Torrance Problems with Empirical Models:
Rendering Equation What are ka, ks, kd and nshiny?
Are they measurable quantities?

What are the coefficients for copper?
How does the incoming light at a point relate to the
outgoing light?
Is energy conserved?
Just what is light intensity?
Is my picture accurate?
Lecture 16 6.837 Fall 2001 Lecture 16 Slide 2 6.837 Fall 2001
What We Want Energy and Power of Light

A model that uses physical properties that can be looked up Light energy (Radiant energy): the energy
in the CRC Handbook of Chemistry and Physics (indices of of the photon particles. If we know the number
refraction, reflectivity, conductivity, etc.) of photon particles emitted, we can sum up the
Parameters that that have clear physical analogies (how energies of each photon to evaluate the energy
rough or polished a surface is) of light (Joules).
Models that are predictive (the simulation attempts to model Work: the change in energy. The light does
the real scene) work to emit energy (Joules).
Models that conserve energy Flux (Radiant power): the rate of work, the
Complex surface substructures
rate at which light energy is emitted (Watt).
(crystals, amorphous materials, boundary-layer behavior) Radiant Intensity: the flux (the rate of light
If it was easy... everyone would do it.
energy change) radiated in a given direction
(W/sr).
1
Irradiance What does Irradiance look like?
The flux (the rate of radiant energy change) at a surface point
per unit surface area (W/m2). In short, flux density. The
irradiance function is a two dimensional function describing the
incoming light energy impinging on a given point.
E i = Li cos i d i

E i = Li cos i d i What is Li?

Radiant Intensity?
Radiance What happens after reflection?

The Li term is not radiant intensity. You can see this by The amount of reflected radiance is proportional to the incident
comparing the units: radiance.
W W W W
E i 2 = Li cos i d i [sr ] , but 2 [sr ] Lr = (r , r , i , i ) Li
m
sr m sr
Radiant intensity does not account for the size of the surface
from the lights perspective: more radiant power (flux) will Lr
reach a surface that appears bigger to the light. Li
Radiance: the angular flux density, the radiant power (flux)
per unit projected area in a given direction (W/sr m2).
same direction
different radiance
2
What does BRDF look like? BRDF Approaches
Bidirectional Reflectance Distribution Function (BRDF) Physically-based models
Measured BRDFs
(r , r , i , i )
Local Illumination Better Illumination Models

Blinn-Torrance-Sparrow (1977)
Lr (r ) = (i r ) Li (i ) cos i d i
isotropic reflectors with smooth microstructure

Phong illumination model approximates the BRDF with Cook-Torrance (1982)
combination of diffuse and specular components. wavelength dependent Fresnel term
He-Torrance-Sillion-Greenberg (1991)
adds polarization, statistical microstructure, self-
reflectance
Very little of this work has made its way into graphics H/W.
3
Cook-Torrance Illumination Cook-Torrance BRDF
lights DGF (i )
i =1
( )
I = k a I , a + I ,i (1 k a k s ) li n + k s
(v n) =
DGF (i )
=
DGF (i )
I,a - Ambient light intensity

cos i cos r ( )
l n (v n)
ka - Ambient surface reflectance
I,i - Luminous intensity of light source i Physically based model of a reflecting surface. Assumes a
ks - percentage of light reflected specularly (notice terms sum to one) surface is a collection of planar microscopic facets, microfacets.
l - Diffuse reflectivity Each microfacet is a perfectly smooth reflector. The factor D
li - vector to light source describes the distribution of microfacet orientations. The
n - average surface normal at point factor G describes the masking and shadowing effects between
D - microfacet distribution function the microfacets. The F term is a Fresnel reflection term related
G - geometric attenuation Factor to materials index of refraction.
F (i) - Fresnel conductance term
v - vector to viewer
Microfacet Distribution Function Beckman's Distribution

tan 2

m
e
D=
4m 2 cos 4
Statistical model of the microfacet variation in the halfway-

vector H direction
Based on a Beckman distribution function
Consistent with the surface variations of rough surfaces
- the angle between N and H
m - the root-mean-square slope of the microfacets

large m indicates steep slopes and the reflections spread out
over the surface
4
Geometric Attenuation Factor Blocked Reflection
The geometric attenuation factor G accounts for microfacet A portion of the out-going beam can be blocked.
shadowing. The factor G is in the range from 0 (total
shadowing) to 1 (no shadowing). There are many different
ways that an incoming beam of light can interact with the
surface locally.
This is called masking.
The entire beam can simply reflect.
Blocked Beam Geometric Attenuation Factor

A portion of the incoming beam can be blocked. In each case, the geometric configurations can be analyzed to
compute the percentage of light that actually escapes from the
surface. The geometric factor, chooses the smallest amount of
lost light. l
G =1 blocked
l facet

G masking =
( )
2 n h (n v )
Cook called this self-shadowing.
v h

G shadowing =
(
2 n h n l )( )

v h
G = min {1,G masking ,G shadowing }
5
Fresnel Reflection Fresnel Reflection
The Fresnel term results from a complete analysis of the reflection process The Fresnel effect is wavelength dependent. It behavior is
while considering light as an electromagnetic wave. The electric field of determined by the index-of-refraction of the material (taken as
light has an associated magnetic field associated with it (hence the name
electromagnetic). The magnetic field is always orthogonal to the electric
a complex value to allow for attenuation). This effect explains
field and the direction of propagation. Over time the orientation of the the variation in colors seen in specular regions particular on
electric field may rotate. If the electric field is oriented in a particular metals (conductors). It also explains why most surfaces
constant direction it is called polarized. The behavior of reflection depend approximate mirror reflectors when the light strikes them at a
on how the incoming electric field is oriented relative to the surface at the grazing angle. 2 2
point where the field makes contact. This variation in reflectance is called
1 ( g c ) (c (g + c ) 1)
the Fresnel effect. F (i ) = 2
1+ 2
2 (g + c ) (c (g c ) + 1)

c = cos i = l h
2
n
g = i + c 2 1
nf
Remaining Hard Problems Global Illumination

Reflective Diffraction Effects So far, we have looked at local illumination problems, which approximate
how the light reflects from a surface under direct illumination. Global
thin films illumination computes the more general problem of light transfer between
all objects in the scene, including direct and indirect illumination.
feathers of a blue jay
Rendering equation is the general formulation of the global illumination
oil on water problem: it describes how the radiance from surface x reflects from the
surface x:
CDs

Anisotropy L ( x , ) = E ( x ) + ( x )L ( x , )G ( x , x )V ( x , x )dA
brushed metals s
L is the radiance from a point on a surface in a given direction
strands pulled materials

E is the emitted radiance from a point: E is non-zero only if x is emissive

satin and velvet cloths V is the visibility term: 1 when the surfaces are unobstructed along the
direction , 0 otherwise
G is the geometry term, which depends on the geometric relationship
between the two surfaces x and x
6
Next Time
Ray Tracing
Lecture 16 Slide 25 6.837 Fall 2001
7
Ray Tracing Graphics Pipeline Review
Properties of the Graphics Pipeline
Beyond the Graphics Pipeline
Primitives are processed one at a time
Ray Casting
All analytic processing early on
Ray-Object Intersection
Sampling occurs late
Global Illumination -
Minimal state required (immediate mode rendering)
Reflections and Transparency
Processing is forward-mapping
Acceleration Techniques
CSG
Alternative Approaches Ray Casting Outline

There are other ways to compute views of scenes defined by geometric
For every pixel construct a ray
primitives. One of the most common is ray-casting. Ray-casting searches
from the eye through the pixel.
along lines of sight, or rays, to determine the primitive that is visible along
For every object in the scene
it.
Find time of intersection with
the ray closest (and in front of)

the eye
Compute normal at point of
intersection
Compute color for pixel based on
point and normal at intersection

Properties of ray-casting: closest to the eye (e.g. by Phong
Go through all primitives at each pixel illumination model).
Sample first
t0
Analytic processing afterwards
Requires a display list
1
First Step - From Pixels to Rays Java Version
// Compute viewing transformation that maps a
// screen coordinate to a ray direction
Vector3D look = new Vector3D(lookat.x-eye.x, lookat.y-eye.y,
lookat.z-eye.z);
Du = Vector3D.normalize(look.cross(up));
Dv = Vector3D.normalize(look.cross(Du));
float fl = (float)(width / (2*Math.tan((0.5*fov)*Math.PI/180)));
Vp = Vector3D.normalize(look);
Vp.x = Vp.x*fl - 0.5f*(width*Du.x + height*Dv.x);
Vp.y = Vp.y*fl - 0.5f*(width*Du.y + height*Dv.y);
Vp.z = Vp.z*fl - 0.5f*(width*Du.z + height*Dv.z);
Example use:
Vector3D dir = new Vector3D(i*Du.x + j*Dv.x + Vp.x,
i*Du.y + j*Dv.y + Vp.y,
i*Du.z + j*Dv.z + Vp.z);
Ray ray = new Ray(eye, dir); // normalizes dir
Object Intersection Early Rejection

Intersecting a sphere with a ray: The performance of ray casting is determined by how efficiently ray object
intersections can be determined. Let's rethink the series of computations
used to determine the ray-sphere intersection while looking for ways to
eliminate unnecessary work.
Step 1:
A sphere is defined by its center, s, and its radius r. The intersection of a ray
with a sphere can be computed as follows:
Thus, we can test if (v - r) is greater than the closes intersection thus far,
tbest. If it is then this intersection cannot be closer. We can use this test to
avoid the rest of the intersection calculation.
2
More Trivial Rejections Example Code
public boolean intersect(Ray ray) {
float dx = center.x - ray.origin.x;
We can even structure the intersection test to avoid even more float dy = center.y - ray.origin.y;
unnecessary work: float dz = center.z - ray.origin.z;
float v = ray.direction.dot(dx, dy, dz);
Step 2:
// Do the following quick check to see if there is even a chance
What if the term, r2 - b2 < 0
// that an intersection here might be closer than a previous one
if (v - radius > ray.t)
return false;
// Test if the ray actually intersects the sphere

float t = radSqr + v*v - dx*dx - dy*dy - dz*dz;
if (t < 0)
return false;
// Test if the intersection is in the positive

// ray direction and it is the closest so far
Clearly we need to test for this case anyway since it will generate an t = v - ((float) Math.sqrt(t));
exception when we calculate the expression: if ((t > ray.t) || (t < 0))
return false;
ray.t = t;
ray.object = this;
return true; }
Global Illumination Recursive Ray-Casting

Early on, in the development of computer graphics, ray-casting was
Starting from the viewing position, first compute the visible object along
recognized as viable approach to 3-D rendering. However, it was generally
each ray. Then compute the visibility of each light source from the visible
dismissed because:
surface point, using a new ray. If there is an object between the light
1. Takes no advantage of screen space coherence
source and the object point it is in shadow, and we ignore the illumination
2. Requires costly visibility computation from that source. We can also model reflection and refraction
3. Only works for solids similarly.
4. Forces per pixel illumination evaluations
5. Not suited for immediate mode rendering
It was not until Turner Whitted (1980) recognized that recursive ray casting,
which has come to be called ray tracing, could be used to address global
illumination that interest in ray tracing became widespread.
3
Ray Tracing Illumination The Ray Tree
Recursive L R
E T3
R2 Viewpoint
N Vreflected
V
N2 T1
R3
I ( E ,V ) = I direct + I reflected + I transmitted I I reflected R1 N3
P L1
L2
Vtransmitted N1 L3
I reflected = k r I ( P,Vreflected ) I transmitted L1 R1 T1
L2 L3
I transmitted = k t I ( P,Vtransmitted ) Eye
Ni surface normal
R2 R3 T3
( ) ( )
Ri reflected ray
I direct = k a I ambient + I light k d N L + k s V R
nshiny
Li shadow ray
Check for shadowing (intersection with object along ray (P,L)) Ti transmitted (refracted) ray
Refraction Rendering Equation

N cos i I N Global illumination computes the more general problem of light transfer
sin i i between all objects in the scene, including direct and indirect illumination.
Snells Law = = r
sin t t I i N cos i Rendering equation is the general formulation of the global illumination
M problem: it describes how the radiance from surface x reflects from the
surface x:
T = sin t M cos t N
r r
( N cos i I ) t L( x, ) = E ( x) + ( x) L( x, )G ( x, x)V ( x, x)dA
M = T
sin i N S
sin t L is the radiance from a point on a surface in a given direction
T = ( N cos i I ) cos t N Note that I is the negative of

sin i the incoming ray E is the emitted radiance from a point: E is non-zero only if x is emissive
V is the visibility term: 1 when the surfaces are unobstructed along the
T = ( r cos i cos t ) N r I
direction , 0 otherwise
cos i = N I G is the geometry term, which depends on the geometric relationship
cos t = 1 sin 2 t = 1 r2 sin 2 i = 1 r2 (1 ( N I ) 2 )

between the two surfaces x and x
T = r ( N I ) 1 r2 (1 ( N I ) 2 ) N r I Total internal reflection when the Ray tracing approximates the rendering equation by sampling along rays
square root is imaginary where the integrand is likely to be large.
4
Designing a Ray Tracer A Ray Object
Building a ray tracer is simple. First we start with a convenient vector
algebra library.
class Ray {
public static final float MAX_T = Float.MAX_VALUE;
class Vector3D { Vector3D origin, direction;
float t;
Renderable object;
public float x, y, z;
// constructors public Ray(Vector3D eye, Vector3D dir) {
public Vector3D( ) { } origin = new Vector3D(eye);
public Vector3D(float x, float y, float z); direction = Vector3D.normalize(dir);
public Vector3D(Vector3D v); }
public boolean trace(Vector objects) {
// methods Enumeration objList = objects.elements();
public Vector3D to(Vector3D B) // B - this t = MAX_T;
public float dot(Vector3D B); // this with B object = null;
public float dot(float Bx, float By, float Bz); // B spelled out while (objList.hasMoreElements()) {
public static float dot(Vector3D A, Vector3D B); // A dot B Renderable object = (Renderable) objList.nextElement();
object.intersect(this);
public Vector3D cross(Vector3D B); // this with B }
public Vector3D cross(float Bx, float By, float Bz); // B spelled out return (object != null);
public static Vector3D cross(Vector3D A, Vector3D B); // A cross B }
// ray.Shade(...) is nicer than ray.object.Shade(ray, ...)
public float length( ); // of this public final Color Shade(Vector lights, Vector objects, Color bgnd) {
public static float length(Vector3D A); // of A return object.Shade(this, lights, objects, bgnd);
public void normalize( ); // makes this unit length }
public static Vector3D normalize(Vector3D A); // makes A unit length }
public String toString(); // convert to a string

}
Light Source Object Renderable Interface

// All the public variables here are ugly, but I
// An object must implement a Renderable interface in order to
// wanted Lights and Surfaces to be "friends"
// be ray traced. Using this interface it is straightforward
class Light {
// to add new objects
public static final int AMBIENT = 0;
public static final int DIRECTIONAL = 1;
abstract interface Renderable {
public static final int POINT = 2;
public abstract boolean intersect(Ray r);
public int lightType;
public abstract Color Shade(Ray r, Vector lights, Vector objects,
public Vector3D lvec; // the position of a point light or
Color bgnd);
// the direction to a directional light
public String toString();
public float ir, ig, ib; // color of the light source
}
public Light(int type, Vector3D v, float r, float g, float b) {
lightType = type;
ir = r;
ig = g;
Thus, each object must be able to
ib = b;
if (type != AMBIENT) {
1. Intersect itself with a ray
lvec = v;
if (type == DIRECTIONAL) { 2. Shade itself (determine the color it reflects along the given ray)
lvec.normalize();
}
}
}
}
5
An Example Renderable Object Sphere's Intersect method
public boolean intersect(Ray ray) {
float dx = center.x - ray.origin.x;
// An example "Renderable" object
float dy = center.y - ray.origin.y;
float dz = center.z - ray.origin.z;
class Sphere implements Renderable {
float v = ray.direction.dot(dx, dy, dz);
Surface surface;
Vector3D center;
// Do the following quick check to see if there is even a chance
float radius;
// that an intersection here might be closer than a previous one
private float radSqr;
if (v - radius > ray.t)
return false;
public Sphere(Surface s, Vector3D c, float r) {
surface = s;
// Test if the ray actually intersects the sphere
center = c;
float t = radSqr + v*v - dx*dx - dy*dy - dz*dz;
radius = r;
if (t < 0)
radSqr = r*r; //precompute this because we'll use it a lot
return false;
}
public String toString() { // Test if the intersection is in the positive
return ("sphere "+center+" "+radius); // ray direction and it is the closest so far
} t = v - ((float) Math.sqrt(t));
if ((t > ray.t) || (t < 0))
return false;
ray.t = t;
ray.object = this;
return true;
}
Sphere's Shade method Surface Object

public Color Shade(Ray ray, Vector lights, Vector objects, Color bgnd) {
class Surfacepublic float
// An object shader doesn't really do too much other than
ir, ig, ib; // surface's intrinsic color
// supply a few critical bits of geometric information public float ka, kd, ks, ns; // constants for phong model
// for a surface shader. It must must compute: public float kt, kr, nt;
// private static final float TINY = 0.001f;
// 1. the point of intersection (p) private static final float I255 = 0.00392156f; // 1/255
// 2. a unit-length surface normal (n)
// constructor
// 3. a unit-length vector towards the ray's origin (v)
public Surface(
// float rval, float gval, float bval, // surface color
float px, py, pz; float a, // ambient coefficient
px = ray.origin.x + ray.t*ray.direction.x; float d, // diffuse coefficient
py = ray.origin.y + ray.t*ray.direction.y; float s, // specular coefficient
pz = ray.origin.z + ray.t*ray.direction.z; float n, // phong shineiness
float r, // reflectance
float t, // transmission
Vector3D p, v, n; float index // index of refraction
p = new Vector3D(px, py, pz); ) {
v = new Vector3D(-ray.direction.x, -ray.direction.y, -ray.direction.z);
n = new Vector3D(px - center.x, py - center.y, pz - center.z); ir = rval; ig = gval; ib = bval;
n.normalize(); ka = a; kd = d; ks = s; ns = n;
kr = r*I255; kt = t*I255; // These are used to scale colors in [0, 255]
nt = index;
// The illumination model is applied by the surface's Shade() method
}
return surface.Shade(p, n, v, lights, objects, bgnd);
}
6
Surface Shader Outline Surface Shader
public Color Shade(Vector3D p, Vector3D n, Vector3D v, Vector lights,
Vector objects, Color bgnd) {
Enumeration lightSources = lights.elements();
float r = 0, g = 0, b = 0; while (lightSources.hasMoreElements()) {
while (lightSources.hasMoreElements()) { Light light = (Light) lightSources.nextElement();
Light light = (Light) lightSources.nextElement();
if (light.lightType == Light.AMBIENT) { if (light.lightType == Light.AMBIENT) {
// inc r,g,b by ambient contribution r += ka*ir*light.ir;
} else {
Vector3D l; g += ka*ig*light.ig;
if (light.lightType == Light.POINT) { b += ka*ib*light.ib;
// Set l vector to point to light source
} else { } else {
// Set l vector to -light direction Vector3D l;
}
if (light.lightType == Light.POINT) {
// Check if the surface point is in shadow, if it is, go to next light. l = new Vector3D(light.lvec.x - p.x,
float lambert = Vector3D.dot(n,l); light.lvec.y - p.y,
if (lambert > 0) { light.lvec.z - p.z);
if (kd > 0) { // add in diffuse component
} l.normalize();
if (ks > 0) { // add in specular component } else {
}
} l = new Vector3D(-light.lvec.x,
}}} -light.lvec.y,
if (kr > 0) { // Compute illumination due to reflection
} -light.lvec.z);
if (kt > 0) { // Compute illumination due to reflection
} }
// make sure color components are within range.
return new Color(r, g, b); }
Surface Shader (cont) Surface Shader (cont)

float lambert = Vector3D.dot(n,l); // cos(theta)
// Check if the surface point is in shadow if (lambert > 0) {
Vector3D poffset; if (kd > 0) {
poffset = new Vector3D(p.x+TINY*l.x, p.y+TINY*l.y, p.z+TINY*l.z); float diffuse = kd*lambert;
Ray shadowRay = new Ray(poffset, l); r += diffuse*ir*light.ir;
if (shadowRay.trace(objects)) g += diffuse*ig*light.ig;
break; // go to next light source b += diffuse*ib*light.ib;
}
if (ks > 0) {
lambert *= 2;
float spec = v.dot(lambert*n.x - l.x,
Note: this treats ANY object as a shadower, including transparent lambert*n.y - l.y,
objects! Could compute product of transmission coefficients if (spec > 0) {
lambert*n.z - l.z);
of intervening objects as a better approximation. spec = ks*((float) Math.pow((double) spec, (double) ns));
r += spec*light.ir;
Note: TINY offset to avoid self-shadowing g += spec*light.ig;
b += spec*light.ib;
}
}
}
}
7
Surface Shader (cont) Surface Shader (at last)
// Compute illumination due to reflection
if (kr > 0) {
float t = v.dot(n); if (kt > 0) {
if (t > 0) { // Add refraction code here
t *= 2; // Project 5!
Vector3D reflect = new Vector3D(t*n.x - v.x,
}
t*n.y - v.y,
t*n.z - v.z);
r = (r > 1f) ? 1f : r;
Vector3D poffset = new Vector3D(p.x + TINY*reflect.x,
p.y + TINY*reflect.y, g = (g > 1f) ? 1f : g;
p.z + TINY*reflect.z); b = (b > 1f) ? 1f : b;
Ray reflectedRay = new Ray(poffset, reflect); return new Color(r, g, b);
}
if (reflectedRay.trace(objects)) {
}
Color rcolor = reflectedRay.Shade(lights, objects, bgnd);
r += kr*rcolor.getRed();
g += kr*rcolor.getGreen();
b += kr*rcolor.getBlue();
} else {
r += kr*bgnd.getRed();
g += kr*bgnd.getGreen();
b += kr*bgnd.getBlue();
}
}
}
Ray Tracer Display List Parser

public class RayTrace {
Vector objectList, lightList; That's basically all we need to
The applet uses a simple parser similar to the many that we have seen to
Color background = new Color(0,0,0); write a ray tracer. Compared this point. I will spare you the details, but here is an example input file:
Image screen;
Graphics gc; to a graphics pipeline the code
eye 0 3 10
int height, width; is very simple and easy to lookat 0 -1 0
surface 0.7 0.2 0.2
0.5 0.4 0.2 3.0
boolean viewSet = false;
Vector3D Eye, Du, Dv, Vp; understand. up 0 1 0 0.0 0.0 1.0
fov 30 sphere -1 -3 -2 1.5
background 0.2 0.8 0.9 sphere 1 -3 -2 1.5
public RayTrace(Vector objects, Vector lights, Image scr); light 1 1 1 ambient sphere -2 -3 -1 1.5
public void setBackground(Color bgnd); light 1 1 1 directional -1 -2 -1 sphere 0 -3 -1 1.5
public Image getScreen(); light 0.5 0.5 0.5 point -1 2 -1 sphere 2 -3 -1 1.5
public void setView(Vector3D eye, Vector3D lookat, Vector3D up, float fov); surface 0.7 0.2 0.8 sphere -1 -3 0 1.5
0.5 0.4 0.2 10.0
sphere 1 -3 0 1.5
0.0 0.0 1.0
public void renderPixel(int i, int j) { sphere -2 -3 -2 1.5 sphere -2 -3 1 1.5
Vector3D dir = new Vector3D(i*Du.x + j*Dv.x + Vp.x, sphere 0 -3 -2 1.5 sphere 0 -3 1 1.5
i*Du.y + j*Dv.y + Vp.y, sphere 2 -3 -2 1.5 sphere 2 -3 1 1.5
i*Du.z + j*Dv.z + Vp.z); sphere -1 -3 -1 1.5 sphere -1 -3 2 1.5
Ray ray = new Ray(Eye, dir); sphere 1 -3 -1 1.5 sphere 1 -3 2 1.50.0 0.0 1.0
if (ray.trace(objectList)) { sphere -2 -3 0 1.5
gc.setColor(ray.Shade(lightList, objectList, background)); sphere 0 -3 0 1.5 surface 0.4 0.4 0.4
} else { sphere 2 -3 0 1.5 0.1 0.1 0.6 100.0
0.8 0.0 1.0
gc.setColor(background); sphere -1 -3 1 1.5
sphere 1 -3 1 1.5 sphere 0 0 0 1
} sphere -2 -3 2 1.5
gc.drawLine(i, j, i, j); // oh well, it works. sphere 0 -3 2 1.5
} sphere 2 -3 2 1.5
public void renderScanLine(int j);

public void renderScreen();
}
8
Acceleration Methods
Example
The rendering time for a ray tracer depends on the number of ray
intersection tests that are required at each pixel. This is roughly
Advantages of Ray Tracing: dependent on the number of primitives in the scene times the number
Link to applet of pixels. Early on, significant research effort was spent developing
Improved realism over the graphics
method for accelerating the ray-object intersection tests.
pipeline
We've already discussed object-dependent optimizations to speed up
Shadows the sphere-ray intersection test. But, more advanced methods are
Disadvantages:
Reflections required to make ray tracing practical.
Very slow per pixel calculations Among the important results in this area are:
Transparency
Only approximates full global Bounding Volumes
illumination Higher level rendering primitives Spatial Subdivision
Very simple design Light (Shadow) Buffers

Hard to accelerate with special-
purpose H/W
Spatial Subdivision Bounding Volumes

Idea: Divide space in to subregions Enclose complex objects within a simple-to-intersect objects. If the ray
Place objects within a subregion into a list does not intersect the simple object then its contents can be ignored. If
Only traverse the lists of subregions that the ray passes through the ray does intersect the bounding volume it may or may not intersect
Must avoid performing intersections twice if an object falls into
the enclosed object. The likelihood that it will strike the object depends
more than one region on how tightly the volume surrounds the object.
BSP-Trees can be applied here
Spheres were one of the first
bounding volumes used in raytracing,
because of their simple ray-intesection
and the fact that only one is required
to enclose a volume.
However, spheres do not usually give a

very tight fitting bounding volume. More
Frequently axis-aligned bounding boxes are
used. Clearly, hierarchical or nested bounding
volumes can be used for even grater advantage.
9
Shadow Buffers Constructive Solid-Geometry Methods
A significant portion of the object-ray intersections are used to compute
shadow rays.
(CSG)
Idea:
Another modeling technique is to combine the volumes occupied by overlapping
Enclose each light source with a cube 3D shapes using set operations. This creates a new volume by applying the
Subdivide each face of the cube and determine the potentially union, intersection, or difference operation to two volumes.
visible objects that could projected into each subregion
Keep a list of objects at each subdivision cell
intersection difference union
A CSG Tree Representation Ray Tracing CSG

Build a list of times at which ray enters and exits the object at the leaves.
Work from the leaves to the root combining the lists at each node using
the specified operation at the node.
Choose first intersection time on the list that is in front of the eye.
A B
A
B
A B
A B Need to flip normals for B intersections
A B
t0 t1 t2 t3
10
Model Transformations Aliasing
Use generic objects, e.g. unit sphere centered at origin Using only a single sample for each
Attach an affine transformation M to each object that maps points on Pixel
generic object into world coordinates. Reflection
To intersect object with ray: Transmission
Map the ray into the objects frame, using M . Remember that ray is
-1
Frame time
made up of a point (origin) and a vector (direction). The point will be Eye point
affected by translation but not the direction.
All of these can cause forms of aliasing
Intersect transformed ray with the generic object
The intersection time found for the transformed ray and generic object is
the same as that of the original ray and the transformed object! This is Can use additional sampling (and filtering) to ameliorate the effects, e.g.
easy to believe for Euclidean transformations but it also applies to Affine distributed ray-tracing.
transformations such as scaling and skew.
Ray Tracing vs. Photon Tracing

Improved Illumination
Ray Tracing handles many global illumination cases, but it does not handle
every one.
Specular-to-specular
Specular-to-diffuse
Diffuse-to-diffuse
Diffuse-to-specular
Caustics (focused light)
L [D] S* E L [D | S]* E
11
Next Time
Lecture 17 Slide 47 6.837 Fall 2001
12
Texture-Mapping Tricks Texture Mapping Modes
Label textures
Projective textures
Combining Textures Environment maps
Filtering Textures Shadow maps
Textures and Shading
Bump Mapping
Solid Textures
The Best of All Worlds Multipass vs. Multitexture

All these texture mapping modes are great!
The problem is, no one of them does everything well. Multipass (the old way) - Render the image in multiple passes, and "add"
the results.
Suppose we allowed several textures to be applied to each primitive
during rasterization. Multitexture - Make multiple texture accesses within the rasterizing loop
and "blend" results.
Blending approaches:
Texture modulation
Alpha Attenuation
Additive textures
Weird modes
1
Texture Mapping in Quake Sampling Texture Maps
Quake uses light maps in addition to texture maps. Texture maps are used When texture mapping it is rare that the screen-space sampling density
to add detail to surfaces, and light maps are used to store pre-computed matches the sampling density of the texture. Typically one of two things
illumination. The two are multiplied together at run-time, and cached for can occur:
efficiency.
Texture Light Maps

Maps
Data RGB Intensity
Instanced Yes No
Resolution High Low
Light map image

by Nick Chirkov
Oversampling of the texture or Undersampling of the texture
In the case of oversampling we already know what to do...

Interpolation (review on Antialiasing and Resampling). But, how do
we handle undersampling?
How Bad Does it Look? We've Seen this Sort of Thing Before
Let's take a look at what undersampling looks like: Remember... Aliasing?
Notice how details in the texture, in particular the mortar between This was the phenomenon that occurred when we undersampled a
the bricks, tend to pop (disappear and reappear). signal. It caused certain high frequency features to appear as low
frequencies.
This popping is most noticeable around details (parts of the texture
with a high-spatial frequency). This is indicative of aliasing (high-
frequency details showing up in areas where we expect to see low
frequencies).
To eliminate aliasing we had to either band limit (low pass filter) our input
signal or sample it at a higher rate:
2
Spatial Filtering MIP Mapping
MIP Mapping is one popular technique for precomputing and performing this prefiltering. MIP is
In order to get the sort of images the we expect, we must prefilter the an acronym for the latin phrase multium in parvo, which means "many in a small place". The
texture to remove the high frequencies that show up as artifacts in the technique was first described by Lance Williams. The basic idea is to construct a pyramid of
final rendering. The prefiltering required in the undersampling case is images that are prefiltered and resampled at sampling frequencies that are a binary fractions
basically a spatial integration over the extent of the sample. (1/2, 1/4, 1/8, etc) of the original image's sampling.
While rasterizing we compute the index of the

decimated image that is sampled at a rate
closest to the density of our desired sampling
rate (rather than picking the closest one can in
also interpolate between pyramid levels).
We could perform this filtering while texture mapping (during

rasterization), by keeping track of the area enclosed by
sequential samples and performing the integration as required.
However, this would be expensive. The most common solution to Computing this series of filtered images requires only a small fraction of addtional storage
over the original texture (How small of a fraction?).
undersampling is to perform prefiltering prior to rendering.
Storing MIP Maps Finding the MIP level

One convenient method of storing a MIP map is shown below. (It also nicely
What we'd like to find is the step size that a uniform step in screen-space
illustrates the 1/3 overhead of maintaining the MIP map).
causes in three-space, or, in other words how a screen-space change relates to
a 3-space change. This sounds like the derivatives, ( du/dt, dv/dt ). They can
be computed simply using the chain rule:
Notice that the term being squared under the numerator is just the w plane
equation that we are already computing. The remaining terms are constant for a
given rasterization. Thus all we need to do to compute the derivative is a square
We must make a few small modifications to
the w accumulator and multiply it by a couple of constants.
our rasterizer to compute the MIP map level.
Recall the equations that we derived for Now, we know how a step in screen-space relates to a step in 3-space. So how do
mapping screen-space interpolants to their 3- we translate this to an index into our MIP table?
space equivalent.
3
MIP Indices Summed-Area Tables
There are other approaches to computing this prefiltering integration on the fly. One,
Actually, you have a choice of ways to translate this gradient value into a MIP
which was introduced by Frank Crow is called a summed-area table. Basically, a summed-
level. area table is a tabularized two-dimensional cumulative distribution function. Imagine having a
2-D table of numbers the cumulative distribution function could be found as shown below.
This also brings up one of the shortcomings of MIP mapping. MIP mapping assumes
that both the u and v components of the texture index are undergoing a uniform
scaling, while in fact the terms du/dt and dv/dt are relatively independent. Thus,
we must make some sort of compromise. Two of the most common approaches are
given below:
To find the sum of region contained in a box bounded by (x0, y0) and (x1, y1):
T(x1, y1) - T(x0, y1) - T(x1, y0) + T(x0, y0)
This approach can be used to compute the integration of pixels that lie under
a pixel by dividing the resulting sum by the area of the rectangle,
(y1 - y0)(x1 - x0).
The differences between these level selection methods is illustrated by the

With a little more work you can compute the area under any four-sided
accompanying figure. polygon (How?).
Summed-Area Tables Phototextures

To this point we've only used textures as labels over geometry.
How much storage does a summed-area table require?
Their applications are much broader, however.
Does it require more or less work per pixel than a MIP map?
Simple extensions include:
What sort of low-pass filter does a summed-area table represent? Spatially varying surface properties:
The diffuse shading coefficient, kd, could be stored as a texture.
What do you remember about this sort of filter?
Likewise for the intrinsic color, ka, ks, and nshiny.
Textures can also be used in a lot of other ways
No filtering MIP mapping Summed-Area Table
These nice images were originally grabbed from a link on the http://www.gris.unituebingen.de/ web page.
4
Adding Texture Mapping to Illumination Bump Mapping
Texture mapping can be used to alter some or all of the constants in the Textures can be used to alter the surface normal of an object. This does not change the actual
shape of the surface -- we are only shading it as if it were a different shape! This technique is
illumination equation. We can simply use the texture as the final color for the pixel,
called bump mapping. The texture map is treated as a single-valued height function. The
or we can just use it as diffuse color, or we can use the texture to alter the normal, value of the function is not actually used, just its partial derivatives. The partial derivatives tell
or... the possibilities are endless! how to alter the true surface normal at each point on the surface to make the object appear
as if it were deformed by the height function.
Since the actual shape of the object does not change, the silhouette edge of the object will
not change. Bump Mapping also assumes that the Illumination model is applied at every pixel
(as in Phong Shading or ray tracing).
Phong's Illumination Model
Constant Diffuse Color Diffuse Texture Color Texture used as Label Texture used as Diffuse Color Swirly Bump Map
Sphere w/Diffuse Texture & Bump Map

Sphere w/Diffuse Texture
Bump mapping v
N
Bump mapping derivation 0
v v v
v v v B(u, v) N v v Bu N BN u
P = [ x(u, v), y (u, v), z (u, v)]T Pu = Pu + v + v
v
N v P = P + v
v v v
Pv
N N N
N = Pu Pv 0
v
v v
N Pu
v v
v v B(u , v) N v Assume B is very small... v v B N BN
P = P + v
v
D v v
Pu
v v v Pv = Pv + vv + v v
N N Pv
N = Pu Pv N N
v v v v v v v v v v
v v Bu (N Pv ) Bv (N Pu ) v v v B ( N P ) B ( P N ) Bu Bv ( N N )
N Pu Pv + u v v + v uv +
N N + v B ( s , t ) B ( s + , t ) N N
v 2
N Bu = N
2
1444 42 v
4444 3 B ( s, t ) B ( s, t + ) v v v v v v v v v
D Bv = But Pu Pv = N , Pu N = N Pu and N N = 0 so
2
v v v v
v v Bu ( N Pv ) Bv ( N Pu )
Compute bump map partials
by numerical differentiation N N + v v
N N
5
More Bump Map Examples One More Bump Map Example
Bump Map
Notice that the shadow boundaries remain unchanged.

Cylinder w/Diffuse Texture Map Cylinder w/Texture Map & Bump Map
Displacement Mapping Displacement Mapping Example

We use the texture map to actually move the surface point. This is called
displacement mapping. How is this fundamentally different than bump It is possible to use displacement maps
mapping? when ray tracing.
Image from
Geometry Caching for
Ray-Tracing Displacement Maps
by Matt Pharr and Pat Hanrahan.
The geometry must be displaced before visibility is determined. Is this

easily done in the graphics pipeline? In a ray-tracer?
6
Another Displacement Mapping Example Three Dimensional or Solid Textures
The textures that we have discussed to this
point are two-dimensional functions mapped
onto two-dimensional surfaces. Another
approach is to consider a texture as a
function defined over a three-dimensional
surface. Textures of this type are called solid
textures.
Solid textures are very effective at
representing some types of materials such as
marble and wood. Generally, solid textures
are defined procedural functionsrather than
tabularized or sampled functions as used in
2-D (Any guesses why?)
The approach that we will explore is based

on An Image Synthesizer, by Ken Perlin,
SIGGRAPH '85.
The vase to the right is from this paper.
Image from Ken Musgrave
Noise and Turbulence Interpolating Noise

When we say we want to create an "interesting" texture, we usually don't
To calculate the noise value of any point in space, we first determine
care exactly what it looks like -- we're only concerned with the overall
appearance. We want to add random variations to our texture, but in a which cube of the lattice the point is in. Next, we interpolate the desired
controlled way. Noise and turbulence are very useful tools for doing just value using the 8 corners of the cube:
that.
A noise function is a continuous function that varies throughout space at

a uniform frequency. To create a simple noise function, consider a 3D
lattice, with a random value assigned to each triple of integer
coordinates:
Trilinear interpolation is illustrated above. Higher-order interpolation can

also be used.
7
Evaluating Noise Turbulence
Since noise is a 3D function, we can evaluate it at any point we want. Noise is a good start, but it looks pretty ugly all by itself. We can use noise
We don't have to worry about about mapping the noise to the object, to make a more interesting function called turbulence. A simple turbulence
we just use (x, y, z) at each point as our 3D texture coordinates! It is as function can be computed by summing many different frequencies of noise
if we are carving our object out of a big block of noise. functions:
One Frequency Two Frequencies Three Frequencies Four Frequencies
Original Object Trilinear Noise Triquadratic Noise

Now we're getting somewhere. But even turbulence is rarely used all
by itself. We can use turbulence to build even more fancy 3D
textures...
Marble Example Next Time - Radiosity
We can use turbulence to generate beautiful 3D

marble textures, such as the marble vase created by
Ken Perlin. The idea is simple. We fill space with
black and white stripes, using a sine wave function.
Then we use turbulence at each point to distort those
planes.
By varying the frequency of the sin function,
you get a few thick veins, or many thin veins. Varying
the amplitude of the turbulence function controls how
distorted the veins will be.
Marble = sin(f * (x + A*Turb(x,y,z)))

6.837 Lecture 1

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

6.837 Lecture 1

Diunggah oleh

Hak Cipta:

Format Tersedia

Lecture 1 --- 6.

837 Fall '01

Lecture 1 Outline 6.837 Fall '01

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/index.html [9/7/2001 7:16:59 PM]

6.837 - Principles of Computer Graphics

About this Course

Lecture 1 Slide 1 6.837 Fall '01

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide01.html [9/7/2001 7:18:11 PM]

Lecture 1 Slide 2 6.837 Fall '01

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide02.html [9/7/2001 7:19:46 PM]

Ugh... sounds like Computer Science

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide03.html [9/7/2001 7:19:49 PM]

Computer Graphics is about Movies!

If you can imagine it, it can be done with computer graphics.

Obviously, Hollywood has caught on to this. Each summer,

The entertainment industry plays many other important roles

Lecture 1 Slide 4 6.837 Fall '01

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide04.html [9/7/2001 7:19:52 PM]

Games are okay here!

How the game's industry impacts computer graphics

Lecture 1 Slide 5 6.837 Fall '01

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide05.html [9/7/2001 7:19:54 PM]

How medical applications influence computer graphics technology

Lecture 1 Slide 6 6.837 Fall '01

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide06.html [9/7/2001 7:19:55 PM]

Computer Aided Design

CAD has had the follow impact on computer graphics.

Lecture 1 Slide 7 6.837 Fall '01

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide07.html [9/7/2001 7:19:57 PM]

Lecture 1 Slide 8 6.837 Fall '01

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide08.html [9/7/2001 7:19:58 PM]

Graphical User Interfaces (GUIs)

Lecture 1 Slide 9 6.837 Fall '01

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide09.html [9/7/2001 7:20:00 PM]

Cathode Ray Tubes (CRTs)

Most common display device today

Lecture 1 Slide 10 6.837 Fall '01

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide10.html (1 of 2) [9/7/2001 7:20:02 PM]

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide10.html (2 of 2) [9/7/2001 7:20:02 PM]

Lecture 1 Slide 11 6.837 Fall '01

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide11.html (1 of 2) [9/7/2001 7:20:03 PM]

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide11.html (2 of 2) [9/7/2001 7:20:03 PM]

TV boomed in the 50s and early 60s

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide12.html (1 of 2) [9/7/2001 7:20:12 PM]

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide12.html (2 of 2) [9/7/2001 7:20:12 PM]

Raster Display Simulation

In a raster display the path of the electron beam is

Lecture 1 Slide 13 6.837 Fall '01

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide13.html (1 of 2) [9/7/2001 7:20:17 PM]

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide13.html (2 of 2) [9/7/2001 7:20:17 PM]

Lecture 1 Slide 14 6.837 Fall '01

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide14.html [9/7/2001 7:20:24 PM]

Bright light-emitting display technology

The Scoop on CRTs

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide15.html (2 of 2) [9/7/2001 7:20:26 PM]

Liquid Crystal Displays (LCDs)

The LCD's transition between crystalline

Lecture 1 Slide 16 6.837 Fall '01

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide16.html (1 of 2) [9/7/2001 7:21:50 PM]

http://www.graphics.lcs.mit.edu/classes/6.837/F01/Lecture01/Slide16.html (2 of 2) [9/7/2001 7:21:50 PM]

Reflective and Backlit LCDs

Lecture 1 Slide 17 6.837 Fall '01