CSharpGL(27)讲讲清楚OpenGL坐标变换
在理解OpenGL的坐标变换问题的路上，有好几个难点和易错点。且OpenGL秉持着程序难以调试、难点互相纠缠的特色，更让人迷惑。本文依序整理出关于OpenGL坐标变换的各个知识点、隐藏规则、诀窍和注意事项。
Matrix
OpenGL用4x4矩阵进行坐标变换。
OpenGL的4x4矩阵是按列排列的。
忘记glRotatef()，glScalef()，glTranslatef()什么的吧，那都属于legacy opengl，不久会被彻底淘汰。在modern opengl中有其他方式代替他们。
Model Space
为了描述3D世界，首先要设计一些三维模型出来。
设计三维模型的时候用的坐标系就是Model Coordinate System。
只有1个模型
此时你所见的这个空间就是Model Space。Model Space里只负责描述一个模型。
有人可能会说，此图只设计了一个茶壶，如果我设计的是一套茶具（茶壶+几个茶杯），那不就是多个模型了吗？答：还真不是，此时应该把这套茶具视作一个整体，视为一个模型。回忆一下中学学的"确定研究对象"、"将XXX视作一个整体"，就是这个意思。
围绕原点
在Model Space设计模型的时候，要注意使模型的包围盒的中心位于原点(0, 0, 0)。
包围盒就是能够把模型包围的最小的长方体。
为什么要围绕原点？因为这样才能在下文所述的World Space里"正常地"旋转、缩放和平移模型。
World Space
为何围绕原点
继续解释上面的问题。假设我们设计了一个立方体模型，它是关于原点(0, 0, 0)对称的。我们就这样让它降生到世界上。为了叙述方便，我们称其为Center。如下图所示。
（再换个角度看）
现在，我们再设计一个小一点的立方体模型，但这个立方体模型的中心不在原点(0, 0, 0)。为了叙述方便，我们称其为Corner。我们把这个Corner也放进来。
（再换个角度看）
现在，我们分别把Center和Corner缩小为原来的一半。我们希望的情形是这样的：
（再换个角度看）
为了看得清楚，我们把Center再扩大到原来的大小：
（再换个角度看）
可以看到Corner在原来的位置上缩小了一半。这符合我们的预期。
但是，残酷的现实并非如此，当你把Center和Corner同时缩小一半时，你看到的情形会是这样：
（再换个角度看）
也就是说，一个缩放操作不仅改变了Corner的大小，还改变了它的位置。如果你在缩放之前把Camera对准了Corner，那么缩放之后Corner的位置发生了巨变，Camera很可能就看不到Corner了。
总结提升
如果一个模型的包围盒A在Model Space的中心不是(0, 0, 0)，那么你可以想象有一个虚拟的包围盒B，B的中心是(0, 0, 0)，且恰好能包围住A。然后，同时缩放A和B。由于B的中心是(0, 0, 0)，缩放前后不会改变；而A的中心实际上是B内部一侧的一点，它是必然移动了的，即缩放操作改变了A的位置。
上述例子描述的是缩放操作，对于旋转操作，道理相同。
这就是保持模型的包围盒中心在原点(0, 0, 0)的好处。你可以随意旋转(rotate)、缩放(scale)模型，之后再移动(translate)到任意位置（此位置即模型在World Space里的位置）。无论你如何旋转、缩放此模型，它在移动(translate)之后的位置都是一样的。
如上图所示，一个立方体向右移动4个单位，并进行了旋转和缩放操作。无论旋转角度、缩放比例是多少，其移动距离始终是4个单位。
Model Matrix
Model Matrix负责将模型从Model Space变换到World Space。
变换操作有三种：旋转(rotation)、缩放(scale)和平移(translate)。可以按字母表的顺序来记（Rotation, Scale, Translate）。
变换的顺序应当是：1旋转，2缩放，3平移。
设模型在Model Space里的任意一个顶点坐标为(x, y, z)，我们想把模型放到World Space里的(tx, ty, tz)处，且绕y轴旋转r°，缩放为原来的s倍。那么：
平移矩阵为 mat4 translate = glm.translate(mat4.identity(), new vec3(tx, ty, tz)); ；
缩放矩阵为 mat4 scale = glm.scale(mat4.identity(), new vec3(s, s, s)); ；
旋转矩阵为 mat4 rotation = glm.rotate(mat4.identity(), (float)(r * Math.PI / 180.0), new vec3(, , )); ；
总的Model Matrix为 mat4 modelMatrix = translate * scale * rotation; 。
为了获取(x, y, z)变换到World Space上的位置，首先将其扩充为四元向量(x, y, z, 1)。（不用管为什么不是(x, y, z, 0)），然后可得：vec4 worldPos = modelMatrix * new vec4(x, y, z, );
性质
旋转、缩放操作都是关于原点(0, 0, 0)对称的。把模型的包围盒中心置于原点，会有难以言喻的好处。
(worldPos.x, worldPos,y, worldPos.z) 就是 (x, y, z) 变换到World Space之后的位置。
worldPos.w 必然是1。
对模型的操作顺序应当为rotation -> scale -> translate。
View/Eye/Camera Space
这三个名称是指同一个Space。
在World Space，各个模型都摆放好了位置和角度，之后就该从某个位置用Eye/Camera去看这个World。Camera有三个属性：eye/Position描述其位置，center/Target是朝向，Up是头顶。
Camera的Position是World Space里的一个点(Position.x, Position.y, Position.z)，Target和Up是World Space里的2个向量。就是说，Camera.Position/Target/Up都是在World Space里定义的。
view matrix
Camera的参数(Position, Target, Up)决定了view matrix。模型在World Space里的位置，经过view matrix的变换，就变成了在View Space里的位置。
根据camera的Position, Target, Up求view matrix的过程就是著名的lookAt()函数。
/// <summary>
/// Build a look at view matrix.
/// transform object's coordinate from world's space to camera's space.
/// </summary>
/// <param name="eye">The eye.</param>
/// <param name="center">The center.</param>
/// <param name="up">Up.</param>
/// <returns></returns>
public static mat4 lookAt(vec3 eye, vec3 center, vec3 upVector)
{
// camera's back in world space coordinate system
vec3 back = (eye - center).normalize();
// camera's right in world space coordinate system
vec3 right = upVector.cross(back).normalize();
// camera's up in world space coordinate system
vec3 up = back.cross(right); mat4 viewMatrix = new mat4();
viewMatrix.col0.x = right.x;
viewMatrix.col1.x = right.y;
viewMatrix.col2.x = right.z;
viewMatrix.col0.y = up.x;
viewMatrix.col1.y = up.y;
viewMatrix.col2.y = up.z;
viewMatrix.col0.z = back.x;
viewMatrix.col1.z = back.y;
viewMatrix.col2.z = back.z; // Translation in world space coordinate system
viewMatrix.col3.x = -eye.dot(right);
viewMatrix.col3.y = -eye.dot(up);
viewMatrix.col3.z = -eye.dot(back); return viewMatrix;
}
上述函数得到的结果 viewMatrix 可以用下图描述。[right/up/back]构成了旋转和缩放的部分，-[right/up/back]*eye构成了平移的部分。right/up/back分别描述了Camera坐标系的X/Y/Z轴，且在 viewMatrix 里也依次位于第0/1/2行。
Clip Space
Camera摆好之后，要实现透视投影或正交投影。经过投影之后的坐标就是在Clip Space里的坐标。
透视投影
透视投影的效果就是近大远小：
透视矩阵的作用就是设定下图所示的一个棱台范围，将Camera Space里的顶点位置变换一下。变换效果就是远处的点比变换之前更加靠近彼此，越远就靠近的越多。想象一下把这个棱台的Far面缓缓缩小到与Near面相同的大小，这一过程中，越远的顶点，被挤压的程度越大。
根据棱台参数计算透视投影矩阵的函数就是著名的perspective()函数。
/// <summary>
/// Creates a perspective transformation matrix.
/// </summary>
/// <param name="fovy">The field of view angle, in radians.</param>
/// <param name="aspect">The aspect ratio.</param>
/// <param name="zNear">The near depth clipping plane.</param>
/// <param name="zFar">The far depth clipping plane.</param>
/// <returns>A <see cref="mat4"/> that contains the projection matrix for the perspective transformation.</returns>
public static mat4 perspective(float fovy, float aspect, float zNear, float zFar)
{
float tangent = (float)Math.Tan(fovy / 2.0f);
float height = zNear * tangent;
float width = height * aspect; float left = -width, right = width, bottom = -height, top = height, near = zNear, far = zFar; mat4 result = frustum(left, right, bottom, top, near, far); return result;
}
/// <summary>
/// Creates a frustrum projection matrix.
/// </summary>
/// <param name="left">The left.</param>
/// <param name="right">The right.</param>
/// <param name="bottom">The bottom.</param>
/// <param name="top">The top.</param>
/// <param name="nearVal">The near val.</param>
/// <param name="farVal">The far val.</param>
/// <returns></returns>
public static mat4 frustum(float left, float right, float bottom, float top, float nearVal, float farVal)
{
var result = mat4.identity(); result[, ] = (2.0f * nearVal) / (right - left);
result[, ] = (2.0f * nearVal) / (top - bottom);
result[, ] = (right + left) / (right - left);
result[, ] = (top + bottom) / (top - bottom);
result[, ] = -(farVal + nearVal) / (farVal - nearVal);
result[, ] = -1.0f;
result[, ] = -(2.0f * farVal * nearVal) / (farVal - nearVal);
result[, ] = 0.0f; return result;
}
perspective
正交投影
正交投影就没有近大远小的效果：
正交矩阵的作用也是设置一个范围，将Camera Space里的顶点位置变换一下。
根据参数计算正交投影矩阵的函数就是著名的ortho()函数。
/// <summary>
/// Creates a matrix for an orthographic parallel viewing volume.
/// </summary>
/// <param name="left">The left.</param>
/// <param name="right">The right.</param>
/// <param name="bottom">The bottom.</param>
/// <param name="top">The top.</param>
/// <param name="zNear">The z near.</param>
/// <param name="zFar">The z far.</param>
/// <returns></returns>
public static mat4 ortho(float left, float right, float bottom, float top, float zNear, float zFar)
{
var result = mat4.identity();
result[, ] = (2f) / (right - left);
result[, ] = (2f) / (top - bottom);
result[, ] = -(2f) / (zFar - zNear);
result[, ] = -(right + left) / (right - left);
result[, ] = -(top + bottom) / (top - bottom);
result[, ] = -(zFar + zNear) / (zFar - zNear);
return result;
} /// <summary>
/// Creates a matrix for projecting two-dimensional coordinates onto the screen.
/// <para>this equals ortho(left, right, bottom, top, -1, 1)</para>
/// </summary>
/// <param name="left">The left.</param>
/// <param name="right">The right.</param>
/// <param name="bottom">The bottom.</param>
/// <param name="top">The top.</param>
/// <returns></returns>
public static mat4 ortho(float left, float right, float bottom, float top)
{
var result = mat4.identity();
result[, ] = (2f) / (right - left);
result[, ] = (2f) / (top - bottom);
result[, ] = -(1f);
result[, ] = -(right + left) / (right - left);
result[, ] = -(top + bottom) / (top - bottom);
return result;
}
ortho
性质
无论是透视投影还是正交投影，都有以下性质：
在Clip Space里的顶点位置(x, y, z, w)，“x, y, z的绝对值都小于等于|w|”等价于“此顶点在可见范围之内”。
在Clip Space里的顶点位置(x, y, z, w)，就是在vertex shader里赋值给 gl_Position 的值。
证明（20161119）
为了证明上面的性质，我们来做个试验。
正常的Point Sprite
首先我们来渲染一个正常的点精灵。如图所示，这些点环绕成一个球形，并且填充了立方体的下半部分。
其vertex shader如下。
#version core uniform mat4 mvp;
uniform float factor = 100.0f; in vec3 position; void main(void)
{
vec4 pos = mvp * vec4(position, 1.0f);
gl_PointSize = (1.0 - pos.z / pos.w) * factor;
gl_Position = pos;
}
试验1：把裁切掉的点放到中心位置
首先，我们把那些会被裁切掉的点（x或y或 z的绝对值大于等于|w|）放到中心位置试试。
#version core uniform mat4 mvp;
uniform float factor = 100.0f; in vec3 position; void main(void)
{
vec4 pos = mvp * vec4(position, 1.0f);
gl_PointSize = (1.0 - pos.z / pos.w) * factor;
if (abs(pos.x) >= abs(pos.w)
|| abs(pos.y) >= abs(pos.w)
|| abs(pos.z) >= abs(pos.w))
{
gl_Position = vec4(, , , );
}
else
{
gl_Position = pos;
}
}
结果如下：当没有电被裁切掉时，一切正常；
当有点被裁切掉时，就会在中心位置重叠很多点。
试验2：把没有裁切掉的点放到中心位置
这个试验和试验1相反，其vertex shader也是如此。
#version core uniform mat4 mvp;
uniform float factor = 100.0f; in vec3 position; void main(void)
{
vec4 pos = mvp * vec4(position, 1.0f);
gl_PointSize = (1.0 - pos.z / pos.w) * factor;
if (abs(pos.x) >= abs(pos.w)
|| abs(pos.y) >= abs(pos.w)
|| abs(pos.z) >= abs(pos.w))
{
gl_Position = pos;
}
else
{
gl_Position = vec4(, , , );
}
}
结果如下：当没有点被裁切时，只在中心位置有点存在，
当有点被裁切掉时，窗口周围就出现了很多点。
这也是我用Point Sprite做证明的原因：即使被裁切掉，仍然会有一部分显示出来，方便证明。
Normalized Device Space
从Clip Space到Normalized Device Space很简单，只需将(x, y, z, w)全部除以w即可。这被称为视角除法（perspective division）。
上一节说过，在可见范围里的(x, y, z, w)，x, y, z的绝对值都小于等于|w|。因此，经过视角除法后，所有可见的顶点位置都介于(-1, -1, -1)和(1, 1, 1)之间。
视角除法这一过程是由OpenGL渲染管线自动完成的，我们无需也不能参与。
Screen/Window Space
最后一步，就是把(-1, -1, -1)和(1, 1, 1)之间的顶点位置转换到二维的屏幕窗口上。
假设用于OpenGL渲染的控件宽、高为Width、Height。
glViewport(int x, int y, int width, int height); 用于指定将渲染结果铺到控件的哪一块上。一般我们用 glViewport(, , Width, Height); 来告诉OpenGL：我们想把结果渲染到整个控件上。当然，如果控件大小发生改变，就需要再次调用 glViewport(, , Width, Height) ;。
还有一个不常见的 glDepthRange(float near, float far); 用于指定在Screen Space上的Z轴坐标范围（默认范围是 glDepthRange(, ) ）。没错，Screen Space也是有第三个坐标轴Z的，且其方向是从你的计算机窗口指向里面。
顶点在Screen Space里的位置是按下面的公式计算的，当然也是OpenGL自动完成的，我们无需也无法参与。
这个公式很简单，通过NDC(Normalized Dived Coordinate)和Window Coordinate System的线性关系可知：
当我们用 glViewport(x, y, Width, Height); 的设定时，Screen Space的原点在 (x, y) ，X轴正方向向右，Y轴正方向向上，Z轴正方向向里。即这是一个左手系。（这个 (x, y) 是相对控件的左下角而言的，即Screen Space的X轴、Y轴是贴在WinForm控件上的）
注意事项
在WinForm系统中，控件本身的 (, ) 位置是控件的左上角。即在mouse_down/mouse_move/mouse_up等事件中的(e.X, e.Y)是以左上角为原点，向右为X轴正方向，向下为Y轴正方向的。所以根据WinForm里的 (e.X, e.Y) 计算Screen Space里的坐标时要记得用 (e.X, Height - - e.Y)转换一下。
如果你用QQ截图或者其他任何方式截图，得到的窗口图片的Width、Height很可能是不等于用glViewport()得到的Width、Height的。截图得到的图片宽高受显示器分辨率的影响，不同的显示器得到的结果不尽相同。而用glViewport()得到的宽高无论在哪个显示器上都是一致的。Screen Space里用的Width、Height就是glViewport()版本的。这里也是个小坑。
Model Space<-->Screen Space
project
坐标变换过程很长很复杂？其实就那么回事。下面的函数就实现了从Model Space里的模型坐标到Window Space里的窗口坐标的变换过程。
/// <summary>
/// Map the specified object coordinates (obj.x, obj.y, obj.z) into window coordinates.
/// </summary>
/// <param name="modelPosition">The object’s vertex position</param>
/// <param name="view">The view matrix</param>
/// <param name="proj">The projection matrix.</param>
/// <param name="viewport">The viewport.</param>
/// <returns></returns>
public static vec3 project(vec3 modelPosition, mat4 view, mat4 proj, vec4 viewport)
{
vec4 tmp = new vec4(modelPosition, (1f));
tmp = view * tmp;
tmp = proj * tmp;// this is gl_Position tmp /= tmp.w;// after this, tmp is normalized device coordinate. tmp = tmp * 0.5f + new vec4(0.5f, 0.5f, 0.5f, 0.5f);
tmp[] = tmp[] * viewport[] + viewport[];
tmp[] = tmp[] * viewport[] + viewport[];// after this, tmp is window coordinate. return new vec3(tmp.x, tmp.y, tmp.z);
}
就这么点事。当然这个函数忽略了model matrix和 glDepthRange() 的作用。不过model matrix可以和view matrix合二为一， glDepthRange() 基本上不需要调用。所以无伤大雅。
unProject
当然也有一个从Screen Space到Model Space的函数。完全是上面的project()的逆过程。
/// <summary>
/// Map the specified window coordinates (win.x, win.y, win.z) into object coordinates.
/// </summary>
/// <param name="windowPos">The win.</param>
/// <param name="view">The view.</param>
/// <param name="proj">The proj.</param>
/// <param name="viewport">The viewport.</param>
/// <returns></returns>
public static vec3 unProject(vec3 windowPos, mat4 view, mat4 proj, vec4 viewport)
{
mat4 Inverse = glm.inverse(proj * view); vec4 tmp = new vec4(windowPos, (1f));
tmp.x = (tmp.x - (viewport[])) / (viewport[]);
tmp.y = (tmp.y - (viewport[])) / (viewport[]);
tmp = tmp * (2f) - new vec4(, , , );// after this, tmp is normalized device coordinate. vec4 obj = Inverse * tmp;
obj /= obj.w;// after this, tmp is model coordinate. return new vec3(obj);
}
好好体会这2个互逆的过程，就能看透OpenGL坐标变换的全过程。