조명을 사용하여 다각형 그리기

페이지 업데이트 :
페이지 생성 날짜 :

요약

조명(광원)은 다각형을 음영 처리하는 데 사용됩니다.

ライトを使用してポリゴンを描画する

운영 환경

필수 구성 요소

지원되는 XNA 버전
  • 4.0
지원되는 플랫폼
  • Windows(XP SP2 이상, Vista, 7)
  • 엑스박스 360
  • 윈도우 폰 7
Windows 필수 버텍스 셰이더 버전 2.0
Windows 필수 픽셀 셰이더 버전 2.01

운영 환경

플랫폼
  • 윈도우 7
  • 엑스박스 360
  • Windows Phone 7 에뮬레이터

물질

라이트에 대하여

다음은 조명 사용에 대해 할 수 있는 몇 가지 작업입니다.

재료

간단히 말해서 재료는 물질의 색상입니다. 재질은 종종 라이트와 함께 사용되며, BasicEffects를 사용하면 재질 및 조명 매개변수를 설정할 수도 있습니다. 그러나 자체 셰이더 프로그램을 작성하는 경우에는 적용되지 않으며 자유롭게 조정할 수 있습니다. 또한 재질의 색상은 정점의 색상과 다릅니다.

재료에는 일반적으로 다음과 같은 항목이 있습니다.

퍼지다 물질의 기본 색상
앰비언트 주변광에 노출되었을 때의 색상 색상(빛이 직접 비추지 않아도 볼 수 있음)
반사 정반사광(자동차의 광택처럼 강하게 빛남 등)
스페큘러 파워 반사 강도(Reflective Strength)
발광 발산광(자체적으로 빛남)

라이트와 노멀

라이트를 사용하려면 "노멀"이라는 것이 필요합니다. 법선에 대한 빛의 위치는 물체의 밝기를 결정합니다. 법선은 정점 데이터로 설정됩니다.

面の方向と明るさ

면이 빛의 방향을 향하고 있으면 더 밝고 그 반대이면 더 어둡습니다. 면의 방향을 정점으로 바꾸는 경우에도 마찬가지입니다. 이러한 면과 정점의 방향을 "법선"이라고 합니다.

이제 법선의 방향은 명시적으로 정의되지 않았으며 아래에 상자에 설정할 수 있는 두 가지 주요 법선이 있습니다.

面の方向と明るさ

빛이 비춰질 때 왼쪽과 오른쪽에 차이가 있습니다.

왼쪽 방법의 경우 면 사이의 공간이 각진 것처럼 보입니다. 이것은 얼굴의 법선과 완전히 같은 방향으로 향하고 있기 때문입니다. 그러나 이 방법은 꼭짓점을 공유할 수 없다는 단점이 있습니다.

오른쪽에 있는 방법을 사용하면 빛이 적용되는 방식에 따라 표면 사이의 공간이 약간 둥글게 나타납니다. 꼭짓점이 공유되기 때문에 데이터의 양이 줄어든다는 장점이 있습니다. 단점은 정점의 법선이 면의 방향과 같지 않기 때문에 예를 들어 위에서 직접 빛을 비추어도 윗면은 빛의 영향을 100 % 받지 않는다는 것입니다.

문장으로 설명해도 이해하기 어렵기 때문에, 아래의 그림을 체크해 차이를 확인해 보세요.

面の方向と明るさ面の方向と明るさ
메타세쿼이아라는 모델링 소프트웨어로 표시됩니다

외관이 상당히 다르다는 것을 알 수 있습니다. 샘플에서는 코드가 중복되지 않도록 올바른 방법으로 상자를 만듭니다.

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

/// <summary>
/// 頂点バッファ
/// </summary>
private VertexBuffer vertexBuffer = null;

/// <summary>
/// インデックスバッファ
/// </summary>
private IndexBuffer indexBuffer = null;

/// <summary>
/// インデックスバッファの各頂点番号配列
/// </summary>
private static readonly Int16[] vertexIndices = new Int16[] {
    2, 0, 1, 1, 3, 2, 4, 0, 2, 2, 6, 4, 5, 1, 0, 0, 4, 5,
    7, 3, 1, 1, 5, 7, 6, 2, 3, 3, 7, 6, 4, 6, 7, 7, 5, 4 };

상자는 꼭짓점 버퍼와 인덱스 버퍼를 사용하여 만들어집니다.

창작

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

// エフェクトでライトを有効にする
this.basicEffect.LightingEnabled = true;

// デフォルトのライトの設定を使用する
this.basicEffect.EnableDefaultLighting();

// スペキュラーを無効
this.basicEffect.SpecularColor = Vector3.Zero;

// 2番目と3番目のライトを無効
this.basicEffect.DirectionalLight1.Enabled = false;
this.basicEffect.DirectionalLight2.Enabled = false;

BasicEffect에는 라이트를 설정하는 몇 가지 항목이 있습니다.

