カユウのゲーム製作記

// アニメーションの読み込み
animationPlayer1 = new AnimationPlayer(skinningData);
AnimationClip clip1 = skinningData.AnimationClips[“move1”];
animationPlayer1.StartClip(clip1);

animationPlayer2 = new AnimationPlayer(skinningData);
AnimationClip clip2 = skinningData.AnimationClips[“move2”];
animationPlayer1.StartClip(clip2);

各アニメーションプレイヤーにアニメーションを読み込みます。

Update

// アニメーションプレイヤー
animationPlayer1.Update(gameTime.ElapsedGameTime, true, Matrix.Identity);
animationPlayer2.Update(gameTime.ElapsedGameTime, true, Matrix.Identity);

// ボーン
this.bones = animationPlayer1.GetSkinTransforms();
Matrix[] bones = animationPlayer2.GetSkinTransforms();

// アニメーションのブレンド
for (int i = 0; i < this.bones.Length; i++)
{
this.bones[i] = Matrix.Lerp(this.bones[i], bones[i], blend);
}

Matrix.Lrepメソッドを使用し、2つのボーンデータを補完します。

参考：Matrix.Lerp メソッド

Draw

// モデルに含まれるメッシュの数だけ繰り返す
foreach (ModelMesh mesh in model.Meshes)
{
    // エフェクトの数だけ繰り返す
    foreach (Effect effect in mesh.Effects)
    {
        // ボーン情報をセット
        effect.Parameters[“Bones”].SetValue(this.bones);
        effect.Parameters[“View”].SetValue(view);
        effect.Parameters[“Projection”].SetValue(projection);
    }
    mesh.Draw();
}

表示結果

2つのアニメーションを補間し、中間のアニメーションをブレンドさせました。

6件のコメント | カテゴリー:XNA

2012年1月24日

お知らせ

投稿者: カユウ

今月末まで忙しくなりそうなので1週間ほど更新できません。

コメントする | カテゴリー:その他

2012年1月23日

環境マップ

投稿者: カユウ

今回はXNAで環境マップを使用する方法について説明したいと思います。

環境マップとはスカイスフィアに使用する背景画像をモデルに反射しているように見せ、金属などのような質感を表現する方法です。

HLSLサンプルコード

フィールド

float Reflective = 0.25f; // 反射率 0から1

環境マップの反射率を指す変数Reflectiveを作成します。

// テクスチャーとサンプラー
texture EnvironmentMap;
sampler EnvironmentSmp = sampler_state
{
    Texture = (EnvironmentMap);
    MinFilter = Linear;
    MagFilter = Linear;
    MipFilter = Linear;
    AddressU = Wrap;
    AddressV = Wrap;
};

背景画像用のテクスチャー変数とサンプラーを追加します。

// 頂点シェーダへ入力する情報
struct EnvironmentVSInput
{
float4 Position : POSITION0;

    // UV座標
    float2 TexCoord : TEXCOORD0;
    // 法線
    float3 Normal : NORMAL;
};

// 頂点シェーダから出力される情報
struct EnvironmentVSOutput
{
float4 Position : POSITION0;

    // UV座標
    float2 TexCoord : TEXCOORD0;
    // 法線
    float3 Normal : TEXCOORD1;
    // 光方向
    float3 Light : TEXCOORD2;
    // 反射テクスチャー座標
    float3 Reflection : TEXCOORD3;
};

頂点シェーダから出力される情報に反射テクスチャー座標を指す変数Reflectionを追加します。

// 頂点シェーダ
EnvironmentVSOutput EnvironmentVSFunction(EnvironmentVSInput input)
{
EnvironmentVSOutput output;

    // ワールド座標の変換
    float4 worldPosition = mul(input.Position, World );
    // 視点座標の変換
    float4 viewPosition = mul(worldPosition, View );
    // 出力する座標の作成
    output.Position = mul(viewPosition, Projection );

    // 出力するUV座標の作成
    output.TexCoord = input.TexCoord ;

    // 出力する法線の作成
    output.Normal = normalize(mul( input.Normal, World ));
    // 出力する光方向の作成
    output.Light = LightPosition.xyz – worldPosition.xyz;

    float3 viewNormal = mul(output.Normal, View);
    output.Reflection = reflect(normalize(viewPosition), viewNormal);

return output;
}

