かんたんXNA4.0 その２４ アルファ・ブレンディング

XNAでは物を半透明に描くことが出来ます。
ゼリーのように、後ろのものが透けて見えるのです。

これをアルファ・ブレンディングと言います。
不透明度（アルファ）を考慮する描画だからです。

ポリゴンをスライムのように透明にするには、
BlendState.ColorDestinationBlendプロパティを使います。

public Blend ColorDestinationBlend { get; set; }

Blend列挙体

メンバ名	説明
Zero	× 0
One	× 1
SourceColor	× "これから描くポリゴンの色" ※正確には掛け算と言うより、「それぞれの色の要素が”これから書くポリゴンの色”の対応する色の要素倍される」です。 例えば、(1, 1, 1)と(0.1, 0.2, 0.3)なら(0.1, 0.2, 0.3)。 (0.1, 0.2, 0.3)と(0.1, 0.2, 0.3)なら(0.01, 0.04, 0.09)
InverseSourceColor	× (白 - "これから描くポリゴンの色")
SourceAlpha	× "これから描くポリゴンの不透明度"
InverseSourceAlpha	× (1 - "これから描くポリゴンの不透明度")
DestinationAlpha	× "背景の不透明度"
InverseDestinationAlpha	× (1 - "背景の不透明度")
DestinationColor	× 背景の色
InverseDestinationColor	× (白 - "背景の色")
SourceAlphaSaturation	× Min("これから描くポリゴンの不透明度", 1 - 描画前の不透明度)
BothInverseSourceAlpha	これはDestinationBlendプロパティにセットする必要はありません。これをSourceBlendプロパティにセットするとDestinationBlendの中身は上書きされます（ただしプロパティの値には反映されず、Zeroのままですが）。 この値をセットすると、 最終的な色 = 描画前の色 × 描画するポリゴンの不透明度 + 描画するポリゴンの色 × (1 - 描画するポリゴンの不透明度) となります。
BlendFactor	× "RenderState.BlendFactorプロパティにセットした色"
InverseBlendFactor	× (白 - "RenderState.BlendFactorプロパティにセットした色") ただしこのモードは、GraphicsDeviceCapabilitiesクラスでSourceBlendCapabilitiesプロパティかDestinationBlendCapabilitiesプロパティのSupportsBlendFactorプロパティ（こいつはgetだけでsetはできません）がtrueのときにしか使えません。

このプロパティは、ポリゴンをその上に描画する前の背景が
どの程度結果に影響するかを表します。
デフォルトではBlend.Zeroで全く影響されません。
つまり、背景は全く描画結果に現れないのです。（不透明に見えます）

"最終的な色" = "これから描画するポリゴンの色"

もし透明なポリゴンを描こうと思えば、
これを、例えばBlend.Oneに指定してやればいいでしょう。
そうすれば、

"最終的な色" = "描画する前の色" + "描画するポリゴンの色"

となり、半透明に見えます。
実際にはBlendState.Additiveで同じことができます。

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;


class Triangle
{
    VertexPositionColor[] vertices = new VertexPositionColor[3];

    public Triangle(Vector3 p1, Vector3 p2, Vector3 p3, Color color)
    {
        vertices[0] = new VertexPositionColor(p1, color);
        vertices[1] = new VertexPositionColor(p2, color);
        vertices[2] = new VertexPositionColor(p3, color);
    }

    public void Draw(GraphicsDevice graphicsDevice, BasicEffect effect)
    {
        effect.VertexColorEnabled = true;

        foreach (EffectPass pass in effect.CurrentTechnique.Passes)
        {
            pass.Apply();

            graphicsDevice.DrawUserPrimitives<VertexPositionColor>(
                PrimitiveType.TriangleList,
                vertices,
                0,
                1
                );
        }
    }
}

class MyGame : Game
{
    GraphicsDeviceManager graphics;
    BasicEffect effect;

    Triangle redTriangle = new Triangle
    (
        new Vector3(1, 0.5f, -1),
        new Vector3(0, -1, -1),
        new Vector3(-1, 0.5f, -1),
        Color.Red
    );

    public MyGame()
    {
        graphics = new GraphicsDeviceManager(this);

    }

    protected override void LoadContent()
    {
        effect = new BasicEffect(GraphicsDevice)
        {
            View = Matrix.CreateLookAt
            (
                new Vector3(0, 0, 3),  //カメラの位置
                new Vector3(0, 0, 0),   //カメラの見る点
                new Vector3(0, 1, 0)    //カメラの上向きベクトル
            ),
            Projection = Matrix.CreatePerspectiveFieldOfView
            (
                MathHelper.ToRadians(45),   //視野の角度。ここでは45°
                GraphicsDevice.Viewport.AspectRatio,//画面のアスペクト比(=横/縦)
                1,      //カメラからこれより近い物体は画面に映らない
                100     //カメラからこれより遠い物体は画面に映らない
            )
        };
    }

