1. Software System Components I
Graphics
Software System Components I
2009
Volker Sorge
Office: 207
SSC1. V. Sorge 2009

2. Administrative Stuff
As usual, we cover the theory of CG, as well as the details of how to make it work in JAVA
The theory will be covered in the exam
The practical—writing JAVA programs to create images—will be examined via continuous assessment
Worth 40% of the continuous assessment this term
The continuous assessment will be due 11am on Friday 20th November
Details of the exercise to follow next week
SSC1. V. Sorge 2009

3. Lecture Topics Introduction to Java2D Coordinate systems
Drawing lines and shapes
Rendering
Modelling and Geometry for 2D Graphics
Graphics on screen
Modelling objects
Affine transformations and Linear Algebra
Images and Colour
Colour Spaces
Image representations and manipulations
Brief look at 3D Graphics
Ray tracing
Constructive solid geometry
SSC1. V. Sorge 2009

4. Introduction What is Computer Graphics?
The creation, storage, and manipulation of models and images
Models may be anything: mathematical, physical, art, etc.
Two main ways we think about graphics:
Sample-based graphics
Based on colours of pixels
E.g. photographs, stuff produced with photoshop, GIMP, etc.
Geometry-based graphics
Geometric model of object built
Rendering (sampling for visualisation) done as a separate step
E.g. Adobe illustrator, CorelDraw, CAD, Alias/Wavefront/Maya
SSC1. V. Sorge 2009

5. Important Terms
Modelling: The way graphical objects are actually represented in the computer
Rendering: The way they appear on the graphical device
These distinctions are important for geometry-based graphics. For sample-based graphics, they are the same.
Most obvious distinction: A 3D model obviously cannot be rendered accurately to a 2D screen. Producing an image from a 3D model clearly requires rendering.
We will concentrate on geometry-based graphics
SSC1. V. Sorge 2009

6. Drawing 2D Graphics in Java
Need somewhere to draw the graphics
Usually create a subclass of JPanel to hold the drawn objects
Use PaintComponent() method of new class to actually draw the objects
Need a ‘graphics context’ to do the actual drawing
For compatibility, this is of type Graphics, but we’re going to use Graphics2D so we need to typecast it
Need some objects to draw
Lines
Rectangles …
SSC1. V. Sorge 2009

7. Java2D Simple Program Window handling Graphics primitives
import javax.swing.*;
import java.awt.*;
import java.awt.geom.*;
import java.awt.event.*;
public class TwoDexample extends JPanel {
public void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D)g;
Line2D line = new Line2D.Double(10,10,40,40);
g2.setColor(Color.red);
g2.setStroke(new BasicStroke(5));
g2.draw(line);
Rectangle2D rect = new Rectangle2D.Double(20,20,40,40);
g2.setColor(Color.green);
g2.fill(rect);
Rectangle2D rect2 = new Rectangle2D.Double(40,40,100,100);
g2.setColor(Color.blue);
g2.draw(rect2); } …
Window handling
Graphics primitives
Actually draw the
stuff on the screen
SSC1. V. Sorge 2009

8. Java2D Simple Program ctd
public static void main(String[] args) {
JFrame frame = new JFrame("Drawing");
frame.setSize(200,200);
frame.setContentPane(new TwoDexample());
frame.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e) { System.exit(0); }
});
frame.setVisible(true); }
Line2D line = new Line2D.Double(10,10,40,40);
g2.setColor(Color.red);
g2.draw(line);
Rectangle2D rect = new Rectangle2D.Double(20,20,40,40);
g2.setColor(Color.green);
g2.fill(rect);
Rectangle2D rect2 = new Rectangle2D.Double(40,40,100,100);
g2.setColor(Color.blue);
g2.draw(rect2);
Set up the window
(JFrame).
paintComponent knows how
to paint the contents of
the window
SSC1. V. Sorge 2009

9. Common Features of Programs
Import the necessary packages
Perform the drawing in the paint method for the frame
Use Graphics2D rather than Graphics because it has more functionality
Create the shapes to render
Set the attributes (line width, colour, etc.) on the Graphics2D object
Draw the shapes using draw or fill
draw(Shape s) produces the outline of the object
fill(Shape s) produces a filled version of s
SSC1. V. Sorge 2009

10. Coordinates
Coordinate systems are ways to assign numerical values to uniquely identify points in space
The Cartesian system uses an origin and two perpendicular axes.
Points are associated with the distance to each axis
In Java, coordinates start at top left
(1,3 )
(3,1 )
0,0
(-3,- 1)
100,50
SSC1. V. Sorge 2009

11. Java2d Graphics Graphics Context
Each JPanel has its own Graphics context
Elements are drawn one after the other
Drawing is done with a “single pen”
Drawing colour, stroke width, etc. are given as global instructions to the pen
Point2D class
The basic drawing object is a point
Points are can not be drawn themselves
However, they form the bases of all drawable shapes
Constructors with single or double precision coordinates
Point2D.Float(x,y), Point2D.Double(x,y)
Two methods to measure distance to other points
distance(point), distanceSq(point)
SSC1. V. Sorge 2009

