2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-01-24

記事の要約

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

前知識

背景

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

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

比較

比較画像には花兎*様さんが描かれたフリー素材キャラクター「つくよみちゃん」のイラストを使用しました。
下の画像は2000px × 4000pxの立ち絵の一部を512px × 512pxでトリミングしたものです。
512.png
上の画像を元画像とし、画像の加工や設定の変更をしながらUnity Recorderで下記の画像(256px × 256px)を出力しました。

枚数 説明 画像
1枚目 元画像をLagrange256 × 256pxに縮小
無圧縮
192KB
Image Sequence_026_0000.png
2枚目 1枚目
+クランチ圧縮(Normal Quality, 100%)
8.5KB
Image Sequence_027_0000.png
3枚目 元画像をLagrange192px × 192pxに縮小
+クランチ圧縮(Normal Quality, 100%)
6.8KB(2枚目の約80%)
Image Sequence_028_0000.png
4枚目 3枚目
+MSAA2x
+FSR
Image Sequence_029_0000.png
5枚目 元画像をLagrange192px × 192pxに縮小
+Anti-aliasing加工
+クランチ圧縮(Normal Quality, 100%)
5.8KB(2枚目の約68%)
Image Sequence_033_0000.png
6枚目 5枚目
+MSAA2x
+FSR
Image Sequence_034_0000.png

目元をNearest neighborで2倍に拡大して並べてみました。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3330373938352f34346164666332662d336266622d663732632d363861302d6130343062653234393366652e706e67.png68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3330373938352f32336165383363322d316439632d376536652d633639322d3231343432333663366330372e706e67.png68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3330373938352f34383664353264362d393165372d306362612d313139612d6439643862336232366666332e706e67.png68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3330373938352f61653537363533632d366465612d333736662d303233332d3834646634313362343166332e706e67.pngImage Sequence_033_0000.pngImage Sequence_034_0000.png
元画像には劣るものの、FSRが画像をまあまあ綺麗に補間してくれることが分かりました。

感想

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

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?