変換した視点座標と法線から反射テクスチャー座標を作成します。

// ピクセルシェーダ
float4 EnvironmentPSFunction(EnvironmentVSOutput input) : COLOR0
{
    float3 N = normalize( input.Normal ); // 法線の正規化
    float3 L = normalize( input.Light ); // 光方向の正規化
    float3 diffuse = ( max( dot(N, L), 0.0f ) * 0.5f + 0.5f );

    float4 output = float4( diffuse, 1.0f ) * tex2D( TextureSmp, input.TexCoord );

    float3 envmap = texCUBE(EnvironmentSmp, input.Reflection);
    output = float4( lerp(output, envmap, Reflective), output.w );

return output;
}

texCUBEを使用して背景画像から色情報を取得し、描画される色と合成します。

表示結果

コメントする | カテゴリー:XNA

2012年1月22日

ソフトパーティクル

投稿者: カユウ

今回はXNAでソフトパーティクルを使用する方法について説明したいと思います。

まず、ソフトパーティクルとは何か説明します。

ソフトパーティクルとはパーティクルに使用するモデルと背景となるモデルの境界部分をぼかし、エッジの発生を防ぐ技術です。

ソフトパーティクルにはシャドウマップのように深度情報を保存しておく必要があります。

深度情報の出力方法はシャドウマップ画像作成を参考にしてください。

ソフトパーティクルではシャドウマップと違い、光源からではなくカメラからの深度情報を使用します。

HLSLサンプルコード

フィールド

// フィールド変数
float4x4 World; // ワールド座標変換行列
float4x4 View; // 射影変換行列
float4x4 Projection; // 投影変換行列

float Offset = 1.0f;

必要な変数はシャドウマップとあまり変わりませんが、Offset変数の用途が変わります。

ソフトパーティクルではOffsetをどれだけの距離までを透過するか判定するために使用します。

// テクスチャーとサンプラー
texture Texture;
sampler TextureSmp = sampler_state
{
Texture = (Texture);
MinFilter = Linear;
MagFilter = Linear;
MipFilter = Linear;
};

texture DepthMap;
sampler DepthSmp = sampler_state
{
Texture = <DepthMap>;
MagFilter = Linear;
MipFilter = None;
AddressU = Border;
AddressV = Border;
BorderColor = float4(1.0f, 1.0f, 1.0f, 1.0f);
};

テクスチャーやサンプラーもシャドウマップとあまり変わりません。

// 頂点シェーダへ入力する情報
struct VertexShaderInput
{
float4 Position : POSITION0;

// UV座標
float2 TexCoord : TEXCOORD0;
};

// 頂点シェーダから出力される情報
struct VertexShaderOutput
{
float4 Position : POSITION0;

// UV座標
float2 TexCoord : TEXCOORD0;
// 深度
float4 Depth : TEXCOORD1;
};

パーティクルなので法線情報や光方向の情報は必要ありません。

// 頂点シェーダ
VertexShaderOutput VertexShaderFunction(VertexShaderInput input)
{
VertexShaderOutput output;

    float4 worldPosition = mul(input.Position, World ); // ワールド座標の変換
float4 viewPosition = mul(worldPosition, View );    // 視点座標の変換
output.Position = mul(viewPosition, Projection );   // 出力する座標の作成

output.TexCoord = input.TexCoord; // 出力するUV座標の作成
output.Depth = output.Position; // 出力する深度情報の作成

return output;
}

// ピクセルシェーダ
float4 PixelShaderFunction(VertexShaderOutput input) : COLOR0
{
float4 output = tex2D( TextureSmp, input.TexCoord );

input.Depth.xy /= input.Depth.w;
float2 coord = input.Depth.xy * float2( 0.5f, -0.5f ) + 0.5f;
float depth = tex2D( DepthSmp, coord ).x;

float alpha = depth * input.Depth.w – input.Depth.z;
if ( alpha <= Offset )
{
alpha /= Offset;
output.w *= alpha;
}

return output;
}

頂点シェーダではシャドウマップ画像の出力と変わりませんが、ピクセルシェーダでは不透明度を計算する必要があります。

保存された深度とピクセルの深度の差がOffset以下か判定し、Offset以下の場合は差をOffsetで除算しテクスチャーの不透明度に乗算します。

表示結果