transformation - github pages · fisher et al. (2012) placement of objects cs 148: introduction to...
TRANSCRIPT
CS 148: Summer 2016Introduction of Graphics and ImagingZahid Hossain
Transformation
http://www.pling.org.uk/cs/cgv.html
Fisher etal.(2012)
PlacementofObjects
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 2
Fisher etal.(2012)
PlacementofObjects
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 3
Oriented
Fisher etal.(2012)
PlacementsofObjects
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 4
Translated
PointsandVectors
5
p
Originx
y
z
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain
PointsandVectors
6
Originx
y
z
Vector Points
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain
Transformations
• What?Justfunctionsactingonpoints:
• Why?• Viewing:• Convertbetweencoordinatessystems• Virtualcamera,e.g.perspectiveprojections
• Modeling:• Createobjectsinaconvenientorientation• Usemultiple instancesofagivenshape• Kinematics– characters/robots
7
LinearTransformation
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 8
LinearTransformation
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 9
LinearTransformation
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 10
LinearTransformation
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 11
Lines Map to Lines
CommonTransformation
12
Rotate Scale Shear
13
ComposingTransformations
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 14
FirstRotate45°
ComposingTransformations
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 15
ThenScale2xalongy
ComposingTransformations
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 16
RotationScale
Orderoftransformations
ComposingTransformation
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 17
Rotate->Scale Scale->Rotate
Not Commutative
Translation
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 18
HomogenousCoordinates
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 19
For any non-zero c
HomogenousCoordinates
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 20
HomogenousCoordinates
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 21
HomogenousCoordinates
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 22
4DHomogenous Coordinate 3DCartesianCoordinate
HomogenousCoordinates
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 23
w=1
w-axis
x,y-axis
(x,y,w)
(x/w,y/w,1)
HomogenousCoordinates
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 24
z=1
z-axis
x,y-axis
Decreasew
HomogenousCoordinates
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 25
z=1
z-axis
x,y-axis
Decreasew
HomogenousCoordinates
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 26
HomogenousCoordinates
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 27
Represents a Vector!(Homogenous Coordinates express both Vectors and Points)
BacktoTranslation
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 28
Homogenous CoordinateHomogenous Coordinate
SomeExercise
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 29
(3,4,2):
Convert3DCartesianCoordinatetoHomogenousCoordinate
SomeExercise
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 30
(3,4,2):(3,4,2,1)
Convert3DCartesianCoordinatetoHomogenousCoordinate
SomeExercise
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 31
(3,4,2):(3,4,2,1)
Convert3DCartesianCoordinatetoHomogenousCoordinate
ConvertHomogenousCoordinatetoCartesianCoordinate
(3,4,2,2) :
SomeExercise
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 32
(3,4,2):(3,4,2,1)
Convert3DCartesianCoordinatetoHomogenousCoordinate
ConvertHomogenousCoordinatetoCartesianCoordinate
(3,4,2,2) :(1.5,2,1)
SomeExercise
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 33
Rotateaboutthecenterofthebox
SomeExercise
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 34
Translatetocenter
SomeExercise
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 35
Rotate
SomeExercise
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 36
Translateback
CoordinateSystem
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 37
CoordinateSystem
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 38
CoordinateSystem
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 39
CoordinateSystem:Rotation
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 40
CoordinateSystem:Rotation
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 41
CoordinateSystem:Rotation
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 42
CoordinateSystem:Hierarchy
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 43
CoordinateSystem:Hierarchy
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 44
CoordinateSystem:Hierarchy
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 45
InterpretingTransformations
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 46
TwoInterpretations
• WithrespecttoGlobalFrame• WithrespecttoLocalFrame
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 47
CoordinateSystem:Hierarchy
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 48
w.r.t GlobalFrame
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 49
Combined=Translate(0,1)Rotate(45°)Translate(1,1)
Translate(1,1) Rotate(45°) Translate(0,1)
OrderofTransforms
w.r.t LocalFrame
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 50
Combined=Translate(0,1)Rotate(45°)Translate(1,1)
Translate(0,1) Rotate(45°) Translate(1,1)
OrderofTransform
w.r.t LocalFrame
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 51
Combined=Translate(0,1)Rotate(45°)Translate(1,1)
Translate(0,1) Rotate(45°) Translate(1,1)
OrderofTransform
Both interpretations are equivalent
HierarchicalModeling
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 52
translate(0,4)drawTorso()pushMatrix()
translate(1.5,0)rotateX(leftHipRotate)drawThigh()pushMatrix()
translate(0,-2)rotateX(leftKneeRotate)drawLeg()...
popMatrix()popMatrix()pushMatrix()
translate(-1.5,0)rotateX(rightHipRotate)// Draw the right side...
...x
y
CurrentMatrix =Translate(0,4)
MatrixStack
HierarchicalModeling
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 53
translate(0,4)drawTorso()pushMatrix()
translate(1.5,0)rotateX(leftHipRotate)drawThigh()pushMatrix()
translate(0,-2)rotateX(leftKneeRotate)drawLeg()...
popMatrix()popMatrix()pushMatrix()
translate(-1.5,0)rotateX(rightHipRotate)// Draw the right side...
...x
y
CurrentMatrix =Translate(0,4)
MatrixStack
Translate(0,4)
HierarchicalModeling
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 54
translate(0,4)drawTorso()pushMatrix()
translate(1.5,0)rotateX(leftHipRotate)drawThigh()pushMatrix()
translate(0,-2)rotateX(leftKneeRotate)drawLeg()...
popMatrix()popMatrix()pushMatrix()
translate(-1.5,0)rotateX(rightHipRotate)// Draw the right side...
...x
y
CurrentMatrix =translate(0,4)translate(1.5,0)rotateX(leftHipRotate)translate(0,-2)rotate(leftKneeRotate)
MatrixStack
translate(0,4)translate(0,4)translate(1.5,0)rotateX(leftHipRotate)
HierarchicalModeling
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 55
translate(0,4)drawTorso()pushMatrix()
translate(1.5,0)rotateX(leftHipRotate)drawThigh()pushMatrix()
translate(0,-2)rotateX(leftKneeRotate)drawLeg()...
popMatrix()popMatrix()pushMatrix()
translate(-1.5,0)rotateX(rightHipRotate)// Draw the right side...
...x
y
CurrentMatrix =translate(0,4)translate(1.5,0)rotateX(leftHipRotate)
MatrixStack
translate(0,4)
HierarchicalModeling
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 56
translate(0,4)drawTorso()pushMatrix()
translate(1.5,0)rotateX(leftHipRotate)drawThigh()pushMatrix()
translate(0,-2)rotateX(leftKneeRotate)drawLeg()...
popMatrix()popMatrix()pushMatrix()
translate(-1.5,0)rotateX(rightHipRotate)// Draw the right side...
...x
y
CurrentMatrix =translate(0,4)
MatrixStack
HierarchicalModeling
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 57
translate(0,4)drawTorso()pushMatrix()
translate(1.5,0)rotateX(leftHipRotate)drawThigh()pushMatrix()
translate(0,-2)rotateX(leftKneeRotate)drawLeg()...
popMatrix()popMatrix()pushMatrix()
translate(-1.5,0)rotateX(rightHipRotate)// Draw the right side...
...x
y
CurrentMatrix =translate(0,4)translate(-1.5,0)rotateX(rightHipRotate)
MatrixStack
translate(0,4)
HierarchicalModeling
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 58
x
y
Torso
RightThigh
RightLeg
translate(0,4)
translate(1.5,0)rotateX(rightHipRotate)
translate(0,-2)rotateX(rightLegRotate)popM
atrix()LeftSide
pushMatrix()
pushMatrix()
pushMatrix()
CameraandProjectionMatrices
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 59
3Dto2DConversion
• Theworldisin3D• ButourScreenisin2D• Imagineourscreenisacameralookingoutintotheworld.• Tasks
1. Convert3DworldcoordinatestoCameraCoordinates2. ProjecttheCameraCoordinateon2Dscreen
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 60
CameraMatrix
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 61
CameraMatrix
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 62
Homework!
ProjectionMatrix(Basic)
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 63
ProjectionMatrix(Basic)
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 64
NormalizedDeviceCoordinates
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 65
http://www.songho.ca/opengl/gl_projectionmatrix.html
NDC(NormalizedDeviceCoordinate)
OpenGLProjectionMatrix
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 66
Note the –n and –f (to be consistent with OpenGL)
OpenGLProjectionMatrix
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 67
OpenGLProjectionMatrix
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 68
Similarly for y
OpenGLProjectionMatrix
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 69
z’ is a little tricky
SolvingforAandB
OpenGLProjectionMatrix
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 70
Non-LinearityinZ
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 71
-8 -6 -4 -2
-1.0
-0.5
0.5
1.0
1. Monotonic:valueskeepsincreasingaszgoesin–vedirection2. Resolutiondecreasesaszdecrease(along–ve)ordepthincreases
Non-LinearityinZ
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 72
-8 -6 -4 -2
-1.0
-0.5
0.5
1.0
1. Monotonic:valueskeepsincreasingaszgoesin–vedirection2. Resolutiondecreasesaszdecrease(along–ve)ordepthincreases
For Later:Has interesting effects in Depth Buffering
StartLearningOpenGLNow
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 73
StartLearningOpenGLNow
CS 148: Introduction to Computer Graphics and Imaging (Summer 2016) – Zahid Hossain 74
Suggestions OnlyFor OpenGL 3.3: http://learnopengl.com
For OpenGL < 2.0: Any GLUT or FreeGLUT tutorial
CS 148: Summer 2016Introduction of Graphics and ImagingZahid Hossain
Transformation
http://www.pling.org.uk/cs/cgv.html