视口变换：3D画面怎么映射到屏幕

可视化演示

变换桥梁

剧场里，摄影师拍完底片后，并不会把整卷胶卷直接交给观众。他会走进暗房，选一张相纸，决定照片的构图和尺寸，然后把底片上的影像“投”到相纸上。视口变换就是这个“暗房投影”环节：它发生在裁剪空间之后、光栅化之前，是3D数据流向屏幕像素的最后一站。

在渲染管线中，顶点经过模型、视图、投影矩阵后，进入裁剪空间，再经透视除法得到 NDC 坐标。此时，所有可见点的 x、y、z 都落在 [-1, 1] 区间内——这就像底片上所有的影像都已被确定在“标准画幅”中。但 NDC 坐标没有单位、和具体设备无关，屏幕却是以像素为单位的。视口变换的任务，就是把 NDC 这个“标准画幅”翻译成屏幕窗口里某个矩形区域（即视口）的像素坐标。

这个翻译过程可以写成一个矩阵乘法。把 NDC 坐标补成齐次坐标，乘上视口矩阵，就得到窗口坐标：

回到剧场比喻：如果没有视口变换，就像暗房里忘记选相纸和构图——底片再好，也印不出一张能放进相册的照片。视口矩阵就是那张“洗照片的配方单”。

视口参数

摄影师在洗照片前，要明确告诉冲印店四个数字：照片在相册里的位置（离边角多远）以及照片本身的长和宽。视口变换同样需要这四个参数，它们合起来描述了一个矩形区域：x、y（矩形左下角坐标） 和 width、height（矩形的宽和高）。

在 OpenGL 中，这个“配方单”通过 glViewport 函数来填写：

其中 (x, y) 是视口矩形的左下角在窗口坐标系中的位置，width 和 height 是矩形的尺寸，单位都是像素。调用后，NDC 坐标的 (-1,-1) 会被映射到视口的左下角，即窗口中的 (x, y) 位置；NDC 的 (1,1) 则被映射到视口的右上角，即 (x + width, y + height)。

如果不手动设置，OpenGL 默认使用整个窗口作为视口——就像冲印店默认把整张相纸都用来印照片。但有时摄影师只想在相纸中央印一张 6 寸照片，这时就需要调整 x、y 把它移到中间，并缩小 width、height。在实际引擎中，窗口尺寸变化时通常需要重新调用 glViewport，否则照片会继续使用旧的尺寸，导致画面只显示在窗口的一部分。另外在支持高 DPI 的屏幕上，视口的 width 和 height 还要乘以设备像素比，否则照片会显得模糊。

这四个参数决定了映射的目标区域，但它们只负责“往哪投”，不负责“投什么内容”。真正决定影像内容在区域内如何摆放的，是下一节的缩放和平移公式。

缩放平移

现在你已经拿到相框（视口参数），也知道了底片上的影像范围（NDC 坐标）。下一步就是把影像“投”进相框里。这个过程可以拆成两个动作：先把底片放大或缩小到相框尺寸，再把影像挪到相框的正确位置。

NDC 坐标中，x 和 y 的范围都是从 -1 到 1，总共跨度是 2。视口宽度是 width，跨度是 width 像素。所以把 NDC 的宽度放大到视口宽度，缩放系数就是 $\frac{width}{2}$。同理，高度方向上的缩放系数是 $\frac{height}{2}$。放缩之后，NDC 的 (-1,-1) 对应到了视口左下角的偏移处，再通过平移把它移动到 (x, y) 起点。于是得到屏幕坐标：

注意第二个式子里的 $(1 - y_{ndc})$——这正是 Y 轴翻转：NDC 中 $y=1$ 是顶部（舞台的“上方”），而屏幕坐标系中 $y=0$ 是顶部，方向相反，所以用 $1 - y_{ndc}$ 把方向倒转过来。

把上述三步合并解释：NDC 的 (-1,1) 落在屏幕 $(x, y)$，NDC 的 (1,-1) 落在 $(x+width, y+height)$——底片的四个角被精确地“钉”在了相框的四个角上。摄影师只需报出相框位置和尺寸，冲印机就会自动完成放大和挪动。

剪刀区域

有时摄影师会在镜头前放一块遮挡板，只让画面的一部分透光。这块遮挡板与相框不同：相框决定“照片多大”，遮挡板决定“哪部分影像能印出来”。图形学中也有类似机制，叫剪刀区域（Scissor Test）。

剪刀区域和视口是两个容易混淆的概念。视口是 NDC 坐标映射的目标区域；剪刀区域是像素写入前的额外剪裁。glEnable(GL_SCISSOR_TEST) 启用剪刀测试后，再用 glScissor(x, y, w, h) 指定一个矩形。只有当像素落在视口与剪刀区域的交集内时，才会被写入颜色缓冲。

两个矩形的交集区域可以这样计算：假设视口区域为 $R_1 = (x_1, y_1, w_1, h_1)$，剪刀区域为 $R_2 = (x_2, y_2, w_2, h_2)$，则交集的宽度和高度为：

用遮挡板来理解：遮挡板的孔与相框重叠的部分，才是最终露出的画面。实际项目里，剪刀区域常用来做小地图、侧边栏、局部高亮等特效——好比在相纸上盖个局部遮罩，只曝光你想曝光的区域。

