顯示三角形多邊形

更新頁 : 2024年9月28日星期六

頁面創建日期 : 2020年8月3日星期一

總結

它在 3D 空間中顯示三角形多邊形。

３角形ポリゴンの表示

經營環境

先決條件


支援的 XNA 版本	4.0
支援的平臺	Windows（XP SP2 或更高版本、Vista、7） Xbox 360 的 Windows Phone 7 系列
Windows 所需的頂點著色器版本	2.0
Windows 所需的像素著色器版本	2.0

經營環境


平臺	視窗 7 Xbox 360 的 Windows Phone 7 模擬器

物質

什麼是多邊形？

多邊形是由多個頂點定義生成的面。通常，多邊形是由三個頂點組成的三角形面。三角體是多邊形的最小單位。某些建模軟體可能會將多邊形顯示為四邊形或多邊形，但這些多邊形最終會分解為三角形多邊形。

遊戲中顯示的模型是由多個這些三角形多邊形組合而成的。

最小単位のポリゴン

多邊形由頂點組成。頂點可以包含位置和顏色等數據。此示例也是由「position」和「color」資料組成的。

ポリゴンと頂点

在此示例中，面的顏色由為每個頂點設置的顏色和距離整齊地插值，但您可以使用自己的著色器程式自由更改它（下次將詳細介紹著色器程式）。

頂點數據定義

為了顯示多邊形，需要「頂點數據」，程式師必須決定該頂點中要包含哪些元素。在繪製多邊形時，您必須告訴設備（哪個繪製引擎）要使用哪些頂點數據繪製多邊形。為此，請創建一個「VertexDeclaration」類並設置「Vertex Data Definition」。。

但是，從 XNA Game Studio 4.0 開始，此設置已得到簡化，您無需為此提示準備 VertexDeclaration 類。（這是因為定義資訊已經嵌入到框架提供的頂點數據中。

頂點數據

我寫過繪製多邊形需要頂點數據，但首先我們必須決定我們想要什麼樣的數據。在這種情況下，我們將使用「position」和「color」數據。確定要擁有的數據后，您需要創建一個結構來保存該數據。您可以自由地決定什麼是頂點數據，但常用的頂點數據已在 XNA 框架中定義，因此該示例使用它。

具有「position」和「color」的頂點數據被定義為「VertexPositionColor」結構。由於形成多邊形需要多個頂點，因此我們將其聲明為陣列。

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

影響

在 XNA 中，當您繪製多邊形時，您必須編寫一個單獨的著色器程式來決定如何繪製它。為此，請創建一個單獨的效果檔，編寫一個程式，將其作為效果類載入，然後運行著色器程式。

但是，如果您不需要繪製像這樣的簡單三角形多邊形或複雜的繪圖效果，則這可能是一項非常繁瑣的任務。

因此，XNA 定義了擴展效果，允許您將所需的項設置為屬性，這樣就不必為基本繪圖編寫著色器程式。這就是「BasicEffect」類。由於本文的目的是繪製多邊形，因此我們將使用不需要太多努力繪製的 “BasicEffect”。

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

我將在下次詳細討論 Effects 和 BasicEffects。

順便說一句，Windows Phone 7 不允許您使用自己的效果，只允許使用內置於 BasicEffect 等框架中的效果。

創建頂點數據定義

在 XNA 框架 3.1 之前，您必須以程式設計方式顯式創建它們，但從 4.0 開始，框架的內置頂點資訊已作為“IVertexType.VertexDeclaration”包含在頂點資訊中，因此我們將使用它。

創建效果

創建一個 BasicEffect 類。將 BasicEffect.VertexColorEnabled 屬性設置為 true 以保留頂點顏色。

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

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

BasicEffect 構造函數

創建效果類“BasicEffect”的實例，該實例使用Shader Model 2.0執行頂點顏色、紋理和照明。


裝置	圖形設備	指定用於創建效果的 GraphicsDevice

視圖矩陣和投影矩陣

將 BasicEffect 設置為檢視矩陣和投影矩陣。有關每個概念性解釋，請參閱下面的連結。