12. Java2d Graphics Objects
We’ve already seen rectangles and lines, but Java2d contains many other useful object types
Shapes are the basic objects we can draw
There are different type of shapes
1D Shapes: Lines, Arcs, Curves
Polygonal Shapes: Rectangles, Ellipses, Polygons
Areas: Filled polygonal shapes
Some standard methods are
contains(point): Tests if the point is inside the shape
getBounds(): Returns the bounding box of that shape
SSC1. V. Sorge 2009

13. Java2d Shapes
Many shapes come in two classes reflecting the precision of their coordinates
Example: Line2D.Float(x,y), Line2D.Double(x,y)
Both are combined into one abstract superclass
Rectangle2D is the abstract class
Rectangle2D.Double is a nested subclass where all coordinates are doubles
There is also a Rectangle2D.Float subclass
Floats are smaller and therefore faster to process—useful for intensive graphics applications
You have to cast EVERY number to a float as Java assumes all numbers are doubles by default
We’ll use the .Double subclass exclusively here
Rectangle2D rect = new Rectangle2D.Double(-40,-40,80,80);
SSC1. V. Sorge 2009

14. Rectangle Methods void add(double newx, double newy)
Adds a point to this Rectangle2D. The resulting Rectangle2D is the smallest Rectangle2D that contains both the original Rectangle2D and the specified point
boolean contains(double x, double y)
Tests if a specified coordinate is inside the boundary of this Rectangle2D
abstract void setRect(double x, double y, double w, double h)
Sets the location and size of this Rectangle2D to the specified double values
SSC1. V. Sorge 2009

15. Ellipses and RoundRectangles
These are closely related to rectangles and have many of the same methods
Constructors:
Ellipse2D.Double(double x, double y, double w, double h)
Constructs and initializes an Ellipse2D from the specified coordinates
RoundRectangle2D.Double(double x, double y, double w, double h, double arcw, double arch)
Constructs and initializes a RoundRectangle2D from the specified coordinates
Arcw and arch govern the width and heights of the arcs used to round off the corners
SSC1. V. Sorge 2009

16. Ellipses continued
Note that as with rectangles, the coordinates are the top left corner, plus the width and height of the object
For ellipses, this is a bit of a pain, as what you often want is the centre and two radii.
All these shapes inherit from RectangularShape, which includes the ever useful:
void setFrameFromCenter(double centerX, double centerY, double cornerX, double cornerY)
Sets the framing rectangle of this Shape based on the specified center point coordinates and corner point coordinates
SSC1. V. Sorge 2009

17. Polygon Objects
The polygon class is used for any closed 2D region, bounded by an arbitrary number of line segments
Stored internally as a list of (x,y) coordinate pairs, where each pair represents a vertex of the polygon, and adjacent pairs are the ends of line segments.
Java2D Constructor:
Polygon(int[] xpoints, int[] ypoints, int npoints)
xpoints - an array of x coordinates
ypoints - an array of y coordinates
npoints - the total number of points in the Polygon
SSC1. V. Sorge 2009

18. Polygon Methods Useful methods: void addPoint(int x, int y)
Appends the specified coordinates to this Polygon
boolean contains(double x, double y)
Determines if the specified coordinates are inside this Polygon
Rectangle getBounds()
Gets the bounding box of this Polygon. The bounding box is the smallest Rectangle whose sides are parallel to the x and y axes of the coordinate space, and can completely contain the Polygon
SSC1. V. Sorge 2009

19. Arcs and Curves
QuadCurve2D class represents a quadratic parametric curve segment: q.setCurve(x1, y1, ctrlx, ctrly, x2, y2); (x1,y1),(x2,y2) are start and end points (ctrlx,ctrly) is an intermediate control point
CubicCurve2D class represents a cubic parametric curve segment: c.setCurve(x1, y1, ctrlx1, ctrly1, ctrlx2, ctrly2, x2, y2); We need a second control point
Arc2D class draws a piece of an ellipses
Specify centre coordinates
Width and height
Start and end angle of segment
Type: Open, Pie or Chord
Arc2D.Double(x, y,rectwidth,rectheight,90, 135,Arc2D.OPEN)
SSC1. V. Sorge 2009

20. Areas = -
Areas are used to represent arbitrary shapes constructed using constructive area geometry (CAG)
CAG starts with area-enclosing shapes (rectangles, ellipses, polygons, etc)
Allows you to add, subtract, intersect, or XOR them to create new areas
SSC1. V. Sorge 2009

21. Area Methods Constructors: Area()
Default constructor which creates an empty area
Area(Shape s)
Useful Methods:
void add(Area rhs)
Adds the shape of the specified Area to the shape of this Area Addition is achieved through union
void subtract(Area rhs)
void intersect(Area rhs)
void reset()
Removes all of the geometry from this Area and restores it to an empty area
SSC1. V. Sorge 2009

22. Usage
We use areas by creating one, then defining the objects we want to manipulate, and adding/subtracting/etc. them to the area:
CAG has an equivalent in 3d graphics: Constructive Solid Geometry
Very commonly used in animation to build 3d characters
Ellipse2d ellipse = new Ellipse2D.Double(-60,-30,120,90);
Rectangle2D rect = new Rectangle2D.Double(-40,-40,80,80);
Area a = new Area(ellipse);
a.subtract(new Area(rect));
SSC1. V. Sorge 2009