먼저 LightingEnabled 속성을 true로 설정하여 광원을 계산하도록 지시합니다.

EnableDefaultLighting 메서드를 호출하면 조명 또는 재질의 색이 자동으로 설정됩니다. 그러나 이 상자에 기본 라이트를 사용하면 너무 밝아서 스페큘러 색상을 비활성화하고 두 번째와 세 번째 라이트를 비활성화했습니다.

// 頂点の数
int vertexCount = 8;

// 頂点バッファ作成
this.vertexBuffer = new VertexBuffer(this.GraphicsDevice,
    typeof(VertexPositionNormalTexture), vertexCount, BufferUsage.None);

// 頂点データを作成する
VertexPositionNormalTexture[] vertives = new VertexPositionNormalTexture[vertexCount];

vertives[0] = new VertexPositionNormalTexture(
    new Vector3(-2.0f, 2.0f, -2.0f),
    Vector3.Normalize(new Vector3(-1.0f, 1.0f, -1.0f)),
    Vector2.Zero);
vertives[1] = new VertexPositionNormalTexture(
    new Vector3(2.0f, 2.0f, -2.0f),
    Vector3.Normalize(new Vector3(1.0f, 1.0f, -1.0f)),
    Vector2.Zero);
vertives[2] = new VertexPositionNormalTexture(
    new Vector3(-2.0f, 2.0f, 2.0f),
    Vector3.Normalize(new Vector3(-1.0f, 1.0f, 1.0f)),
    Vector2.Zero);
vertives[3] = new VertexPositionNormalTexture(
    new Vector3(2.0f, 2.0f, 2.0f),
    Vector3.Normalize(new Vector3(1.0f, 1.0f, 1.0f)),
    Vector2.Zero);
vertives[4] = new VertexPositionNormalTexture(
    new Vector3(-2.0f, -2.0f, -2.0f),
    Vector3.Normalize(new Vector3(-1.0f, -1.0f, -1.0f)),
    Vector2.Zero);
vertives[5] = new VertexPositionNormalTexture(
    new Vector3(2.0f, -2.0f, -2.0f),
    Vector3.Normalize(new Vector3(1.0f, -1.0f, -1.0f)),
    Vector2.Zero);
vertives[6] = new VertexPositionNormalTexture(
    new Vector3(-2.0f, -2.0f, 2.0f),
    Vector3.Normalize(new Vector3(-1.0f, -1.0f, 1.0f)),
    Vector2.Zero);
vertives[7] = new VertexPositionNormalTexture(
    new Vector3(2.0f, -2.0f, 2.0f),
    Vector3.Normalize(new Vector3(1.0f, -1.0f, 1.0f)),
    Vector2.Zero);

// 頂点データを頂点バッファに書き込む
this.vertexBuffer.SetData(vertives);

약간 긴 코드 조각이지만 꼭짓점 데이터를 생성합니다. 이번에 사용한 정점 데이터 구조체는 "position", "normal", "texture coordinates" 데이터가 있는 "VertexPositionNormalTexture"입니다. XNA Framework는 "position" 및 "normal"만 있는 구조를 제공하지 않으므로 텍스처 좌표의 모든 정점에 대해 "Vector2.Zero"가 지정됩니다. (물론 이해하면 자신의 구조를 만들 수 있습니다.)

법선은 이전 그림과 같이 비스듬한 방향을 가리키도록 설정되어 있습니다. 법선은 방향으로만 표현되는 데이터 정의이므로 방향을 지정한 다음 Vector3.Normalize 메서드를 사용하여 정규화합니다.

VertexPositionNormalTexture 생성자

위치와 법선 및 텍스처 좌표에 대한 꼭짓점 데이터가 있는 구조체 "VertexPositionNormalTexture"의 인스턴스를 만듭니다.

위치 벡터3 버텍스 위치(Vertex Position)
보통 벡터3 버텍스 노멀
textureCoordinate (텍스처코리더) 벡터2 정점의 텍스처 좌표

Vector3.Normalize 메서드

지정된 벡터에서 단위 벡터를 만듭니다.

벡터3 정규화할 소스 벡터
반환 값 벡터3 단위 벡터
// インデックスバッファを作成
this.indexBuffer = new IndexBuffer(this.GraphicsDevice,
    IndexElementSize.SixteenBits, 3 * 12, BufferUsage.None);

// 頂点インデックスを書き込む
this.indexBuffer.SetData(vertexIndices);

인덱스 버퍼를 만드는 것도 다르지 않습니다.

그림

// 描画に使用する頂点バッファをセット
this.GraphicsDevice.SetVertexBuffer(this.vertexBuffer);

// インデックスバッファをセット
this.GraphicsDevice.Indices = this.indexBuffer;

// パスの数だけ繰り替えし描画
foreach (EffectPass pass in this.basicEffect.CurrentTechnique.Passes)
{
    // パスの開始
    pass.Apply();

    // ボックスを描画する
    this.GraphicsDevice.DrawIndexedPrimitives(
        PrimitiveType.TriangleList,
        0,
        0,
        8,
        0,
        12
    );
}

