1、第三讲 图形变换 图形变换是计算机图形学的基础内容。有二维（三维）图形的平移、旋转、变比、对称等变换，三维图形的投影透视变换等。第第6讲讲 图形变换图形变换 二维几何变换二维几何变换 基本变换与复合变换基本变换与复合变换 三维几何变换三维几何变换 基本变换与复合变换基本变换与复合变换本讲主要内容 图形变换的数学基础 二维图形的基本变换、复合（组合）变换；三维图形基本变换、复合（组合）变换；平行投影 透视投影图形变换的数学基础 矢量运算 矩阵运算 矩阵 单位矩阵 逆矩阵 转置矩阵 行列式 上机编程，实现两个矩阵相乘特别注意：矩阵相乘不适合交换律变换的数学基础变换的数学基础(1/4)矢量矢量 矢量
2、和矢量和 zyxuuuUzyxvvvVzzyyxxvuvuvuVU变换的数学基础变换的数学基础(2/4)矢量的数乘矢量的数乘 矢量的点积矢量的点积 性质性质zyxkukukuUkzzyyxxvuvuvuVUUVVUVUVU000UUU变换的数学基础变换的数学基础(3/4)矢量的长度矢量的长度 单位矢量单位矢量 矢量的夹角矢量的夹角 矢量的叉积矢量的叉积 222zyxuuuUUUVUVUcoszyxzyxvvvuuukjiVU变换的数学基础变换的数学基础(4/4)矩阵矩阵 阶矩阵阶矩阵 n阶方阵阶方阵 零矩阵零矩阵 行向量与列向量行向量与列向量 单位矩阵单位矩阵 矩阵的加法矩阵的加法 矩阵的数乘
3、矩阵的数乘 矩阵的乘法矩阵的乘法 矩阵的转置矩阵的转置 矩阵的逆矩阵的逆 mn齐次坐标用n+1维向量表示n维向量 优越性 提供了用矩阵运算把二维三维甚至高维空间的点集从一个坐标系变换到另一个坐标系的方法。可以表示无穷远的点图形几何变换 基本原理：按某种规律，改变图形的形状、大小、位置等 方法：坐标系不动，图形变动后坐标值变化；坐标系变化后图形在新坐标系中的新值。二二.图形变换的过程图形变换的过程建立物体的 WC变换到 VC在VC空间 进行裁剪投影到 NDC变换到 DC在图形设备上输出三三.图形变换的特点图形变换的特点 图形变换就是改变图形的几何关系，即改变图形顶点的坐标，但图形的拓扑关系不变。
4、最基本的图形变换可以分别用矩阵形式表示为：平移变换 PPTm TmMx My Mx、My分别为X方 向和Y方向的平移量。比例变换 PPTs Sx 0 0 Sy Sx、Sy分别表示比例因子。旋转变换 PPTr cos sin -sin cos 0时为逆时针旋转 0时为顺时针旋转Ts Tr四四.齐次坐标齐次坐标 从形式上来说，用一个有n+1个分量的向量去表示一个有n个分量的向量的方法称为齐次坐标表示。例如二维平面上的点(x，y)的齐次坐标表示为(hx，hy，h)，h是任一不为0的比例系数。给定一个点的齐次坐标表示:(x，y，h)，该点的二维笛卡儿直角坐标：(x/h，y/h)。同样，对于一个三维空间
5、的向量(x，y，z)，它在四维空间中对应的向量即齐次坐标为(xh，yh，zh，h)，其中h0。齐次坐标的概念可以推广到n维空间的向量。齐次坐标的表示不是唯一的，通常当h=1时，称为规格化齐次坐标规格化齐次坐标。为什么需要齐次坐标？为什么需要齐次坐标？多个变换作用于多个目标多个变换作用于多个目标变换合成变换合成变换合成的问题变换合成的问题引入齐次坐标引入齐次坐标 变换的表示法统一变换的表示法统一齐次坐标表示的优点：齐次坐标表示的优点：可方便地用变换矩阵实现对图形的变换；可方便地用变换矩阵实现对图形的变换；齐次坐标表示法可以表达无穷远点。齐次坐标表示法可以表达无穷远点。齐次坐标齐次坐标二维图形变换
6、矩阵二维图形变换矩阵 一般形式：a b p c d q l m s P =P T2D（二维仿射变换（二维仿射变换:p=q=0）二维变换矩阵中：a b c d l m 是对图形进行平移变换。S 是整体比例变换。（非仿射变换）（非仿射变换）p,q 用于投影变换（三维点时使用）用于投影变换（三维点时使用）x y 1 =x y 1 是对图形进行缩放、旋转、对称、错切等变换。二维图形变换二维图形变换 采用齐次坐标可将二维图形变换表示成如下形式：a b 0 c d 0 l m 1 P =P M 二维变换矩阵中：a b c d l m 是对图形进行平移变换 x y 1 =x y 1 变换后的顶点坐标变换前的
7、顶点坐标二维变换矩阵是对图形进行缩放、旋转、对称、错切等变换。二维基本几何变换 点的变换：恒等变换 平移变换 比例变换 旋转变换 对称变换 错切变换 平移变换平移变换 只改变图形的位置，不改变图形的大只改变图形的位置，不改变图形的大小和形状小和形状二维：将图形对象从一个位置二维：将图形对象从一个位置(x,y)移到另一个位置移到另一个位置(x，y)的变换。的变换。P=P T1 0 0 0 1 0 dx dy 1T(dx,dy)=平移矩阵1 0 0 0 1 0 dx-dy 1T-1(dx,dy)=平移变换平移变换(x,y)(x,y)(dx,dy)xyd yydxxy x比例变换比例变换比例矩阵P=
8、PSsx 0 0 0 sy 0 0 0 1S(sx,sy)=1/sx 0 0 0 1/sy 0 0 0 1S-1(sx,sy)=比例变换示例比例变换示例(x,y)(x,y)xy比例变换比例变换 比例比例因子因子 if sx,sy 1,物体被拉伸 if 0 sx,sy 1,物体被压缩 if sx,sy 0,物体被倒影 均匀均匀/非均匀非均匀比例变换比例变换 if sx=sy,均匀均匀比例变换比例变换 if sx sy,非均匀非均匀比例变换比例变换旋转变换旋转变换xyf(x,y)(x,y)旋转变换旋转变换Remember-旋转方向-旋转角度-旋转中心-旋转是刚体变换xP(x,y)P(x,y)y 旋
9、转变换旋转变换 点点P(x,y)的极坐标表示的极坐标表示 绕坐标原点旋转角度绕坐标原点旋转角度 （逆时针为正，顺时针（逆时针为正，顺时针为负）为负）P=P Rcos sin 0 -sin cos 0 0 0 1R()=旋转矩阵cos -sin 0 sin cos 0 0 0 1R-1()=对称变换对称变换 对称变换对称变换 关于关于x轴的对称变换轴的对称变换 关于关于y轴的对称变换轴的对称变换 100010001xSY100010001ySY对称变换对称变换 对称变换对称变换 关于原点的对称变换关于原点的对称变换 关于关于y=x的对称变换的对称变换 关于关于y=-x的对称变换的对称变换1000
10、10001SO100001010 xySY100001010 xySY 错切变换错切变换 以以y轴为依赖轴的错切变换轴为依赖轴的错切变换 y坐标不变坐标不变10001001 1 1*bxyyxyybyxx点的基本几何变换的推广 点的变换：直线的变换 多边形的变换 曲线的变换（由每一点的变换，重新画线完成）二维仿射变换 x=ax+by+m y =cx+dy+n P=P T二维复合变换（组合变换）任何一复杂的几何变换可以看成基本集合变换的组合：P=PT=P T1 T2 Tn 复合平移复合平移 复合比例复合比例 复合旋转复合旋转其他常见复合变换其他常见复合变换 相对于某个参考点的几何变换（比例、旋转
11、等）相对于某个参考点的几何变换（比例、旋转等）相对于某直线的几何变换（对称等）相对于某直线的几何变换（对称等）相对于某个参考点的几何变换（比例、相对于某个参考点的几何变换（比例、旋转等）旋转等）求某点P相对于固定点F（xF,yY）旋转一个角度 的变换矩阵T。步骤：将固定点移到坐标原点上；对原点进行二维旋转变换；反平移固定点到原位。例：求例：求P(5,4)绕绕F(3,2)逆时针旋转逆时针旋转45度的度的变换矩阵，以及变换后变换矩阵，以及变换后P点的新坐标点的新坐标P。相对于某直线的几何变换（对称等）相对于某直线的几何变换（对称等）步骤 平移该对称直线到原点；旋转角度到与坐标轴（X轴或Y轴）重合；
12、对变换对象进行对称变换；反向旋转到原来方向；反平移到原来位置。关于任意轴的对称变换关于任意轴的对称变换 课堂练习（一）回答下列问题：1.什么是齐次坐标？为什么要用规范化的齐次坐标？2.什么是二维仿射变换？有哪些不变性？写出它的变换形式（用矩阵表示）课堂练习（二）证明题1.证明两个连续的旋转变换（或变比例变换）的矩阵运算具有互换性。如，两个二维旋转变换R(1)，R（2），具有下式 R(1)R（2）=R(1+2）。2.证明二维点相对于X轴作对称，紧跟着相对于y=-x直线作对称变换，完全等价于该点相对于坐标原点作旋转变换（旋转角度是多少？）课堂练习（三）推导题1.试推导将二维平面上任意直线段P1（x
13、1,y1）与P1（x1,y1），转换成与X轴重合的变换矩阵（线段P1P2与X轴的夹角小于45度）。2.求P点相对于L：ax+by+c=0，作对称变换后得到的P。例如：已知点P（8，12），直线L的方程为：x-2y+6=0，请推导并计算该点相对于作对称变换的矩阵T，使点P的对称点 P=PT，并求出该点坐标值。YXO已知点P（8，12），直线L的方程为：x-2y+6=0，请推导并计算P相对于L作对称变换的矩阵T，并求出该点坐标值。三维图形变换三维图形变换 坐标系 右手法则拇指指向坐标轴Z的方向，其余四指指向旋转方向 YZX0逆时针为正三维图形变换三维图形变换 三维空间点的齐次坐标矩阵（x y z
14、1）x y z 1 =x y z 1 T三维图形变换三维图形变换三维变换矩阵可表示为：a b c p d e f q g h i r l m n s 其中：a b c d e f 产生比例、错切、镜象和旋转等基本变换。g h i l m n 产生沿x、y、z三轴方向上的平移变换。p q 产生透视变换。r s 产生等比例缩放变换。T=三维图形变换中要注意注意的几个问题：1.(三维)采用 s s 来实现整体的比例整体的比例变换。当|s|1 时，三维图形整体等比例缩小。2.(三维)对称对称变换是相对于各个坐标平面相对于各个坐标平面进行的。3.(三维)旋转旋转变换是指绕坐标轴绕坐标轴的旋转。右手坐标系
15、下，绕坐标轴逆时针为正 顺时针旋转为负。4.三维图形的级联(组合)变换 对于复杂的三维图形变换，也需要通过若干个变换矩阵的级联才能实现。特别注意:变换的方法变换的方法和矩阵级联的顺序。矩阵级联的顺序。三维几何变换三维几何变换 平移变换平移变换 （相对于原点）比例变换（相对于原点）比例变换1010000100001),(zyxzyxttttttT1000000000000zyxsss(),zyxsssS三维几何变换三维几何变换 对称变换对称变换 只考虑关于坐标平面的对称变换 关于xy平面对称 关于yz平面对称 关于xz平面对称1000000000000-111100000000000011-11
16、0000000000001-11错切变换 变换矩阵为：三维错切变换矩阵：1 b c 0 d 1 f 0 g h 1 0 0 0 0 1 其中：b=c=f=h=0，沿X方向产生错切T=三维几何变换三维几何变换 旋转变换旋转变换 需要指定旋转角度和旋转轴需要指定旋转角度和旋转轴.yxzrotation axis(x,y,z)(x,y,z)三维几何变换三维几何变换 旋转变换旋转变换 绕绕x轴轴10000cossin00sincos00001)(xR(x,y,z)(x,y,z)xyz三维几何变换三维几何变换 旋转变换旋转变换 绕绕y轴轴10000cossin00100sin0cos)(yR(x,y,z
17、)(x,y,z)xyz三维几何变换三维几何变换 绕绕z轴轴1000010000cossin00sincos)(zRxz(x,y,z)(x,y,z)几点说明几点说明1）平移变换只改变图形的位置，不改变图形的大小和形状；平移变换只改变图形的位置，不改变图形的大小和形状；2）旋转变换保持图形各部分间的线性关系和角度关系，变换后直）旋转变换保持图形各部分间的线性关系和角度关系，变换后直线的长度不变；线的长度不变；3）比例变换可改变图形的大小和形状；）比例变换可改变图形的大小和形状；4）错切变换引起图形角度关系的改变，甚至导致图形发生崎变；）错切变换引起图形角度关系的改变，甚至导致图形发生崎变；5)拓扑
18、不变的几何变换不改变图形的连续关系和平行关系；拓扑不变的几何变换不改变图形的连续关系和平行关系；三维复合变换 实际的图形对象的变换往往是由多个简单变换复合而来。将相关的简单变换的变换矩阵乘起来就可得到复合变换的变换矩阵。例：求基于参考点（xf,yf,zf）的比例变换，变换方法步骤：1）通过平移变换将参考点移到原点，使原点与参考点重合；2）相对于原点进行比例变换；3）通过平移变换将参考点移原来位置；绕空间任意轴的三维旋转变换。例：有空间任意轴AB（用点A：xA,yA,zA，方向数a,b,c表示），现有空间点P（x,y,z）绕AB轴旋转角后为P（x,y,z ），求该变换矩阵。方法步骤：1)平移AB
19、轴与原点重合；2)AB绕X轴旋转角，使之落到ZX平面上；3)将AB绕Y轴旋转角，使之与Z轴重合；4)此时AB与Z轴重合，绕Z轴旋转 角；5)绕X轴反旋转-角；6)绕X轴反旋转-角；7)反平移。预备知识：方向数与各坐标轴、坐标平面的关系（夹角、投影等）B点的方向数为（2，3，4）YXZ绕X轴旋转角；绕Y轴旋转角。习习 题题7、在坐标系、在坐标系oxyz中，求一个变换将中，求一个变换将P(1,1,1)Q(2,2,2)变换到变换到z轴上：轴上：P在坐标原在坐标原点，点，Q在在z轴正半轴。（方向数为：？轴正半轴。（方向数为：？）xyzPQoxyzQo(P)M随堂练习1.写出三维基本几何变换的逆变换；2
20、.（教材P213）将图7-40中的物体ABCDEFGH进行如下变换：平移使C点与P（1，-1，0）重合，然后绕Z轴旋转60度。3.将图7-41中的空间四面体进行关于P点的整体放大，试写出变换矩阵。4.假定空间直线AB两端点坐标为A(0,0,0)B(2,2,2)，试写出绕AB轴旋转30度的三维复合变换矩阵。5.*在右手坐标系中，从原点到P（x,y,z）给出一直线，用三种方法将此直线旋转到正的轴线上，并用代数证明所得的结果等价。a.先绕X轴旋转到XZ平面上，再绕Y轴到Z轴上；b.先绕Y轴旋转到YZ平面上，再绕X轴到Z轴上；c.先绕Z轴旋转到XZ平面上，再绕Y轴到Z轴上.二维图形的显示流程图二维图形
21、的显示流程图绕绕任意点的旋转xP(x,y)P(x,y)V=(Vx,Vy)y1.平移P点经过矢量-V.2.绕原点旋转.3.将P点平沿矢量V移回；Coordinate Transformations We can think about,alternatively,a transformation is as a change of coordinate systems.(x,y)(x,y)(dx,dy)(x,y)(dx,dy)Coordinate Transformations Objects are usually defined in theirs own local coordinate
22、system.We wish to express these objects coordinates in a single,global coordinate.Object Coordinates World Coordinates Screen CoordinatesObject CoordinatesObjects are usually defined in their own local coordinate system.World CoordinatesRepresent these objects coordinates in a single,global coordina
23、te.Screen CoordinatesFinally,we want to project these objects onto the screen.Coordinate HierarchyObject#1Object CoordinatesTransformationObject#1-WorldObject#2Object CoordinatesTransformationObject#2-WorldObject#3Object CoordinatesTransformationObject#3-WorldWorld CoordinatesTransformationWorld-Scr
24、eenScreen CoordinatesTransformations in OpenGLTransformations in OpenGL Transformations are specified by matrix operations.Desired transformation can be obtained by a sequence of simple transformations that can be concatenated together.Transformation matrix is usually represented by 4x4 matrix(homog
25、eneous coordinates).Provides matrix stacks for each type of supported matrix to store matrices.Transformation Matrices Model-viewing matrix Projection matrix Texture matrixOpenGL Transformation PipelineProgramming Transformations In OpenGL,the transformation matrices are part of the state,they must
26、be defined prior to any vertices to which they are to apply.In modeling,we often have objects specified in their own coordinate systems and must use transformations to bring the objects into the scene.OpenGL provides matrix stacks for each type of supported matrix(model-view,projection,texture)to st
27、ore matrices.Steps in Programming Prior to rendering,view,locate,and orient:Eye/camera position 3D geometry Manage the matrices Including matrix stack Composite transformationsCurrent Transformation Matrix Current Transformation Matrix(CTM)The matrix that is applied to any vertex that is defined sub
28、sequent to its setting.If change the CTM,we change the state of the system.CTM is a 4 x 4 matrix that can be altered by a set of functions.Current Transformation MatrixThe CTM can be set/reset/modify(by post-multiplication)by a matrixEx:C=M /set to matrix M C=CT /post-multiply by TC=CS /post-multipl
29、y by SC=CR /post-multiply by RCurrent Transformation Matrix Each transformation actually creates a new matrix that multiplies the CTM;the result,which becomes the new CTM.CTM contains the cumulative product of multiplying transformation matrices.Ex:If C=M;C=CT;C=CR;C=CSThen C=M T R S Ways to Specify
30、 Transformations In OpenGL,we usually have two styles of specifying transformations:Specify matrices(glLoadMatrix,glMultMatrix)Specify operations(glRotate,glTranslate)Specifying Matrix Specify current matrix mode Modify current matrix Load current matrix Multiple current matrixSpecifying Matrix(1)Sp
31、ecify current matrix modeglMatrixMode(mode)Specified what transformation matrix is modified.mode:GL_MODELVIEW GL_PROJECTION GL_TEXTURESpecifying Matrix(2)Modify current matrix glLoadMatrixfd(Type*m)Set the 16 values of current matrix to those specified by m.Note:m is the 1D array of 16 elements arra
32、nged by the columns of the desired matrixSpecifying Matrix(3)Modify current matrix glLoadIdentity(void)Set the currently modifiable matrix to the 4x4 identity matrix.Specifying Matrix(4)Modify current matrix glMultMatrixfd(Type*m)Multiple the matrix specified by the 16 values pointed by m by the cur
33、rent matrix,and stores the result as current matrix.Note:m is the 1D array of 16 elements arranged by the columns of the desired matrixSpecifying Operations Three OpenGL operation routines for modeling transformations:Translation Scale RotationProblem Modify cube program to translate,scale,and rotat
34、e using glMultMatrix(changes commented out)Specifying Operations(1)TranslationglTranslate fd(TYPE x,TYPE y,TYPE z)Multiplies the current matrix by a matrix that translates an object by the given x,y,z.Specifying Operations(2)ScaleglScale fd(TYPE x,TYPE y,TYPE z)Multiplies the current matrix by a mat
35、rix that scales an object by the given x,y,z.Specifying Operations(3)RotateglRotate fd(TPE angle,TYPE x,TYPE y,TYPE z)Multiplies the current matrix by a matrix that rotates an object in a counterclockwise direction about the ray from origin through the point by the given x,y,z.The angle parameter sp
36、ecifies the angle of rotation in degree.ExampleLets examine an example:Rotation about an arbitrary pointQuestion:Rotate a object for a 45.0-degree about the line through the origin and the point(1.0,2.0,3.0)with a fixed point of(4.0,5.0,6.0).Rotation About an Arbitrary Point1.Translate object throug
37、h vector V.T(-4.0,-5.0,-6.0)2.Rotate about the origin through angle.R(45.0)3.Translate back through vector VT(4.0,5.0,6.0)M=T(V)R()T(-V)OpenGL ImplementationglMatrixMode(GL_MODEVIEW);glLoadIdentity();glTranslatef(4.0,5.0,6.0);glRotatef(45.0,1.0,2.0,3.0);glTranslatef(-4.0,-5.0,-6.0);Order of Transfor
38、mations The transformation matrices appear in reverse order to that in which the transformations are applied.In OpenGL,the transformation specified most recently is the one applied first.Order of Transformations In each step:C=IC=CT(4.0,5.0,6.0)C=CR(45,1.0,2.0,3.0)C First translate,then rotate=Compo
39、sition of Transformations We can compose an overall transformation by applying several transformations in succession.Any composition of affine transformations is still affine.When homogeneous coordinates are used,affine transformations are composed by simple matrix multiplication.Problem1.Draw the c
40、ar body.2.Translate to right front and draw wheel.3.Return back to car body.4.Translate to left front and draw wheel.5.Return back to car body.Always remember where you are!Matrix Stacks OpenGL uses matrix stacks mechanism to manage transformation hierarchy.OpenGL provides matrix stacks for each typ
41、e of supported matrix to store matrices.Model-view matrix stack Projection matrix stack Texture matrix stackMatrix StacksTop Bottom PoppingPushingCurrent matrix is always the topmost matrix of the stackWe manipulate the current matrix is that we actually manipulate the topmost matrix.We can control
42、the current matrix by using push and pop operations.Manipulating Matrix Stacks(1)Remember where you are glPushMatrix(void)Pushes all matrices in the current stack down one level.The topmost matrix is copied,so its contents are duplicated in both the top and second-from-the top matrix.Note:current st
43、ack is determined by glMatrixModel()Manipulating Matrix Stacks(2)Go back to where you were glPopMatrix(void)Pops the top matrix off the stack,destroying the contents of the popped matrix.What was the second-from-the top matrix becomes the top matrix.Note:current stack is determined by glMatrixModel(
44、)Manipulating Matrix Stacks(3)The depth of matrix stacks are implementation-dependent.The Modelview matrix stack is guaranteed to be at least 32 matrices deep.The Projection matrix stack is guaranteed to be at least 2 matrices deep.glGetIntegerv(Glenum pname,Glint*parms)Pname:GL_MAX_MODELVIEW_STACT_
45、DEPTHGL_MAX_PROJECTION_STACT_DEPTHDemonstration(look at code)Demonstration(look at code)Demonstration(look at code)Lets Examine Some ExamplesQuestion 1:Draw a simple solar system with a planet and a sun.Sun rotates around its own axis(Y axis)The planet rotates around its own axis(Y axis)The planet a
46、lso rotates on its orbit around the sun.Example-1Sun:Locates at the origin and rotates around its own axis(Y axis)M=Ry()Planet:1.Rotates around its own axis.M1=Ry()2.Translate to its orbit.M2=T(x,y,z)3.Rotates around Sun.M3=Ry()M=M3 M2 M1OpenGL Implementationvoid main(int argc,char*argv)glutInit(&ar
47、gc,argv);glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);glutInitWindowSize(500,500);glutCreateWindow(Composite Modeling Transformation);init();glutDisplayFunc(display);glutReshapeFunc(reshape);glutKeyboardFunc(keyboard);glutMainLoop();OpenGL Implementationvoid init(void)glViewport(0,0,500,500);glMatrixMo
48、de(GL_PROJECTION);glLoadIdentity();gluPerspective(60.0,1,1.0,20.0);glMatrixMode(GL_MODELVIEW);glLoadIdentity();glTranslatef(0.0,0.0,-5.0);/viewing transform glClearColor(0.0,0.0,0.0,0.0);glShadeModel(GL_FLAT);OpenGL Implementationvoid display(void)glClear(GL_COLOR_BUFFER_BIT);glColor3f(1.0,1.0,1.0);
49、glPushMatrix();/draw sun glPushMatrix();glRotatef(GLfloat)ang2,0.0,1.0,0.0);glRotatef(90.0,1.0,0.0,0.0);/rotate it upright glutWireSphere(1.0,20,16);/glut routine glPopMatrix();OpenGL Implementation(con.)/draw smaller planet glRotatef(GLfloat)ang1,0.0,1.0,0.0);glTranslatef(2.0,0.0,0.0);glRotatef(GLf
50、loat)ang3,0.0,1.0,0.0);glRotatef(90.0,1.0,0.0,0.0);/rotate it upright glutWireSphere(0.2,10,8);/glut routine glPopMatrix();glutSwapBuffers();ResultLets Examine Some ExamplesQuestion 2:Draw a simple articulated robot arm with three segments.The arms should be connected with pivot points as the should
