人教小学信息第二册《图形变换》课件

1、第三讲 图形变换 图形变换是计算机图形学的基础内容。有二维（三维）图形的平移、旋转、变比、对称等变换，三维图形的投影透视变换等。第6讲 图形变换 二维几何变换基本变换与复合变换三维几何变换基本变换与复合变换本讲主要内容图形变换的数学基础二维图形的基本变换、复合（组合）变换；三维图形基本变换、复合（组合）变换；平行投影透视投影图形变换的数学基础矢量运算矩阵运算矩阵单位矩阵逆矩阵转置矩阵行列式 上机编程，实现两个矩阵相乘特别注意：矩阵相乘不适合交换律变换的数学基础(1/4) 矢量矢量和 变换的数学基础(2/4)矢量的数乘 矢量的点积性质变换的数学基础(3/4)矢量的长度 单位矢量 矢量的夹角矢量的

2、叉积 变换的数学基础(4/4)矩阵 阶矩阵n阶方阵零矩阵行向量与列向量单位矩阵矩阵的加法 矩阵的数乘 矩阵的乘法 矩阵的转置 矩阵的逆 齐次坐标用n+1维向量表示n维向量优越性提供了用矩阵运算把二维三维甚至高维空间的点集从一个坐标系变换到另一个坐标系的方法。可以表示无穷远的点图形几何变换基本原理：按某种规律，改变图形的形状、大小、位置等方法：坐标系不动，图形变动后坐标值变化；坐标系变化后图形在新坐标系中的新值。二. 图形变换的过程建立物体的 WC变换到 VC在VC空间 进行裁剪投影到 NDC变换到 DC在图形设备上输出三. 图形变换的特点 图形变换就是改变图形的几何关系，即改变图形顶点的坐标，

3、但图形的拓扑关系不变。 最基本的图形变换可以分别用矩阵形式表示为：平移变换 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

4、，y / h)。 同样，对于一个三维空间的向量(x，y，z)， 它在四维空间中对应的向量即齐次坐标为(xh，yh，zh，h)，其中h0。 齐次坐标的概念可以推广到n维空间的向量。齐次坐标的表示不是唯一的，通常当h=1时，称为规格化齐次坐标。为什么需要齐次坐标？多个变换作用于多个目标变换合成变换合成的问题引入齐次坐标 变换的表示法统一齐次坐标表示的优点： 可方便地用变换矩阵实现对图形的变换；齐次坐标表示法可以表达无穷远点。齐次坐标二维图形变换矩阵 一般形式： a b p c d q l m s P = P T2D（二维仿射变换: p=q=0） 二维变换矩阵中： a b c d l m 是对图形进