정점 정보가 미리 설정되어 있기 때문에 드로잉 코드에 대해 특별한 것은 없습니다.

모든 코드

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

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

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

        /// <summary>
        /// 頂点バッファ
        /// </summary>
        private VertexBuffer vertexBuffer = null;

        /// <summary>
        /// インデックスバッファ
        /// </summary>
        private IndexBuffer indexBuffer = null;

        /// <summary>
        /// インデックスバッファの各頂点番号配列
        /// </summary>
        private static readonly Int16[] vertexIndices = new Int16[] {
            2, 0, 1, 1, 3, 2, 4, 0, 2, 2, 6, 4, 5, 1, 0, 0, 4, 5,
            7, 3, 1, 1, 5, 7, 6, 2, 3, 3, 7, 6, 4, 6, 7, 7, 5, 4 };


        /// <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.LightingEnabled = true;

            // デフォルトのライトの設定を使用する
            this.basicEffect.EnableDefaultLighting();

            // スペキュラーを無効
            this.basicEffect.SpecularColor = Vector3.Zero;

            // 2番目と3番目のライトを無効
            this.basicEffect.DirectionalLight1.Enabled = false;
            this.basicEffect.DirectionalLight2.Enabled = false;


            // ビューマトリックスをあらかじめ設定 ((6, 6, 12) から原点を見る)
            this.basicEffect.View = Matrix.CreateLookAt(
                    new Vector3(6.0f, 6.0f, 12.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
                );

            // 頂点の数
            int vertexCount = 8;

            // 頂点バッファ作成
            this.vertexBuffer = new VertexBuffer(this.GraphicsDevice,
                typeof(VertexPositionNormalTexture), vertexCount, BufferUsage.None);

            // 頂点データを作成する
            VertexPositionNormalTexture[] vertives = new VertexPositionNormalTexture[vertexCount];

            vertives[0] = new VertexPositionNormalTexture(
                new Vector3(-2.0f, 2.0f, -2.0f),
                Vector3.Normalize(new Vector3(-1.0f, 1.0f, -1.0f)),
                Vector2.Zero);
            vertives[1] = new VertexPositionNormalTexture(
                new Vector3(2.0f, 2.0f, -2.0f),
                Vector3.Normalize(new Vector3(1.0f, 1.0f, -1.0f)),
                Vector2.Zero);
            vertives[2] = new VertexPositionNormalTexture(
                new Vector3(-2.0f, 2.0f, 2.0f),
                Vector3.Normalize(new Vector3(-1.0f, 1.0f, 1.0f)),
                Vector2.Zero);
            vertives[3] = new VertexPositionNormalTexture(
                new Vector3(2.0f, 2.0f, 2.0f),
                Vector3.Normalize(new Vector3(1.0f, 1.0f, 1.0f)),
                Vector2.Zero);
            vertives[4] = new VertexPositionNormalTexture(
                new Vector3(-2.0f, -2.0f, -2.0f),
                Vector3.Normalize(new Vector3(-1.0f, -1.0f, -1.0f)),
                Vector2.Zero);
            vertives[5] = new VertexPositionNormalTexture(
                new Vector3(2.0f, -2.0f, -2.0f),
                Vector3.Normalize(new Vector3(1.0f, -1.0f, -1.0f)),
                Vector2.Zero);
            vertives[6] = new VertexPositionNormalTexture(
                new Vector3(-2.0f, -2.0f, 2.0f),
                Vector3.Normalize(new Vector3(-1.0f, -1.0f, 1.0f)),
                Vector2.Zero);
            vertives[7] = new VertexPositionNormalTexture(
                new Vector3(2.0f, -2.0f, 2.0f),
                Vector3.Normalize(new Vector3(1.0f, -1.0f, 1.0f)),
                Vector2.Zero);

            // 頂点データを頂点バッファに書き込む
            this.vertexBuffer.SetData(vertives);

            // インデックスバッファを作成
            this.indexBuffer = new IndexBuffer(this.GraphicsDevice,
                IndexElementSize.SixteenBits, 3 * 12, BufferUsage.None);

            // 頂点インデックスを書き込む
            this.indexBuffer.SetData(vertexIndices);
        }

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

            // 描画に使用する頂点バッファをセット
            this.GraphicsDevice.SetVertexBuffer(this.vertexBuffer);

            // インデックスバッファをセット
            this.GraphicsDevice.Indices = this.indexBuffer;

            // パスの数だけ繰り替えし描画
            foreach (EffectPass pass in this.basicEffect.CurrentTechnique.Passes)
            {
                // パスの開始
                pass.Apply();

                // ボックスを描画する
                this.GraphicsDevice.DrawIndexedPrimitives(
                    PrimitiveType.TriangleList,
                    0,
                    0,
                    8,
                    0,
                    12
                );
            }

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