Live Music Coder M^2 OSC with MAX/MSP

長年愛用しているソフトで、パッチ方式のビジュアル言語として歴史があります。vvvvも含めまた掘り下げたいです。

さてここではGLSLの最初でも取り上げた、ブラーです。WebGLのときも、シェーダプログラムが簡単に走らせると思っていましたが、vvvvはそれ以上でした。ノード(一つ一つの部品。HLSLノードはここの場合NeiPixels。)を右クリックするとソースが変更可能となります。保存するとすぐに反映されます。
IN/OUTを結線して、プログラムします。
HLSLの処理の入力には、素材の画像ファイル、ピクセルのサイズをLFOで揺らしてアニメーションしています。(縦に伸び縮みするようにプレる)こういうことが簡単にできます。

//@author: vvvv group
//@help: This is a very basic template. Use it to start writing your own effects. If you want effects with lighting start from one of the GouraudXXXX or PhongXXXX effects
//@tags: hlsl
//@credits:

// --------------------------------------------------------------------------------------------------
// PARAMETERS:
// --------------------------------------------------------------------------------------------------

//transforms
/***
float4x4 tW: WORLD;        //the models world matrix
float4x4 tV: VIEW;         //view matrix as set via Renderer (EX9)
float4x4 tP: PROJECTION;
float4x4 tWVP: WORLDVIEWPROJECTION;
***/

//texture
texture Tex <string uiname="Texture";>;
sampler Samp = sampler_state    //sampler for doing the texture-lookup
{
    Texture   = (Tex);          //apply a texture to the sampler
    MipFilter = LINEAR;         //sampler states
    MinFilter = LINEAR;
    MagFilter = LINEAR;
};

//texture transformation marked with semantic TEXTUREMATRIX to achieve symmetric transformations

///float4x4 tTex: TEXTUREMATRIX <string uiname="Texture Transform";>;

//the data structure: "vertexshader to pixelshader"
//used as output data with the VS function
//and as input data with the PS function
struct vs2ps
{
    float4 Pos  : POSITION;
    float2 TexCd : TEXCOORD0;
};

// --------------------------------------------------------------------------------------------------
// VERTEXSHADERS
// --------------------------------------------------------------------------------------------------

/***
vs2ps VS(
    float4 PosO  : POSITION,
    float4 TexCd : TEXCOORD0)
{
    //declare output struct
    vs2ps Out;

    //transform position
    Out.Pos = mul(PosO, tWVP);
    
    //transform texturecoordinates
    Out.TexCd = mul(TexCd, tTex);

    return Out;
}
***/

// --------------------------------------------------------------------------------------------------
// PIXELSHADERS:
// --------------------------------------------------------------------------------------------------

///add
float2 PixelSize;
///

float4 PS(vs2ps In): COLOR
{
    /***
	float4 col = tex2D(Samp, In.TexCd);
    return col;
	***/
	
	/// add
    float4 sum = 0;
    int weightSum = 0;
    //the weights of the neighbouring pixels
    int weights[15] = {1, 2, 3, 4, 5, 6, 7, 8, 7, 6, 5, 4, 3, 2, 1};
    //we are taking 15 samples
    for (int i = 0; i < 15; i++)
    {
        //7 upwards, self and 7 downwards
        float2 cord = float2(In.TexCd.x, In.TexCd.y + PixelSize.y * (i-7));
        //the samples are weighed according to their relation to the current pixel
        sum += tex2D(Samp, cord) * weights[i];
        //while going through the loop we are summing up the weights
        weightSum += weights[i];
    }
    sum /= weightSum;
    return float4(sum.rgb, 1);
	
	///
}

// --------------------------------------------------------------------------------------------------
// TECHNIQUES:
// --------------------------------------------------------------------------------------------------

technique TSimpleShader
{
    pass P0
    {
        //Wrap0 = U;  // useful when mesh is round like a sphere
        /// VertexShader = compile vs_1_1 VS();
    	VertexShader = null;
        PixelShader  = compile ps_2_0 PS();
    }
}

/***
technique TFixedFunction
{
    pass P0
    {
        //transforms
        WorldTransform[0]   = (tW);
        ViewTransform       = (tV);
        ProjectionTransform = (tP);

        //texturing
        Sampler[0] = (Samp);
        TextureTransform[0] = (tTex);
        TexCoordIndex[0] = 0;
        TextureTransformFlags[0] = COUNT2;
        //Wrap0 = U;  // useful when mesh is round like a sphere
        
        Lighting       = FALSE;

        //shaders
        VertexShader = NULL;
        PixelShader  = NULL;
    }
}
***/

ソースは自動生成されるテンプレートファイルをベースに、変更部分を///または***　のコメントで記述しています。バーテックスシェーダは使用せず、ピクセルシェーダは、GLSLのフラグメントシェーダに相当します。

参考: https://vvvv.org/documentation/tutorial-effects-neighbouring-pixels