23. CSG
Luxo and Luxo Jr. are made of simple 3d shapes stuck together using CSG
3d rectangles and cylinders
2d shapes ‘swept’ to make 3d objects
SSC1. V. Sorge 2009

24. Rendering Shapes
Java2D gives you a lot of control about how these shapes appear on the screen
You’ve already seen transformations
We’ve also used colours and fills in our example programs
You can also set the paint, stroke, font, clipping space, ‘rendering hints’, compositing rule, etc.
SSC1. V. Sorge 2009

25. Paint
We’ve already seen setColor, but there are a lot more sophisticated things to do with paint
A paint can be a single colour, a gradient colour, or a pattern
You can create your own paint classes, but they must implement the java.awt.Paint interface
The following implementations are available:
Java.awt.Color
All Color objects implement the Paint interface, so you can just paint with a single colour
Rectangle2D rect2 = new Rectangle2D.Double(40,40,100,100);
g2.setColor(Color.blue);
g2.draw(rect2);
SSC1. V. Sorge 2009

26. Paint Implementations ctd
java.awt.GradientPaint
This fills an area with a colour gradient
You specify two coordinates and two colours
The graphics engine smoothly interpolates between the two colours across the region between the two points
java.awt.TexturePaint
This uses a tiled image to fill the shape
You define the image using a java.awt.image.BufferedImage, and a rectangle2D
The graphics engine maps the image into the rectangle (scaling, etc. if necessary) and then tiles the rectangle across the shape to be painted
SSC1. V. Sorge 2009

27. Painting an Area Example of using area objects and gradient maps:
Ellipse2D ell = new Ellipse2D.Double(-60,-30,120,100);
g2.draw(ell);
Rectangle2D rect = new Rectangle2D.Double(-40,-40,80,80);
g2.setColor(Color.green);
g2.fill(rect);
Area a = new Area(ell);
a.subtract(new Area(rect));
t.setToTranslation(-40,-40);
g2.transform(t);
g2.setPaint(new GradientPaint(-5,0,Color.blue, 5,5,Color.yellow, true));
g2.fill(a);
SSC1. V. Sorge 2009