    protected override void UnloadContent()
    {
        effect.Dispose();
    }

    protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.CornflowerBlue);

        GraphicsDevice.BlendState = BlendState.Additive;
        redTriangle.Draw(GraphicsDevice, effect);
    }
}

ここでは赤い三角形を描画しているのですが、
アルファ・ブレンディングの効果で半透明になり、
ピンクっぽくなっています。

背景のコーンフラワーブルーと赤が
加算されているのです。

さて、このサンプルプログラムはアルファ・ブレンディングを
銘打っておきながら不透明度（アルファ）を利用していません。
ただ単純にポリゴンの色を加算しているだけです。

サギです。

不透明値を変更しても実際に描画されるポリゴンの
色には変わりがないのですから！

ポリゴンの色の不透明度のデータを変更したら、
実際に描画される色も変更されて欲しいものです。

それに、この描画の仕方はゼリーやスライムというよりもむしろ
自分で光っている透明な物体、光るゼリーに近いのです。
（光るゼリーなんて見たことありませんが、
他に形容するのは難しいですからね）

アルファが本当に考慮されるアルファ・ブレンディングを行うには、
BlendState.ColorSourceBlendプロパティも使います。

public Blend ColorSourceBlend [ get; set; }

このプロパティは、これから描画するポリゴンの色が
どの程度最終的な色に反映されるかを表します。

デフォルトはBlend.Oneで、これから描くポリゴンの色が
100%反映されるようになっています。

実際には、BlendState.AlphaBlendを使うだけで構いません。

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;


class Triangle
{
    VertexPositionColor[] vertices = new VertexPositionColor[3];

    public Triangle(Vector3 p1, Vector3 p2, Vector3 p3, Color color)
    {
        vertices[0] = new VertexPositionColor(p1, color);
        vertices[1] = new VertexPositionColor(p2, color);
        vertices[2] = new VertexPositionColor(p3, color);
    }

    public void Draw(GraphicsDevice graphicsDevice, BasicEffect effect)
    {
        effect.VertexColorEnabled = true;

        foreach (EffectPass pass in effect.CurrentTechnique.Passes)
        {
            pass.Apply();

            graphicsDevice.DrawUserPrimitives<VertexPositionColor>(
                PrimitiveType.TriangleList,
                vertices,
                0,
                1
                );
        }
    }
}

class MyGame : Game
{
    GraphicsDeviceManager graphics;
    BasicEffect effect;

    Triangle redTriangle = new Triangle
    (
        new Vector3(1, 0.5f, -1),
        new Vector3(0, -1, -1),
        new Vector3(-1, 0.5f, -1),
        new Color(255, 0, 0, 250)
    );

    public MyGame()
    {
        graphics = new GraphicsDeviceManager(this);

    }

    protected override void LoadContent()
    {
        effect = new BasicEffect(GraphicsDevice)
        {
            View = Matrix.CreateLookAt
            (
                new Vector3(0, 0, 3),  //カメラの位置
                new Vector3(0, 0, 0),   //カメラの見る点
                new Vector3(0, 1, 0)    //カメラの上向きベクトル
            ),
            Projection = Matrix.CreatePerspectiveFieldOfView
            (
                MathHelper.ToRadians(45),   //視野の角度。ここでは45°
                GraphicsDevice.Viewport.AspectRatio,//画面のアスペクト比(=横/縦)
                1,      //カメラからこれより近い物体は画面に映らない
                100     //カメラからこれより遠い物体は画面に映らない
            )
        };

    }

    protected override void UnloadContent()
    {
        effect.Dispose();
    }

    protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.CornflowerBlue);

        GraphicsDevice.BlendState = BlendState.AlphaBlend;
        redTriangle.Draw(GraphicsDevice, effect);
    }
}

このサンプルプログラムは、不透明度が255中20の
赤い三角形を描画しています。

「最終的に描画される色」 
        = 不透明度 × 「描画前の色」 + （1 - 不透明度）×「描画するポリゴンの色」

ぼんやりとしていますが、不透明度を上げていくと
徐々にはっきりしてきます。

40/255
80/255
160/255
255/255

不透明度が255の三角形は普通に描画したものと変わりません。
これが前のサンプルとは違うところです。

前のサンプルは背景と三角の色を単純に足していましたが、
このサンプルではポリゴンの色の不透明度が考慮慮されて足されます。