track image
有关retina和HiDPI那点事

有关retina和HiDPI那点事

赵勃赵勃

苹果公司在2010年的WWDC上发布了iPhone4,第一次向世人展示了retina屏幕,并在后续的几年内分别发布了new iPad、rMBP、5K iMac及2015年新款macbook等一系列r屏产品。当年乔帮主将这种高密度像素的屏幕命名为retina,主要是指在正常阅读距离下,人眼无法分 辨屏幕上的像素颗粒,使得屏幕显示效果更为细腻平滑。这种retina屏(后简称为“r屏”)与非retina屏(后简称为“非r屏”)之间显示效果的区别如图1所示。

图1 WWDC 2010上非r屏与r屏显示效果对比

这便涉及衡量屏幕“细腻平滑”的指标,叫做PPI(Pixels Per Inch),翻译过来就是每英寸长度里排列了多少个像素。两块面积相同而PPI不同的屏幕,自然是PPI大的那块总像素数量多,其展示细节的潜力和能力也越大,如图2所示,只用4x4个像素来表达一条曲线,自然不如8x8个像素更加细腻平滑。后者的PPI是前者的2倍,后者像素数量则是前者的4倍。

图2 非r屏与r屏在显示字母a的左上角边沿时的细节对比

iPhone全线产品的PPI一直保持320以上,虽然iPad和Mac的r屏产品线的PPI是220左右,但相比PPI只有100左右的非r屏来说,也已是极佳的视觉体验了。

对于绝大多数人来说,有关屏幕更多听到的度量数据并不是PPI,而是“分辨率”,即具体的像素个数,比如1440x900、1920x1080等。受 windows操作系统的影响,多数人心中会产生这样的逻辑:分辨率越高,字会显得越小。可是,苹果的r屏产品并没有让显示的文字变得很小,这又是怎么回 事呢?

首先,解释一下“分辨率越高,字越小”的逻辑是怎么来的。显示器的屏幕面积可分为两个部分:像素的面积,像素间距构成面积。据说,显示器厂商为了更大开口率和更多的背光量,都会让像素的间距尽可能减小以实现节能。这就意味着,整个屏幕的面积主要由像素面积构成,即在相同面积下,分辨率越高,像素数量也越多,单个像素的面积也一定越小。于是高分辨率就对应着小像素,而像素小,则由像素构成的文字就小。

那么接下来的问题就是,既然苹果产品的r屏所包含的像素数量约为同面积非r屏的4倍,即每个像素尺寸约为非r屏像素的1/4,那为什么显示出来的文字没有缩减成1/4呢?

这里就涉及一个更加重要的因素,也是大家都不会留心的地方:操作系统的渲染方式,它决定了一个文字或图标最终以多少个像素来表达。r屏的设备并没有让字体变小,其主要原因就在于,它在表达屏幕上每个元素时,都使用了4倍于非r屏的像素个数。这样算下来,像素尺寸为1/4,像素数目为4倍,于是最终渲染出来的文字和图标的大小与非r屏的相当。

这种渲染方式带来的一个最有利的结果就是,在确保了显示尺寸不缩水的前提下,让内容表达得更加细腻。这种HiDPI的渲染效果在改善视觉方面到底有多大的提升?下面的“实战”图可以很好地解释这一点:

图3 rMBP(2560x1600)和MBP(1280x800)下的菜单栏

图3为 13英寸retina Macbook Pro (rMBP) 和普通 Macbook Pro(MBP)屏幕上的菜单栏截图。需要指出的是,两种渲染下都会在图标和文字的边缘处使用“灰色”像素来调和视觉,若整体可利用的像素数量少,则渲染文字时,这种“灰色”像素的影响就会极为明显。现举图3中“文”的第一笔为例:

图4 “文”第一笔的渲染效果对比

由图4可知,在r屏HiDPI的渲染下,这一笔大约占用6x6个像素的区域,最终采用了11个“纯黑”像素加4个“灰色”像素来得到,而在非r屏的非 HiDPI渲染下,这一笔只能在3x3个像素的区域来表达,最终采用1个纯黑像素加2个“灰色”像素来得到。可以明显地看到,HiDPI渲染下,笔划充实且细节丰富,而非HiDPI下由于可利用的像素数量少,只能依赖更多比例的“灰色”像素来间接补偿视觉效果。同理,可以对比观察其他笔划的细节,你就会非常认同2010年WWDC上乔帮主提醒大家的话:一旦你用上了r屏,你就再也回不去了。

在这里做一个小结, r屏设备之所以视觉效果好,高PPI提供了硬件基础,HiDPI渲染方式提供了软件支持,二者缺一不可,即:

高PPI(硬件) + HiDPI渲染(软件) = 更细腻的显示效果(retina)

有人可能会问,如果仅提升PPI,而不采用HiDPI,效果会怎样?为了着重体现HiDPI的渲染作用,我们回到图2那张像素细节对比图,手动加几条线,让左边那个非r屏强行变成r屏,但是显示的内容依然按照非HiDPI的方式来渲染,也就是下图的样子:

图5 PPI相同,但渲染方式不同

可以看到,左右两边的屏幕都具备了retina的硬件条件,但由于左图没有采用HiDPI的渲染方式,使得其完全没有发挥出高PPI的优势,最终呈现的依然是非r屏的视觉效果。可见系统对内容的渲染方式在改善视觉效果上的作用非常关键。

