Visa triangulära polygoner

sammanfattning

Den visar triangulära polygoner i 3D-rymden.

Operativ miljö

Förutsättningar

Operativ miljö

substans

Vad är en polygon?

En polygon är ett ansikte som genereras av flera hörndefinitioner. I allmänhet är en polygon en triangulär yta som består av tre hörn. Och trigonen är den minsta enheten i polygonen. Vissa modelleringsprogram kan visa polygoner som fyrsidiga eller polygonala, men dessa kommer så småningom att delas upp i triangulära polygoner.

Modellen som visas i spel bildas genom att kombinera flera av dessa triangulära polygoner.

Polygoner bildas av hörn. Hörn kan ha data som position och färg. Det här exemplet görs också från data om "position" och "färg".

Färgen på ansiktet i det här exemplet interpoleras snyggt av färgen och avståndet som ställts in för varje hörn, men du kan fritt ändra det med ditt eget skuggningsprogram (mer om skuggningsprogram en annan gång).

Definitioner av vertexdata

För att visa en polygon krävs "vertex-data", och programmeraren måste bestämma vilka element som ska ingå i den vertex. När du ritar en polygon måste du tala om för enheten, som är ritmotorn, vilka vertex-data som polygonen ska ritas med. Det gör du genom att skapa en "VertexDeclaration"-klass och ange "Vertex Data Definition".

Men från och med XNA Game Studio 4.0 har denna inställning förenklats, och du behöver inte förbereda en VertexDeclaration-klass för detta tips. (Detta beror på att definitionsinformationen redan är inbäddad i de hörndata som tillhandahålls av ramverket.)

Vertex-data

Jag skrev att vertexdata krävs för att rita polygoner, men först måste vi bestämma vilken typ av data vi vill ha. I det här fallet kommer vi att använda data om "position" och "färg". När du har bestämt dig för vilka data du vill ha måste du skapa en struktur för att lagra dessa data. Du har viss frihet att bestämma vad hörndata är, men de vanliga hörndata är redan definierade i XNA-ramverket, så exemplet använder det.

Hörndata med "position" och "color" definieras som en "VertexPositionColor"-struktur. Eftersom flera hörn behövs för att bilda en polygon deklarerar vi den som en matris.

/// <summary>
/// 頂点データリスト
/// </summary>
private VertexPositionColor[] vertices = null;

effekt

När du ritar en polygon i XNA måste du skriva ett separat shader-program för att bestämma hur den ska ritas. Det gör du genom att skapa en separat effektfil, skriva ett program, läsa in det som en effektklass och köra skuggningsprogrammet.

Men om du inte behöver rita enkla triangulära polygoner som den här, eller komplexa riteffekter, kan det vara en mycket besvärlig uppgift.

Av denna anledning definierar XNA utökade effekter som gör att du kan ställa in de nödvändiga objekten som egenskaper så att du inte behöver skriva ett shader-program för grundläggande ritning. Det är klassen "BasicEffect". Eftersom syftet med den här artikeln är att rita polygoner kommer vi att använda "BasicEffect" som inte kräver mycket ansträngning att rita.

/// <summary>
/// 基本エフェクト
/// </summary>
private BasicEffect basicEffect = null;

Jag kommer att prata mer om effekter och BasicEffects vid ett annat tillfälle.

Förresten, Windows Phone 7 tillåter dig inte att använda dina egna effekter, bara de som är inbyggda i ramverk som BasicEffect.

Skapa en hörndatadefinition

Fram till XNA Framework 3.1 var du tvungen att uttryckligen skapa dem programmatiskt, men från och med 4.0 ingår ramverkets inbyggda hörninformation redan i hörninformationen som "IVertexType.VertexDeclaration", så vi kommer att använda den.

Skapa effekter

Skapa en BasicEffect-klass. Ange egenskapen BasicEffect.VertexColorEnabled till true för att behålla hörnfärgerna.

// エフェクトを作成
this.basicEffect = new BasicEffect(this.GraphicsDevice);

// エフェクトで頂点カラーを有効にする
this.basicEffect.VertexColorEnabled = true;

BasicEffect konstruktor

Skapa en instans av effektklassen "BasicEffect" som utför vertexfärg, textur och belysning med hjälp av Shader Model 2.0.

Visa matris och projektionsmatris

Ställ in BasicEffect på en vymatris och en projektionsmatris. En konceptuell förklaring av var och en finns i länkarna nedan.

• Om koordinattransformation av 3D-modeller
• Visa koordinatsystem
• Projektivt koordinatsystem

// ビューマトリックスをあらかじめ設定 ((0, 0, 15) から原点を見る)
this.basicEffect.View = Matrix.CreateLookAt(
        new Vector3(0.0f, 0.0f, 15.0f),
        Vector3.Zero,
        Vector3.Up
    );

