![Page 1: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/1.jpg)
GRAFIKA KOMPUTER~ M. Ali Fauzi
![Page 2: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/2.jpg)
Drawing
2D Graphics
![Page 3: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/3.jpg)
VIEWPORTTRANSFORMATION
![Page 4: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/4.jpg)
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);
}
![Page 5: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/5.jpg)
World Coordinate System
![Page 6: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/6.jpg)
World Coordinate System
00 1 2-2 -1
1
2
-1
![Page 7: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/7.jpg)
World Coordinate System
~ The representation of anobject is measured in somephysical or abstract units.~ Space in which the objectgeometry is defined.
![Page 8: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/8.jpg)
World Window
0 1 2-2 -1
1
2
-1
![Page 9: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/9.jpg)
World Window
0 1 2-2 -1
1
2
-1
![Page 10: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/10.jpg)
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.
![Page 11: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/11.jpg)
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);
}
![Page 12: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/12.jpg)
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.
![Page 13: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/13.jpg)
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);
}
![Page 14: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/14.jpg)
Viewport
Screen
Screenwindow
InterfaceWindow
Viewport
![Page 15: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/15.jpg)
Screen Coordinate System
~ Space in which the image is displayed
~ For example : 800x600pixels
![Page 16: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/16.jpg)
Interface Window
~ Visual representation of thescreen coordinate system forwindowed displays
glutInitWindowSize(320, 320);
glutInitWindowPosition(50, 50);
![Page 17: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/17.jpg)
Vewport
~ A rectangle on the interfacewindow defining where theimage will appear,~ The default is the entirescreen or interface window.
![Page 18: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/18.jpg)
Viewport
![Page 19: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/19.jpg)
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);
}
![Page 20: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/20.jpg)
Interface Window
~ Set the viewport to half ofthe screen / window
glutInitWindowSize(320, 320);
glutInitWindowPosition(50, 50);
--------------------------------
glViewport(0,0,160,160);
![Page 21: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/21.jpg)
Viewport
Screen
Screenwindow
InterfaceWindow
Viewport
![Page 22: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/22.jpg)
Viewport
![Page 23: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/23.jpg)
Viewport Transformation
~ The Process called viewporttransformation
![Page 24: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/24.jpg)
THE ASPECT RATIOPROBLEM
![Page 25: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/25.jpg)
The distortion
Screen
Screenwindow
InterfaceWindow
Viewport
![Page 26: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/26.jpg)
The distortion
Screen
Screenwindow
InterfaceWindow
Viewport
![Page 27: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/27.jpg)
Ratio
~ R = Aspect Ratio of World
![Page 28: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/28.jpg)
Ratio
![Page 29: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/29.jpg)
Keeping the Ratio
Screen
Screenwindow
InterfaceWindow
Viewport
![Page 30: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/30.jpg)
Keeping the Ratio
Screen
Screenwindow
InterfaceWindow
Viewport
![Page 31: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/31.jpg)
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
![Page 32: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/32.jpg)
The Startegy
~ DefaultglOrtho2D (-L, L, -L, L);
~ For example L=1,glOrtho2D (-1, 1, -1, 1);
![Page 33: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/33.jpg)
The Startegy
if (w <= h)
glOrtho2D(-L, L, -L * h/w, L * h/w);
else
glOrtho2D(-L * w/h, L * w/h, -L, L);
if (w <= h)
glOrtho2D(-1, 1, -1 * h/w, 1 * h/w);
else
glOrtho2D(-1 * w/h, 1 * w/h, -1, L);
![Page 34: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/34.jpg)
The Startegy
![Page 35: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/35.jpg)
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 :
![Page 36: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/36.jpg)
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);
}
}
![Page 37: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/37.jpg)
/* 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
viewport
glMatrixMode(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);
}
}
![Page 38: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/38.jpg)
2D
TRANSFORMATION
![Page 39: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/39.jpg)
Transformation
Is The geometrical changesof an object from a currentstate to modified state.
![Page 40: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/40.jpg)
Why Needed?
To manipulate the initiallycreated object and todisplay the modified objectwithout having to redraw it
![Page 41: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/41.jpg)
Transformation Pipeline
Vertex ModelviewMatrix
ProjectionMatrix
PerspectiveDivision
ViewportTransformation
ObjectCoordinates
EyeCoordinates
ClipCoordinates
Normalizeddevice
Coordinates
WindowCoordinates
GL_MODELVIEW mode
glTranslate()
glRotate()
glScale()
glLoadMatrix()
glMultMatrix()
gluLookAt()
GL_PROJECTION mode
glOrtho()
gluOrtho2D()
glFrustum()
gluPerspective()
glViewport()
![Page 42: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/42.jpg)
Types of Transformation
~ Modeling.In 3D graphics, handles movingobjects around the scene.
~ Viewing.In 3D graphics, specifies thelocation of the camera.
![Page 43: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/43.jpg)
Types of Transformation
~ Projection.Defines the viewing volume andclipping planes from eyecoordinate to clip coordinates.
![Page 44: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/44.jpg)
Types of Transformation
~ Viewport.Maps the projection of the sceneinto the rendering window.
~ Modelview.Combination of the viewing andmodeling transformations.
![Page 45: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/45.jpg)
Transformation Matrix
Transformations in OpenGL using matrix concept
![Page 46: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/46.jpg)
Matrix Modes
~ ModelView Matrix(GL_MODELVIEW)
These concern model-related operations such as translation, rotation, and scaling, as well as viewing transformations.
![Page 47: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/47.jpg)
Matrix Modes
~ Projection Matrix (GL_PROJECTION)
Setup camera projection and cliiping-area
![Page 48: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/48.jpg)
Transformation Pipeline
Vertex ModelviewMatrix
ProjectionMatrix
PerspectiveDivision
ViewportTransformation
ObjectCoordinates
EyeCoordinates
ClipCoordinates
Normalizeddevice
Coordinates
WindowCoordinates
GL_MODELVIEW mode
glTranslate()
glRotate()
glScale()
glLoadMatrix()
glMultMatrix()
gluLookAt()
GL_PROJECTION mode
glOrtho()
gluOrtho2D()
glFrustum()
gluPerspective()
glViewport()
![Page 49: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/49.jpg)
Why do we use matrix?
~ More convenient organization of data.~ More efficient processing~ Enable the combination of various concatenations
![Page 50: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/50.jpg)
THE MATRIX
![Page 51: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/51.jpg)
Matrix addition and subtraction
a
b
c
da c
b d=
![Page 52: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/52.jpg)
Matrix addition and subtraction
1-3
56+ =
![Page 53: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/53.jpg)
Matrix addition and subtraction
1-3
56+ =
63
![Page 54: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/54.jpg)
Matrix addition and subtraction
1-3
+ =3 1-1 4
![Page 55: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/55.jpg)
Matrix addition and subtraction
1-3
+ =3 1-1 4
Tak boleh
![Page 56: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/56.jpg)
Matrix Multiplication
a bc d
e fg h. =
a.e + b.g a.f + b.hc.e + d.g c.f + d.h
![Page 57: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/57.jpg)
Matrix Multiplication
a be fg h. = a.e + b.g a.f + b.h
![Page 58: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/58.jpg)
Matrix Multiplication
1 2 1 23 1. =
![Page 59: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/59.jpg)
Matrix Multiplication
1 2 1 23 1. = 6 6
![Page 60: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/60.jpg)
Matrix Multiplication
12
1 23 1. =
![Page 61: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/61.jpg)
Matrix Multiplication
12
1 23 1. = Tak boleh
![Page 62: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/62.jpg)
Matrix Types
efe f
Row Vector Column Vector
![Page 63: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/63.jpg)
Matrix Multiplication
a bc d
ef. =
e fa bc d. =
e fa cb d. =
![Page 64: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/64.jpg)
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
![Page 65: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/65.jpg)
Matrix Math
We’ll use the column-vector representation for a point.
![Page 66: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/66.jpg)
Matrix Math
Which implies that we use pre-multiplication of the transformation – it appears before the point to be transformed in the equation.
![Page 67: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/67.jpg)
THETRANSFORMATION
![Page 68: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/68.jpg)
Translation
A translation moves all points in an object along the same straight-line path to new positions.
![Page 69: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/69.jpg)
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
![Page 70: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/70.jpg)
Translation
x’y’
xy
tx
ty= +
(2, 2) tx= 6
ty=4
?
x’y’
22
6
4= +
![Page 71: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/71.jpg)
Translation
x’y’
xy
tx
ty= +
(2, 2) tx= 6
ty=4
?
86
22
6
4= +
![Page 72: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/72.jpg)
Rotation
A rotation repositions all points in an object along a circular path in the plane centered at the pivot point.
![Page 73: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/73.jpg)
Rotation
P
P’
p'x = px cos – py sin
p'y = px sin + py cos
![Page 74: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/74.jpg)
Rotation
The transformation using Rotation Matrix
New Position Rotation Matrix Current Position
P' = R . P
![Page 75: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/75.jpg)
Rotation
The transformation using Rotation Matrix
New Position Rotation Matrix Current Position
P' = R . P
![Page 76: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/76.jpg)
Rotation
Find the transformed point, P’,
caused by rotating P= (5, 1) about the
origin through an angle of 90.
![Page 77: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/77.jpg)
Rotation
![Page 78: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/78.jpg)
Scaling
Scaling changes the size of an object and involves two scale factors, Sxand Sy for the x- and y- coordinates respectively.
![Page 79: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/79.jpg)
Scaling
Scales are about the origin.
P
P’
p'x = sx • pxp'y = sy • py
![Page 80: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/80.jpg)
Scaling
The transformation using Scale Matrix
New Position Scale Matrix Current Position
P' = S • P
![Page 81: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/81.jpg)
Scaling
The transformation using Scale Matrix
New Position Scale Matrix Current Position
P' = S • P
![Page 82: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/82.jpg)
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.
![Page 83: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/83.jpg)
Scaling
P(2, 5), Sx = 0.5, Sy = 0.5Find P’ ?
p'x = sx • pxp'y = sy • py
P(2, 5)
P’
![Page 84: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/84.jpg)
Scaling
If the scale factors are larger than 1 the points will be moved away from the origin the object will be larger.
![Page 85: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/85.jpg)
Scaling
P(2, 5), Sx = 2, Sy = 2Find P’ ?
p'x = sx • pxp'y = sy • py
P(2, 5)
P’
![Page 86: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/86.jpg)
Scaling
If the scale factors are not the same, Sx Sy differential scalingChange in size and shape
![Page 87: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/87.jpg)
Scaling
If the scale factors are the same, Sx = Sy uniform scaling
![Page 88: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/88.jpg)
Scaling
P(1, 3), Sx = 2, Sy = 5square rectangle
p'x = sx • pxp'y = sy • py
P(1, 2)
P’
![Page 89: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/89.jpg)
Scaling
What does scaling by 1 do?
Sx=1 , Sy=1
![Page 90: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/90.jpg)
Scaling
What does scaling by 1 do?
Sx=1 , Sy=1 Nothing changedWhat is that matrix called?
![Page 91: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/91.jpg)
Scaling
What does scaling by 1 do?
Sx=1 , Sy=1 Nothing changedWhat is that matrix called?Identity Matrix
![Page 92: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/92.jpg)
Scaling
What does scaling by a negative value do? Sx=-2 , Sy=-2
![Page 93: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/93.jpg)
Scaling
What does scaling by a negative value do? Sx=-2 , Sy=-2 Moved to Different Quadran
![Page 94: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/94.jpg)
COMBINING TRANSFORMATIONS
![Page 95: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/95.jpg)
Combining Transf
For example, we want to rotate/scale then we want to do translation
P' = M • P + A
![Page 96: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/96.jpg)
Combining Transf
For example, we want to translate, then we want to rotate and sclae
P' = S • R • (A + P)
![Page 97: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/97.jpg)
Combining Transf
P (Px,Py)=(4 , 6) : Translate(6 , -3) ->
Rotation(60˚) -> Scaling (0.5 , 2.0)
P' = S • R • (A + P)
![Page 98: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/98.jpg)
Combining Transf
![Page 99: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/99.jpg)
Combining Transf
To combine multiple transformations, we must explicitly compute each transformed point.
P' = S • R • (A + P)
![Page 100: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/100.jpg)
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)
![Page 101: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/101.jpg)
Combining Transf
Let’s move our problem into one dimension higher
![Page 102: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/102.jpg)
HOMOGENOUS COORDINATES
![Page 103: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/103.jpg)
Homogenous Coord
Let point (x, y) in 2D be represented by point (x, y, 1) in the new space.
y y
x
x
w
![Page 104: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/104.jpg)
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.
![Page 105: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/105.jpg)
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) ?.
![Page 106: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/106.jpg)
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.
![Page 107: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/107.jpg)
Homogenous Coord
With homogeneous coordinates, we can combine multiplication and addition into a single operation.
![Page 108: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/108.jpg)
Homogenous Coord
Point in column-vector:
Our point now has threecoordinates. So our matrix is needs to be 3x3.
![Page 109: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/109.jpg)
Homogenous Coord
Translation:
x’y’
xy
tx
ty= +
![Page 110: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/110.jpg)
Homogenous Coord
Rotation:
![Page 111: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/111.jpg)
Homogenous Coord
Scaling:
![Page 112: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/112.jpg)
Homogenous Coord
P (Px,Py)=(4 , 6) : Translate(6 , -3) ->
Rotation(60˚) -> Scaling (0.5 , 2.0)
![Page 113: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/113.jpg)
Homogenous Coord
We can represent any sequence of transformations as a single matrix
![Page 114: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/114.jpg)
Homogenous Coord
Does the order of operations matter?
![Page 115: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/115.jpg)
Homogenous Coord
Yes, the order does matter!
1. Translate2. Rotate
1. Rotate2. Translate
![Page 116: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/116.jpg)
Homogenous Coord
Yes, the order does matter!A . B = B . A?
![Page 117: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/117.jpg)
Homogenous Coord
Yes, the order does matter!A . B B . A
![Page 118: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/118.jpg)
Homogenous Coord
Yes, the order does matter!(A.B).C = A.(B.C)?
![Page 119: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/119.jpg)
Homogenous CoordYes, the order does matter!(A.B).C = A.(B.C)
++++++
++++++=
++
++=
dhlcfldgjcejdhkcfkdgicei
bhlaflbgjaejbhkafkbgiaei
lk
ji
dhcfdgce
bhafbgae
lk
ji
hg
fe
dc
ba
++++++
++++++=
++
++
=
dhldgjcflcejdhkdgicfkcei
bhlbgjaflaejbhkbgiafkaei
hlgjhkgi
flejfkei
dc
ba
lk
ji
hg
fe
dc
ba
![Page 120: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/120.jpg)
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)
![Page 121: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/121.jpg)
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 sinsin cos -tx sin - ty cos
0 0 1
1 0 tx
0 1 ty
0 0 1 .
Composite Transformation Matrix
![Page 122: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/122.jpg)
Reflection:
x-axis y-axis
100
010
001
100
010
001
Other Transf
![Page 123: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/123.jpg)
Reflection:
origin line x=y
100
010
001
100
001
010
Other Transf
![Page 124: GRAFIKA KOMPUTERmalifauzi.lecture.ub.ac.id/files/2016/02/Drawing-2D-Graphics-v2.pdf · Transformation Pipeline Vertex Modelview Matrix Projection Matrix Perspective Division Viewport](https://reader036.vdocument.in/reader036/viewer/2022081400/605c247457b71749f651caba/html5/thumbnails/124.jpg)
• Shearing-x
• Shearing-y
Sebelum Sesudah
Sebelum Sesudah
Shearing