5、行平移变换。 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 变换后的顶点坐标变换前的顶点坐标二维变换矩阵是对图形进行缩放、旋转、对称、错切等变换。二维基本几何变换点的变换：恒等变换平移变换比例变换旋转变换对称变换错切变换平移变换 只改变图形的位置，不改变图形的大小和形状二维：将图形对象从一个位置(

6、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 = 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

7、 , sy 0,物体被倒影均匀/非均匀比例变换if sx = sy ,均匀比例变换if sx sy , 非均匀比例变换旋转变换xyfq(x, y)(x, y)旋转变换Remember旋转方向旋转角度旋转中心旋转是刚体变换xqP(x, y)P (x, y)y旋转变换点P(x,y)的极坐标表示绕坐标原点旋转角度 （逆时针为正，顺时针为负） P = P Rcosq sinq 0 -sinq cosq 0 0 0 1R(q ) =旋转矩阵cosq -sinq 0 sinq cosq 0 0 0 1R-1 (q ) =对称变换对称变换关于x轴的对称变换关于y轴的对称变换 对称变换对称变换关于原点的对称变

8、换关于y=x的对称变换 关于y=-x的对称变换错切变换以y轴为依赖轴的错切变换 y坐标不变点的基本几何变换的推广点的变换：直线的变换多边形的变换曲线的变换（由每一点的变换，重新画线完成）二维仿射变换 x=ax+by+m y =cx+dy+n P = P T二维复合变换（组合变换）任何一复杂的几何变换可以看成基本集合变换的组合： P = PT = P T1 T2 Tn复合平移复合比例复合旋转其他常见复合变换相对于某个参考点的几何变换（比例、旋转等）相对于某直线的几何变换（对称等）相对于某个参考点的几何变换（比例、旋转等）求某点P相对于固定点F（xF,yY）旋转一个角度 的变换矩阵T。步骤：将固定

9、点移到坐标原点上；对原点进行二维旋转变换；反平移固定点到原位。例：求P(5,4)绕F(3,2)逆时针旋转45度的变换矩阵，以及变换后P点的新坐标P。相对于某直线的几何变换（对称等）步骤平移该对称直线到原点；旋转角度到与坐标轴（X轴或Y轴）重合；对变换对象进行对称变换；反向旋转到原来方向；反平移到原来位置。关于任意轴的对称变换 课堂练习（一）回答下列问题：什么是齐次坐标？为什么要用规范化的齐次坐标？什么是二维仿射变换？有哪些不变性？写出它的变换形式（用矩阵表示）课堂练习（二）证明题证明两个连续的旋转变换（或变比例变换）的矩阵运算具有互换性。如，两个二维旋转变换R(1 )，R （2 ），具有下式

10、R(1 )R （2 ） = R(1 +2 ） 。证明二维点相对于X轴作对称，紧跟着相对于y=-x直线作对称变换，完全等价于该点相对于坐标原点作旋转变换（旋转角度是多少？）课堂练习（三）推导题试推导将二维平面上任意直线段P1（x1,y1）与P1（x1,y1），转换成与X轴重合的变换矩阵（线段P1P2与X轴的夹角小于45度）。求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，

11、请推导并计算P相对于L作对称变换的矩阵T，并求出该点坐标值。三维图形变换坐标系 右手法则拇指指向坐标轴Z的方向，其余四指指向旋转方向 YZX0逆时针为正三维图形变换三维空间点的齐次坐标矩阵（x y z 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 来

12、实现整体的比例变换。 当 |s | 1 时，三维图形整体等比例缩小。 2.(三维)对称变换是相对于各个坐标平面进行的。 3.(三维)旋转变换是指绕坐标轴的旋转。 右手坐标系下，绕坐标轴逆时针为正 顺时针旋转为负。 4.三维图形的级联(组合)变换 对于复杂的三维图形变换，也需要通过若干个变换矩阵的级联才能实现。特别注意: 变换的方法和矩阵级联的顺序。三维几何变换平移变换 （相对于原点）比例变换=1000000000000zyxsss(),zyxsssS三维几何变换对称变换 只考虑关于坐标平面的对称变换关于xy平面对称关于yz平面对称关于xz平面对称=1000000000000-111=10000

13、0000000011-1=10000000000001-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轴(x, y, z)(x, y, z)xyz三维几何变换旋转变换绕y轴(x, y, z)(x, y, z)xyz三维几何变换绕z轴xz(x, y, z)(x, y, z)几点说明1）平移变换只改变图形的位置，不改变图形的大小和形状；2）旋转变换保持图

14、形各部分间的线性关系和角度关系，变换后直线的长度不变；3）比例变换可改变图形的大小和形状；4）错切变换引起图形角度关系的改变，甚至导致图形发生崎变；5) 拓扑不变的几何变换不改变图形的连续关系和平行关系； 三维复合变换 实际的图形对象的变换往往是由多个简单变换复合而来。将相关的简单变换的变换矩阵乘起来就可得到复合变换的变换矩阵。例：求基于参考点（xf, yf, zf）的比例变换，变换方法步骤： 1）通过平移变换将参考点移到原点，使原点与参考点重合； 2）相对于原点进行比例变换； 3）通过平移变换将参考点移原来位置；绕空间任意轴的三维旋转变换。例：有空间任意轴AB（用点A： xA,yA,zA，方

15、向数a,b,c表示），现有空间点P（x,y,z）绕AB轴旋转角后为P（x ,y ,z ），求该变换矩阵。方法步骤：1)平移AB轴与原点重合； 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轴正半轴。（方向数为：？）xyzPQoxyz

16、Qo(P)M随堂练习写出三维基本几何变换的逆变换；（教材P213）将图7-40中的物体ABCDEFGH进行如下变换：平移使C点与P（1，-1，0）重合，然后绕Z轴旋转60度。将图7-41中的空间四面体进行关于P点的整体放大，试写出变换矩阵。假定空间直线AB两端点坐标为A(0,0,0)B(2,2,2)，试写出绕AB轴旋转30度的三维复合变换矩阵。*在右手坐标系中，从原点到P（x,y,z）给出一直线，用三种方法将此直线旋转到正的轴线上，并用代数证明所得的结果等价。 a. 先绕X轴旋转到XZ平面上，再绕Y轴到Z轴上； b. 先绕Y轴旋转到YZ平面上，再绕X轴到Z轴上； c. 先绕Z轴旋转到XZ平面上

