Retinaモデルはどのように描画しているのか？

mac

Retina対応

  • Retinaモデルは、通常モデルの縦横2倍の解像度がある。だから、Retinaモデルに対応するためには、いろいろなUI部品の縦横2倍の画像も用意しておく必要があるそうである。
  • アプリケーションがRetinaモデルで起動された時は、縦横2倍の画像を利用して描画する。
  • 縦横2倍の解像度な画面では、それで通常モデルと同じ大きさのUI部品となるのだ。

例：

AddBookmarkLeftCapButtonInactive.png
AddBookmarkLeftCapButtonInactive@2x.png
      • この例の2倍画像はプレビュー.appで2倍しただけなので、ぼやけている。実際は、もっと品質の高い2倍画像を用意するのだ。
  • 縦横2倍画像のファイル名には@2xを付加しておく、という命名規則に従うだけで、あとはCocoaなどのフレムーワークが良きに計らってくれるという仕組みらしい。
[UIImage imageNamed:@"AddBookmarkLeftCapButtonInactive.png"];


iPhone、iPad、あるいは「Retinaディスプレイに最適」な設定では、極めて便利な仕組みだ。

Retina未対応

一方、Retina未対応のアプリケーションはどのようになるかというと...

MacBook Pro with Retina Display におけるアプリの動作 - Cocoa を飲んで、ほっとして。
  • なるほど。Retina未対応だと、通常モデルの解像度で描画したものを、Retinaモデルの解像度まで拡大するようである。
  • 気持ち的には、今時はアウトラインフォントなんだから、文字だけはRetina品質を保ったまま、拡大・縮小して欲しい気がした。
    • Retina対応・未対応でフォントリソースに違いはないと思われるので、技術的にはできそうな気がする。
  • そのうち、Retina未対応のフォントの表示品質も可能な限り美しくして欲しい。


---------- 以下はすべて自分の想像 ----------

想像する描画方法

  • 以上の結果から、Retinaに対応しているかどうかによって、描画するキャンバス2種類を切り替えているようだ。
  • そして、通常モデルのキャンバスは、画素を縦横2倍サイズ（1ピクセル→4ピクセル）にして表示する仕組み。

2倍でない解像度の謎

ところで、MacBook Pro Retinaモデルから始まった、2倍ではない解像度ではどうしているのだろう？

  • MacBook Pro Retinaモデルでは、5つの解像度を自由に選べるのだ。（カッコ内は2880×1800に変換する倍率）
    • 1024×640 （2.8125倍）
    • 1280×800 （2.25倍）
    • 1440×900 （2倍）
    • 1680×1050（1.7142857倍）
    • 1920×1200（1.5倍）
  • 1440×900に対しては縦横ちょうど2倍だが、それ以外の解像度はなんとも中途半端な倍率である。
  • アウトラインフォントなら、中途半端な倍率でも自由に描画可能かもしれない。
  • しかし、UI部品を中途半端な倍率に対応したものまですべて用意するのは現実的ではない。（無駄が多過ぎ）
  • ならば、すべてのUI部品をアウトラインデータで用意しているのだろうか？
  • 理想的にはその方法がベストのような気がするが、用意する方は相当大変である。
  • iPhone・iPadの描画方法と、整合性もとれない。

2倍してから合わせる

そう思って調べていたら、どうやらRetinaモデルは常に2倍の解像度でキャンバスに描画する仕組みなのかもしれない。（但し、確かな情報とは限らない）

  • この方法なら、2倍の画像を用意しておくだけで、ある程度の高品質は保てる。
  • 1920×1200モードにおいて、Retinaモデルのフォントがわずかに太字になっている印象を受けたのも、これが理由か？気のせい？
    • （大きなフォントを縮小すると、太字になる傾向がある）
  • たまたま「Retinaディスプレイに最適」を選択している時は、2倍の解像度のキャンパス＝Retinaディスプレイ、となるからそのまま表示できる。
  • 1680×1050の場合は、3360×2100のキャンバスで描画して、それを0.85714286倍してRetinaディスプレイに合わせる。
  • 1920×1200の場合は、3840×2400のキャンバスで描画して、それを0.75倍してRetinaディスプレイに合わせる。
  • 1280×800の場合は、2560×1600のキャンバスで描画して、それを1.125倍...
  • 1024×640の場合は、2048×1280のキャンバスで描画して、それを1.40625倍...


なんと！最高で3840×2400のキャンバスに描画するイメージなのだ。そりゃ、負担が大きい...。

  • この方式でいくと、ツールを使って2880×1800の解像度を指定した時は、一体どうなるのか？
    • あくまでも2倍して、5760×3600のキャンンバスで描画？
    • 2倍するのをやめて、2880×1800のキャンバスに通常モデルの解像度で描画？

Retinaモデルは謎が多い...。

検証するには

Safariなどの対応アプリのリソースにどんなUI画像が保存されているかを確認してみたい。

  • 2倍のpng等のピクセル画像しか保存されていなかったら、以上のような想像は正しいのかもしれない。
  • すべてがPDFだったら、アウトライン画像で用意されているのかもしれない。
    • アウトライン画像であれば2倍にこだわる必要はなくなる。
    • キャンバスへの中間描画をやめて、直接Retinaディスプレイに文字や画像を描画しているだろう。（指定された解像度の大きさになるように）
  • あるいは、どちらの方式も併用したハイブリッド方式もあり得るかもしれない。