Retinaモデルはどのように描画しているのか?
Retina対応
- Retinaモデルは、通常モデルの縦横2倍の解像度がある。だから、Retinaモデルに対応するためには、いろいろなUI部品の縦横2倍の画像も用意しておく必要があるそうである。
- アプリケーションがRetinaモデルで起動された時は、縦横2倍の画像を利用して描画する。
- 縦横2倍の解像度な画面では、それで通常モデルと同じ大きさのUI部品となるのだ。
例:
AddBookmarkLeftCapButtonInactive.png | |
AddBookmarkLeftCapButtonInactive@2x.png |
-
-
- この例の2倍画像はプレビュー.appで2倍しただけなので、ぼやけている。実際は、もっと品質の高い2倍画像を用意するのだ。
-
[UIImage imageNamed:@"AddBookmarkLeftCapButtonInactive.png"];
iPhone、iPad、あるいは「Retinaディスプレイに最適」な設定では、極めて便利な仕組みだ。
Retina未対応
一方、Retina未対応のアプリケーションはどのようになるかというと...
- MacBook Pro with Retina Display におけるアプリの動作 - Cocoa を飲んで、ほっとして。(素晴らしいサンプル画像に感謝です!)
MacBook Pro with Retina Display におけるアプリの動作 - Cocoa を飲んで、ほっとして。
- なるほど。Retina未対応だと、通常モデルの解像度で描画したものを、Retinaモデルの解像度まで拡大するようである。
- 気持ち的には、今時はアウトラインフォントなんだから、文字だけはRetina品質を保ったまま、拡大・縮小して欲しい気がした。
- Retina対応・未対応でフォントリソースに違いはないと思われるので、技術的にはできそうな気がする。
- そのうち、Retina未対応のフォントの表示品質も可能な限り美しくして欲しい。
---------- 以下はすべて自分の想像 ----------
想像する描画方法
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倍)
2倍してから合わせる
そう思って調べていたら、どうやらRetinaモデルは常に2倍の解像度でキャンバスに描画する仕組みなのかもしれない。(但し、確かな情報とは限らない)
- Shutaro Hashimoto - Google+ - Retina MBPの解像度スケーリングの仕組みがおもしろい. 物理的解像度(2880 x…
- 投稿 WWDCでRetinaなmacbookは来るのか? - 蹴茶掲示板
- この方法なら、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画像が保存されているかを確認してみたい。
- すべてがPDFだったら、アウトライン画像で用意されているのかもしれない。
- アウトライン画像であれば2倍にこだわる必要はなくなる。
- キャンバスへの中間描画をやめて、直接Retinaディスプレイに文字や画像を描画しているだろう。(指定された解像度の大きさになるように)
- あるいは、どちらの方式も併用したハイブリッド方式もあり得るかもしれない。
- ピクセルデータは2倍キャンバスに描画してから、アウトラインデータは直接Retinaディスプレイに描画。