17、，再绕Y轴到Z轴上.二维图形的显示流程图绕绕任意点的旋转xqP(x, y)P (x, y)V = (Vx, Vy)y平移P点经过矢量 -V.绕原点旋转 q.将P点平沿矢量V移回；Coordinate TransformationsWe can think about, alternatively, a transformation is as a change of coordinate systems.(x,y)(x,y)(dx, dy)(x, y)(dx, dy)Coordinate TransformationsObjects are usually defined in theirs

18、own local coordinate system.We wish to express these objects coordinates in a single, global coordinate.Object CoordinatesWorld CoordinatesScreen CoordinatesObject CoordinatesObjects are usually defined in their own local coordinate system.World CoordinatesRepresent these objects coordinates in a si

19、ngle, global coordinate.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 Coo

20、rdinatesTransformationWorld-ScreenScreen CoordinatesTransformations in OpenGLTransformations in OpenGLTransformations 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

21、represented by 4x4 matrix (homogeneous coordinates).Provides matrix stacks for each type of supported matrix to store matrices.Transformation MatricesModel-viewing matrixProjection matrixTexture matrixOpenGL Transformation PipelineProgramming TransformationsIn OpenGL, the transformation matrices are

22、 part of the state, they must 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 (mod

23、el-view, projection, texture) to store matrices.Steps in ProgrammingPrior to rendering, view, locate, and orient:Eye/camera position3D geometryManage the matricesIncluding matrix stackComposite transformationsCurrent Transformation MatrixCurrent Transformation Matrix (CTM) The matrix that is applied

24、 to any vertex that is defined subsequent 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

25、 = CT / post-multiply by TC = CS / post-multiply by SC = CR / post-multiply by RCurrent Transformation MatrixEach 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:

26、 If C = M; C = CT; C = CR; C = CSThen C = M T R S Ways to Specify TransformationsIn OpenGL, we usually have two styles of specifying transformations:Specify matrices ( glLoadMatrix, glMultMatrix )Specify operations ( glRotate, glTranslate )Specifying MatrixSpecify current matrix modeModify current m

27、atrixLoad current matrixMultiple current matrixSpecifying Matrix (1)Specify 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 cu

28、rrent matrix to those specified by m.Note: m is the 1D array of 16 elements arranged 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 glMultM

29、atrixfd ( Type *m )Multiple the matrix specified by the 16 values pointed by m by the current 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 OperationsThree OpenGL operation routines for modeling transfor

30、mations:TranslationScaleRotationProblem Modify cube program to translate, scale, and rotate 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.S

31、pecifying Operations (2)ScaleglScale fd (TYPE x, TYPE y, TYPE z) Multiplies the current matrix by a matrix 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 c

32、ounterclockwise direction about the ray from origin through the point by the given x, y, z. The angle parameter specifies 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

33、the point (1.0, 2.0, 3.0) with a fixed point of (4.0, 5.0, 6.0).Rotation About an Arbitrary PointTranslate object through vector V.T(-4.0, -5.0, -6.0)Rotate about the origin through angle q.R(45.0)Translate back through vector VT(4.0, 5.0, 6.0)M = T(V ) R(q ) T(-V )OpenGL ImplementationglMatrixMode