// プロジェクションマトリックスをあらかじめ設定
this.basicEffect.Projection = Matrix.CreatePerspectiveFieldOfView(
        MathHelper.ToRadians(45.0f),
        (float)this.GraphicsDevice.Viewport.Width /
            (float)this.GraphicsDevice.Viewport.Height,
        1.0f,
        100.0f
    );

Om du vill generera en vymatris använder du metoden "Matrix.CreateLookAt".

Det första argumentet anger kamerans position, det andra argumentet anger kamerans intressepunkt och det tredje argumentet anger kamerans uppåtgående riktning.

I det här fallet är den inställd på att titta på origo från positionen (0, 0, 15).

Matrix.CreateLookAt metod

Skapa en vymatris.

Om du vill generera en projektionsmatris använder du metoden "Matrix.CreatePerspectiveFieldOfView".

Det första argumentet är betraktningsvinkeln i radianer. I exemplet konverteras gradenheten till radianer med hjälp av metoden "MathHelper.ToRadians". Mer information om Radian och Grad finns i Radianer och Grad.

Det andra argumentet anger proportionerna (bildförhållandet). Vanligtvis anger du ett värde för Vybredd ÷ Höjd. I exemplet beräknas det utifrån den bredd och höjd som angetts för enhetens visningsområde.

Det tredje argumentet anger urklippspositionen framåt och det fjärde argumentet anger urklippspositionen bakåt.

Matrix.CreatePerspectiveFieldOfView metod

Skapar en matris för perspektivprojektion baserat på vyfältets inställningar.

Skapa hörndata

Skapa tre hörndata. Först ska vi skapa en array och skapa varje hörn.

// 頂点データを作成する
this.vertices = new VertexPositionColor[3];

this.vertices[0] = new VertexPositionColor(new Vector3(0.0f, 3.0f, 0.0f),
                                           Color.Red);
this.vertices[1] = new VertexPositionColor(new Vector3(3.0f, -2.0f, 0.0f),
                                           Color.Blue);
this.vertices[2] = new VertexPositionColor(new Vector3(-3.0f, -2.0f, 0.0f),
                                           Color.Green);

Om du vill skapa hörndata anger du "hörnposition" och "hörnfärg" i konstruktorn för "VertexPositionColor".

VertexPositionColor konstruktor

Skapa en instans av strukturen "VertexPositionColor" med position- och färghörndata.

Ställ in positionen för hörnen till det intervall som kan ses från kameran. Ställ också in vertex-arrangemanget så att det är "medurs (medurs)". Om du ställer in den på "moturs" kommer polygonen inte att synas. En förklaring av detta finns i Ange vilka ytor på en polygon som ska ritas.

Rita polygoner

// パスの数だけ繰り替えし描画 (といっても直接作成した BasicEffect は通常１回)
foreach (EffectPass pass in this.basicEffect.CurrentTechnique.Passes)
{
    // パスの開始
    pass.Apply();

    // ポリゴンを描画する
    this.GraphicsDevice.DrawUserPrimitives(
        PrimitiveType.TriangleList,
        this.vertices,
        0,
        1
    );
}

// 登録された DrawableGameComponent を描画する
base.Draw(gameTime);

Det finns två typer av effekter, som kallas "tekniker" och "banor", genom vilka du kör själva ritprogrammet. Eftersom det kan finnas flera vägar i en enda effekt försöker jag anropa dem upprepade gånger i foreach. I BasicEffect finns det dock en teknik och en sökväg, så du kan ange indexet för sökvägen direkt, men ovanstående beskrivning blir renare eftersom du kan ersätta den med andra effekter.

Innan du startar den faktiska ritningen, anropa metoden "EffectPass.Apply" för att starta passet. Genom att anropa den här metoden tillämpas parametrarna för den effekt som ska användas den här gången på grafikenheten.

När du har startat sökvägen ritar du polygonen med metoden "GraphicsDevice.DrawUserPrimitives".

Det första argumentet anger vilken typ av primitiv som ska ritas. I det här fallet ritar vi en triangulär polygon, så ange "PrimitiveType.TriangleList".

Det andra argumentet anger de skapade hörndata.

Det tredje argumentet anger vilket hörn som ska hämtas från. Normalt är detta 0.

Det fjärde argumentet anger antalet primitiver som ska ritas. I det här fallet finns det bara en triangulär polygon, så ange 1. Observera att det inte är antalet hörn.

GraphicsDevice.DrawUserPrimitives metod

Ritar primitiver baserat på hörndata som tillhandahålls av användaren.

Det var allt för ritprogrammet. Om du faktiskt kör den och en triangel visas är du klar.

Alla koder

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Media;
#if WINDOWS_PHONE
using Microsoft.Xna.Framework.Input.Touch;
#endif

namespace DrawTriangle
{
    /// <summary>
    /// ゲームメインクラス
    /// </summary>
    public class GameMain : Microsoft.Xna.Framework.Game
    {
        /// <summary>
        /// グラフィックデバイス管理クラス
        /// </summary>
        private GraphicsDeviceManager graphics = null;

