iOSで超解像 - その1：waifu2xのMetal実装を試す

「超解像」(Super-resolution)とは、**画像の解像度を高める技術**のことです。100x100ピクセルの画像から200x200ピクセルの画像を生成する、というような話。

従来のリサイズ処理とはどう違うのか、はあとで見ていただくとして、これがiOSアプリ内で、しかも**オンデバイス**[^ondevice]で**リアルタイム**に処理できるとなると、それによって享受できるメリットは計り知れません。なんといっても

**通信量を削減できる！**

という点は多くのアプリにとって嬉しいのではないかと思います。幅・高さ半分で**ファイルサイズが約4分の1、品質（解像度）は同等**だとすると、熱くないですか？[^heif] ネイティブアプリにおいて、サクサク感はUXの肝。モバイルデバイスの性能が著しく向上した現在、**ボトルネックは通信**、というケースは多いかと思います。また通信インフラが十分に整っていない国にもサービス展開するにあたって、通信周りをカリカリに最適化しているという話もちょくちょく耳にします。

[^ondevice]: ここでは、WebAPI経由などではなく、そのiOSデバイスのCPU/GPUで処理する、という意味で使っています。

[^heif]: こういうメリットだとHEIFを思い浮かべる方もいると思いますが、超解像技術はファイルフォーマットとは別の話であって、共存こそすれ競合はしないので、今回は横においておきます。

というわけで、本記事では、この超解像技術をiOSで、しかもオンデバイスで利用する可能性について探っていきたいと思います。

## waifu2x

2015年5月、こういう記事がバズりました。

