社員技術ブログ

【社員技術ブログ】3Dグラフィックス テクスチャーの使い方 RGBAチャンネルを活用

お久しぶりです。ミデンです。どすこい。

今回はテクスチャーの使い方の一例として、

画像のRGBAのカラーチャンネルを活用した表現方法をご紹介します。

カラーチャンネルとは

カラーチャンネルとは画像をR(Red)G(Green)B(Blue)の各要素に分解したものの事とお考えください。
(※画像によってRGBではなくCMYKやグレースケールだったります)

コンピュータが扱う画像ファイルにはJPGやBMPなど様々な形式がありますが、

PNGのように透明度をA(Alpha)チャンネルとして登録できるものもあります。

今回はこのPNG形式の画像を使って、活用方法の一例をご紹介します。

カラーチャンネルに分解する

一般的に写真やイラストなどはRGBの色チャンネル全てを使って一つの画像を構成しています。

[画像1 元画像]

写真をそのままテクスチャーとして使う場合はこのままで良いのですが、

単純な図形をたくさん表示させたり、あるいは光沢具合など材質のパラメーターとして使用したい場合には

カラーチャンネルそれぞれに情報を登録してファイルサイズの圧縮や素材管理の簡略化を図ることがあります。

[画像2 カラーチャンネルに分解]

 

カラーチャンネルを使ってアイコンのテクスチャーをまとめる

[画像3 ボタンのアイコン]

例えボタンのアイコンとして[画像3]のような単色の絵柄を条件ごとに切り替えて表示したい時、

個別にテクスチャーを用意すると素材が増えてしまい管理が煩雑になります。

カラーチャンネルを使わずにテクスチャーを一つの画像にしてから、

テクスチャーUVを用いて切り替える方法もありますが、

その場合、そのまま並べて結合すると画像サイズが大きくなり、

アプリ内で読み込んだ際に問題になることがあります。

また、同じサイズになるよう一つあたりの画像を縮小すると精細さが失われてしまいます。

[画像4 個別の画像を並べて統合]

そのような時、各テクスチャーをカラーチャンネルとして登録することで、

元の解像度を維持したまま1枚にまとめることができます。
[画像5 カラーチャンネルに分けて統合]

 

その他のカラーチャンネルの活用事例

3Dグラフィックスにおけるテクスチャーのカラーチャンネルの活用方法としては、

今回のようにそれぞれ別の画像を登録して切り替えるほか、

材質の特徴(表面のマット感や金属質の度合いなど)をパラメーターとして切り分けたり、

画像ではなくポリゴンのアニメーションや点群の空間座標として扱うことがあります。

以上、今回は真面目モードのミデンでした。

ごっちゃんです!

関連記事

TOP