屏幕适配

洗照片最怕的事，是客人拿来的底片是 4:3 画幅，相纸却是 16:9——直接印满整张相纸，人物会被拉得又胖又矮。屏幕适配解决的就是这个“画幅 vs 相纸”的矛盾。

当窗口的宽高比不等于视口变换使用的宽高比时，画面就会变形。比如渲染一个正方形，窗口宽高比不是 1:1，正方形会被拉伸成矩形。解决方式有两种：直接拉伸（强制用整个窗口，画面变形）或信箱模式（Letterboxing）（居中裁剪，保持画幅不变，两侧留黑边）。

假设目标宽高比为 $a_{target} = \frac{w_t}{h_t}$，窗口可用宽高为 $w_{win}$、$h_{win}$，则信箱模式下视口实际尺寸为：

计算好 $w_{vp}, h_{vp}$ 后，把它代入视口参数，并用 (w_{win}-w_{vp})/2 和 (h_{win}-h_{vp})/2 作为 x、y 居中。这就像把 4:3 的照片贴在 16:9 的相册里：左右留白、照片居中，既不裁掉内容也不变形。移动端竖屏与横屏切换、窗口 resize 时，都需要重新计算这套参数。

光栅衔接

照片最终要由打印机输出，打印机是一格一格喷墨的。屏幕也是：最终要落在一个个像素格子上。视口变换算出的是像素坐标，但像素本身有面积、有中心，光栅化阶段会在像素中心拾取颜色。这个“中心对齐”的细节，决定了画面边缘的清晰度。

在传统像素坐标系中，屏幕像素 $(p_x, p_y)$ 的中心位于 $(p_x + 0.5, p_y + 0.5)$。因此视口变换后，理论上还要考虑 0.5 像素的偏移，才能让采样点对准像素中心。不过现代 GPU 的视口变换通常会处理这个对齐。深度方向同理：NDC 的 z 在 [-1,1]，深度缓冲需要 [0,1] 范围，通过前面的视口矩阵一并完成映射：

这就像打印机把电子照片的连续色块“采样”到纸面的墨点上：每个墨点的位置取所在格子的中心，格子的边界则通过像素中心对齐来确定。视口变换完成之后，GPU 就知道每个 3D 点该落在哪块“墨点”上，接下来就是光栅化阶段逐像素填充颜色，最终在屏幕上呈现出一幅完整的画面。

AI 应用场景

Python 演示

class ViewportMapper:    def __init__(self, x, y, width, height, depth_range=(0.0, 1.0)):        self.x = x        self.y = y        self.width = width        self.height = height        self.near, self.far = depth_range     def map(self, ndc_x, ndc_y, ndc_z=0.0):        sx = self.x + (ndc_x + 1.0) * self.width / 2.0        sy = self.y + (1.0 - ndc_y) * self.height / 2.0        sz = self.near + (ndc_z + 1.0) / 2.0 * (self.far - self.near)        return (round(sx, 2), round(sy, 2), round(sz, 2))     @staticmethod    def compute_viewport(window_w, window_h, target_aspect):        window_aspect = window_w / window_h        if window_aspect > target_aspect:            vw = round(window_h * target_aspect)            vh = window_h        else:            vw = window_w            vh = round(window_w / target_aspect)        vx = (window_w - vw) // 2        vy = (window_h - vh) // 2        return (vx, vy, vw, vh)     @staticmethod    def clip_intersect(vp, scissor):        x1, y1, w1, h1 = vp        x2, y2, w2, h2 = scissor        left = max(x1, x2)        right = min(x1 + w1, x2 + w2)        top = max(y1, y2)        bottom = min(y1 + h1, y2 + h2)        return (left, top, max(0, right - left), max(0, bottom - top))  if __name__ == '__main__':    mapper = ViewportMapper(100, 50, 800, 600)    points = [(-1.0, 1.0), (0.0, 0.0), (1.0, -1.0)]    for p in points:        print('NDC', p, '-> 屏幕', mapper.map(*p))     vp = (0, 0, 1920, 1080)    scissor = (240, 180, 800, 600)    print('视口与剪刀交集:', ViewportMapper.clip_intersect(vp, scissor))     letterbox = ViewportMapper.compute_viewport(1920, 1080, 16.0 / 9.0)    print('16:9 窗口适配:', letterbox)

1. def map(self, ndc_x, ndc_y, ndc_z=0.0)核心映射方法，对应视口变换的缩放和平移两步操作
2. sx = self.x + (ndc_x + 1.0) * self.width / 2.0NDC 的 x 经归一化后缩放到视口像素宽度
3. sy = self.y + (1.0 - ndc_y) * self.height / 2.0用 1 - ndc_y 实现 Y 轴翻转
4. sz = self.near + (ndc_z + 1.0) / 2.0 * (self.far - self.near)深度 z 从 [-1,1] 映射到 [near, far]
5. compute_viewport静态方法，计算信箱模式下居中视口的四元组，避免画面拉伸
6. clip_intersect静态方法，计算两个矩形（视口与剪刀区域）的交集矩形

常见误区

面试题