乗算済みアルファとは？ その2: コンポジション

前回の投稿からものすごーく間があきましたが、乗算済みアルファの話がTwitterの方で盛り上がったので、思い出したように続きを書いてみます。

前回は今まで多く使われてきた補間アルファの問題とそれを解決するための乗算アルファの紹介をしました。今回は乗算済みアルファの真骨頂である半透明を使ったコンポジションを紹介します。

コンポジションの使い道

レースゲームでは、ゲーム内で複数の車を購入でき、さらに購入した車の各パーツを変更することができるという機能は一般的なものです。中には自分で描いた絵を車に張るなんて言うこともできるものもあります。こういったレースゲームでは、購入した車の一覧はガレージメニュー内でサムネイル表示され、車を選択すると3Dモデルが読み込まれ、自分がチューンナップした車のモデルを見ることができます。

では、このサムネイル画面はどうやって表示するのでしょうか？

こういった3Dモデルをカスタマイズできるゲームでは、あらかじめサムネイル画像を用意するということはできません。なぜなら、その組み合わせは膨大な数になってしまうのと、ユーザーが描いた絵までは用意することはできないからです。そこで良く用いられるのが、3Dモデルを変更した時にセーブデータ領域などに3Dモデルをレンダリングした結果をサムネイル画像として保存し、それをメニュー画面で使用するという手法です。

単に矩形型のサムネイルを用意するだけだったら問題は無いのですが、このサムネイル画像をビルボードとして使い、メニュー画面の背景の上に重ね合わせて描画したい場合、例えば車のボディ部分のような不透明部分は不透明に、車のウィンドウ部分のような半透明部分はメニュー画面が透けて見えたりするといった重ね合わせ処理をコンポジション(Composition、日本語で「合成」)と呼びます。

コンポジションの基本

コンポジョン処理をする場合の基本として、描画するオブジェクトA,B,Cがあった場合、以下の式が成り立たないといけません。

A + B + C = (A + B) + C = A + (B + C)

この式のA+B+Cという部分はオブジェクトA,B,Cの順に描画するという意味で、(A+B)+CはAとBをまとめて描画した結果を描画した後にCを描画、A+(B+C)はAを描画した後にBとCをまとめて描画した結果を描画するという意味になります。言い換えると()で囲まれたオブジェクトは別のレンダーターゲットに描画し、そのレンダーターゲットの描画結果を他のオブジェクトの描画と合成(コンポジット)できるということです。もしくは前述のレースゲームの中のサムネイル画像がカッコ内の部分に相当します。

結論から言うと、上記の式は補間アルファでは成り立たず、乗算済みアルファでは成り立ちます。つまり、補間アルファではできなかったコンポジションが乗算済みアルファではできるということです。

実際に上の式に補間アルファと乗算済みアルファのブレンディング計算式を当てはめると証明できるのですが、長くなるし、読んでもつまらないし、本題から外れるので、ここでは割愛します。

コンポジション比較

では、実際に乗算済みアルファと補間アルファでコンポジションした場合の結果を見比べてみましょう。まずは、レンダーターゲットを使わずに背景を描画した後に赤い不透明の四角形、半透明の緑色の四角の順に描画してみましょう。

乗算済みアルファ、補間アルファ、どちらも同じ結果になっていますね。

では、次に赤と緑の四角形をレンダーターゲットへ描画し、その結果をテクスチャとして使って背景を描画した後に描画してみましょう。

補間アルファを使った方は緑の半透明部分がより薄くなっており、不透明であるはずの赤い部分も半透明になってしまっています。対照的に乗算済みアルファの方は全く同じ描画結果となっています。つまり、補間アルファではコンポジッションが上手くいかなかったのが、乗算済みアルファではコンポジションができるということです。

 

XNA 4.0でコンポジション処理

では、実際にXNA 4.0でコンポジション処理をする時にどんなコードを書くのか見ていきましょう。

まずは、コンポジション用のレンダーターゲットの生成と、そこへ描画するコードです。通常のレンダーターゲットを使った描画と殆ど同じものですが、ここではColor.Transparentでクリアするのがポイントとなっています。このTransparent(透明色)はRGBA値が(0,0,0,0)になっています。

 // コンポジション用のレンダーターゲットの生成
RenderTarget2D layer = new RenderTarget2D(GraphicsDevice, 1280, 720);

// **** コンポジション用のレンダーターゲットへの描画 ****
// レンダーターゲットをグラフィクスデバイスへ設定する
GraphicsDevice.SetRenderTarget(layer);

// 透明色でクリアする (ここがポイント)
GraphicsDevice.Clear(Color.Transparent);

// 描画したいシーンを描画する
RenderScene();

そして、実際のコンポジションはレンダーターゲットを半透明テクスチャと同じように描画するだけです。

 // **** コンポジション処理 ****
// バックバッファを設定する
GraphicsDevice.SetRenderTarget(null);

// クリア
GraphicsDevice.Clear(Color.CornflowerBlue);

spriteBatch.Begin();

// 背景や自分の好きなシーンを描画する
spriteBatch.Draw(bg, GraphicsDevice.Viewport.Bounds, Color.White);

// あらかじめレンダリングした結果を描画する(コンポジション)
spriteBatch.Draw(layer, GraphicsDevice.Viewport.Bounds, Color.White);

spriteBatch.End();

XNA 4.0は乗算済みアルファが基本

このように乗算済みアルファは非常に優れた方式なのでXNA 4.0では乗算済みアルファが基本となっています。ですから、Visual Studio上でコンテントプロジェクトに2D画像や3Dモデルを追加している場合、その存在を気づかずに乗算済みアルファの恩恵を受けることができます。

さて、ここまで利点のみを書いてきましたが、次回は乗算済みアルファの注意点をいくつか紹介したいと思います。