عرض المضلعات المثلثة

ملخص

يعرض المضلعات المثلثة في الفضاء 3D.

بيئة التشغيل

المتطلبات المسبقه

بيئة التشغيل

مادة

ما هو المضلع؟

المضلع هو وجه يتم إنشاؤه بواسطة تعريفات رأس متعددة. بشكل عام ، المضلع هو وجه مثلث يتكون من ثلاثة رؤوس. والمثلثات هي أصغر وحدة في المضلع. قد تعرض بعض برامج النمذجة المضلعات على شكل رباعي أو متعدد الأضلاع ، ولكن سيتم تحللها في النهاية إلى مضلعات مثلثة.

يتم تشكيل النموذج المعروض في الألعاب من خلال الجمع بين العديد من هذه المضلعات الثلاثية.

تتشكل المضلعات بواسطة الرؤوس. يمكن أن تحتوي الرؤوس على بيانات مثل الموضع واللون. هذه العينة مصنوعة أيضا من بيانات "الموضع" و "اللون".

يتم استيفاء لون الوجه في هذا المثال بدقة من خلال اللون والمسافة المحددة لكل قمة ، ولكن يمكنك تغييره بحرية باستخدام برنامج التظليل الخاص بك (المزيد عن برامج التظليل في وقت آخر).

تعريفات بيانات قمة الرأس

من أجل عرض مضلع ، يلزم "بيانات الرأس" ، ويجب على المبرمج أن يقرر العناصر التي يجب تضمينها في هذا الرأس. عند رسم مضلع ، عليك أن تخبر الجهاز ، وهو محرك الرسم ، ببيانات الرأس لرسم المضلع بها. للقيام بذلك ، قم بإنشاء فئة "VertexDeclaration" وقم بتعيين "تعريف بيانات Vertex".

ومع ذلك ، بدءا من XNA Game Studio 4.0 ، تم تبسيط هذا الإعداد ، ولا تحتاج إلى إعداد فئة VertexDeclaration لهذه النصيحة. (وذلك لأن معلومات التعريف مضمنة بالفعل في بيانات الرأس التي يوفرها إطار العمل.)

بيانات قمة الرأس

لقد كتبت أن بيانات الرأس مطلوبة لرسم المضلعات ، ولكن علينا أولا أن نقرر نوع البيانات التي نريد الحصول عليها. في هذه الحالة ، سوف نستخدم بيانات "الموضع" و "اللون". بمجرد أن تقرر البيانات التي تريدها ، تحتاج إلى إنشاء بنية للاحتفاظ بهذه البيانات. لديك بعض الحرية في تحديد بيانات الرأس ، ولكن بيانات الرأس شائعة الاستخدام محددة بالفعل في إطار عمل XNA ، لذلك تستخدمها العينة.

يتم تعريف بيانات Vertex مع "الموضع" و "اللون" على أنها بنية "VertexPositionColor". نظرا لأن هناك حاجة إلى رؤوس متعددة لتشكيل مضلع ، فإننا نعلنها كمصفوفة.

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

أثر

في XNA ، عندما ترسم مضلعا ، يجب عليك كتابة برنامج تظليل منفصل لتحديد كيفية رسمه. للقيام بذلك ، قم بإنشاء ملف تأثير منفصل ، وكتابة برنامج ، وتحميله كفئة تأثير ، وتشغيل برنامج التظليل.

ومع ذلك ، إذا لم تكن بحاجة إلى رسم مضلعات مثلثة بسيطة مثل هذا ، أو تأثيرات رسم معقدة ، فقد تكون مهمة مرهقة للغاية.

لهذا السبب ، يحدد XNA التأثيرات الممتدة التي تسمح لك بتعيين العناصر المطلوبة كخصائص بحيث لا تضطر إلى كتابة برنامج تظليل للرسم الأساسي. هذه هي فئة "BasicEffect". نظرا لأن الغرض من هذه المقالة هو رسم المضلعات ، فسنستخدم "BasicEffect" الذي لا يتطلب الكثير من الجهد للرسم.

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

سأتحدث أكثر عن التأثيرات و BasicEffects في وقت آخر.

بالمناسبة ، لا يسمح لك Windows Phone 7 باستخدام التأثيرات الخاصة بك ، فقط تلك المضمنة في أطر عمل مثل BasicEffect.

إنشاء تعريف بيانات قمة الرأس

حتى XNA Framework 3.1 ، كان عليك إنشاؤها برمجيا بشكل صريح ، ولكن بدءا من 4.0 ، يتم تضمين معلومات قمة العمل المضمنة بالفعل في معلومات الرأس باسم "IVertexType.VertexDeclaration" ، لذلك سنستخدمها.

