×
广告

有关retina和HiDPI那点事

96
劈小闭
2015.06.02 19:23* 字数 3022

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


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

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

图2 非r屏与r屏的显示细节

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

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

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

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

这里就涉及一个更加重要的因素,也是大家都不会留心的地方:操作系统HiDPI的渲染方式。渲染方式决定了一个文字或图标最终以多少个像素来表达。r屏的设备并没有让字体变小,其主要原因就在于,虽然r屏的像素尺寸是普通非r屏像素的1/4,但在表达文字时使用了4倍于非r屏的像素个数。于是最终渲染出来的文字和图标的大小与非r屏的相当,而这种渲染方式带来的一个最有利的结果,就是内容表达得更加细腻。

换句话说,r屏设备之所以视觉效果好,高PPI提供了硬件基础,HiDPI渲染方式提供了软件支持。

这种HiDPI的渲染效果在改善视觉方面到底有多大的提升?下面的“实战”图可以很好地解释这一点:

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

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

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

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

有人会说,图3和图4中的显示效果的区别主要体现在PPI的差别上,HiDPI的作用并不明显。好,为了体现HiDPI渲染的作用,我们回到图2那张像素细节对比图,手动加几条线,让左边那个非r屏强行变成r屏,但是显示的内容依然按照非HiDPI的方式来渲染,也就是下图的样子:


图5 同样是r屏但渲染方式不同

可以看到,虽然左边的屏幕也具备了retina的硬件条件,可是在显示效果上完全没有体现出高PPI的优势,依然是非r屏的视觉效果。可见系统对内容的渲染方式在改善视觉效果上作用更为关键。

这种HiDPI的渲染能力并不是屏幕提供的,而是苹果公司的工程师们在操作系统中添加实现的,这需要在计算机输出给显示器之前就把一切文字图标等采用多倍的像素渲染成更细腻的样子。于是,这样的渲染会消耗更多的CPU与GPU运算,也就会消耗更多的能源。因此r屏对能源的消耗不光体现在4倍于非r屏的像素个数,还体现在操作系统的HiDPI渲染方式。而推出一款r屏产品往往需要对软硬件作全面综合的考虑,如处理器功耗与性能的平衡取舍、屏幕材料的选择与工艺设计、电池技术的革新、操作系统的优化等等。有时我们感觉苹果相继推出r屏产品只是顺着趋势必然推出,但工程师背后付出的辛苦和努力是我们难以想象的。

难道我们一定要购买r屏的设备才能体验到细腻平滑的视觉体验么?在非r屏上开启HiDPI会是什么效果呢?下面的图可以说明这个问题:

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

左边的图实际上就是由右边的图放大2倍而成,这意味着,在单位面积中,右边屏幕包含的像素数是左边的2倍,即右边的屏幕的PPI值是左边的屏幕的2倍。虽然这两块屏幕一个非r屏(左)一个r屏(右),但渲染曲线的方式都是HiDPI。从最终的渲染结果来看,左右两块屏具备完全相同的显示信息,谁也没比谁多显示细节。而它们唯一的差别仅在于,左边像素个头是右边的2倍,导致在显示相同的内容时,左边要占用更大的面积。

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

图7 Retina设计标准公式

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

基于以上分析,对于图6来说,假设我们看右边高PPI(像素边长为h)屏幕时,眼到屏幕距离为d,而我们看左边的低PPI(像素边长为2h)屏幕时,眼到屏幕距离为2d,则人眼的视角近似相等,在视网膜成像尺寸也近似相等,即最终从眼睛接收的视觉效果来看,二者并无区别。

举例说明,一台27寸的4k显示器,分辨率是3840x2160,PPI约为160,开启HiDPI模式后,以50cm的距离观看屏幕,视觉上与在25cm距离看326PPI的iPhone并无差异(320/50=160/25),而后者恰是retina屏幕的标准。也就是说,我以50cm的视距来观看HiDPI渲染下的27寸4k显示器会体验到大一倍的rMBP屏幕的感觉。

这里我们可以粗略地讲,在HiDPI的渲染下,只要适当增加人眼到屏幕的距离,普通非r屏也能给人眼以r屏的视觉体验。但这种HiDPI对于非r屏会带来副作用:内容尺寸变大,整个屏幕可显示的信息相对变少。例如,1920x1080分辨率的屏幕,经过HiDPI渲染之后,虽然所显示的内容都变得细腻无比,但屏幕看起来就像960x540一样,窗口经常显示不全。因此,若想HiDPI显示的同时又保证显示内容足够,则需要高分辨率的显示器来提供尽可能多的像素。对于外接显示器来说,最常见的就是将3840x2160的4k显示器HiDPI渲染成looks like 1920x1080的样子。

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

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

日记本
Web note ad 1