スキャンライン(Scanline) with Greyscale

 effect   scanline   greyscale 

YoYo のマーケットプレイスで配布されていたシェーダ・サンプルを改造したもの（ shader_basics.gmx ）

スキャンライン（ 走査線 ） の効果をグレースケールと合体させた。簡易版だがブラウン管表示に似たエフェクト効果を得られる。

イベントを一つのオブジェクトへまとめ、

上記二つのイベントへ収めたコードは使い回しが容易となるようシンプルにを心がけた。

    説明：左がシェーダエフェクト、右は通常のパススルーで描画。シェーダエフェクト側がやや赤みを帯びているのは ROOM の背景色を赤に設定したため

SH_Scanline_Greyscale sample screenshot

比較：Room の背景色を黒に変えて出力したサンプル。fragment シェーダのアルファ値設定を 1.0 にすれば透過しなくなります。このサンプルでは初期値が 0.6 に設定されています。

SH_Scanline_Greyscale sample screenshot rev2

要 WebGL、Google Chrome／FireFox 等で動作を確認。

HTML5（ WebGL ） と Windows PC で描画結果が異なる場合があります。

シェーダー名：SH_Scanline_Greyscale

参考動作：Shader-Scanline with Greyscale

OpenGL-ES_50px_May16 WebGL_50px_June16

Vertex Shader

 
attribute vec3 in_Position;
attribute vec2 in_TextureCoord;

varying vec2   v_texcoord;

void main()
{
    gl_Position = gm_Matrices[MATRIX_WORLD_VIEW_PROJECTION] * vec4(in_Position, 1.0);
    v_texcoord  = in_TextureCoord;
}

※ 今回、頂点カラーは無視しています、必要な場合は追加

Fragment Shader

 
varying vec2 v_texcoord;

uniform vec2 u_ViewResXY;

const vec3 val = vec3(0.21, 0.71, 0.07);// HTDV 係数の近似値
const vec4 blk = vec4(0.0 , 0.0 , 0.0 , 0.6);// 透過させない場合、0.6 は 1.0 に変更

void main()
{
    float half_y = ((v_texcoord.y * u_ViewResXY.y) * 0.5);
    float delta  = (floor(half_y) - half_y);
    vec4  colour = blk;
    
    if ((delta * delta) > 0.1) 
    {
              colour = texture2D(gm_BaseTexture, v_texcoord);
        float gs     = dot(colour.rgb, val);
              colour = vec4(mix(colour.rgb, vec3(gs), 1.0), colour.a);
    };
    
    gl_FragColor = colour;
}

イベント処理

簡潔なイベントを作成。

Create Event

///Init
var a,b;
a = SH_Scanline_Greyscale;// Shader Name

if !shader_is_compiled(a) 
{
    b = "ur hardware ain't support shader - SH_Scanline_Greyscale";
    show_message(b);
}
else
{
    /*     instance variabels for Uniform        */
    /*     Shader Scanline plus Greyscale        */
    b           = "u_ViewResXY";// set variable name for GPU shader.
    U_ViewResXY = shader_get_uniform(a, b);// Get the handle
};

sprite_index = sample_sprite;// Set a sprite

Draw Event

//Draw Event
var a,b,c,d;
a = SH_Scanline_Greyscale;// Shader ID
b = U_ViewResXY;  // instance variable
c = sprite_width;
d = sprite_height;

shader_set(a);
shader_set_uniform_f(b, c, d);
draw_self();
shader_reset();




次へ

前へ