- [二次元画像を拡大したいと思ったことはありませんか？ - デー](http://ultraist.hatenablog.com/entry/2015/05/17/183436)

このシンプルなタイトルにしてなんと2197ブックマーク。このwaifu2xとは、**深層畳み込みニューラルネットワークによる二次元画像のための超解像システム**です。

こちらでブラウザ上で試すことができます。

- http://waifu2x.udp.jp/


## waifu2xのMetal実装

さて、私が[現職に移って](http://d.hatena.ne.jp/shu223/20171120/1511137832)Metalを勉強せねばとググっていたころ、なんと上述のwaifu2xをMetalで書いてみた、というスライドを発見しました。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">waifu2xをMetalで書いてみた <a href="https://t.co/cHuHO4sfKd">https://t.co/cHuHO4sfKd</a></p>&mdash; Shuichi Tsutsumi (@shu223) <a href="https://twitter.com/shu223/status/792453998213148672?ref_src=twsrc%5Etfw">2016年10月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

おもしろそう、と思いつつ、試すことがないまま1年が過ぎ・・・今日やっと試してみました。


## waifu2x-metalを試す

waifu2xのMetal実装はGitHubで公開されています。

- https://github.com/safx/waifu2x-metal

こちらの実装はmacOS向けですが、処理内容、利用APIの観点でいうとiOSでも動くはず。

iOSに移植してみる前に、まずはその実力を見てみよう、ということで試してみました。


（入力画像: サイズ220x220）

![comic_half.png](https://qiita-image-store.s3.amazonaws.com/0/3180/9038f80a-1562-399e-a5d9-133c46cf36b9.png)

---

（macOSの「プレビュー.app」を用いた従来のリサイズ: サイズ440x440）

![comic_従来拡大.png](https://qiita-image-store.s3.amazonaws.com/0/3180/34ce5f2b-048d-aa2f-3e8d-e1f690869c63.png)

---

（waifu2x-metalによるリサイズ: サイズ440x440）

![comic_waifu2x.png](https://qiita-image-store.s3.amazonaws.com/0/3180/3bd3e4b8-69e6-56f2-2992-53bcb27c1418.png)

---

あれ・・・**凄くないですか・・・？**

Web記事だと閲覧環境によっては見づらいかもしれないので、拡大して並べてみましょう。**左が従来手法、右がwaifu2x**です。

<img width="1081" alt="比較.png" src="https://qiita-image-store.s3.amazonaws.com/0/3180/64e03f7d-aaac-7685-b240-a3a5fe984636.png">

クオリティが段違いですね。。

## 写真で試す

イラストではなく、写真にも効果があるのでしょうか？試してみました。

![比較2.jpg](https://qiita-image-store.s3.amazonaws.com/0/3180/deab5f00-66f0-e0d2-2b0a-ef61c8c26a10.jpeg)

（写真は[itSnap](https://itsnap.jp/theme_%E3%81%A1%E3%81%BE%E3%81%9F%E3%81%AE%E8%A6%96%E7%B7%9A%E3%82%92%E3%81%B2%E3%81%A8%E3%82%8A%E5%8D%A0%E3%82%81%E2%99%A1%E3%83%80%E3%82%B9%E3%83%86%E3%82%A3%E3%83%94%E3%83%B3%E3%82%AF%E3%81%AE%E3%83%AD%E3%83%B3%E3%82%B0%E3%82%B3%E3%83%BC%E3%83%88%E3%81%A7%E5%9C%A7%E5%80%92%E7%9A%84%E3%81%AA%E5%AD%98%E5%9C%A8%E6%84%9F%E3%82%92%E6%94%BE%E3%81%A4-20160328)様より特別に許可をいただき使用させていただきました[^dealforest]）

[^dealforest]: [dealforest](https://twitter.com/dealforest)さんありがとうございます！

左からそれぞれ従来手法、waifu2x-metalで元画像（540×810）を2倍に拡大（1080x1620） したものです。

拡大してみてみましょう。

<img width="688" alt="比較2_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/3180/4466a37e-9708-dcf9-e46a-de6e7ee5368f.png">

写真にも絶大な効果があることがわかります。昨今の高解像度なスマホ上ではこの差はくっきり表れるかと思います。

## つづく

次回、iOSへ移植して、動作させてみます。パフォーマンス改善についても触れます。Metalアドベントカレンダーのいち記事として書くので、興味のある方はぜひ購読してみてください。

- [Metal Advent Calendar 2017 - Qiita](https://qiita.com/advent-calendar/2017/metal)

（2017.12.17追記）

「その2」を書きました。

- [iOSで超解像 - その2：waifu2x-metalをiOSに移植する - Qiita](https://qiita.com/shu223/items/be520cfc920246d716ec)

iOSに移植し「オンデバイスで」動作させました。「その3」ではパフォーマンス改善について書きます。


## Metalの参考書籍

技術書「[iOS 11 Programming](http://peaks.cc/shu223/iOS11)」の、「第13章 Metal」を執筆しました。

書籍のタイトルにはiOS 11とありますが、Metalについては新機能の紹介だけではなくて、**基礎からじっくり解説**しています。Metalの章だけで**37ページ**もあり、日本語ではこれだけのまとまったMetalの解説はレアかと思います。

- 13.1	はじめに
- 13.2	Metalの概要
- 13.3	Metalの基礎
- 13.4	MetalKit
- 13.5	Metal入門その１ - 画像を描画する
- 13.6	Metal入門その２ - シェーダを利用する
- 13.7	Metal入門その３ - シェーダでテクスチャを描画する
- 13.8	ARKit+Metalその１ - マテリアルをMetalで描画する
- 13.9	ARKit+Metalその２ - MetalによるARKitのカスタムレンダリング
- 13.10	Metal 2
- 13.11	Metalを動作させるためのハードウェア要件

他の章も他著やネットではなかなか得られない濃い情報が詰まっているので、気になった方はぜひ[サンプルPDF](http://peaks.cc/shu223/iOS11)もあるので見てみてください。

PEAKSのサイトにて電子書籍・紙の書籍ともに販売されています。

<div class="peaks_widget" style="overflow:hidden; padding:20px; border:1px solid #dedede;"><div class="peaks_widget__image" style="float:left; margin-right:15px; line-height:0;"><a target="_blank" id="purchase" href="https://peaks.cc/shu223/iOS11"><img alt="iOS 11 Programming" style="border:none; max-width:140px;" src="https://s3-ap-northeast-1.amazonaws.com/peaks-images/project002_cover.jpg" width="500"></a></div><div class="peaks_widget__info"><p style="margin:0 0 3px 0; font-size:110%; font-weight:bold;"><a target="_blank" id="purchase" href="http://peaks.cc/shu223/iOS11">iOS 11 Programming</a></p><ul style="margin:0; padding:0;"><li style="font-size:90%; list-style:none;"><span>著者：</span><span>堤 修一,</span><span>吉田 悠一,</span><span>池田 翔,</span><span>坂田 晃一,</span><span>加藤 尋樹,</span><span>川邉 雄介,</span><span>岸川克己,</span><span>所 友太,</span><span>永野 哲久,</span><span>加藤&#160;寛人,</span></li><li style="font-size:90%; list-style:none;">発行日：2017年11月16日</li><li style="font-size:90%; list-style:none;">対応フォーマット：製本版,PDF</li><li style="font-size:90%; list-style:none;"><a target="_blank" id="purchase" style="text-decoration:underline; color:#1DA1F2;" href="http://peaks.cc/shu223/iOS11">PEAKSで購入する</a></li></ul></div></div>

執筆を担当したARKit、Metalの章の詳細、あるいは全体的なおすすめポイントは以下の記事にも書きました。

- [「iOS 11 Programming」を共著で執筆しました／本書のおすすめポイント - Over&Out その後](http://d.hatena.ne.jp/shu223/20171128/1511827476)