Upload
others
View
5
Download
2
Embed Size (px)
Citation preview
GRAFIKA KOMPUTER
~ M. Ali Fauzi
Drawing
2D Graphics
VIEWPORTTRANSFORMATION
Recall :Coordinate SystemglutReshapeFunc(reshape);
void reshape(int w, int h){
glViewport(0,0,(GLsizei) w, (GLsizei) h);glMatrixMode(GL_PROJECTION);glLoadIdentity();gluOrtho2D(-1.0, 1.0, -1.0, 1.0);
}
World Coordinate System
World Coordinate System
00 1 2-2 -1
1
2
-1
World Coordinate System
~ The representation of anobject is measured in somephysical or abstract units.~ Space in which the objectgeometry is defined.
World Window
0 1 2-2 -1
1
2
-1
World Window
0 1 2-2 -1
1
2
-1
World Window
~ Rectangle defining the part of the world we wish to display.~ Area that can be seen (what is captured by the camera), measured in OpenGL coordinates.
World Window
~ Known as clipping-area
void reshape(int w, int h){
glViewport(0,0,(GLsizei) w, (GLsizei) h);glMatrixMode(GL_PROJECTION);glLoadIdentity();gluOrtho2D(-1.0, 1.0, -1.0, 1.0);
}
The Default
The default OpenGL 2Dclipping-area is anorthographic view with x
and y in the range of -1.0and 1.0, i.e., a 2x2 square
with centered at the origin.
World Window
~ Reset to the default
void reshape(int w, int h){
glViewport(0,0,(GLsizei) w, (GLsizei) h);glMatrixMode(GL_PROJECTION);glLoadIdentity();gluOrtho2D(-1.0, 1.0, -1.0, 1.0);
}
Viewport
Screen
Screenwindow
InterfaceWindow
Viewport
Screen Coordinate System
~ Space in which the image is displayed
~ For example : 800x600pixels
Interface Window
~ Visual representation of thescreen coordinate system forwindowed displays
glutInitWindowSize(320, 320); glutInitWindowPosition(50, 50);
Vewport
~ A rectangle on the interfacewindow defining where theimage will appear,~ The default is the entirescreen or interface window.
Viewport
Interface Window
~ Set the viewport to theentire screen / windowvoid reshape(int w, int h){
glViewport(0,0,(GLsizei) w, (GLsizei) h);glMatrixMode(GL_PROJECTION);glLoadIdentity();gluOrtho2D(-1.0, 1.0, -1.0, 1.0);
}
Interface Window
~ Set the viewport to half ofthe screen / window
glutInitWindowSize(320, 320); glutInitWindowPosition(50, 50);
--------------------------------
glViewport(0,0,160,160);
Viewport
Screen
Screenwindow
InterfaceWindow
Viewport
Viewport
Viewport Transformation
~ The Process called viewporttransformation
THE ASPECT RATIOPROBLEM
The distortion
Screen
Screenwindow
InterfaceWindow
Viewport
The distortion
Screen
Screenwindow
InterfaceWindow
Viewport
Ratio
~ R = Aspect Ratio of World
Ratio
Keeping the Ratio
Screen
Screenwindow
InterfaceWindow
Viewport
Keeping the Ratio
Screen
Screenwindow
InterfaceWindow
Viewport
The Startegy
~ To avoid distortion, we mustchange the size of the worldwindow accordingly.~ For that, we assume that theinitial world window is asquare with side length L
The Startegy
~ DefaultglOrtho2D (-L, L, -L, L);
~ For example L=1,glOrtho2D (-1, 1, -1, 1);
The Startegy
if (w <= h)glOrtho2D(-L, L, -L * h/w, L * h/w);
elseglOrtho2D(-L * w/h, L * w/h, -L, L);
if (w <= h)glOrtho2D(-1, 1, -1 * h/w, 1 * h/w);
elseglOrtho2D(-1 * w/h, 1 * w/h, -1, L);
The Startegy
The Startegy
~ A possible solution is to changethe world window whenever theviewport of the interfacewindow were changed.~ So, the callback Glvoidreshape(GLsizei w, GLsizei h)must include the following code :
void reshape(GLsizei width, GLsizei height) {
if (height == 0) height = 1; GLfloat aspect = (GLfloat)width/(GLfloat)height; glViewport(0, 0, width, height); glMatrixMode(GL_PROJECTION); glLoadIdentity(); if (width >= height) {
gluOrtho2D(-1.0 * aspect, 1.0 * aspect, -1.0, 1.0);
} else {
gluOrtho2D(-1.0, 1.0, -1.0 / aspect, 1.0 / aspect);
} }
/* Handler for window re-size event. Called back when the window first appears and whenever the window is re-sized with its new width and height */ void reshape(GLsizei width, GLsizei height) {
// GLsizei for non-negative integer // Compute aspect ratio of the new window if (height == 0) height = 1; // To prevent divide by 0 GLfloat aspect = (GLfloat)width / (GLfloat)height; // Set the viewport to cover the new window glViewport(0, 0, width, height); // Set the aspect ratio of the clipping area to match the viewportglMatrixMode(GL_PROJECTION); glLoadIdentity(); // Reset the projection matrix if (width >= height) {
// aspect >= 1, set the height from -1 to 1, with larger width gluOrtho2D(-1.0 * aspect, 1.0 * aspect, -1.0, 1.0);
} else {
// aspect < 1, set the width to -1 to 1, with larger height gluOrtho2D(-1.0, 1.0, -1.0 / aspect, 1.0 / aspect);
} }
2D
TRANSFORMATION
Transformation
Is The geometrical changesof an object from a currentstate to modified state.
Why Needed?
To manipulate the initiallycreated object and todisplay the modified objectwithout having to redraw it
Transformation Pipeline
Vertex ModelviewMatrix
ProjectionMatrix
PerspectiveDivision
ViewportTransformation
ObjectCoordinates
EyeCoordinates
ClipCoordinates
Normalizeddevice
Coordinates
WindowCoordinates
GL_MODELVIEW modeglTranslate()glRotate()glScale()glLoadMatrix()glMultMatrix()gluLookAt()
GL_PROJECTION modeglOrtho()gluOrtho2D()glFrustum()gluPerspective()
glViewport()
Types of Transformation
~ Modeling.In 3D graphics, handles movingobjects around the scene.
~ Viewing.In 3D graphics, specifies thelocation of the camera.
Types of Transformation
~ Projection.Defines the viewing volume andclipping planes from eyecoordinate to clip coordinates.
Types of Transformation
~ Viewport.Maps the projection of the sceneinto the rendering window.
~ Modelview.Combination of the viewing andmodeling transformations.
Transformation Matrix
Transformations in OpenGL using matrix concept
Matrix Modes
~ ModelView Matrix(GL_MODELVIEW)
These concern model-related operations such as translation, rotation, and scaling, as well as viewing transformations.
Matrix Modes
~ Projection Matrix (GL_PROJECTION)
Setup camera projection and cliiping-area
Transformation Pipeline
Vertex ModelviewMatrix
ProjectionMatrix
PerspectiveDivision
ViewportTransformation
ObjectCoordinates
EyeCoordinates
ClipCoordinates
Normalizeddevice
Coordinates
WindowCoordinates
GL_MODELVIEW modeglTranslate()glRotate()glScale()glLoadMatrix()glMultMatrix()gluLookAt()
GL_PROJECTION modeglOrtho()gluOrtho2D()glFrustum()gluPerspective()
glViewport()
Why do we use matrix?
~ More convenient organization of data.~ More efficient processing~ Enable the combination of various concatenations
THE MATRIX
Matrix addition and subtraction
a
b
c
d±a ± c
b ± d=
Matrix addition and subtraction
1-3
56+ =
Matrix addition and subtraction
1-3
56+ =
63
Matrix addition and subtraction
1-3
+ =3 1-1 4
Matrix addition and subtraction
1-3
+ =3 1-1 4
Tak boleh
Matrix Multiplication
a bc d
e fg h. =
a.e + b.g a.f + b.hc.e + d.g c.f + d.h
Matrix Multiplication
a be fg h. = a.e + b.g a.f + b.h
Matrix Multiplication
1 21 23 1
. =
Matrix Multiplication
1 21 23 1
. = 6 6
Matrix Multiplication
12
1 23 1
. =
Matrix Multiplication
12
1 23 1
. = Tak boleh
Matrix Types
efe f
Row Vector Column Vector
Matrix Multiplication
a bc d
ef. =
e fa bc d. =
e fa cb d. =
Matrix Multiplication
a bc d
ef. =
a.e + b.fc.e + d.f
e fa bc d. = a.e + c.f b.e + d.f
e fa cb d. = a.e + b.f c.e + d.f
Matrix Math
We’ll use the column-vector representation for a point.
Matrix Math
Which implies that we use pre-multiplication of the transformation – it appears before the point to be transformed in the equation.
THETRANSFORMATION
Translation
A translation moves all points in an object along the same straight-line path to new positions.
Translation
The path is represented by a vector, called the translation or shift vector.
x’y’
xy
tx
ty= +
New Position Current Position Translation Vector
P' = P + T
Translation
x’y’
xy
tx
ty= +
(2, 2) tx= 6
ty=4
?
x’y’
22
6
4= +
Translation
x’y’
xy
tx
ty= +
(2, 2) tx= 6
ty=4
?
86
22
6
4= +
Rotation
A rotation repositions all points in an object along a circular path in the plane centered at the pivot point.
Rotation
θ
P
P’
p'x = px cos θ – py sin θp'y = px sin θ + py cos θ
Rotation
The transformation using Rotation Matrix
New Position Rotation Matrix Current Position
P' = R . P
Rotation
The transformation using Rotation Matrix
New Position Rotation Matrix Current Position
P' = R . P
Rotation
Find the transformed point, P’,
caused by rotating P= (5, 1) about the
origin through an angle of 90°.
Rotation
Scaling
Scaling changes the size of an object and involves two scale factors, Sxand Sy for the x- and y- coordinates respectively.
Scaling
Scales are about the origin.
P
P’
p'x = sx • px
p'y = sy • py
Scaling
The transformation using Scale Matrix
New Position Scale Matrix Current Position
P' = S • P
Scaling
The transformation using Scale Matrix
New Position Scale Matrix Current Position
P' = S • P
Scaling
If the scale factors are in between 0 and 1 the points will be moved closer to the origin the object will be smaller.
Scaling
P(2, 5), Sx = 0.5, Sy = 0.5Find P’ ?
p'x = sx • px
p'y = sy • pyP(2, 5)
P’
Scaling
If the scale factors are larger than 1 the points will be moved away from the origin the object will be larger.
Scaling
P(2, 5), Sx = 2, Sy = 2Find P’ ?
p'x = sx • px
p'y = sy • pyP(2, 5)
P’
Scaling
If the scale factors are not the same, Sx ≠ Sy differential scalingChange in size and shape
Scaling
If the scale factors are the same, Sx = Sy uniform scaling
Scaling
P(1, 3), Sx = 2, Sy = 5square rectangle
p'x = sx • px
p'y = sy • py
P(1, 2)
P’
Scaling
What does scaling by 1 do?
Sx=1 , Sy=1
Scaling
What does scaling by 1 do?
Sx=1 , Sy=1 Nothing changedWhat is that matrix called?
Scaling
What does scaling by 1 do?
Sx=1 , Sy=1 Nothing changedWhat is that matrix called?Identity Matrix
Scaling
What does scaling by a negative value do? Sx=-2 , Sy=-2
Scaling
What does scaling by a negative value do? Sx=-2 , Sy=-2 Moved to Different Quadran
COMBINING TRANSFORMATIONS
Combining Transf
For example, we want to rotate/scale then we want to do translation
P' = M • P + A
Combining Transf
For example, we want to translate, then we want to rotate and sclae
P' = S • R • (A + P)
Combining Transf
P (Px,Py)=(4 , 6) : Translate(6 , -3) ->
Rotation(60˚) -> Scaling (0.5 , 2.0)
P' = S • R • (A + P)
Combining Transf
Combining Transf
To combine multiple transformations, we must explicitly compute each transformed point.
P' = S • R • (A + P)
Combining Transf
It’d be nicer if we could use the same matrix operation all the time. But we’d have to combine multiplication and addition into a single operation.
P' = S • R • (A + P)
Combining Transf
Let’s move our problem into one dimension higher
HOMOGENOUS COORDINATES
Homogenous Coord
Let point (x, y) in 2D be represented by point (x, y, 1) in the new space.
y y
x
x
w
Homogenous Coord
~ Scaling our new point by any value a puts us somewhere along a particular line: (ax, ay, a).~ A point in 2D can be represented in many ways in the new space.~ (2, 4) ----------- > (2, 4, 1) or (8, 16, 4) or (6, 12, 3) or (2, 4, 1) or etc.
Homogenous Coord
We can always map back to the original 2D point by dividing by the last coordinate
(15, 6, 3) (5, 2).(60, 40, 10) ?.
Homogenous Coord
The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name –homogeneous coordinates.
Homogenous Coord
With homogeneous coordinates, we can combine multiplication and addition into a single operation.
Homogenous Coord
Point in column-vector:
Our point now has threecoordinates. So our matrix is needs to be 3x3.
Homogenous Coord
Translation:
x’y’
xy
tx
ty= +
Homogenous Coord
Rotation:
Homogenous Coord
Scaling:
Homogenous Coord
P (Px,Py)=(4 , 6) : Translate(6 , -3) ->
Rotation(60˚) -> Scaling (0.5 , 2.0)
Homogenous Coord
We can represent any sequence of transformations as a single matrix
Homogenous Coord
Does the order of operations matter?
Homogenous Coord
Yes, the order does matter!
1. Translate2. Rotate
1. Rotate2. Translate
Homogenous Coord
Yes, the order does matter!A . B = B . A?
Homogenous Coord
Yes, the order does matter!A . B ≠ B . A
Homogenous Coord
Yes, the order does matter!(A.B).C = A.(B.C)?
Homogenous CoordYes, the order does matter!(A.B).C = A.(B.C)
++++++++++++
=
•
++++
=
dhlcfldgjcejdhkcfkdgiceibhlaflbgjaejbhkafkbgiaei
lkji
dhcfdgcebhafbgae
•
•
lkji
hgfe
dcba
++++++++++++
=
++++
•
=
dhldgjcflcejdhkdgicfkceibhlbgjaflaejbhkbgiafkaei
hlgjhkgiflejfkei
dcba
•
•
lkji
hgfe
dcba
Composite Transformation Matrix• Arrange the transformation matrices in order from
right to left.
• General Pivot- Point Rotation• Operation :-
1. Translate (pivot point is moved to origin)2. Rotate about origin3. Translate (pivot point is returned to original
position)
T(pivot) • R(θ) • T(–pivot)
T(pivot) • R(θ) • T(–pivot)
1 0 -tx
0 1 -ty
0 0 1
cosθ -sinθ 0sinθ cosθ 0
0 0 1
1 0 tx
0 1 ty
0 0 1 . .
cosθ -sinθ -tx cosθ+ ty sinθ + tx
sinθ cosθ -tx sinθ - ty cosθ + ty
0 0 1
cosθ -sinθ -tx cosθ+ ty sinθsinθ cosθ -tx sinθ - ty cosθ
0 0 1
1 0 tx
0 1 ty
0 0 1 .
Composite Transformation Matrix
Reflection:
x-axis y-axis
−
100010001
−
100010001
Other Transf
Reflection:
origin line x=y
−
−
100010001
100001010
Other Transf
• Shearing-x
• Shearing-y
Sebelum Sesudah
Sebelum Sesudah
Shearing