خلق التأثيرات

إنشاء فئة التأثير الأساسي. قم بتعيين الخاصية بيسيك إفكت.فيرتككولومابليتيبليت إلى true للاحتفاظ بألوان الرأس.

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

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

BasicEffect منشئ

قم بإنشاء مثيل لفئة التأثير "BasicEffect" التي تنفذ لون الرأس والملمس والإضاءة باستخدام Shader Model 2.0.

عرض المصفوفة ومصفوفة الإسقاط

قم بتعيين BasicEffect إلى مصفوفة عرض ومصفوفة إسقاط. للحصول على شرح مفاهيمي لكل منها ، راجع الروابط أدناه.

• حول تنسيق تحويل نماذج 3D
• عرض نظام الإحداثيات
• نظام الإحداثيات الإسقاطية

// ビューマトリックスをあらかじめ設定 ((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 أسلوب

إنشاء مصفوفة عرض.

لإنشاء مصفوفة إسقاط، استخدم الأسلوب "ماتريكس.كريتيريفيريفيلدوففيو".

الوسيطة الأولى هي زاوية الرؤية بالراديان. في العينة ، يتم تحويل وحدة الدرجة إلى راديان باستخدام طريقة "MathHelper.ToRadians". لمزيد من المعلومات حول Radian و Degree، راجع Radian و Degree.

تحدد الوسيطة الثانية نسبة العرض إلى الارتفاع (نسبة العرض إلى الارتفاع). عادة ما تقوم بتحديد قيمة لعرض العرض ÷ الارتفاع. في العينة ، يتم حسابه من العرض والارتفاع المحددين لإطار العرض الخاص بالجهاز.

تحدد الوسيطة الثالثة موضع القطع الأمامي، وتحدد الوسيطة الرابعة موضع القطع للخلف.

Matrix.CreatePerspectiveFieldOfView أسلوب

ينشئ مصفوفة إسقاط منظور استنادا إلى إعدادات حقل العرض.

إنشاء بيانات قمة الرأس

إنشاء ثلاث بيانات قمة الرأس. أولا ، سنقوم بإنشاء مصفوفة وإنشاء كل رأس.

// 頂点データを作成する
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" مع بيانات الموضع واللون.

اضبط موضع الرؤوس على النطاق الذي يمكن رؤيته من الكاميرا. أيضا ، اضبط ترتيب الرأس ليكون "في اتجاه عقارب الساعة (في اتجاه عقارب الساعة)". إذا قمت بتعيينه على "عكس اتجاه عقارب الساعة" ، فلن يكون المضلع مرئيا. للحصول على شرح لذلك، راجع تحديد وجوه مضلع للرسم.

رسم المضلعات

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

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

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

هناك نوعان من التأثيرات ، تسمى "التقنيات" و "المسارات" ، والتي تقوم من خلالها بتشغيل برنامج الرسم الفعلي. نظرا لأنه يمكن أن يكون هناك مسارات متعددة في تأثير واحد ، أحاول الاتصال بها مرارا وتكرارا في foreach. ومع ذلك ، في BasicEffect ، هناك تقنية واحدة ومسار واحد ، بحيث يمكنك تحديد فهرس المسار مباشرة ، ولكن الوصف أعلاه سيكون أنظف لأنه يمكنك استبداله بتأثيرات أخرى.

قبل بدء الرسم الفعلي ، اتصل بطريقة "EffectPass.Apply" لبدء المرور. من خلال استدعاء هذه الطريقة ، يتم تطبيق معلمات التأثير المراد استخدامها هذه المرة على جهاز الرسومات.

بمجرد بدء المسار ، ارسم المضلع باستخدام طريقة "GraphicsDevice.DrawUserPrimitives".

تحدد الوسيطة الأولى نوع البدائية المراد رسمها. في هذه الحالة ، سنرسم مضلعا مثلثا ، لذا حدد "PrimitiveType.TriangleList".

تحدد الوسيطة الثانية بيانات الرأس التي تم إنشاؤها.

تحدد الوسيطة الثالثة الرأس المراد السحب منه. عادة ، هذا هو 0.

تحدد الوسيطة الرابعة عدد الأوليات المراد رسمها. في هذه الحالة ، لا يوجد سوى مضلع مثلث واحد ، لذلك حدد 1. لاحظ أنه ليس عدد الرؤوس.

GraphicsDevice.DrawUserPrimitives أسلوب

يرسم الأوليات بناء على بيانات الرأس التي يوفرها المستخدم.

هذا كل شيء لبرنامج الرسم. إذا قمت بتشغيله بالفعل وتم عرض مثلث ، فقد انتهيت.

جميع الرموز

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