34、(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 TransformationsThe transformation matrices appear in reverse order to that in which the transformations are applied.In OpenGL, the transformation specified most recen

35、tly is the one applied first.Order of TransformationsIn 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 =Composition of TransformationsWe can compose an overall transformation by applying several transformations in succession.Any composition of affine tran

36、sformations is still affine.When homogeneous coordinates are used, affine transformations are composed by simple matrix multiplication. ProblemDraw the car body.Translate to right front and draw wheel.Return back to car body.Translate to left front and draw wheel.Return back to car body.Always remem

37、ber where you are!Matrix StacksOpenGL uses matrix stacks mechanism to manage transformation hierarchy.OpenGL provides matrix stacks for each type of supported matrix to store matrices.Model-view matrix stackProjection matrix stackTexture matrix stackMatrix StacksTop Bottom PoppingPushingCurrent matr

38、ix is always the topmost matrix of the stackWe manipulate the current matrix is that we actually manipulate the topmost matrix.We can control the current matrix by using push and pop operations.Manipulating Matrix Stacks (1)Remember where you are glPushMatrix ( void )Pushes all matrices in the curre

39、nt 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 stack is determined by glMatrixModel()Manipulating Matrix Stacks (2)Go back to where you were glPopMatrix ( void )Pops the top matrix off the stack, dest

40、roying 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()Manipulating Matrix Stacks (3)The depth of matrix stacks are implementation-dependent.The Modelview matrix stack is guaranteed to be at least 3

41、2 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_DEPTHGL_MAX_PROJECTION_STACT_DEPTHDemonstration (look at code)Demonstration (look at code)Demonstration (look at code)Lets Examine Some E

42、xamplesQuestion 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 also rotates on its orbit around the sun.Example-1Sun:Locates at the origin and rotates around its own axis (Y axis) M = Ry (q)Planet

43、:1. Rotates around its own axis. M1 = Ry (q) 2. Translate to its orbit. M2 = T (x, y, z) 3. Rotates around Sun. M3 = Ry (q) M = M3 M2 M1OpenGL Implementationvoid main (int argc, char* argv) glutInit ( &argc, argv ); glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB); glutInitWindowSize (500, 500); glutCre

44、ateWindow (Composite Modeling Transformation); init (); glutDisplayFunc (display); glutReshapeFunc (reshape); glutKeyboardFunc (keyboard); glutMainLoop ();OpenGL Implementationvoid init (void) glViewport(0, 0, 500, 500); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(60.0, 1, 1.0, 20.

45、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); glPushMatrix(); / draw sun glPushMatrix(); gl

46、Rotatef (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 (GLfloat) ang3, 0

47、.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 s

48、houlder, elbow, or other joints. (the three segments have same length, saying 2 units)Pivot pointsExample-2Red segment:1. Translates unit 1 to its pivot point. M1 = T (1, 0, 0) 2. Rotates around its pivot point. M2 = Ro (q)3. Translates 1 unit back to origin. M3 = T (-1, 0, 0) M = M3 M2 M1OpenGL Imp

49、lementationvoid display(void) glClear(GL_COLOR_BUFFER_BIT); glPushMatrix(); / draw shoulder (red) glTranslatef (-1.0, 0.0, 0.0); glRotatef (shoulder, 0.0, 0.0, 1.0); glTranslatef (1.0, 0.0, 0.0); glPushMatrix(); glScalef (2.0, 0.4, 0.1); glColor3f (1.0, 0.0, 0.0); glutSolidCube (1); / glut routine g

50、lPopMatrix();Example-2Green segment:1. Translates unit 1 to its pivot point. M1 = T (1, 0, 0) 2. Rotates around its pivot point. M2 = Ro (q)3. Translates 1 unit to the edge of the Red segment. M3 = T (1, 0, 0) M = M3 M2 M1OpenGL Implementationvoid display(void) / draw elbow glTranslatef (1.0, 0.0, 0

51、.0); glRotatef (elbow, 0.0, 0.0, 1.0); glTranslatef (1.0, 0.0, 0.0); glPushMatrix(); glScalef (2.0, 0.4, 0.1); glColor3f (0.0, 1.0, 0.0); glutSolidCube(1); / glut routine glPopMatrix();Example-2Yellow segment:1. Translates unit 1 to its pivot point. M1 = T (1, 0, 0) 2. Rotates around its pivot point

52、. M2 = Ro (q)3. Translates 1 unit to the edge of the Green segment. M3 = T (1, 0, 0) M = M3 M2 M1ResultProblemsModify the Sailboat program, utilizing matrix multiplication, to do the following:Translate it to the middle of the windowScale it to half sizeMake it spin about the :X axis left mouse butt

53、onY axis middle mouse buttonZ axis - right mouse buttonProblemsModify the Teapot program, utilizing rotate-scale-translate, to do the following:Translate it to the bottom of the windowScale it to 1/3 sizeRotate it 120 degrees about the x axisRememberAlways keep tracking your current position. Remember where you are, and go back to where you were.Matrix multiplication is not commutative, the transformation order is very important.In OpenGL, the transformation specified most recently is the one applied first.glu quadric PrimitivesQuadric primiti