Altseed

シェーダー2D (Shader2D)

概要

ポストエフェクトやスプライトの描画をユーザーが実装するために使用するシェーダークラスです。 AltseedはHLSL(DirectX)やGLSL(OpenGL)によりシェーダーを記述して画像に対する効果を記述できます。

HLSLのバージョンは4、GLSLのバージョンは3.3になります。

このクラスのインスタンスはグラフィッククラスのCreateShader2Dにシェーダーのソースコードを渡すことによって生成できます。 このクラス単体では使用せず、マテリアル2D(Material2D)と組み合わせて使用します。 マテリアル2Dにシェーダーを適用しすることで、マテリアル2Dを経由して画像を加工することができます。

シェーダー2Dは自由に書けるわけではなく、固定部分が存在します。

頂点シェーダーは記述できず、ピクセルシェーダー（フラグメントシェーダー）のみを記述します。

• HLSLの場合

Texture2D g_texture : register( t0 );
SamplerState g_sampler : register( s0 );

struct PS_Input
{
    float4 SV_Position : SV_POSITION;
    float4 Position : POSITION;
    float2 UV : UV;
    float4 Color : COLOR;
};

float4 main( const PS_Input Input ) : SV_Target
{
    // 現在の画素の値を取得し、何も変更しないまま返す関数になっています。
    float4 color = g_texture.Sample(g_sampler, Input.UV);
    return color;
}

• GLSLの場合

uniform sampler2D   g_texture;

in vec4 inPosition;
in vec2 inUV;
in vec4 inColor;

out vec4 outOutput;

void main()
{
    // 現在の画素の値を取得し、何も変更しないまま返す関数になっています。
    vec4 color = texture(g_texture, inUV.xy);
    outOutput = color;
}

固定部分は頂点レイアウト、main関数、出力先になります。

頂点レイアウトは、座標、UV、頂点カラー、となります。

座標は、左上が(-1,1)、右下が(1,-1)となります。

UVはHLSLの場合、左上が(0,0)、GLSLの場合、左上が(0,1)になります。

関数だけでなく、変数も渡すことができます。変数はマテリアル2D経由で指定します。 HLSLの場合、レジスタを記述する必要はありません。

主なメソッド

なし

主なプロパティ

なし

主なイベント

なし

使用方法

階調を反転させるサンプルです。

C++

#include <Altseed.h>

// 階調を反転するポストエフェクトのサンプル。

/**
    @brief  DirectX向けシェーダー(HLSLで記述)
*/
static const char* shader2d_dx_ps = R"(
Texture2D g_texture : register( t0 );
SamplerState g_sampler : register( s0 );

struct PS_Input
{
    float4 SV_Position : SV_POSITION;
    float4 Position : POSITION;
    float2 UV : UV;
    float4 Color : COLOR;
};

float4 main( const PS_Input Input ) : SV_Target
{
    float4 color = g_texture.Sample(g_sampler, Input.UV);
    return float4( 1.0 - color.x, 1.0 - color.y, 1.0 - color.z, color.w);
}

)";

/**
    @brief  OpenGL向けシェーダー(GLSLで記述)
*/
static const char* shader2d_gl_ps = R"(
uniform sampler2D   g_texture;

in vec4 inPosition;
in vec2 inUV;
in vec4 inColor;

out vec4 outOutput;

void main()
{
    vec4 color = texture(g_texture, inUV.xy);
    outOutput = vec4( 1.0 - color.x, 1.0 - color.y, 1.0 - color.z, color.w);
}

)";

/**
    @brief  階調を反転させるポストエフェクト
*/
class InvertPostEffect : public asd::PostEffect
{
public:
    std::shared_ptr<asd::Shader2D>      shader;
    std::shared_ptr<asd::Material2D>    material2d;

public:
    InvertPostEffect()
    {
        // シェーダーをHLSL/GLSLから生成する。
        if (asd::Engine::GetGraphics()->GetGraphicsDeviceType() == asd::GraphicsDeviceType::DirectX11)
        {
            shader = asd::Engine::GetGraphics()->CreateShader2D(
                asd::ToAString(shader2d_dx_ps).c_str()
                );
        }
        else if (asd::Engine::GetGraphics()->GetGraphicsDeviceType() == asd::GraphicsDeviceType::OpenGL)
        {
            shader = asd::Engine::GetGraphics()->CreateShader2D(
                asd::ToAString(shader2d_gl_ps).c_str()
                );
        }

        material2d = asd::Engine::GetGraphics()->CreateMaterial2D(shader);
    }

protected:
    void OnDraw(std::shared_ptr<asd::RenderTexture2D> dst, std::shared_ptr<asd::RenderTexture2D> src) override
    {
        // マテリアルを経由してシェーダー内のg_texture変数に画面の画像(src)を入力する。
        material2d->SetTexture2D(asd::ToAString("g_texture").c_str(), src);

        // 出力画像(dst)に指定したマテリアルで描画する。
        DrawOnTexture2DWithMaterial(dst, material2d);
    }
};

int main()
{
    // Altseedを初期化する
    asd::Engine::Initialize(asd::ToAString("CustomPostEffect_Invert").c_str(), 640, 480, asd::EngineOption());

    // シーン、レイヤー、画像を表示するオブジェクトを生成する。
    auto scene = std::make_shared<asd::Scene>();
    auto layer = std::make_shared<asd::Layer2D>();
    auto obj = std::make_shared<asd::TextureObject2D>();
    obj->SetTexture(asd::Engine::GetGraphics()->CreateTexture2D(asd::ToAString("Data/Texture/Picture1.png").c_str()));

    // シーンを変更し、そのシーンにレイヤーを追加し、そのレイヤーにオブジェクトを追加する。
    asd::Engine::ChangeScene(scene);
    scene->AddLayer(layer);
    layer->AddObject(obj);

    // レイヤーにポストエフェクトを適用する。
    layer->AddPostEffect(std::make_shared<InvertPostEffect>());

    while (asd::Engine::DoEvents())
    {
        asd::Engine::Update();
    }

    asd::Engine::Terminate();
}

