运行在 macOS 中的「超采样」：HiDPI 与 Mac 显示溯源

运行在 macOS 中的「超采样」：HiDPI 与 Mac 显示溯源 主作者 关注 Nnnobel 少数派作者 Enchanted to meet u. Nnnobel 关注 Nnnobel 少数派作者 Enchanted to meet u. 联合作者 关注 Nnnobel 少数派作者 Enchanted to meet u. Nnnobel 关注 Nnnobel 少数派作者 Enchanted to meet u. 昨天 15:00 前言 在笔者的上一篇文章中，有一条很有意思的评论： macOS 的 HiDPI 模式是不是跟 SSAA 异曲同工？ 顺着这个问题，结合多年的折腾经验以及一些图形学方面的专业基础，笔者在这篇文章中试图用清晰易懂的语言讲清楚 HiDPI 究竟是什么。 我派站内也有不少关于如何开启 HiDPI 的文章，若你有实践方面的需求，不妨参考下述文章： 《 为 macOS 10.15 开启 HiDPI，让 2K 显示器更舒适 》 《 M1 系列 Mac 外接 2K 显示器开启 HiDPI 的多种尝试 》 从分辨率说起 你可能早已对「分辨率」这个名词习以为常。但实际上，分辨率远远不是那几个数值那么简单，HiDPI 原理的核心其实就是在分辨率上做文章。 物理分辨率 物理分辨率便是我们认知范围内经常出现的「分辨率」，它代表着一个显示器上有多少个物理像素点。 macOS 中「系统信息」展示了该显示器的分辨率 逻辑分辨率 如果你仔细看过 macOS 的「设置」中显示器分辨率的选项，你应该会感到有些奇怪：为什么我的 MacBook 显示器分辨率那么低，甚至连常见的 1080p 都没达到？ 而上图「系统信息」中却显示了这块显示器的实际分辨率为 3024 × 1964，究竟哪个数值是准确的？ 为了解决这个疑问，我们得回到 2012 年的 WWDC。 High Resolution In OS X Retina 这一年，Apple 发布了配备 Retina（视网膜）显示屏的全新 MacBook Pro，这也是 MacBook 系列显示效果领跑行业的开端。 彼时的 Apple 官网 全新 MacBook Pro 的 Retina 显示屏是一款具有超高分辨率的笔记本电脑显示屏，像素数量达到惊人的 500 万，比 HD 高清电视还要多 300 万像素。每英寸 220 个像素的超高像素密度超过了人眼所能分辨的范围，在正常观看距离内，单个像素的颗粒感似乎已然消失。因此屏幕表现才会如此栩栩如生，呈现的文字和图形才会如此锐利和真实。 从直觉上来看，提高分辨率自然是好事：像素越多，画面越清晰。这对于图像、视频与游戏画面等的显示提升是显而易见的。 但对于操作系统来说，事情并没有那么简单。系统元素（如字体、矢量图标等）的渲染与图片不同。在传统显示器时代，应用程序 UI 设计往往直接使用 Pixel（像素）作为界面布局单位。一个按钮宽 100 像素，一个图标高 32 像素，字体也按照固定的像素数量进行绘制。 然而，当显示器的像素密度不断提升时，问题出现了。 假设同样尺寸的两块显示器，其中一块拥有另一块显示器成倍的像素数量，屏幕上的每一个像素都会变得更小。如果界面仍然按照原来的像素数量进行布局，那么原本宽度为 100 像素的按钮，其实际显示尺寸也会随之缩小。 下图可以清晰地说明这一概念。在高分辨率的显示器中，如果还按照原来的模式渲染输出画面，我们将难以看清其中的元素。 同一画面下 macOS设置不同逻辑分辨率的对比 在 Retina 显示屏出现前，大多数 macOS 开发者习惯了以 Pixel（像素）作为界面设计与布局的基本单位。窗口大小、按钮位置、图标尺寸与绘制图形时的坐标等，往往都直接使用像素进行描述。 「All coordinates are in points」 图源：Apple 在 WWDC 2012 的 Session 213 演讲中，Apple 提出了一套新的设计思路：Unified Coordinate System（统一坐标系统）。 图源：Apple 在这套体系下，应用程序不再直接与 Pixel（像素）打交道，而是使用一种名为 Point（点） 1 的逻辑单位。 Apple 采用了一个看似简单却影响深远的设计：在配备 Retina 显示屏的 MacBook 上，一个逻辑上的 Point，由原来的对应单个物理像素转换为了由四个物理像素共同表示。 对于开发者而言，一个按钮、一个窗口依然可以是固定数值的大小，只是表示的单位换了。至于这些 Point 最终应该如何映射到实际屏幕上的 Pixel，则完全交给系统处理。 图源：Apple 假设一个窗口的逻辑尺寸为 1920 × 1080 Points，在传统显示器上，系统需要绘制 1920 × 1080 Pixels。而在 Retina 显示器上，同样大小的窗口实际上会被渲染为：3840 × 2160。 经过处理后，应用程序的界面尺寸完全没有发生变化；但从用户的角度来看，由于系统拥有更多像素来描述同样的内容，因此文字边缘更加平滑，图标细节更加丰富，整体画面也更加锐利。 图源：Apple 而在 Apple 的设计中，Retina 显示屏增加的是 Pixel 的数量，而不是 Point 的数量。逻辑空间保持不变，显示精度则提升了四倍。这也是为什么配备 Retina 的 MacBook 的界面尺寸与旧款 MacBook 基本一致，但显示效果却有着肉眼可见的提升。 详解HiDPI 渲染分辨率与 FrameBuffer 前文中，我们提到了「逻辑分辨率」与「物理分辨率」两个概念。逻辑分辨率决定了桌面拥有多大的工作空间，而物理分辨率则代表显示器真实拥有多少个像素。但 macOS 并不只是简单地将逻辑分辨率映射到物理分辨率上。事实上，在逻辑分辨率与物理分辨率之间，还存在着一个经常被忽略，却至关重要的概念 —— 渲染分辨率。 顾名思义，「渲染分辨率」是系统实际绘制桌面时所使用的分辨率。应用程序绘制的窗口、文字、图标以及各种界面元素，都会首先被渲染到一块位于显存中的缓冲器上，即 FrameBuffer（帧缓冲区）。而图像在 FrameBuffer 中绘制的尺寸，便是渲染分辨率。 LoDPI 与 HiDPI 对于传统的 LoDPI 显示模式而言，渲染分辨率的大小通常与显示器的物理分辨率保持一致。系统渲染多少像素，显示器便显示多少像素，即逻辑分辨率、渲染分辨率与物理分辨率是以 1:1:1 对应的，无需进行多余的操作。 然而在 HiDPI 模式下，情况发生了变化。 为了让同样大小的界面拥有更高的显示精度，macOS 并不会直接按照逻辑分辨率进行绘制，而是会先按照一定的缩放倍率调整渲染分辨率，并在一个更大的 FrameBuffer 中完成渲染。 以 Retina 显示屏常见的 2× Scale Factor 为例，一个逻辑上的 Point 会对应 2 × 2 个 Pixel。因此，一个逻辑分辨率为 2560 × 1440 Points 的桌面，实际上的渲染分辨率为 5120 × 2880 Pixels。此时，「5120 × 2880」 便是系统实际使用的渲染分辨率。 这其实和游戏中使