// ビューマトリックスをあらかじめ設定 ((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
    );

若要生成視圖矩陣，請使用「Matrix.CreateLookAt」方法。

第一個參數指定相機的位置，第二個參數指定相機的目標點，第三個參數指定相機的向上方向。

在這種情況下，它被設置為從位置（0， 0， 15）查看原點。

Matrix.CreateLookAt 方法

創建檢視矩陣。


cameraPosition	向量 3	相機位置
cameraTarget 相機目標	向量 3	相機目標點
cameraUpVector	向量 3	相機的向上方向

若要生成投影矩陣，請使用「Matrix.CreatePerspectiveFieldOfView」方法。

第一個參數是以弧度為單位的視角。在示例中，度數單位使用「MathHelper.ToRadians」方法轉換為弧度。有關Radian和Degree的更多資訊，請參閱Radian和Degree。

第二個參數指定縱橫比（aspect ratio）。通常，您可以為 View Width ÷ Height 指定一個值。在範例中，它是根據為設備的視區設置的寬度和高度計算的。

第三個參數指定前向剪輯位置，第四個參數指定後向剪輯位置。

Matrix.CreatePerspectiveFieldOfView 方法

根據檢視欄位的設置創建透視投影矩陣。


fieldOfView 視圖	浮	視角。以弧度單位指定。
aspectRatio	浮	縱橫比（aspect ratio）。通常，您可以為“View Width ÷ Height”（視圖寬度高度）指定一個值
nearPlaneDistance （近平面距離）	浮	前向剪輯位置。不會繪製此位置前面的物件。
farPlaneDistance （遠平面距離）	浮	後扣位置。不會繪製超出此位置的物件。

創建頂點數據

創建 3 個頂點數據。首先，我們將創建一個陣列並創建每個頂點。

// 頂点データを作成する
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);

要創建頂點數據，請在「VertexPositionColor」的構造函數中指定「頂點位置」和「頂點顏色」。

VertexPositionColor 構造函數

使用位置和顏色頂點數據創建結構「VertexPositionColor」的實例。


位置	向量 3	頂點位置
顏色	顏色	頂點顏色

將頂點的位置設置為可從攝像機看到的範圍。另外，將頂點排列設置為「clockwise （clockwise）」。。如果將其設置為「counterclockwise」，則多邊形將不可見。有關此內容的說明，請參見指定要繪製的多邊形的面。

繪製多邊形

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

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

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

有兩種類型的效果，稱為「技術」和「路徑」，通過它們運行實際的繪圖程式。由於單個 effect 中可以有多個路徑，因此我嘗試在 foreach 中重複調用它們。但是，在 BasicEffect 中，有一個技術和一個 path，所以你可以直接指定 path 的索引，但是上面的描述會更簡潔，因為你可以用它來替換其他 effect。

在開始實際繪製之前，請調用「EffectPass.Apply」方法來啟動通道。通過調用該方法，將本次使用的效果參數應用到圖形設備中。

啟動路徑後，使用“GraphicsDevice.DrawUserPrimitives”方法繪製多邊形。

第一個參數指定要繪製的基元類型。在本例中，我們將繪製一個三角形多邊形，因此請指定 “PrimitiveType.TriangleList”。

第二個參數指定創建的頂點數據。

第三個參數指定要從中繪製的頂點。通常，此值為 0。

第四個參數指定要繪製的基元數。在這種情況下，只有一個三角形多邊形，因此請指定 1。請注意，它不是頂點數。

GraphicsDevice.DrawUserPrimitives 方法

根據使用者提供的頂點數據繪製基元。


T	無限制	頂點數據結構
primitiveType （原始類型）	PrimitiveType （基元類型）	要繪製的基元類型
頂點數據	T[]	要繪製的頂點數據陣列
vertexOffset （頂點偏移）	int	指定要用於繪製的頂點數據的數量
primitiveCount	int	要繪製的基元數。

這就是繪圖程式的全部內容。如果您實際運行它並顯示一個三角形，則您已完成。

所有代碼

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);
        }
    }
}

繪製透明和半透明 sprite

指定要繪製的多邊形的面