【Unity】FSRで低解像度な画像を補間してみた

# 記事の要約
**FSRで低解像度の画像もまあまあ綺麗に補完できるので、FSRを採用する際には画像の低解像度化を検討しても良さそう**という内容の記事です。

# 前知識

https://youtu.be/_cKixSjjTjI

# 背景

スプラトゥーン3ではロッカーやプレートが実装され、前作に比べて画像の使用数が増えていますが、ロード時間は短くなっています。
非同期読み込みやカリングの他に、工夫されている点が無いか考える中で下記の記事を思い出しました。

https://automaton-media.com/articles/newsjp/20220818-215020/

記事を読んだ私は、テクスチャやUIを低解像度にしてもFSRで補間すれば、品質をあまり下げずにメモリとロード時間の削減ができそうだと考えました。
そこで、FSRが低解像度な画像をどの程度補間してくれるのか、元の画像と比較して確かめてみることにしました。

# 比較

比較画像には[花兎*様](https://tyc.rei-yumesaki.net/staff/illustrator/hatobosi/)さんが描かれた[フリー素材キャラクター「つくよみちゃん」のイラスト](https://tyc.rei-yumesaki.net/material/illust/)を使用しました。
下の画像は```2000px × 4000px```の立ち絵の一部を```512px × 512px```でトリミングしたものです。
![512.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307985/83aee0b1-98cc-32e4-cb5e-dc20f3b7b716.png)
上の画像を元画像とし、画像の加工や設定の変更をしながら```Unity Recorder```で下記の画像（```256px × 256px```）を出力しました。

|枚数|説明|画像|
|-|-|-|
|1枚目|元画像を```Lagrange```で```256 × 256px```に縮小<br>無圧縮<br>192KB|![Image Sequence_026_0000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307985/44adfc2f-3bfb-f72c-68a0-a040be2493fe.png)|
|2枚目|1枚目<br>+クランチ圧縮(Normal Quality, 100%)<br>8.5KB|![Image Sequence_027_0000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307985/23ae83c2-1d9c-7e6e-c692-2144236c6c07.png)|
|3枚目|元画像を```Lagrange```で```192px × 192px```に縮小<br>+クランチ圧縮(Normal Quality, 100%)<br>6.8KB（2枚目の約80%）|![Image Sequence_028_0000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307985/486d52d6-91e7-0cba-119a-d9d8b3b26ff3.png)|
|4枚目|3枚目<br>+MSAA2x<br>+FSR|![Image Sequence_029_0000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307985/ae57653c-6dea-376f-0233-84df413b41f3.png)|
|5枚目|元画像を```Lagrange```で```192px × 192px```に縮小<br>+Anti-aliasing加工<br>+クランチ圧縮(Normal Quality, 100%)<br>5.8KB（2枚目の約68%）|![Image Sequence_033_0000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307985/b2d17bdf-41d9-6cbd-6030-912f6f327c4b.png)|
|6枚目|5枚目<br>+MSAA2x<br>+FSR|![Image Sequence_034_0000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307985/5be7f5af-a0f9-e2ea-91dd-0a563aa4762e.png)|

目元を```Nearest neighbor```で2倍に拡大して並べてみました。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3330373938352f34346164666332662d336266622d663732632d363861302d6130343062653234393366652e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307985/ecc8ecf6-b638-c1ab-66d4-16fed1dc5e4e.png)![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3330373938352f32336165383363322d316439632d376536652d633639322d3231343432333663366330372e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307985/b4832276-5229-3564-1ab7-24a758881c31.png)![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3330373938352f34383664353264362d393165372d306362612d313139612d6439643862336232366666332e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307985/bba1d6fd-a3ad-b2cd-be84-89d19fa317a9.png)![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3330373938352f61653537363533632d366465612d333736662d303233332d3834646634313362343166332e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307985/dd7ffd20-4c55-00da-b956-3ee6b12a29a9.png)![Image Sequence_033_0000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307985/3152a3f8-468d-0fff-0c6c-25839a2ec301.png)![Image Sequence_034_0000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307985/ef45eac5-0eab-8fd4-262b-f3c91bed5b46.png)
元画像には劣るものの、FSRが画像をまあまあ綺麗に補間してくれることが分かりました。

# 感想
**FSRを導入する際はテクスチャやイラストの低解像度化を検討してみても良さそう**だと思いました。
また今回の比較では、**拡大を考慮して画像を加工することも大事**だと気付きました。