图形图像必须知道的事（一）：几何变换

[size=9pt;]作者：[/size]<span lang="EN-US" style="font-size: 9pt; font-family: Arial,sans-serif;">mznewfacer(Wolf Geek) <span></span></span>[size=9pt;]时间[/size]<span lang="EN-US" style="font-size: 9pt; font-family: Arial,sans-serif;">:2011</span>[size=9pt;]年[/size]<span lang="EN-US" style="font-size: 9pt; font-family: Arial,sans-serif;">11</span>[size=9pt;]月[/size]<span lang="EN-US" style="font-size: 9pt; font-family: Arial,sans-serif;">30</span>[size=9pt;]日
欢迎转载 ，请注明出处！[/size]

[size=9pt;]</span>

[size=9pt;] 这两天又不能安生了，得写论文，好吧，先把[/size]<span lang="EN-US" style="font-size: 9pt; font-family: Arial,sans-serif;">arduino[/size][size=9pt;]断下来，似乎我同时只能干一件事，严重怀疑自己的智商！顺便写一些基础总结吧，已备后用。可能会比较枯燥，但是必须强调的是这些都是图形图像方面的数学基础，不可忽视啊！[/size]<span lang="EN-US" style="font-size: 9pt; font-family: Arial,sans-serif;"></span>
先看几个变换公式：

[size=9pt;]<img src="http://hi.csdn.net/attachment/201112/2/0_13227908775Ivi.gif" alt=""><br>[/size]

[size=9pt;]<img src="http://hi.csdn.net/attachment/201112/2/0_1322791009rRmc.gif" alt=""><br>[/size]

[size=9pt;]</span>
至此，二维平面上的所有变换集合就已叙述完毕，具体形式如下图所示。

<img src="http://hi.csdn.net/attachment/201112/2/0_1322791055KnDT.gif" alt=""><br>
[size=9pt;][/size]
对于三维图像而言，对应的变换矩阵就变为四阶矩阵。

<img src="http://hi.csdn.net/attachment/201112/2/0_1322791289Q16B.gif" alt=""><br>
[size=9pt;][/size]
<img src="http://hi.csdn.net/attachment/201112/2/0_1322791391Q51v.gif" alt=""><br>

<img src="http://hi.csdn.net/attachment/201112/2/0_1322792155E6Eo.gif" alt=""><br>

这就是初始化坐标系，对应的4阶齐次矩阵为四阶单位阵。


[size=9pt;]<span style="white-space: pre;">[/size][/size]
<img src="http://hi.csdn.net/attachment/201112/2/0_1322792341hAH0.gif" alt=""><br>

在此坐标系上画点[0.5 ; 0.5 ; 0.5]，之后在Oxy平面上做投影，所得结果如下图所示：

<img src="http://hi.csdn.net/attachment/201112/2/0_1322793166nth4.gif" alt=""><br>

此时变换矩阵为

<img src="http://hi.csdn.net/attachment/201112/2/0_1322793236zmmA.gif" alt=""><br>

之后将坐标系绕z轴旋转45度并且在y轴方向上平移1.5个刻度，变换矩阵为<img src="http://hi.csdn.net/attachment/201112/2/0_1322794498mxC5.gif" alt="">

<img src="http://hi.csdn.net/attachment/201112/2/0_132279452236nD.gif" alt=""><br>

最后连续绕x轴，y轴，z轴分别旋转45度，得到结果如下图所示：

<img src="http://hi.csdn.net/attachment/201112/2/0_132279619473Oa.gif" alt=""><br>

变换矩阵可以由此推得：

<img src="http://hi.csdn.net/attachment/201112/2/0_13227962808PV8.gif" alt=""><br>