C#

/// <summary>
/// 階調を反転させるポストエフェクト
/// </summary>
class CustomPostEffect_InvertPostEffect : asd.PostEffect
{
    /// <summary>
    /// DirectX向けシェーダー(HLSLで記述)
    /// </summary>
    private static string shader2d_dx_ps = @"
Texture2D g_texture : register( t0 );
SamplerState g_sampler : register( s0 );

struct PS_Input
{
    float4 SV_Position : SV_POSITION;
    float4 Position : POSITION;
    float2 UV : UV;
    float4 Color : COLOR;
};

float4 main( const PS_Input Input ) : SV_Target
{
    float4 color = g_texture.Sample(g_sampler, Input.UV);
    return float4( 1.0 - color.x, 1.0 - color.y, 1.0 - color.z, color.w);
}

";

    /// <summary>
    /// OpenGL向けシェーダー(GLSLで記述)
    /// </summary>
    private static string shader2d_gl_ps = @"
uniform sampler2D g_texture;

in vec4 inPosition;
in vec2 inUV;
in vec4 inColor;

out vec4 outOutput;

void main()
{
    vec4 color = texture(g_texture, inUV.xy);
    outOutput = vec4( 1.0 - color.x, 1.0 - color.y, 1.0 - color.z, color.w);
}

";

    asd.Shader2D shader;
    asd.Material2D material2d;

    public CustomPostEffect_InvertPostEffect()
    {
        // シェーダーをHLSL/GLSLから生成する。
        if(asd.Engine.Graphics.GraphicsDeviceType == asd.GraphicsDeviceType.DirectX11)
        {
            shader = asd.Engine.Graphics.CreateShader2D(shader2d_dx_ps);
        }
        else if(asd.Engine.Graphics.GraphicsDeviceType == asd.GraphicsDeviceType.OpenGL)
        {
            shader = asd.Engine.Graphics.CreateShader2D(shader2d_gl_ps);
        }

        // シェーダーからマテリアルを生成する。
        material2d = asd.Engine.Graphics.CreateMaterial2D(shader);
    }

    protected override void OnDraw(asd.RenderTexture2D dst, asd.RenderTexture2D src)
    {
        // マテリアルを経由してシェーダー内のg_texture変数に画面の画像(src)を入力する。
        material2d.SetTexture2D("g_texture", src);

        // 出力画像(dst)に指定したマテリアルで描画する。
        DrawOnTexture2DWithMaterial(dst, material2d);
    }
}

/// <summary>
/// 階調を反転するポストエフェクトのサンプル。
/// </summary>
class CustomPostEffect_Invert
{
    [System.STAThread]
    static void Main(string[] args)
    {
        // Altseedを初期化する。
        asd.Engine.Initialize("CustomPostEffect_Invert", 640, 480, new asd.EngineOption());

        // シーン、レイヤー、画像を表示するオブジェクトを生成する。
        var scene = new asd.Scene();
        var layer = new asd.Layer2D();
        var obj = new asd.TextureObject2D();
        obj.Texture = asd.Engine.Graphics.CreateTexture2D("Data/Texture/Picture1.png");

        // シーンを変更し、そのシーンにレイヤーを追加し、そのレイヤーにオブジェクトを追加する。
        asd.Engine.ChangeScene(scene);
        scene.AddLayer(layer);
        layer.AddObject(obj);

        // レイヤーにポストエフェクトを適用する。
        layer.AddPostEffect(new CustomPostEffect_InvertPostEffect());

        while (asd.Engine.DoEvents())
        {
            asd.Engine.Update();
        }

        asd.Engine.Terminate();
    }

    public string Description
    {
        get { return "画面の色の階調を反転するポストエフェクトのサンプル。"; }
    }

    public string Title
    {
        get { return "反転ポストエフェクト"; }
    }

    public string ClassName
    {
        get { return "CustomPostEffect_Invert"; }
    }
}

Java

/**
 * 階調を反転するポストエフェクトのサンプル。
*/
class CustomPostEffect_Invert 
{
    public java.lang.String getDescription() {
        return "画面の色の階調を反転するポストエフェクトのサンプル。";
    }
    public java.lang.String getTitle() {
        return "反転ポストエフェクト";
    }
    public java.lang.String getClassName() {
        return "CustomPostEffect_Invert";
    }
    public static void main(String args[])
    {
        // Altseedを初期化する。
        asd.Engine.Initialize("CustomPostEffect_Invert", 640, 480, new asd.EngineOption());

        // シーン、レイヤー、画像を表示するオブジェクトを生成する。
        asd.Scene scene = new asd.Scene();
        asd.Layer2D layer = new asd.Layer2D();
        asd.TextureObject2D obj = new asd.TextureObject2D();
        obj.setTexture(asd.Engine.getGraphics().CreateTexture2D("Data/Texture/Picture1.png"));

        // シーンを変更し、そのシーンにレイヤーを追加し、そのレイヤーにオブジェクトを追加する。
        asd.Engine.ChangeScene(scene);
        scene.AddLayer(layer);
        layer.AddObject(obj);

        // レイヤーにポストエフェクトを適用する。
        layer.AddPostEffect(new CustomPostEffect_InvertPostEffect());

        while(asd.Engine.DoEvents())
        {
            asd.Engine.Update();
        }


        asd.Engine.Terminate();
    }
}