ETC1/PVRTC圧縮後の画像からアトラス画像を作成する

ゲーム開発で、画像サイズと戦っているみなさんこんにちは。
今回、画像サイズの削減方法をご紹介する 、ネイティブエンジニアの二宮です!

 

以前HB先輩が書いていた「Unityで動的にテクスチャをパッキングして圧縮を試してみる」の記事に関連して、「ETC1/PVRTC圧縮後の画像からアトラス画像を作成する方法」をご紹介します。

 

これができると、重い圧縮処理をランタイムでやらずに済みます!
さらに、TrueColorの画像を持つ必要がなくなるので、メモリ使用量を1/6に抑えられます!!
ああ、なんて素晴らしいのだろう!!!

アトラス化の概要

それでは、早速書いていきます。
こちらが今回紹介する方法の概要図です。
 図1
やりたい処理としては、4枚のETC1/PVRTCフォーマット画像のデータを取り出して、アトラス画像用に並べてあげるだけの簡単なものです。

 

Unityのプログラムだとこんな感じです。
ETC1フォーマットの画像を使用した例になります。

 

 

上記プログラムから分かる通り、画像のデータはbyte型の1次元配列として取得できます。これらの配列データをいい感じに並び替えてアトラス画像を作るわけです。

 

そのためには「画像データが配列にどのように保存されているのか」について知らなければなりません。

画像データの中身

ETC1とPVRTCは1ピクセルを4bitで表現できる、とてもコンパクトなフォーマットを扱います。
ただし、通常RGBを表すには24bit必要であり、これを4bitで表現するには工夫が必要です。
そして、この工夫が画像のアトラス化をややこしくしています。

 

その工夫とは、、
4*4pixをまとめて一つのブロックとして、それを64bitのデータとして記述
していることです!

 

図2

そのため、画像の配列データはブロック単位の配列になっています。

 

図3

 

あとは「画像のどのブロックが、配列データの中のどこに乗っているのか」が分かれば、アトラス画像が作れます!

 

というわけで、16*16pix(4*4ブロック)の画像を例に、画像のどのブロックが配列のどの位置に入るのかを見てみます。

ETC1のデータ構造とアトラス化の方法

まずは、ETC1です。
こちらの図を見てください。各ブロックに書いてある数字が配列に入る順番です。

 

図4

 

このように、ETC1では行単位で左下から順に配列に詰め込まれていきます。
つまり、配列データの頭から見ていくと、画像の(0, 0)~(4, 4)に対応する64bit, (4, 0) ~ (8, 4)に対応する64bit, …という順番で詰められていたわけです。

 

これで、ようやくアトラス化ができます。
実際にプログラムに落とし込むとこんな感じです。
最初の概要図のように4枚の正方形の画像をアトラス化するサンプルです。

 

 

元画像のデータをアトラス画像のデータに1行ずつコピーしています。
当たり前ですが、元画像とアトラス画像では1行の長さが違うので、そこは注意が必要です。
ちなみに、プログラム中に何度か出てきていた、”画像1行分のバイトサイズ” は、 (1辺の画素数) / 4 * 64 / 8 で求められます。

PVRTCのデータ構造とアトラス化の方法

次にPVRTCについてです。
それでは早速、PVRTCのデータ構造を見ていきます。

 

図5

 

図のように、PVRTCでは、左下、左上、右下、右上で一つの正方形を作って、その正方形が徐々に拡大していくような順番で配列に詰め込まれています。
不思議な順番ですよね。実はこれ、今回のようなアトラス化をする上ではすごく効率がいい配置なんです。
どういうことかはプログラムを見たら分かります。

 

 

じゃーん!

 

PVRTCの配列データの順番だと、(下手な配置をしない限りは)アトラス化しても配列データの順番を保つようになっているのです!
だから、画像一枚のデータをまるっとコピーすればいい。BlockCopy 1回で済む!速い!!気持ちいい!!!

補足

最後に注意点があります。
フォーマットの特性上、アトラス化をすると隣のブロックの色に影響を及ぼしてしまうので、必ずマージンを取るようにしてください。
元画像が隣接しているところは8bit、画像の端は4bitのマージンが必要になります。

図6

おわりに

以上が、「ETC1/PVRTC圧縮後の画像からアトラス画像を作成する方法」でした!
ランタイムで圧縮処理をかけるよりもずっと速くできますし、メモリも節約できるので、是非試してみてください。

 

ただ、コードはややこしくなるし、HB先輩のサンプルのように画像を自動配置してくれるような便利なものでもないので、そこは用途に合う方を使ってもらえればよいかなと思います。

 

こういった記事を書くのは、初めてなのでうまくかけたか分かりませんが、一人でも多くの方に伝わって、少しでも役に立てていたらいいなぁと思います。
それでは!

 

  • このエントリーをはてなブックマークに追加