「MonoGameでピクセルシェーダーを使ってテクスチャを貼る」を編集中

「[[MonoGameでプログラマブルシェーダーを使う]]」の実践編として以下をやってみる。[[Mac]]でやっているのがミソ。

* [[MacOS]]上の[[Visual Studio for Mac]]と[[MonoGame]]を使い
* [[バーテックスシェーダー]]で[[ジオメトリ変換]]してみる
* [[ピクセルシェーダー]]で[[テクスチャマッピング]]してみる。

== 準備 ==
* [[NuGet]]で「[[InfinitespaceStudios.Pipeline]]」を入れる。

== HLSLを書く ==
[[iOS]]や[[Android]]向けの場合は強制的に「OPENGL」シンボルが定義されており、[[HLSL]]の[[シェーダーモデル]]は3.0固定にしておけ。<syntaxhighlight lang="text">
// file: effect1.fx

// ----------------------------------------------------------------
// MonoGame PipelineでOpenGL環境の場合は「OPENGL」シンボルが立っている。
// 以下は定型文だと思ってコピペしとけ。
#if OPENGL
	#define SV_POSITION POSITION
	#define VS_SHADERMODEL vs_3_0
	#define PS_SHADERMODEL ps_3_0
#else
	#define VS_SHADERMODEL vs_4_0_level_9_1
	#define PS_SHADERMODEL ps_4_0_level_9_1
#endif

// ----------------------------------------------------------------
// 呼び出し側から設定されるグローバル変数（シェーダー内では実質定数）

// カメラ座標
float4x4 myView;
float4x4 myProjection;

// テクスチャ
texture  myTexture;

// ----------------------------------------------------------------
// tex2D関数で使うテクスチャサンプラー
// tex2D関数はサンプラーと座標を入力すると、テクスチャからその位置の
// テクセルを抜き出してCOLORが返ってくる。
sampler mySampler = sampler_state 
{
	Texture = <myTexture>;
};

// ----------------------------------------------------------------
// 入出力用の構造体
struct VertexShaderInput
{
	float4 Position : POSITION0;
	float4 TextureCoordinate : TEXCOORD;
};

struct VertexShaderOutput
{
	float4 Position : SV_POSITION;
	float4 TextureCoordinate : TEXCOORD;
};

// ----------------------------------------------------------------
// バーテックスシェーダー
VertexShaderOutput MainVS(in VertexShaderInput input)
{
	// 出力用の頂点
	VertexShaderOutput output = (VertexShaderOutput)0;

    // 頂点をカメラから見た座標に変換
	output.Position = mul(input.Position, mul(myView, myProjection));
	
	// テクスチャ座標をコピー
	output.TextureCoordinate = input.TextureCoordinate;

	return output;
}

// ----------------------------------------------------------------
// ピクセルシェーダー
float4 MainPS(VertexShaderOutput input) : COLOR
{
	// テクスチャサンプラーからピクセルに対応する色を抜き出す
	return tex2D( mySampler, input.TextureCoordinate);
}

// ----------------------------------------------------------------
// テクニック、いわゆるエントリーポイント
technique MyTechnique
{
	pass MyPass
	{
		VertexShader = compile VS_SHADERMODEL MainVS();
		PixelShader  = compile PS_SHADERMODEL MainPS();
	}
};
</syntaxhighlight>

== HLSLをコンパイルする ==
[[macOS]]上の[[Visual Studio for Mac]]では[[HLSL]]をコンパイルするには準備の際にいれた「[[InfinitespaceStudios.Pipeline]]」を用いる。

この際にProjectツリーの「Content」を開き「Platform」の設定が間違っていないことを確認すること。[[iOS]]や[[Android]]向けなのに「[[Windows]]」のままコンパイルすると[[OpenGL]]ではなく[[DirectX]]向けのモノができあがり残念なことになる。なお、[[iOS]]と[[Android]]を間違えてもどっちもOpenGL系なので動く。

== コンテンツファイルを準備 ==
このサンプルで使っているコンテンツファイルは以下のとおり。
* texture1.xnb （texture1.pngをコンパイルしたもの。画像は自分で用意してください）
* effect1.xnb （上記のHLSLをコンパイルしたもの）

== C#で呼び出してみる ==
即席[[コード]]なので[[バーテックスバッファー]]と[[インデックスバッファー]]は使用せずにDrawUserPrimitivesメソッドで描画を行っている。

また、「[[MonoGameのカメラを作る]]」で作ったカメラを使っている。Cameraクラスは[[MonoGame]]標準物ではないので注意。<syntaxhighlight lang="csharp">
    using System;
    using System.Collections.Generic;
    using System.Text;
    using Microsoft.Xna.Framework;
    using Microsoft.Xna.Framework.Graphics;
    using Microsoft.Xna.Framework.Input;

    public class Game1 : Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;

        Camera camera;
        Effect effect;
        Texture texture;

        VertexPositionTexture[] vertices = {
            new VertexPositionTexture(new Vector3( 0, 1, 0), new Vector2(0.5f, 0.0f)),
            new VertexPositionTexture(new Vector3( 1, 0, 0), new Vector2(1.0f, 1.0f)),
            new VertexPositionTexture(new Vector3(-1, 0, 0), new Vector2(0.0f, 1.0f))
        };

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        protected override void Initialize()
        {
            IsMouseVisible = true;
            base.Initialize();
        }

        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);

            // 即席カメラ
            camera = new Camera(this);
            camera.Position = new Vector3(0, -2, 2);
            camera.Target = new Vector3(0, 0, 0);

            // テクスチャ読み込み
            texture = Content.Load<Texture2D>("texture1");

            // エフェクト読み込み
            effect = Content.Load<Effect>("effect1");
        }

        protected override void Update(GameTime gameTime)
        {
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
                Exit();

            // カメラを回転させる
            camera.Angle += 1f;

            base.Update(gameTime);
        }

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

            // シェーダーのグローバル変数に値をセットする
            effect.Parameters["myView"].SetValue(camera.View);
            effect.Parameters["myProjection"].SetValue(camera.Projection);
            effect.Parameters["myTexture"].SetValue(texture);

            foreach (EffectPass pass in effect.CurrentTechnique.Passes)
            {
                // パス適用開始（シェーダー有効化）
                pass.Apply();

                // 描画
                graphics.GraphicsDevice.DrawUserPrimitives(
                    primitiveType: PrimitiveType.TriangleList,
                    vertexData: vertices,
                    vertexOffset: 0,
                    primitiveCount: vertices.Length / 3);
            }

            base.Draw(gameTime);
        }
    }
</syntaxhighlight>こんな感じ。[[Mac]]でも[[HLSL]]が使えるとか感動的だね。
[[ファイル:MonoGameでピクセルシェーダーを使ってテクスチャを貼ってみる.png|なし|サムネイル|640x640ピクセル]]

== 関連項目 ==
* [[MonoGameでプログラマブルシェーダーを使う]]
* [[MonoGameでハードウェアインスタンシングしてみる]]
* [[MonoGameの3Dモデルを管理描画するクラスを作る]]
* [[MonoGameでSkiaSharpを使う]]
* [[シェーダー]]
* [[プログラマブルシェーダー]]
* [[シェーダーモデル]]
* [[テクスチャマッピング]]
* [[法線マッピング]]
* [[スリープソート]]

[[category: MonoGame]]
[[category: HLSL]]