31-空间变换—屏幕空间变换

Created2025-09-08|Updated2025-09-22|图形学工程&工业仿真1-图形学，从0构建一个opengl软光栅

|Post Views:

前情再回顾

模型变换：三角形在世界坐标系中的初始坐标（模型坐标与世界坐标重合）经过旋转、平移等变换得到模型矩阵用模型矩阵乘以三角形顶点坐标，得到新的位置

视图变换：
设置摄像机并对其进行平移或旋转
将摄像机的模型变换矩阵取逆，得到视图变换矩阵
用视图变换矩阵乘以三角形顶点坐标，将其变换到摄像机坐标系

投影变换：
用透视投影或正交投影矩阵乘以摄像机坐标系中的顶点
得到剪裁空间下的顶点坐标
剪裁空间坐标除以 Omega（负 Z 值）得到 NDC 坐标

屏幕空间变换

现在我们已经得到了NDC坐标，那如何将NDC坐标表示的顶点映射屏幕/窗体具体的像素位置？这就需要屏幕空间变换矩阵（本过程只计算顶点位置，仍未光栅化）

透视除法

物体的顶点经过透视投影矩阵变换后，会得到一个剪裁空间的顶点坐标，即 W=-Ze
只有x/y/z都除以W之后，才能得到最终的NDC坐标

图-1

注意：
这一步会出现W=0的可能，所以在除法前已经做了剔除，后面会专门讲解剔除算法
正交投影后也需要除以W，保存流程一致性，只不过W=1

将NDC改造到0-1

物体顶点的NDC坐标范围在-1到1之间，可以对其进行改造，变换到0-1之间（本步骤为线性）

图-2

屏幕空间与NDC空间

正交投影与透视投影最终的结果，都是得到了物体顶点的NDC坐标；
改造后是0-1的区间，与屏幕的对应关系如下图所示：

图-3

盒体内物体顶点，改造为0-1区间后，其x/y坐标，可视作在屏幕上的比例，从而可以计算在屏幕上的位置（就像前面的uv坐标那样）

图-4

屏幕空间变换

对于任何一个NDC坐标下的顶点，变换到屏幕空间，其x/y/z都会经历如下过程：

图-5

从而可以得到屏幕空间变换矩阵为：

图-6

Author: LYJ

Link: http://lyjseagull.github.io/graphics-opengl-31-windows/

Copyright Notice: All articles on this blog are licensed under CC BY-NC-SA 4.0 unless otherwise stated.

投影——空间变换

Related Articles

30-空间变换—透视投影变换

透视投影视线从摄像机位置出发，看下-z方向，可视范围是near到far之间，形成一个视锥体；所有的物体都会被投影在近平面near上；其特点是有近大远小的效果透视投影定义数据可视范围： near、far近平面范围： left、right、top、bottom 透视投影盒空间透视投影变换的最终目的，是将视锥体内部的物体压缩到一个xyz为-1到1的盒体内，即物体坐标化为NDC坐标，从而与正交投影统一后续计算投影坐标计算数据定义： e(eye)坐标，即视图变换后的坐标；逆y轴看下去，得到如下图像，可知：逆x轴看下去，得到如下图像，可知：投影平面与NDC目前已知投影在近平面的P点x/y/z坐标值，下面需要将其缩放到-1到1的NDC坐标系内近平面上点坐标与NDC坐标对应关系如下，即线性关系，y坐标举例 NDC与e坐标已知条件如下：使用下列等式替换：在Ze≠0的条件下，可以得到： NDC与e坐标——剪裁空间坐标总结： Ze≠0 情况下 Zmdc的表达式还没有计算出来，考虑到兼容Ze=0 的情况，使用齐次坐标表达...

29-空间变换—正交投影变换

前情回顾目前我们知道，通过model matrix可以将物体初始位置变换到目标位置，通过view matrix(摄像机坐标系/视图坐标系)乘以model matrix就可以得到视图坐标系下的位置(x,y,z) 现在我们来考虑以下显示的问题————投影：将空间中的物体投射成某一个平面的影像，把3D场景转换为2D平面图像正交投影的概念图示为正交投影，是一种平行投影，类似用平行光把物体投射到地面上；由于没有像人眼一样的光线汇集点，所以没有近大远小的效果正交投影盒空间正交投影盒空间是指，定义一个立方体，只有在立方体内的物体才会“可视”，其他的都看不到；即在视图变换后的结果中，选择一块区域进行渲染显示关于摄像机：正交投影比较特殊，在视图变换后，便没有考虑摄像机位于中心这件事；其只关心投影盒空间圈起来了哪个区域，就会去显示哪个区域正交投影平面正交投影平面，位于投影盒正z轴方向的面，如图：由图可知，投影平面与屏幕窗体的四个角一一对应吻合投影空间描述每个投影的盒子都是由六组数据组成，即上下、左右、前后四组坐标值只有在这组坐标范围内的物体才会被渲染正交投影盒...

32-空间变换—投影屏幕空间变换代码实现

mathFunction.cpp//正交投影函数 template<typename T> Matrix44<T> orthographic(T left, T right, T bottom, T top, T near, T far) { Matrix44<T> result(static_cast<T>(1)); result.set(0, 0, static_cast<T>(2) / (right - left)); result.set(0, 3, -(right + left) / (right - left)); result.set(1, 1, static_cast<T>(2) / (top - bottom)); result.set(1, 3, -(top + bottom) / (top - bottom)); result.set(2, 2, -static_cast<T>(2) / (far - near)); result.set(1, 3, ...

33-旋转三角形代码实现

application.cppvoid prepare() { texture = Image::createImage("assets/textures/test.jpg"); p1.color = RGBA(255, 0, 0, 255); p1.uv = math::vec2f(0.0f, 0.0f); p2.color = RGBA(0, 255, 0, 255); p2.uv = math::vec2f(1.0f, 1.0f); p3.color = RGBA(0, 0, 255, 255); p3.uv = math::vec2f(1.0f, 0.0f); pos1 = {-1.5f, 0.0f, 0.0f, 1.0f}; pos2 = {1.5f, 0.0f, 0.0f, 1.0f }; pos3 = {0.0f, 2.0f, 0.0f, 1.0f }; perspectiveMatrix = math::perspective(60.0f, (float)WIDTH / (f...