強火で進め

このブログではプログラム関連の記事を中心に書いてます。

テクスチャでアルファ(透過)を使用する

OpenGLのテクスチャでアルファ(透過)処理を行う方法を解説します。

ソースコードこちらです。こちらを表示しながら読み進めて下さい。

まず画像として奥に描画(背景)する為にこちらの画像

back.png - 「背景用(アルファ無し)画像」

手前にアルファ付きで描画するテクスチャとしてこちらの画像を使います。

front.png - 「前面用(アルファ有り)画像」

サンプルに付属している front.png 、 back.png 同じサイズのPNGファイルと置き換えると別の画像でテストすることもできます。理解を進めるためにも自分で置き換えてみる事をおすすめします。

背景用の画像は簡単に準備できるかと思いますが画像編集に詳しく無い人にはアルファ付きの画像を準備をするのは多少手間がかかるかと思いますので少し解説しておきます。

ここでは画像エディタとして、無料で使用可能なGIMPを使って解説します。

アルファ付きPNGファイルの作り方

(1) 新規作成。「画像サイズ」を128x128、「高度なオプション」をクリック後、「塗りつぶす色」を「透明部分」に変更後、作成して下さい。

(2) ブラシなどグラデーションが有る様なツールを使って画像を描画。
GIMPはウィンドウが現在のウィンドウの後ろや画面の端などに表示されることが有る様です。操作を行ったときにウィンドウが表示されない場合、 Ctrl+F3 などでウィンドウ一覧を表示して選択して下さい。
(3) PNGファイルとして保存。メニューの「編集」-「コピーを保存」を選択し、ファイル名を「front.png」で保存して下さい。

(4) 保存時の設定は全て必要無いので全てのチェックを外します。

これでアルファ付きのPNGファイルが作成できました。サンプルの front.png ファイルと置き換えて実行してみて下さい。

プログラムの説明

プログラムの説明に戻ります。

まず、OpenGLでアルファを使う場合には「アルファブレンド」と「アルファテスト」と2つのものが有りますので自分が行いたい処理の場合、どちらが必要考えたうえで選択して下さい。なお、サンプルではデフォルトでは「アルファブレンド」で実行される様になっています。

なお、テクスチャの読み込みはこちらで使用したライブラリを使っています。

iPhoneOpenGL ESのテクスチャ読み込み処理を修正した - 強火で進め
http://d.hatena.ne.jp/nakamura001/20081212/1229095151

「アルファブレンド」について

サンプルコードをそのままビルドして、実行すると以下の様にレンダリングされます。こちらはみなさんがイメージしているアルファの使い方だと思います。

使用方法は至って簡単で、 glBlendFunc() でアルファの使用方法を設定し、 glEnable(GL_BLEND) でブレンド処理を有効化するだけです。

	glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
	glEnable(GL_BLEND);

もう少し、詳しく解説します。まず、アルファを使用する場合には「新たに描画する色」、「既に描画済みの色」をしっかり考えながら使用するのが重要です。

  • ソース[source]の色(フラグメントの色、新たに描画する色)
  • デスティネーション[destination]の色(既に描画済みの色)

glBlendFunc() ではこの2つの色をどの様に合成(ブレンド)するかを指定しています。

コマンドの引数は

  • 新たに描画する(source)の色の処理方法
  • 既に描画済み(destination)の色の処理方法

となっています。

サンプルの場合、

  • GL_SRC_ALPHA → 「新たに描画する色」は「新たに描画する画像のアルファ値を使用」
  • GL_ONE_MINUS_SRC_ALPHA → 「既に描画済みの色」は「1 - 新たに描画する画像のアルファ値を使用」で描画する

というルールとなります。

例えば「新たに描画する画像のアルファ値」が20%(※)だった場合、
※実際の値としては 0.2 。0〜255で指定するの場合は 51 。255*0.2=51

新たに描画される画像は20%使用され、元画像(背景画像)は80%使用された画像となります。

「アルファテスト」について

アルファテストはアルファブレンドの様に画像のブレンドは行いません。

アルファ値を元に「新たに描画する(source)の色」「既に描画済み(destination)の色」のどちらを使用するかを選択するだけです。

アルファテストの動作を確認するために以下の部分を

	// アルファブレンド
	alpha_blend();
	// アルファテスト
//	alpha_test();

この様に変更して下さい。

	// アルファブレンド
//	alpha_blend();
	// アルファテスト
	alpha_test();

アルファテストの関数はこの様に定義してあります。

void alpha_test()
{
	glAlphaFunc(GL_GEQUAL, 0.5);
	glEnable(GL_ALPHA_TEST);
}

glAlphaFunc() コマンドで条件の設定を行っています。今回の記述では

「新たに描画する画像のアルファ値 >= 0.5」の場合、「新たに描画する画像の色」で描画する

という条件となります。条件に当てはまらないアルファ値を持つピクセル(テクセル)については描画は行われません。

glEnable(GL_ALPHA_TEST) でアルファテスト処理を有効化します。

まとめ

  • アルファブレンド → 「新たに描画する色」と「既に描画済みの色」を指定されたアルファ値を元に合成(ブレンド)する
  • アルファテスト → アルファ値を条件に描画するかしないかを判定(テスト)する