28. Stroke
The stroke determines how lines, and the edges of shapes are drawn
Arguments are:
Stroke width
End cap style
CAP_BUTT, _SQUARE, _ROUND
Join style
JOIN_BEVEL, _MITER, _ROUND
Miter limit
Dash pattern
Dash phase
Rectangle2D rect = new Rectangle2D.Double(40,40,100,100);
g2.setStroke(new BasicStroke(5.0f, BasicStroke.CAP_ROUND, BasicStroke.JOIN_MITRE, 15.0f, new float[] {10.0,10.0}, 5.0);
g2.draw(rect);
SSC1. V. Sorge 2009

29. Stroke Arguments End cap style: CAP_BUTT CAP_SQUARE CAP_ROUND
Join styles
JOIN_BEVEL
JOIN_MITER
JOIN_ROUND
Miter limit
Prevents ridiculously long miters if the angle between two lines is very small
Dash pattern
Array contains length of first dash, then length of first gap, …
SSC1. V. Sorge 2009

30. Rendering Hints
Rendering hints are used to control quality and speed of output
Each hint can be set individually using:
You can set lots of options. The main ones are:
Antialiasing--default, on, or off
Color rendering-default, quality, or speed
Dithering--default, disable, or enable
Rendering--default, quality, or speed
Text antialiasing--default, on, or off
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
SSC1. V. Sorge 2009

31. Rendering Hints in Action
Rectangle2D rect = new Rectangle2D.Double(-20,-20,40,40);
g2.draw(rect);
t.setToTranslation(5,5);
g2.transform(t);
g2.setRenderingHint(
RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
SSC1. V. Sorge 2009

32. Rendering Most common graphics device is a screen
Organised as a raster of pixels:
On-screen rendering is done by assigning colours to the pixels in the raster
An image is simply a 2D array of pixel colour values
SSC1. V. Sorge 2009

33. 2D Graphics Pipeline Pipeline is process by which models become images
Window is area of image to be displayed
Viewport is the bit of screen to display it on
Clipping is removing the parts of the image that won’t be displayed
Rasterising is deciding the colour of actual pixels
Mathematical
model of scene
in world
coordinates
Rasterise
graphics
primitives
to pixels
Clip scene to
window
Map scene to
viewport
SSC1. V. Sorge 2009

34. Clipping: The Basics Clipping used to avoid drawing outside the device
Can specify lines in the model outside the window
Need to confine the geometry to the clipping region
Clipping region could be arbitrary, but frequently a rectangle (e.g. normal graphics window)
How?
Use off-screen bitmap
Rasterise to bitmap, copy to screen
Allows arbitrary clipping regions
Analytic clipping
Calculate parts of primitives in clipping region
Simple and fasts for points, line segments
SSC1. V. Sorge 2009

35. Analytic Clipping Simplest idea: C lip by each boundary in turn
Points:
Easy for rectangular clipping regions
Just test if x >= xmin, x <= xmax, y >= ymin, y <= ymax
Lines (clipping against a single boundary):
If both endpoints inside, accept whole line
If one end outside
Compute intersection of line with clipping boundary
Replace ‘outside point’ with intersection point
If both outside, reject line
SSC1. V. Sorge 2009

36. Clipping Polygons Again, clip by each boundary in turn
Simple algorithm:
Write vertices in order
For each pair of vertices, use the following table:
No points
Outside
Intersection and second point
Inside
Intersection point
Second point
Use
2nd point
1st point
SSC1. V. Sorge 2009

37. Clipping in Action Step 1 Left Step 4 Top Step 2 Bottom Step 3 Right
No points
Outside
Intersection and second point
Inside
Intersection point
Second point
Use
2nd point
1st point
SSC1. V. Sorge 2009

38. Rasterising Lines
Drawing lines on a raster grid involves approximation
What’s the best way to draw a line from pixel (x1,y1) to pixel (x2,y2)?
Line should be
Straight
Pass through endpoints
Uniform brightness
Have no gaps
Algorithm should be efficient
Rasterisation also known as scan-conversion
SSC1. V. Sorge 2009

39. Simple Algorithm y = y1 + (x - x1) * (y2 - y1) / (x2 – x1)
drawLine(x1,y1,x2,y2)
For x = x1 to x2 do
y = y1 + (x - x1) * (y2 - y1) / (x2 – x1)
setPixel(x, round(y))
Endfor
(y2 - y1) / (x2 – x1) =
x = 1, y = 1
x = 2, y = 1.333
x = 3, y = 1.666
x = 4, y = 2
x = 5, y = 2.333
x = 6, y = 2.666
x = 7, y = 3
(3,6 )
(1,1 )
(y2 - y1) / (x2 – x1) = 2.5
x = 1, y = 1
x = 2, y = 3.5
x = 3, y = 6
(7,3 )
(1,1 )
SSC1. V. Sorge 2009

40. Better: Midpoint Algorithm
Midpoint Algorithm uses only integer calculations
Line drawing is a sequence of decisions
For each pixel drawn, either the next pixel is the one to the ‘east’, or the one to the ‘northeast’
Obviously again, we need to modify the algorithm for lines of gradient > 1 E NE E E
Midpoin t NE E
SSC1. V. Sorge 2009

41. Rasterising Circles Lots of ways to do it
Circles often represented as a large number of straight lines
Rasterise each line individually
Version of midpoint algorithm for circles as well
After drawing each pixel, calculate whether the next one should be straight or diagonal
To make the circle ‘look round’, must use the same rule in opposite directions
Rounding errors ruin symmetry
SSC1. V. Sorge 2009

42. Optimisation and speed-up
Symmetry of a circle can be used
Calculations of point coordinates only for a first one-eighth of a circle
(-x,y)
(x,y)
(-y,x)
(y,x)
(-y,-x)
(y,-x)
(-x,-y)
(x,-y)
SSC1. V. Sorge 2009

43. Anti-Aliasing All these rasterising algorithms have two problems:
‘Jaggies’ – the lines don’t look smooth
Intensity varies with angle:
Solution 1:
Increase the screen resolution
As the pixels get smaller, the jaggies disappear
Still have the intensity problem
Solution 2: Anti-aliasing
SSC1. V. Sorge 2009

44. Anti-aliasing Treat lines as if they were areas in the raster world
Unweighted area sampling:
Set intensity of pixel according to how much of the area overlaps the pixel
Note that anti-aliasing is expensive!
SSC1. V. Sorge 2009

45. Other Rasterisation Issues
Filling polygons
How to decide if a point is inside or outside the polygon?
Parity rule: if a line from the point to a distant point crosses the boundary an odd number of times, point is inside.
Scan-line conversion
Go along a line of pixels, each time you intersect a boundary, switch from ‘inside’ to ‘outside’
Colour all ‘inside’ pixels
Have to be careful with slivers
SSC1. V. Sorge 2009

46. Modelling A C D B Y Z A B C D X
SSC1. V. Sorge 2009

47. Modelling
It is too inefficient to represent objects internally as an array of pixels
Memory intensive
Committed to a single resolution (or max resolution)
Hard to manipulate
Instead, model objects using analytical geometry
Euclidean Geometry
Projective Geometry
Differential Geometry
...
We will use Projective Geometry as it is the easiest to handle many transformations and also is necessary for 3D graphics
SSC1. V. Sorge 2009

48. Geometric Modelling Shapes are represented as numerical information
Vertex coordinates
Circle centre and radius …
Manipulated using linear algebra
Shapes can be represented as vectors or matrices
Operations on shapes are performed by matrix multiplications
Translation, scaling, rotation, shear, … all can be represented as simple matrix operations, applied to coordinates of shapes
SSC1. V. Sorge 2009

49. Geometric Objects
How could we represent this?
SSC1. V. Sorge 2009

50. Transformations
One way to represent geometric objects is as simple figures that have had various transformations applied to them
Common Transformations:
Rotation
Translation
SSC1. V. Sorge 2009

51. More Common Transformations
Uniform Scaling
Non-Uniform Scaling
Reflection
Shearing
SSC1. V. Sorge 2009

52. Homogeneous Coordinates
Homogeneous Coordinates are representation of points in projective space
2D points are represented as projections of points in 3D space
Point P = (x, y) represented by a vector (x', y', w) where the last coordinate determines the set of all points in 3D space projected onto P with x'/w = x and y'/w = y
If we model from the normal plane, we can always assume w = 1 and represent P = (x, y, 1)
SSC1. V. Sorge 2009

53. Transformations as Matrices
Each transformation can be represented as a matrix operation
Known as Affine Transformations
Map lines into lines
Keep parallel lines parallel
May preserve angles or lengths, but not necessarily
Representing images in terms of standard objects and transformations means that we don’t have to worry about coordinates
Standard object:
Top two rows are coordinates
Bottom row always 1 ( ) 1 1 1 1 1
SSC1. V. Sorge 2009

54. Reminder: Matrix Multiplication
Take each row, multiply elements by each column and add:
First row:
1 x x x 1 = 3
1 x x x 1 = 4
1 x x x 1 = 5
Second row:
0 x x x 1 = 1 … 1 3 2 ( ) 1 ( ) 1 2 5 4 3 ( ) =
SSC1. V. Sorge 2009

55. Manipulation Representation
As we said, objects are represented by coordinates, plus a row of ones:
Can be more than 3 columns
All our transformations are 3x3 matrices
Matrix multiplication used to compose them
If you do manipulation M then N then P to object X, Result is:
Y = P x N x M x X
Note the reverse order!
Often just store composite operation matrix:
Q = P x M x N
Y = Q x X 1 ( )
SSC1. V. Sorge 2009

56. ( ) ( ) ( ) ( ) ( ) ( ) ( ) Object Manipulation
Now we use matrices to manipulate object
Standard object is sheared, then translated
Matrices: Object Shear Translate 1 ( ) 1 2 ( ) 1 ( ) 1 ( ) 1 2 ( ) 1 ( ) 1 2 3 ( )
T = =
SSC1. V. Sorge 2009

57. ( ) ( ) ( ) ( ) ( ) ( ) ( ) ( ) Order Does Matter! T = = T = = 1 1 2 1( ) 1 2 ( ) 1 ( ) 1 2 3 ( )
T = =
Translate Shear Object 1 2 ( ) 1 ( ) 1 ( ) 1 2 5 4 3 ( )
T = =
Shear Translate Object
SSC1. V. Sorge 2009

58. Transformation Matrices
Translation along vector v = (v,w):
Shearing along vector v = (v,w):
Non-uniform scaling by factors a,b: 1 w v ( ) 1 w v ( ) 1 b a ( )
SSC1. V. Sorge 2009

59. Transformation Matrices
Rotation by an angle :
Note that the rotation is around the origin
As we saw before, we can apply composite transformations just by multiplying the appropriate matrices 1
cos()
sin()
-sin() ( )
SSC1. V. Sorge 2009

60. Affine Transformations in Java2D
Affine transformations classes defined in java.awt.geom.AffineTransform
Constructor:
AffineTransform(a,b,c,d,e,f) constructs the matrix:
AffineTransform(double[ ] m) does the same from an array
If you know the transformation matrix, you can just construct it directly
Otherwise, Java2D provides specific matrices 1 f d b e c a ( )
SSC1. V. Sorge 2009

61. Transformation-specific Matrices
static AffineTransform getRotateInstance(double a)
Produces a matrix that is a rotation around the origin by angle a in radians
AffineTransform getRotateInstance(a, x, y)
Rotation by a around point (x, y)
AffineTransform getScaleInstance(sx, sy)
Scale the x-axis by sx, and the y-axis by sy
AffineTransform getShearInstance(sx, sy)
Shear the x-axis by sx and the y-axis by sy
AffineTransform getTranslateInstance(tx, ty)
Translate along the x-axis by tx, and the y-axis by ty
SSC1. V. Sorge 2009

62. Changing an existing Matrix
void setToRotation(double a)
Set the matrix to a rotation around the origin by angle a in radians
void setToRotation(a, x, y)
Rotation by a around point (x, y)
void setToScale(sx, sy)
Scale the x-axis by sx, and the y-axis by sy
void setToShear(sx, sy)
Shear the x-axis by sx and the y-axis by sy
void setToTranslation(tx, ty)
Translate along the x-axis by tx, and the y-axis by ty
SSC1. V. Sorge 2009

63. Using the Matrices
Note that each of the methods above just creates a matrix
We apply the matrix to the Graphics2D object that actually does the rendering:
void Graphics2D.setTransform(AffineTransform t)
Replaces the existing coordinate transform with t
void transform(AffineTransform t)
Composes the existing transform with t
affineTransform getTransform()
Gets the current transform being applied to the graphics context
You rarely want to do the first of these–it removes whatever transforms you are already doing
SSC1. V. Sorge 2009

64. Example Create the transformation matrix
public void paintComponent(Graphics g) {
AffineTransform t = new AffineTransform();
Graphics2D g2 = (Graphics2D)g;
g2.translate(getWidth()/2,getHeight()/2);
Rectangle2D rect = new Rectangle2D.Double(-40,-40,80,80);
g2.setColor(Color.green);
g2.fill(rect);
t.setToRotation(Math.toRadians(30));
AffineTransform old = g2.getTransform();
g2.transform(t);
g2.setColor(Color.blue);
g2.setStroke(new BasicStroke(2));
g2.draw(rect); …
Create the transformation matrix
Move the origin to the window centre
Make t a 30 degree rotation
Save the old transformation
Apply transformation t on top of the old one
The rotated rectangle appears in blue
SSC1. V. Sorge 2009

65. Example (ctd) Now set t to be a shear transformation…
t.setToShear(1.5,0);
g2.transform(t);
g2.setColor(Color.red);
g2.draw(rect);
g2.setTransform(old); }
Now set t to be a shear transformation
Apply the transformation on top of all the previous ones
The rotated and sheared rectangle appears in red
Replace the old transformation matrix
SSC1. V. Sorge 2009

66. Concatenating Transformations
Previously we set the matrices and had to carry out the transformations for them to take effect
Java also lets us perform the matrix multiplications before applying the transformations
This is called concatenation in Java. For example, void T.concatenate(AffineTransform S) performs the matrix multiplication T x S
We can also concatenate special matrices to a transform
void rotate(a, x, y): Rotation by a around point (x, y)
void scale(sx, sy): Scale by sx and sy
void shear(sx, sy): Shear by sx and sy
void translate(tx, ty): Translate by tx and ty
SSC1. V. Sorge 2009

67. 3D Graphics
SSC1. V. Sorge 2009

68. 3D Graphics
Many of the ideas we have seen in 2D graphics extend into 3D graphics
Constructive area geometry becomes constructive solid geometry
2D Affine transformations are generalised to 3D
We still have to worry about all the issues of rendering we have seen in 2D, and more!
We won’t try to cover everything to do with 3D graphics here, I’ll just cover a few important areas
The 3D graphics pipeline
3D affine transformations
CSG
Methods for rendering
SSC1. V. Sorge 2009

69. The 3D Graphics Pipeline
Similar to 2D pipeline:
Mathematical
model of scene
in world
coordinates
Rasterise
graphics
primitives
to pixels
Clip scene to
window
Map scene to
viewport
Determine
lighting at
vertices
Viewing
Transformation
Projection
Transformation
Texturing and
Shading
Display
SSC1. V. Sorge 2009

70. Pipeline Process Global Coordinates Camera- Space Rendered Image
SSC1. V. Sorge 2009

71. Pipeline Steps Determine light at vertices Viewing Transformation
3D scenes are lit according to the placement of light-sources (plus effects of reflectance, etc)
Lighting is computed for each vertex
Lighting between vertices is interpolated during rasterisation
Viewing Transformation
Objects in world coordinates are transformed into eye-coordinates (camera coordinates)
Result is still 3D, but seen from the eye’s perspective
Projection Transformation
This involves translating the 3D image into a 2D image by projecting it onto a plane as seen from the camera
Texturing and Shading
Individual pixels are assigned colours based on interpolation of vertex colours or on texture maps
SSC1. V. Sorge 2009

72. 3D Transformations
Like 2D transformations, but using a 4x4 matrix for each affine transform, and points represented as: (x, y, z, 1)T
3D coordinate systems can be right or left handed
For a left-handed coordinate system:
SSC1. V. Sorge 2009

73. Transformation Matrices
3D Identity:
Translation Matrix:
Scaling: 1 1 z y x 1 z y x
SSC1. V. Sorge 2009

74. Transformation Matrices ctd
Rotation about the z-axis:
Rotation about the x-axis:
Shearing is a bit more complex:
This is shear in x and y only
Shear is along the z axis 1
cos()
sin()
-sin() 1
cos()
sin()
-sin() 1 y x
SSC1. V. Sorge 2009

75. Composing Transformations
As usual, any number of affine transformations can be multiplied together
A 30 degree rotation about x followed by a translation, applied to a triangle: 1 2 1
0.866
0.5
-0.5 1 1
2.866
2.5 2
1.5 =
SSC1. V. Sorge 2009

76. Viewing Transformation
Using transformation matrices: An example
Mathematical
model of scene
in world
coordinates
Rasterise
graphics
primitives
to pixels
Clip scene to
window
Map scene to
viewport
Determine
lighting at
vertices
Viewing
Transformation
Projection
Transformation
Texturing and
Shading
Display
SSC1. V. Sorge 2009

77. World Space and Image Space
Top picture shows image in world coordinates
Coordinates shown in blue under chair
Camera (and eventual image) shown too
Bottom image shows camera coordinate system
How to transform from one to the other?
SSC1. V. Sorge 2009

78. Coordinate Transform
Need to move coordinates from world to camera location
Two steps:
First rotate world coordinates to match camera angle
Then translate to camera position
Camera defined by location (x,y,z) or ‘eye-point’ plus point which appears in centre of image (‘look-at point’), plus unit ‘up vector’
World coordinates
Up vector y
Eye point
Look-at point z x
SSC1. V. Sorge 2009

79. Transform steps Transformation is in four steps:
Translate the eye point to the origin
Rotate around y axis so look-at point is in y-z plane
Rotate around x axis so look-at point is on z axis
Rotate around z axis so up vector is on y axis
Notation:
Eye point at e = (ex, ey, ez)
Look-at point at a = (ax, ay, az)
Up vector u = (ux, uy, uz)
Translation: 1
-ez
-ey
-ex
SSC1. V. Sorge 2009

80. Rotation about Y
Rotate around y axis so look-at point is in y-z plane:
Need unit vector from eye to look-at point:
Now rotation around y rotates the projection onto the x-z plane to the z axis
cos() = adj/hyp = nz/h1, etc. so rotation by  about y is:
N = (nx, ny, nz) = a – e
||a – e|| z z y
n x
h1 =  nx2 + nz2
n z  x x 1
nz/h1
nx/h1
-nx/h1
SSC1. V. Sorge 2009

81. Rotation about X
Look at point is now on y-z plane, need to move it to z axis, so rotate about x
Same as above but with different axes:
Note that n’x=0, ny is unchanged
so n’z = nx2 + nz2
This time rotation about x, so:
n y z
n’ z
h2 =  ny2 + n’z2
= 1  y 1
cos()
sin()
-sin() 1
n’z ny
-ny =
SSC1. V. Sorge 2009

82. Rotation about Z
Note we often assume that up in eye coordinates is up in world coordinates, so this step is skipped
Same calculation again:
Putting it all together:
Be careful with coordinate systems!
Often world and eye coordinates have z flipped 1 uy ux
-ux y
u x
u y 1  x 1 uy ux
-ux 1
n’z ny
-ny 1
nz/h1
nx/h1
-nx/h1 1
-ez
-ey
-ex
SSC1. V. Sorge 2009

83. Example Eye at (-1,-1,-1)T, look-at (0,0,0)T, up = (0,1,0)T
Translation:
Rotate about Y: Unit vector N = (1/3, 1/3, 1/3)T
Rotation (h = 2/3): 1 1 -1 1 = 1
1/2
-1/2 1 1 2 =
SSC1. V. Sorge 2009

84. Example ctd Rotation about x: n’z = nx2 + nz2 = 2/3
No rotation about Z since up is already along y axis, so final transformation is: 1
2/3
1/3
-1/3 1 2 1 3 = 1
2/3
1/3
-1/3 1
1/2
-1/2 1 1 3
1/3
-1/6
2/3
-1/2
1/2 =
SSC1. V. Sorge 2009

85. Constructive Solid Geometry
Just like CAG, we can construct objects by adding/subtracting/intersecting/XORing basic shapes
Typical basic shapes:
Boxes
Spheres
Cones
Cylinders
Tori
SSC1. V. Sorge 2009

86. Advanced Shapes Surface of revolution objects
Lines swept around an axis
Also often called Lathe objects
Prism objects
Polygons swept along linear paths
Polygon-based objects
Meshes made up of polygons that share edges
SSC1. V. Sorge 2009

87. CSG Demo Union of two spheres Intersection of two spheres
Difference of two spheres
SSC1. V. Sorge 2009

88. CSG Scene
How to create this?
SSC1. V. Sorge 2009

89. When CSG won’t work: Octrees
When it is too hard to construct objects using CSG there are a variety of other methods:
Bezier surfaces and Hierarchical Splines can be used to construct smooth surfaced objects
Octrees can be used to represent objects by which bits of space they occupy
SSC1. V. Sorge 2009

90. Rendering Methods Several rendering algorithms are used Rasterisation
Considers each object in the scene and projects them to form the image
Ray tracing or ray casting
Considers the whole scene and follows the paths of light rays from the camera to the objects
Ray casting often used to refer to using path only to first object encountered
Ray tracing involves following reflected, refracted rays, often a Monte-Carlo algorithm
Radiosity
Uses finite element mathematics to simulate the way light spreads from surfaces. Produces a better model that ray casting
SSC1. V. Sorge 2009

91. Rasterisation Ray tracing is a pixel-by-pixel approach to rendering
Often this is too slow, so a primitive-by-primitive approach is taken
Each primitive is checked to see if it is visible and which pixels it affects, then those pixels are coloured approporiately
Rasterisation is often used for simple scenes, and for real-time animation (e.g. games)
Pixel-by-pixel approaches generally produce more realistic images
Rasterisation is usually implemented directly in modern graphics cards as a pipeline
SSC1. V. Sorge 2009

92. Rasterisation Example: Quake
SSC1. V. Sorge 2009

93. Rasterisation Example
Note lack of reflections, lighting
SSC1. V. Sorge 2009

94. Process Basic Algorithm: How to decide if a polygon is visible?
Could check every polygon against every other
Inefficient
Better to:
remove ‘back-facing polygons’ in solid objects
Draw pixels on closest polygon to camera they intersect
FOR each object in the world DO
Determine those parts of the object that
are visible
Draw those parts in the appropriate colour OD
SSC1. V. Sorge 2009

95. Back-Face Culling Technique to remove polygons we know aren’t visible
For objects defined as solid polyhedra
Made of polygonal faces with no gaps
Each face defined so surface normal points out of polyhedron
Discard polygons where the dot product between the surface normal and a vector from the eye to the polygon is negative x z
SSC1. V. Sorge 2009

96. Z-Buffer algorithm Used to eliminate drawing of obscured polygons
Can be slow as it is ‘image-precision’
Initialise Z(x,y) = -infinity FOR ALL x,y
FOR each polygon DO
FOR each pixel in the polygon’s projection DO
pz = polygon’s z position at pixel x,y
IF pz > Z(x,y) THEN
draw this pixel in polygon’s colour
Z(x,y) = pz FI OD
SSC1. V. Sorge 2009

97. List-Priority Algorithms
Work at ‘object-precision’ rather than ‘image-precision’
Approach is to sort all polygons by z-ranges
If no polygons overlap in z, can just render each polygon starting at most distant
If polygons overlap in z may need to split polygons to make ordering OK. x x z z
SSC1. V. Sorge 2009

98. Advantages and Disadvantages
Fast
Re-rendering (with small changes) even faster
Just save z-buffer, render in new objects
Curved surfaces are hard to do
Each curved surface often subdivided into smaller patches until each is ‘almost flat’
Other non-polygonal models are also difficult
Octree-based representations, etc.
Can’t easily do lighting effects
No way to show effect of light on surfaces
Reflective surfaces
Etc.
SSC1. V. Sorge 2009

99. Ray Tracing Simple Algorithm (ray casting): FOR each pixel DO
Determine ray from centre of projection through
pixel
FOR each object in scene DO
IF ray intersects object and intersection
point is closest so far THEN
record intersection point and object FI
Set pixel’s colour to closest object
intersection OD
SSC1. V. Sorge 2009

100. Ray Casting Example Top ray misses all objects (plane + sphere)
Pixel coloured with background colour
Bottom ray hits sphere
Pixel coloured sphere-colour
SSC1. V. Sorge 2009

101. Advanced Stuff: Shadows
When we find a collision, cast a ray towards the light source to see if collision point is in shadow
‘Shadow Ray’
SSC1. V. Sorge 2009

102. Advanced Stuff: Reflections
Reflections are based on surface normal at point of collision
‘Reflected Ray’
SSC1. V. Sorge 2009

103. Advanced Stuff: Refraction
Refraction occurs in transparent objects
Light ray bends at surface by an amount proportional to difference in density
Often have partial reflection, so two rays, one relected, one refracted
SSC1. V. Sorge 2009

104. Reflection and Refraction
Objects that are transparent with shiny surfaces quickly generate lots of rays
Each incoming ray generates two outgoing ones
These are split again by subsequent surfaces
Tracing gets expensive!
Reflective and
Transparent Object
Refracted ray
Internal reflection
Reflected ray
SSC1. V. Sorge 2009

105. Recursive Raytracing Ray Tree Tree grows by up to 3 rays at each node
L 3
R 3
Ray Tree
Viewpoint
L 2
R 2
R 1
T 1
L 1
R 4
L 4
T 4
R 1
T 1
L 1
R 2
L 2
L 3
R 3
T 3
L 4
R 4
T 4
Tree grows by up to 3 rays at each node
Anti-aliasing done using multiple rays/pixel
SSC1. V. Sorge 2009

106. Computing Intersections
Main task of any raytracer is computing intersections with objects
Define a ray as the line from (x0,y0,z0) to (x1,y1,z1)
Now define x = x1 – x0, similarly y, z
Thus any point (x,y,z) on the ray is:
x = x0 + tx y = y0 + ty z = z0 + tz
Now we just solve that equation simultaneously with the equation(s) describing the object
E.g. for a sphere of radius r at (a,b,c):
(x - a)2 + (y - b)2 + (z - c)2 = r2
(x0 + tx - a)2 + (y0 + ty – b)2 + (z0 + tz – c)2 = r2
SSC1. V. Sorge 2009

107. Computing Intersections ctd.
(x0 + tx - a)2 + (y0 + ty – b)2 + (z0 + tz – c)2 = r2
Since a,b,c,r x, y, z are all constants, this is just a quadratic equation in t:
(x2 + y2 + z2)t2 + 2t(x(x0 – a) + y(y0 – b) +
z(z0 – c)) + (x0 – a)2 + (y0 – b)2 + (z0 – c)2 – r2 = 0
Solve using the quadratic formula:
Roots are at:
If there are no real roots, there is no intersection
One root = ray grazes edge of sphere
Two roots = front, back intersections with sphere t
SSC1. V. Sorge 2009

108. Advantages and Disadvantages
Handles quite complex surfaces
Only requirement is that we can calculate intersection of surface and ray
Proper lighting, transparency and reflectiveness
Overall more realistic images
Easy to program
Once you have the reflection/refraction code, all you need is to compute intersections and surface normals for any new object type
Slow
For realistic scenes often use multiple rays per pixel
Limited in number of objects it can handle
Problems with numerical precision
Have to be careful about accuracy of intersections
SSC1. V. Sorge 2009

109. POVRay Raytracing tool - what I used to create most of the images
Freely available for download
Go play with it if you’re interested in 3D graphics
SSC1. V. Sorge 2009

110. Image Files for POVRay #include "colors.inc" camera {
location <0, 1.5, -10>
look_at 0
angle 36 }
light_source { <500, 500, -1000> White }
plane { y, 0
texture {
pigment { checker Green White }
scale 5
finish { reflection {0.5}
ambient 0.5 diffuse 0.5 }
sphere { <0, 1, 0>, 1
pigment {
color rgbf <0,0,1,0.8> }
interior { ior 1.5 }
finish { reflection { 0.2 } ambient
0.5 diffuse 0.5 }
rotate y*30
box { <0, 0, 0> <1,1,1>
pigment { Red }
rotate y*60
translate <0.5, 0, -2>
SSC1. V. Sorge 2009

111. Result
SSC1. V. Sorge 2009