至于为什么引入齐次坐标系，这里就不做多余解释，详情可见[url=http://www.songho.ca/math/homogeneous/homogeneous.html]这里[/url]。

最后用opengl画一下类似的坐标系变换，


<textarea readonly name="code" class="cpp">#include <GL/glut.h>

float w, h, tip = 0, turn = 0;

float ORG[3] = {0,0,0};

float XP[3] = {1,0,0}, XN[3] = {-1,0,0},
YP[3] = {0,1,0}, YN[3] = {0,-1,0},
ZP[3] = {0,0,1}, ZN[3] = {0,0,-1},VP[3]={0, 0, -5};

void reshape (int nw, int nh)
{
w = nw;
h = nh;
}

void Turn (int key, int x, int y)
{
switch (key) {
case GLUT_KEY_RIGHT: turn += 5; break;
case GLUT_KEY_LEFT : turn -= 5; break;
case GLUT_KEY_UP : tip -= 5; break;
case GLUT_KEY_DOWN : tip += 5; break;
}
}

void Draw_Axes (void)
{
glPushMatrix ();

glTranslatef (-1.5, -1.5, -5);
glRotatef (tip , 1,0,0);
glRotatef (turn, 0,1,0);
glScalef (1, 1, 1);

glLineWidth (2.0);

glBegin (GL_LINES);
glColor3f (1,0,0); // X axis is red.
glVertex3fv (ORG);
glVertex3fv (XP );
glColor3f (0,1,0); // Y axis is green.
glVertex3fv (ORG);
glVertex3fv (YP );
glColor3f (0,0,1); // z axis is blue.
glVertex3fv (ORG);
glVertex3fv (ZP );
glEnd();

glTranslatef (1, 1, 1);
glBegin (GL_LINES);
glColor3f (1,0,0); // X axis is red.
glVertex3fv (ORG);
glVertex3fv (XN );
glColor3f (0,1,0); // Y axis is green.
glVertex3fv (ORG);
glVertex3fv (YN );
glColor3f (0,0,1); // z axis is blue.
glVertex3fv (ORG);
glVertex3fv (ZN );
glEnd();
glTranslatef (-1, 0, 0);
glRotatef (-90, 0,1,0);
glBegin (GL_LINES);
glColor3f (0,0,1); // X axis is blue.
glVertex3fv (ORG);
glVertex3fv (XN );
glColor3f (0,1,0); // Y axis is green.
glVertex3fv (ORG);
glVertex3fv (YN );
glColor3f (1,0,0); // z axis is red
glVertex3fv (ORG);
glVertex3fv (ZN);
glEnd();
glPointSize(4.0f);
glRotatef (-45, 0,1,0);
glBegin(GL_POINTS);
glColor3f (1,0,0); // X axis is red.
glVertex3f(-1.0f, -1.0f, 0.0f);
glEnd();
glRotatef (-90, 0,1,0);
glBegin(GL_POINTS);
glColor3f (1,0,0);
glVertex3f(1.0f, -1.0f, 0.0f);
glEnd();
glLoadIdentity();
glBegin(GL_POINTS);
glColor3f (1,0,0);
glVertex3fv(VP);
glEnd();
glPopMatrix ();
}


void display (void)
{
glViewport (0, 0, w, h);
glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
Draw_Axes ();
glutSwapBuffers ();
}

void main (void)
{
glutInitWindowSize (600, 400);
glutInitWindowPosition (400, 300);
glutInitDisplayMode (GLUT_DEPTH | GLUT_DOUBLE | GLUT_RGB);
glutCreateWindow ("坐标系变换");
glutDisplayFunc (display);
glutIdleFunc (display);
glutReshapeFunc (reshape);
glutSpecialFunc (Turn);

glClearColor (0.1, 0.2, 0.1, 1.0);
glEnable (GL_DEPTH_TEST);
glMatrixMode (GL_PROJECTION);
gluPerspective (50.0, 1.5, 1.0, 10.0);
glMatrixMode (GL_MODELVIEW);

glutMainLoop ();
}</textarea>效果图<br><img src="http://hi.csdn.net/attachment/201112/2/0_1322797487GxHN.gif" alt=""><br>


至于opengl的具体坐标系转换，像是世界坐标系到<span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">观察坐标系的转换，如何利用GL_PROJECTION投影矩阵将3维投影到2维上，投影时选择glFrustum()还是glOrtho()，以及各个变换的具体原理，<span style="color: rgb(102,102,102); font-family: arial,helvetica,sans-serif; font-size: 13px;"></span><a href="mailto:song.ahn@gmail.com" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-color: initial; background-color: white; color: rgb(102,102,102); font-family: arial,helvetica,sans-serif; font-size: 13px; text-align: right; text-decoration: none;">Song
Ho Ahn</a>的博客中已经写得相当详细，里面有两个例子也很不错。[url=http://www.songho.ca/opengl/gl_projectionmatrix.html]理论部分[/url]，[url=http://www.songho.ca/opengl/gl_transform.html]例子部分[/url]。</span>

<span style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><br></span>