        /// <summary>
        /// スプライトのバッチ化クラス
        /// </summary>
        private SpriteBatch spriteBatch = null;

        /// <summary>
        /// 頂点データリスト
        /// </summary>
        private VertexPositionColor[] vertices = null;

        /// <summary>
        /// 基本エフェクト
        /// </summary>
        private BasicEffect basicEffect = null;


        /// <summary>
        /// GameMain コンストラクタ
        /// </summary>
        public GameMain()
        {
            // グラフィックデバイス管理クラスの作成
            this.graphics = new GraphicsDeviceManager(this);

            // ゲームコンテンツのルートディレクトリを設定
            this.Content.RootDirectory = "Content";

#if WINDOWS_PHONE
            // Windows Phone のデフォルトのフレームレートは 30 FPS
            this.TargetElapsedTime = TimeSpan.FromTicks(333333);

            // バックバッファサイズの設定
            this.graphics.PreferredBackBufferWidth = 480;
            this.graphics.PreferredBackBufferHeight = 800;

            // フルスクリーン表示
            this.graphics.IsFullScreen = true;
#endif
        }

        /// <summary>
        /// ゲームが始まる前の初期化処理を行うメソッド
        /// グラフィック以外のデータの読み込み、コンポーネントの初期化を行う
        /// </summary>
        protected override void Initialize()
        {
            // TODO: ここに初期化ロジックを書いてください

            // コンポーネントの初期化などを行います
            base.Initialize();
        }

        /// <summary>
        /// ゲームが始まるときに一回だけ呼ばれ
        /// すべてのゲームコンテンツを読み込みます
        /// </summary>
        protected override void LoadContent()
        {
            // テクスチャーを描画するためのスプライトバッチクラスを作成します
            this.spriteBatch = new SpriteBatch(this.GraphicsDevice);

            // エフェクトを作成
            this.basicEffect = new BasicEffect(this.GraphicsDevice);

            // エフェクトで頂点カラーを有効にする
            this.basicEffect.VertexColorEnabled = true;

            // ビューマトリックスをあらかじめ設定 ((0, 0, 15) から原点を見る)
            this.basicEffect.View = Matrix.CreateLookAt(
                    new Vector3(0.0f, 0.0f, 15.0f),
                    Vector3.Zero,
                    Vector3.Up
                );

            // プロジェクションマトリックスをあらかじめ設定
            this.basicEffect.Projection = Matrix.CreatePerspectiveFieldOfView(
                    MathHelper.ToRadians(45.0f),
                    (float)this.GraphicsDevice.Viewport.Width /
                        (float)this.GraphicsDevice.Viewport.Height,
                    1.0f,
                    100.0f
                );

            // 頂点データを作成する
            this.vertices = new VertexPositionColor[3];

            this.vertices[0] = new VertexPositionColor(new Vector3(0.0f, 3.0f, 0.0f),
                                                       Color.Red);
            this.vertices[1] = new VertexPositionColor(new Vector3(3.0f, -2.0f, 0.0f),
                                                       Color.Blue);
            this.vertices[2] = new VertexPositionColor(new Vector3(-3.0f, -2.0f, 0.0f),
                                                       Color.Green);
        }

        /// <summary>
        /// ゲームが終了するときに一回だけ呼ばれ
        /// すべてのゲームコンテンツをアンロードします
        /// </summary>
        protected override void UnloadContent()
        {
            // TODO: ContentManager で管理されていないコンテンツを
            //       ここでアンロードしてください
        }

        /// <summary>
        /// 描画以外のデータ更新等の処理を行うメソッド
        /// 主に入力処理、衝突判定などの物理計算、オーディオの再生など
        /// </summary>
        /// <param name="gameTime">このメソッドが呼ばれたときのゲーム時間</param>
        protected override void Update(GameTime gameTime)
        {
            // Xbox 360 コントローラ、Windows Phone の BACK ボタンを押したときに
            // ゲームを終了させます
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
            {
                this.Exit();
            }

            // TODO: ここに更新処理を記述してください

            // 登録された GameComponent を更新する
            base.Update(gameTime);
        }

        /// <summary>
        /// 描画処理を行うメソッド
        /// </summary>
        /// <param name="gameTime">このメソッドが呼ばれたときのゲーム時間</param>
        protected override void Draw(GameTime gameTime)
        {
            // 画面を指定した色でクリアします
            this.GraphicsDevice.Clear(Color.CornflowerBlue);

            // パスの数だけ繰り替えし描画 (といっても直接作成した BasicEffect は通常１回)
            foreach (EffectPass pass in this.basicEffect.CurrentTechnique.Passes)
            {
                // パスの開始
                pass.Apply();

                // ポリゴンを描画する
                this.GraphicsDevice.DrawUserPrimitives(
                    PrimitiveType.TriangleList,
                    this.vertices,
                    0,
                    1
                );
            }

            // 登録された DrawableGameComponent を描画する
            base.Draw(gameTime);
        }
    }
}