HiDPI渲染并不是由屏幕提供的,而是在操作系统中实现的,这需要计算机在输出给显示器之前就把一切文字图标等采用多倍的像素渲染成更细腻的样子。当然,这样的渲染会消耗更多的CPU与GPU运算,也就会消耗更多的能源,再加上r屏设备本身还要要承担4倍数量的像素显示,续航的维持必然成为一项不小的挑战。有时我们感觉苹果相继推出r屏产品只是顺应趋势的必然行为,但工程师在处理器功耗与性能的平衡取舍、屏幕材料的选择与工艺设计、电池技术的革新、操作系统的优化等等方面所付出的辛苦和努力是我们难以想象的。

难道我们一定要购买r屏的设备才能获得细腻平滑的视觉体验么?伴随而来的问题便是,若仅使用HiDPI渲染,而不采用高PPI屏幕,又会是什么效果呢?下面的图可以说明这个问题:

图6 渲染方式同为HiDPI,但屏幕PPI不同

把右边的图放大为原来的4倍(横纵各拉长为2倍)即成为左边的图,即两张图上像素数量一样多,右边的PPI值是左边的2 倍。可以看到,虽然这两块屏幕本身一个非r屏(左)一个r屏(右),但渲染曲线的方式都是HiDPI。从最终结果来看,左右两块屏具备完全相同的显示信息,谁也没比谁多显示或少显示细节。而它们唯一的差别仅在于,左边像素尺寸是右边的4倍,导致在显示相同的内容时,左边要占用更大的面积。

那是否可以消除这种整体尺寸的影响呢?我们知道,人眼对像素尺寸的感观与人眼到屏幕的距离反向相关,即人眼离屏幕越远,屏幕上的像素就会看起来越小。这里放出苹果给出的人眼的视角公式:

图7 retina屏幕的设计原理

简单来说,图7中iPhone的像素虽然比iPad上的像素尺寸小,但由于距离的原因,人眼对它们的视角,即a的值,是相同的,那么这两粒像素在人眼球的视网膜上成像的尺寸也是相同的。由于在现实中人眼离屏幕的距离(百毫米级)远大于像素的尺寸(百微米级),则通过公式计算得到的视角a是非常小的,于是我们可以近似认为,公式中的反正切三角函数在原点附近程线性特性。

基于以上分析,回到图6,假设我们看右边高PPI(像素边长为h)屏幕时,眼到屏幕距离为d,而我们看左边的低PPI(像素边长为2h)屏幕时,离得远一些,让眼睛到屏幕距离为2d,代回公式中,这两种情境下人眼看像素的视角是近似相等的,在视网膜成像尺寸也近似相等,即最终从眼睛接收的视觉效果来看,二者并无区别。

举例说明,一台27寸的4k显示器,分辨率是3840x2160,PPI约为160,开启HiDPI模式后,若以50cm的距离观看屏幕,那么在视觉上与在 25cm距离看326PPI的iPhone是没有差异的(320/50=160/25),而“以25cm距离看326PPI”恰恰是retina屏幕的标准。也就是说,我以50cm的视距来观看HiDPI渲染下的27寸4k显示器会体验到放大一倍的rMBP屏幕的感觉。小于这个距离时,显示效果依旧很细腻,但是屏幕的颗粒感会变得更明显。 这里我们可以粗略地下个结论,在HiDPI的渲染下,只要适当增加人眼到屏幕的距离,非r屏也能给人眼以r屏的视觉体验

但这种HiDPI+非r屏会带来一点副作用:由于每个文字或图标都占用了更多的像素,内容本身尺寸变大,使得整个屏幕可显示的信息相对变少。例如,1920x1080分辨率的屏幕,经过完全HiDPI渲染之后,虽然所显示的内容都变得很细腻,但屏幕看起来就像960x540一样,窗口常显示不全。因此,若想HiDPI显示的同时又保证显示内容足够,则需要采用更高分辨率的显示器来提供尽可能多的像素。至此,在非r屏下,有:

低PPI + HiDPI渲染 + 高分辨率 + 远视距 = 近似于retina的视觉效果

对于外接显示器来说,最常见的就是将3840x2160的4k显示器HiDPI渲染成looks like 1920x1080的样子。如果你有5K的显示器,便可将5120x2880的分辨率渲染成looks like 2560x1440的样子。

最后,Mac OS X操作系统在任何情况下都支持HiDPI渲染么?在r屏产品中自然是默认开启的;在非r屏中,显示器屏幕达4k及以上且系统为Yosemite及以上时,会支持用户手动调整渲染等级,而在显示器分辨率小于4k时,则需要借助Quartz Debug强制开启HiDPI模式,并配合第三方插件SwitchResX或RDM来实现。此外,Mac对4k屏幕的支持是有硬件限制的,即目前只有部分Mac设备能够正常使用4K显示器,而不同的接口和不同的显卡瓶颈,又使得输出刷新率有一定的差别,详细的说明可参见官方文档:

将 4K 显示器和超高清电视机与 Mac 配合使用

综上,总结两条:
1)PPI高,意味着像素更小更密集,它的作用主要体现在:让人在更短的视距内实现屏幕像素的“无颗粒感”;
2)细腻的显示效果还取决于操作系统是否开启了HiDPI模式渲染,它是屏幕上一个字符或图标显示得模糊或清晰的决定性因素。

---
下一步计划针对“不完全”HiDPI的事情写一写。

文章被以下专栏收录
14 条评论
推荐阅读