![Page 1: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/1.jpg)
GRAFIKA KOMPUTER
~ M. Ali Fauzi
![Page 2: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/2.jpg)
Drawing
2D Graphics
![Page 3: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/3.jpg)
VIEWPORTTRANSFORMATION
![Page 4: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/5.jpg)
World Coordinate System
![Page 6: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/6.jpg)
World Coordinate System
00 1 2-2 -1
1
2
-1
![Page 7: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/8.jpg)
World Window
0 1 2-2 -1
1
2
-1
![Page 9: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/9.jpg)
World Window
0 1 2-2 -1
1
2
-1
![Page 10: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/14.jpg)
Viewport
Screen
Screenwindow
InterfaceWindow
Viewport
![Page 15: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/15.jpg)
Screen Coordinate System
~ Space in which the image is displayed
~ For example : 800x600pixels
![Page 16: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/16.jpg)
Interface Window
~ Visual representation of thescreen coordinate system forwindowed displays
glutInitWindowSize(320, 320); glutInitWindowPosition(50, 50);
![Page 17: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/18.jpg)
Viewport
![Page 19: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/21.jpg)
Viewport
Screen
Screenwindow
InterfaceWindow
Viewport
![Page 22: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/22.jpg)
Viewport
![Page 23: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/23.jpg)
Viewport Transformation
~ The Process called viewporttransformation
![Page 24: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/24.jpg)
THE ASPECT RATIOPROBLEM
![Page 25: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/25.jpg)
The distortion
Screen
Screenwindow
InterfaceWindow
Viewport
![Page 26: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/26.jpg)
The distortion
Screen
Screenwindow
InterfaceWindow
Viewport
![Page 27: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/27.jpg)
Ratio
~ R = Aspect Ratio of World
![Page 28: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/28.jpg)
Ratio
![Page 29: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/29.jpg)
Keeping the Ratio
Screen
Screenwindow
InterfaceWindow
Viewport
![Page 30: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/30.jpg)
Keeping the Ratio
Screen
Screenwindow
InterfaceWindow
Viewport
![Page 31: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/32.jpg)
The Startegy
~ DefaultglOrtho2D (-L, L, -L, L);
~ For example L=1,glOrtho2D (-1, 1, -1, 1);
![Page 33: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/33.jpg)
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);
![Page 34: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/34.jpg)
The Startegy
![Page 35: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 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);
} }
![Page 38: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/38.jpg)
2D
TRANSFORMATION
![Page 39: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/39.jpg)
Transformation
Is The geometrical changesof an object from a currentstate to modified state.
![Page 40: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/40.jpg)
Why Needed?
To manipulate the initiallycreated object and todisplay the modified objectwithout having to redraw it
![Page 41: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/41.jpg)
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()
![Page 42: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/43.jpg)
Types of Transformation
~ Projection.Defines the viewing volume andclipping planes from eyecoordinate to clip coordinates.
![Page 44: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/45.jpg)
Transformation Matrix
Transformations in OpenGL using matrix concept
![Page 46: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/47.jpg)
Matrix Modes
~ Projection Matrix (GL_PROJECTION)
Setup camera projection and cliiping-area
![Page 48: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/48.jpg)
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()
![Page 49: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/50.jpg)
THE MATRIX
![Page 51: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/51.jpg)
Matrix addition and subtraction
a
b
c
d±a ± c
b ± d=
![Page 52: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/52.jpg)
Matrix addition and subtraction
1-3
56+ =
![Page 53: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/53.jpg)
Matrix addition and subtraction
1-3
56+ =
63
![Page 54: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/54.jpg)
Matrix addition and subtraction
1-3
+ =3 1-1 4
![Page 55: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/55.jpg)
Matrix addition and subtraction
1-3
+ =3 1-1 4
Tak boleh
![Page 56: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/57.jpg)
Matrix Multiplication
a be fg h. = a.e + b.g a.f + b.h
![Page 58: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/58.jpg)
Matrix Multiplication
1 21 23 1
. =
![Page 59: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/59.jpg)
Matrix Multiplication
1 21 23 1
. = 6 6
![Page 60: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/60.jpg)
Matrix Multiplication
12
1 23 1
. =
![Page 61: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/61.jpg)
Matrix Multiplication
12
1 23 1
. = Tak boleh
![Page 62: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/62.jpg)
Matrix Types
efe f
Row Vector Column Vector
![Page 63: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/63.jpg)
Matrix Multiplication
a bc d
ef. =
e fa bc d. =
e fa cb d. =
![Page 64: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/65.jpg)
Matrix Math
We’ll use the column-vector representation for a point.
![Page 66: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/67.jpg)
THETRANSFORMATION
![Page 68: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/70.jpg)
Translation
x’y’
xy
tx
ty= +
(2, 2) tx= 6
ty=4
?
x’y’
22
6
4= +
![Page 71: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/71.jpg)
Translation
x’y’
xy
tx
ty= +
(2, 2) tx= 6
ty=4
?
86
22
6
4= +
![Page 72: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/73.jpg)
Rotation
θ
P
P’
p'x = px cos θ – py sin θp'y = px sin θ + py cos θ
![Page 74: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/74.jpg)
Rotation
The transformation using Rotation Matrix
New Position Rotation Matrix Current Position
P' = R . P
![Page 75: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/75.jpg)
Rotation
The transformation using Rotation Matrix
New Position Rotation Matrix Current Position
P' = R . P
![Page 76: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/77.jpg)
Rotation
![Page 78: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/79.jpg)
Scaling
Scales are about the origin.
P
P’
p'x = sx • px
p'y = sy • py
![Page 80: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/80.jpg)
Scaling
The transformation using Scale Matrix
New Position Scale Matrix Current Position
P' = S • P
![Page 81: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/81.jpg)
Scaling
The transformation using Scale Matrix
New Position Scale Matrix Current Position
P' = S • P
![Page 82: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/83.jpg)
Scaling
P(2, 5), Sx = 0.5, Sy = 0.5Find P’ ?
p'x = sx • px
p'y = sy • pyP(2, 5)
P’
![Page 84: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/85.jpg)
Scaling
P(2, 5), Sx = 2, Sy = 2Find P’ ?
p'x = sx • px
p'y = sy • pyP(2, 5)
P’
![Page 86: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/86.jpg)
Scaling
If the scale factors are not the same, Sx ≠ Sy differential scalingChange in size and shape
![Page 87: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/87.jpg)
Scaling
If the scale factors are the same, Sx = Sy uniform scaling
![Page 88: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/88.jpg)
Scaling
P(1, 3), Sx = 2, Sy = 5square rectangle
p'x = sx • px
p'y = sy • py
P(1, 2)
P’
![Page 89: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/89.jpg)
Scaling
What does scaling by 1 do?
Sx=1 , Sy=1
![Page 90: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/90.jpg)
Scaling
What does scaling by 1 do?
Sx=1 , Sy=1 Nothing changedWhat is that matrix called?
![Page 91: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/92.jpg)
Scaling
What does scaling by a negative value do? Sx=-2 , Sy=-2
![Page 93: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/93.jpg)
Scaling
What does scaling by a negative value do? Sx=-2 , Sy=-2 Moved to Different Quadran
![Page 94: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/94.jpg)
COMBINING TRANSFORMATIONS
![Page 95: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/98.jpg)
Combining Transf
![Page 99: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/101.jpg)
Combining Transf
Let’s move our problem into one dimension higher
![Page 102: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/102.jpg)
HOMOGENOUS COORDINATES
![Page 103: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/107.jpg)
Homogenous Coord
With homogeneous coordinates, we can combine multiplication and addition into a single operation.
![Page 108: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/109.jpg)
Homogenous Coord
Translation:
x’y’
xy
tx
ty= +
![Page 110: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/110.jpg)
Homogenous Coord
Rotation:
![Page 111: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/111.jpg)
Homogenous Coord
Scaling:
![Page 112: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/112.jpg)
Homogenous Coord
P (Px,Py)=(4 , 6) : Translate(6 , -3) ->
Rotation(60˚) -> Scaling (0.5 , 2.0)
![Page 113: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/113.jpg)
Homogenous Coord
We can represent any sequence of transformations as a single matrix
![Page 114: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/114.jpg)
Homogenous Coord
Does the order of operations matter?
![Page 115: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/115.jpg)
Homogenous Coord
Yes, the order does matter!
1. Translate2. Rotate
1. Rotate2. Translate
![Page 116: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/116.jpg)
Homogenous Coord
Yes, the order does matter!A . B = B . A?
![Page 117: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/117.jpg)
Homogenous Coord
Yes, the order does matter!A . B ≠ B . A
![Page 118: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/118.jpg)
Homogenous Coord
Yes, the order does matter!(A.B).C = A.(B.C)?
![Page 119: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/119.jpg)
Homogenous CoordYes, the order does matter!(A.B).C = A.(B.C)
++++++++++++
=
•
++++
=
dhlcfldgjcejdhkcfkdgiceibhlaflbgjaejbhkafkbgiaei
lkji
dhcfdgcebhafbgae
•
•
lkji
hgfe
dcba
++++++++++++
=
++++
•
=
dhldgjcflcejdhkdgicfkceibhlbgjaflaejbhkbgiafkaei
hlgjhkgiflejfkei
dcba
•
•
lkji
hgfe
dcba
![Page 120: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/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 sinθsinθ cosθ -tx sinθ - ty cosθ
0 0 1
1 0 tx
0 1 ty
0 0 1 .
Composite Transformation Matrix
![Page 122: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/122.jpg)
Reflection:
x-axis y-axis
−
100010001
−
100010001
Other Transf
![Page 123: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/123.jpg)
Reflection:
origin line x=y
−
−
100010001
100001010
Other Transf
![Page 124: GRAFIKA KOMPUTER - malifauzi.lecture.ub.ac.id · Transformation Pipeline. Vertex. Modelview Matrix Projection Matrix Perspective Division Viewport Transformation. Object Coordinates](https://reader031.vdocument.in/reader031/viewer/2022021723/5c89ed9309d3f2431b8ce80e/html5/thumbnails/124.jpg)
• Shearing-x
• Shearing-y
Sebelum Sesudah
Sebelum Sesudah
Shearing