かんたんXNA その１６ ワイヤーフレーム

※このページは古いです。
最新版はこちら

ここでは、表示する図形の骨組みだけ描画するワイヤーフレームの解説をします。

ここまでは、三角形を描画するときに3つの辺に囲まれた面も描画していましたが、
ワイヤーフレームと言って、3つの辺だけ描画することも可能です。

他の多くの場合と同様、見た方が速いでしょう。

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


public class MyGame : Microsoft.Xna.Framework.Game
{
    GraphicsDeviceManager graphics;
    BasicEffect effect;

    VertexPositionColor[] vertices = new VertexPositionColor[6];

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

        vertices[0] = new VertexPositionColor(new Vector3(0, 1, 0), Color.White);
        vertices[1] = new VertexPositionColor(new Vector3(1, 0, 0), Color.Red);
        vertices[2] = new VertexPositionColor(new Vector3(-1, 0, 0), Color.Navy);

        vertices[3] = new VertexPositionColor(new Vector3(0, 1, -1), Color.White);
        vertices[4] = new VertexPositionColor(new Vector3(1, 0, -1), Color.Red);
        vertices[5] = new VertexPositionColor(new Vector3(-1, 0, -1), Color.Navy);
    }

    protected override void LoadGraphicsContent(bool loadAllContent)
    {
        if (loadAllContent)
        {
            effect = new BasicEffect(graphics.GraphicsDevice, null);
            effect.Projection = Matrix.CreatePerspectiveFieldOfView(
                MathHelper.ToRadians(45),
                Window.ClientBounds.Width / (float)Window.ClientBounds.Height,
                1,
                100
                );
            effect.View = Matrix.CreateLookAt(
                new Vector3(0, 0, 3),
                new Vector3(0, 0, 0),
                new Vector3(0, 1, 0)
                );
            effect.VertexColorEnabled = true;
        }
    }

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

        graphics.GraphicsDevice.VertexDeclaration = new VertexDeclaration(
            graphics.GraphicsDevice,
            VertexPositionColor.VertexElements
            );

        graphics.GraphicsDevice.RenderState.FillMode = FillMode.WireFrame;

        effect.Begin();

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

            graphics.GraphicsDevice.DrawUserPrimitives<VertexPositionColor>(
                PrimitiveType.TriangleList,
                vertices,
                0,
                2
                );

            pass.End();
        }

        effect.End();
    }
}

(画像が小さくて少しわかりにくいですが、線で三角形が2つ描かれています。）
このサンプルでは、同じ大きさの三角形を手前に1つ、奥に1つ表示しています。
注目すべきなのは、これがワイヤーフレームで、骨組みしか表示されていないと言うことです。

今までのように普通に三角形を表示していたら、奥の三角形は見えないはずです。
しかしワイヤーフレームを使えば、奥の図形も見ることが出来るのです。

また、線しか書かないので描画が非常に高速です。
この性質を利用して3DCGのエディタでは使われることがあるようです。

このワイヤーフレームを実現するためには、GraphicsDeviceのRenderState.FillModeプロパティを
FillMode.WireFrameにセットします。
FillMode列挙体には3つのメンバがあり、
FillMode.Pointは点だけを描画し、
FillMode.WireFrameは線だけを描画し、
FillMode.Solidは図形を完全に描画します。


（さて、このワイヤーフレーム、ゲームで一体どう使えばいいのでしょうか？
ワイヤーフレームは描画が高速で昔から使われていたそうですが、それだけに見栄えが悪いものです。
ほとんど使い道が無いような気もしますが、
ゲームで使う建物の地図なんかの表示に、もしかしたら使えるかもしれません。
（建物の地図は奥が見えていた方がいいはずですからね）
あるいは、プレイヤーが透視する能力を持っていると言う設定にして、
能力を使ったときだけワイヤーフレームにすると言うのもありかもしれません。）